Many modern JavaScript frontend frameworks are complemented by a standalone Command Line Interface (CLI) program that assists with setting up a suitable development environment. Since many developers who work with Stream also use one or more of these frameworks, we like to stay up to date. We're also happy to pass on what we’ve learned.
This post offers both rookie and veteran developers a breakdown and comparison of the CLI programs available for Angular, React and Vue. The aim is to help new developers understand the benefits and tradeoffs associated with using a CLI tool as opposed to setting up the associated tooling from scratch. Experienced developers will appreciate a quick, yet thorough and independent comparison to refer to. This isn’t a benchmark and there isn’t a winner announced; as with most tools, it is a case of “horses for courses”.
To keep the advice practical, we’ll compare listed features and put the CLI programs to use by creating a simple demo application. If you’re looking to follow on and try the demo applications, all you need is an understanding of how to use npm or yarn.
Background
Let's face it, developing Single Page Applications (SPAs) with modern JavaScript frameworks is a complex activity. Beyond the obvious learning curve associated with a given framework, there is almost always a need for additional tooling.
A typical frontend JavaScript development environment might include a task runner or bundler (e.g. gulp, Browserify or Webpack), live (or hot) code reload, code linting and automated unit testing. The point of all these tools is to help developers and teams write and deploy quality/ well-tested code in an efficient manner.
CLI programs have emerged as a popular way to initiate projects with a rich set of development tooling. While the use of these CLIs is completely optional, they provide good insight into popular tooling within the developer communities that closely surrounds each framework. They can also save a considerable amount of time in both setting up and with ongoing development.
Introducing the challenge
The challenge for each tool comes in two parts:
- First, we want to look at the CLI's features and become familiar with the specific tools that are included.
- Second, we want to see how well the CLI can serve as the foundation for a real-world project. This is helpful for our general understanding of the JavaScript ecosystem and will also enable us to establish whether the tool is suitable for use in the real world.
This implies that our CLIs should deliver, or allow us to quickly add and establish, the basic yet essential aspects of a frontend SPA:
- SPA basics: creating components and running the development server
- Visual design: integrating a CSS framework
- Integrating with HTTP services: retrieve backend or third-party data
The Contestants
First, let's take a brief look at our contestants and how they compare in terms of their approach and the technologies they bring together.
Angular-cli
The Angular CLI is a tool to initialize, develop, scaffold and maintain Angular applications.
We reviewed v1.3.2 and found the following:
- Build workflow/bundling paradigm: Zero config; eject to webpack
- Commands to support ongoing development: Yes; ‘ng generate’ will emit boilerplate code for new components, services, directives etc.
- Default language and version: TypeScript 2.3.3
- Typing: Built-in to TypeScript
- Code linting: tslint
- Live linting: Not supported ('will not implement')
- Testing: Jasmine + Protractor
- Live unit-testing: Karma
- Code coverage: Via a switch to enable the built-in Istanbul code-coverage tool
Create-react-app
Create React apps with no build configuration.
We reviewed v1.4.0 and found the following:
- Build workflow/bundling paradigm: Zero config; eject to webpack
- Commands to support ongoing development: No; after project setup new components are added manually
- Default language and version: JavaScript with selected extras including some ES6 extensions and Babel polyfills
- Typing: Provides instructions to add Flow
- Code linting: ESLint
- Live linting: Yes; errors emitted from development server
- Testing: Jest
- Live unit-testing: Yes
- Code coverage: Yes, via Jest
Vue CLI
Simple CLI for scaffolding Vue.js projects
We reviewed the webpack template v2.8.2 and found the following:
- Build workflow/bundling paradigm: Various via templates; official templates for Webpack, Browserify are provided. Other community provided templates also exist
- Commands to support ongoing development: No; after project setup new components are added manually
- Default language and version: JavaScript ES6 / ES2015; also supported in templates
- Code linting: ESLint (optional on setup)
- Live linting: Not configured by default
- Testing: Mocha, Karma, Nightwatch (optional on setup)
- Live unit-testing: Yes
- Code coverage: Istanbul enabled by default
Project comparison
To compare the CLIs, we went through the following steps:
- Installed the CLI
- Created a project using the relevant commands and tried the development server
- Added SASS support and the Foundation for Sites CSS Framework
- Integrated the stream-js API client to demonstrate how to interact with a third-party API
You can go ahead and try those projects out yourself. Simply fork the repo and you’ll be on par with us.
Along the way, we discovered a few interesting points to note about these CLI.
The biggest win, especially for those new to these frontend frameworks, is the chance to side-step many decisions and quickly get started with a set of community trusted tools. In exchange for a few hours effort it takes to learn the CLI commands and some further reading about the associated tools, it’s fairly easy to get into the real work of writing production quality code.
Experienced developers will quickly realize that each CLI is quite similar in terms of features and the types of tools they integrate. Digging deeper is worthwhile as there are insights into current best practices and trends in the ecosystems surrounding the various frontend frameworks.
Everybody wins and the benefits are often amplified when an entire team adopts a CLI. There’s an increased chance that projects will start with positive habits of testing and linting the code base. Over time, as new team members join and bring past experience using the same CLI and associated tooling, onboarding efforts are reduced.
Of course, there are some downsides. In particular, there is potential for challenges and confusion as soon as third-party project dependencies or other development environment tooling is needed. Most of the time this isn’t the fault of the CLI but simply the complexity inherent in Webpack based development environments (which each of the CLIs use behind the scenes) and the various other third-party tools (e.g. Babel and Karma) that are included.
Our best advice is to try and keep things simple and expand your knowledge and understanding with incrementally more complex additions.
Angular CLI
Angular CLI is unique and might be considered the most “feature rich” as it goes beyond simply creating projects and provides time-saving commands that generate much of the boilerplate when adding new components to a project.
The CLI is intended to be installed globally and locally. Version inconsistency between the global and local versions isn’t generally a problem but can be somewhat confusing/annoying if you’re switching between and working on several projects.
The ‘angular-cli’ package name changed when the project went from beta to its first stable release. If your machine has an older beta version installed, the specific upgrade steps are a little tedious.
It’s fairly common to use subdirectories for grouping Components, Services, and other Angular component types. The sub-folders can be included when running the \npm generate\ command but it’s quite annoying to clean up when you inevitably forget. It would be neater if the CLI prompted for this and/or the desired subdirectories could be configured.
Check the Stream-Example-Angular-cli project on Github.
Create React App
This CLI tool definitely delivers on the “no config” promise. The generated project configuration files are exceptionally lean. This is great for developers who are not fully comfortable with the many long configuration files, often included in a project that involves Node, Webpack, Babel, Testing and Linting tools.
The structured approach to environment configuration files, with support for shared (committed) and personal (.gitignore’d) preferences and secrets, is a highlight as it’s very well thought out. It was somewhat disappointing that it was immediately necessary to “eject” from the simplified create-react-app config, not for development directly, but to get the unit test suite to run properly and pass with Foundation. Admittedly this is due to sub-optimal packaging on behalf of the Foundation project but it’s still a point of friction with the CLI.
Check the Stream-Example-Create-React-App project on Github.
Vue CLI
As with pretty much everything in the Vue ecosystem, the CLI is super simple and straight-forward to work with. The templated approach and the option to choose between Browserify and Webpack is unique to Vue’s CLI and is certainly helping with the wide and rapid adoption of the Vue framework.
Another unique aspect of Vue is the question-and-answer format for gathering information to initiate the project. Given both the Angular and React CLI programs are able to do their work by receiving the project name as a command line parameter, it was curious that Vue asks ~9 questions.
Check the Stream-Example-Create-Vue-Cli project on Github.
Conclusions
After reviewing the major features and putting each of the CLIs to use in a demo app, it’s clear that each offers valuable, long-term time-savings. This is likely to be the case for both new developers and veterans alike.
The biggest win for new developers is access to a cohesive development environment with very little effort.
For experienced developers, gaining some familiarity and periodically checking in on the status of the CLI projects offers some great insights. What’s nice is that these projects offer a quick way to learn about current best practices, trends and developer preferences. It’s also great to get a feel for the overall state of the ecosystems surrounding each of the frontend frameworks.
For now, that's all we got. If you're interested in Stream, check out our JavaScript docs and be sure to try our 5-minute online tutorial.