JavaScript Frontend Framework CLI Showdown

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 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. Stream 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 or . npm 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. , or ), live (or ) code reload, code 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. gulp Browserify Webpack hot linting 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 and found the following: v1.3.2 Zero config; eject to webpack Build workflow / bundling paradigm: Yes; ‘ng generate’ will emit boilerplate code for new components, services, directives etc. Commands to support ongoing development: TypeScript 2.3.3 Default language and version: Built-in to TypeScript Typing: Code linting: tslint Not supported ( ) Live linting: ‘will not implement’ + Testing: Jasmine Protractor Live unit-testing: Karma Via a switch to enable the built-in code-coverage tool Code coverage: Istanbul Create-react-app Create React apps with no build configuration. We reviewed and found the following: v1.4.0 Zero config; eject to webpack Build workflow / bundling paradigm: No; after project setup new components are added manually Commands to support ongoing development: JavaScript with including some ES6 extensions and polyfills Default language and version: selected extras Babel Provides instructions to add Typing: Flow Code linting: ESLint Yes; errors emitted from development server Live linting: Testing: Jest Yes Live unit-testing: Yes, via Jest Code coverage: Vue CLI Simple CLI for scaffolding Vue.js projects We reviewed the and found the following: webpack template v2.8.2 Various via templates; official templates for Webpack, Browserify are provided. Other community provided templates also exist Build workflow / bundling paradigm: No; after project setup new components are added manually Commands to support ongoing development: JavaScript ES6 / ES2015; also Default language and version: supported in templates ESLint (optional on setup) Code linting: Not configured by default Live linting: , Karma, (optional on setup) Testing: Mocha Nightwatch Yes Live unit-testing: Istanbul enabled by default Code coverage: 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 API client to demonstrate how to interact with a third-party API stream-js 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 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 are a little tedious. specific upgrade steps 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 project on Github. Stream-Example-Angular-cli 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 project on Github. Stream-Example-Create-React-App 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 project on Github. Stream-Example-Create-Vue-Cli 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 and be sure to try our . JavaScript docs 5-minute online tutorial This is a collaboration from the team at GetStream.io, led by Dwight Gunning , Developer Advocate at GetStream.io. The original blog post can be found at https://getstream.io/blog/javascript-framework-cli-showdown/ .