Director of Developer Marketing @ GetStream.io
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.
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.
The challenge for each tool comes in two parts:
This implies that our CLIs should deliver, or allow us to quickly add and establish, the basic yet essential aspects of a frontend SPA:
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.
The Angular CLI is a tool to initialize, develop, scaffold and maintain Angular applications.
We reviewed v1.3.2 and found the following:
Create React apps with no build configuration.
We reviewed v1.4.0 and found the following:
Simple CLI for scaffolding Vue.js projects
We reviewed the webpack template v2.8.2 and found the following:
To compare the CLIs, we went through the following steps:
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 realise 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 educed.
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 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 to group 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.
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.
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.
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.
Create your free account to unlock your custom reading experience.