masaj salonu masaj salonları
Home » Advertising » JavaScript Frontend Framework CLI Showdown

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 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 surround 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:

  1. First, we want to look at the CLI’s features and become familiar with the specific tools that are included.
  2. 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:

  1. SPA basics: creating components and running the development server.
  2. Visual design: integrating a CSS framework.
  3. 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
  • Live linting: Not supported (‘will not implement’).
  • 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.
  • Live linting: Yes; errors emitted from the development server.
  • 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:

  1. Installed the CLI.
  2. Created a project using the relevant commands and tried the development server.
  3. Added SASS support and the Foundation for Sites CSS Framework.
  4. 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 CLIs.

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 the few hours worth of 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 their past experiences using the same CLI and associated tooling, onboarding efforts are reduced.

Of course, there are some downsides. In particular, there is the 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 used 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 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.

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*

cover letter