Using Neutrino to get started developing JavaScript quickly

Hello! My name is Artem, and I test web apps in Badoo. I regularly study the profiles of large companies on Github in order to learn something new both in web development and in trends (sometimes in future trends). And this is a translation of an article about Mozilla's Neutrino.

Neutrino is a tool that combines the best components of a set of modern JavaScript tools and the simplicity of the absence of initial settings.

Sometimes we are frightened by the prospect of embarking on another adventure, which is the development of JavaScript. Of course, it is pleasant and interesting to work with the latest tools and the latest libraries, but before you sit down to write applications, you often have to spend a lot of time on the initial installation and configuration.

Analytical paralysis is a common phenomenon, and the need for a long time to establish a set of tools for further work has led to the emergence of such a thing as “JavaScript fatigue” (JavaScript fatigue). Neutrino was created so that you can immediately get down to business, avoiding the dreary preliminary work.

In terms of its capabilities, Neutrino is comparable to a Webpack , but it is also easy to use, like presets for creating web and Node.js projects. It allows you to create applications without touching the configuration files at all, which is achieved by encapsulating common use scenarios for using Webpack configuration into shared presets (shareable presets). Today, presets are available for creating applications for the web, React, and even Node.js. Testing or lintting is also added using presets.

Let's take a look at how you can quickly start developing a React application using Neutrino.

Quick Start React

In this article, I’ll use the Yarn client to work with dependencies and execute commands. This is just my personal preference. You can use, for example, the npm client.

First, we need a place to create our application. Create a new directory in the terminal and go into it:

$ mkdir hacks-react $ cd hacks-react 

Now we add Neutrino and React-preset to create the application, as well as a number of other dependencies for further work with React:

 $ yarn add --dev neutrino neutrino-preset-react $ yarn add react react-dom 

React preset has several conventions:

• source code is in src ;
• application entry point - src/index.js ;
• You can mount the application on the element with the ID “root”.

Create an input file src/index.js , make some simple changes to it and render it:

 import React from 'react'; import { render } from 'react-dom'; render(<h1>Hacks: React!</h1>, document.getElementById('root')); 

Add a couple of scripts to package.json to build and run our application further:

 { "scripts": { "start": "neutrino start --presets neutrino-preset-react", "build": "neutrino build --presets neutrino-preset-react" }, "devDependencies": { "neutrino": "^4.0.0", "neutrino-preset-react": "^4.0.0" }, "dependencies": { "react": "^15.4.2", "react-dom": "^15.4.2", "react-hot-loader": "next" } } 

Now we start the application using the console command and open this URL:

 $ yarn start Development server running on: http://localhost:5000 Build completed 

Less than five minutes, and we have already launched React-app! Moreover, right out of the box, Neutrino has a rich set of features and capabilities:

• To start developing and building a web application using React, no initial configuration is needed;
• The modern Babel compiler adds JSX and ES modules, the latest versions of the two main browsers, asynchronous functions and object rest / spread syntax;
• there is support for React Hot Loader with hot-swappable modules;
• expands with neutrino-preset-web ;
• Included are Webpack-downloaders for importing HTML, CSS, images, icons and fonts directly from JavaScript.
• when developing, you can use webpack-dev-server ;
• automatic creation of static HTML pages without the use of templates;
• production-optimized bundles with Babili minification and simplified chunking;
• possibility of easy expansion for customizing projects without using black boxes and retrieving (ejecting).

Quality code

Lint is added very easily. For a sample, let's take the Airbnb code design guide . If we add an Airbnb preset, then we can control the quality of the source code in accordance with the system adopted by this company:

 $ yarn add --dev neutrino-preset-airbnb-base 

Now add our preset to the Neutrino commands. But first we move it from “scripts” to “presets” in order to reduce bulkiness and repeatability. First load the Airbnb preset, and then our assembly preset:

 { "config": { "presets": [ "neutrino-preset-airbnb-base", "neutrino-preset-react" ] }, "scripts": { "start": "neutrino start", "build": "neutrino build" } } 

If you start the application again, but at the same time do something that does not comply with the Airbnb manual, then we will be informed about it directly in the console:

 $ yarn start Development server running on: http://localhost:5000 Build completed ERROR in ./src/index.js /Users/eli/code/hacks-react/src/index.js 5:13 error Strings must use singlequote quotes 1 problem (1 error, 0 warnings) 

So, to maintain high quality code, all you need to do is add presets and follow agreements. Similarly, tests are added to the project: just select the desired preset - and you can work.

Great service - great care

In your future work, there may be situations where you need to change something during the assembly process. Fortunately, this is quite simple. Neutrino does not force the entire configuration of the assembly to be maintained, nor does it place all its dependencies into your project. Each Neutrino preset has an elaborate build addition mechanism using a compact but intuitive API. To unify the configuration for several projects, as well as to reduce the amount of making any changes of the same type, you can create your own presets. Simply publish them to npm or GitHub, add as another dependency, and continue development.

Motivation

We created Neutrino as a means of solving problems faced by front-end application development teams from the Mozilla Release & Productivity department. Today, Neutrino is used in several Mozilla projects, including TaskCluster , Treeherder, and Unified Logviewer. We accompany and support Neutrino, because we ourselves need this tool and use it. And we hope that he will help in the work and others.

Go and create

Neutrino with its presets creates an environment for rapid development, removing a number of characteristic barriers for developers. I recommend reading the comprehensive documentation and trying out Neutrino on your next project. All source code is distributed under the MPL v2 license and is available on GitHub . Enjoy!