Hello! My name is Artyom and I am testing web applications at 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 Mozilla's Neutrino article.

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

Sometimes we are frightened by the prospect of embarking on another adventure, which is JavaScript development. Of course, it’s nice and interesting to work with the latest tools and the latest libraries, but before you get down to writing 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 to set up a complex of tools for a long time for further work has led to the emergence of such a concept as “JavaScript fatigue”. Neutrino was just created so that you can immediately get down to business, avoiding the dreary preliminary work.

In its capabilities, Neutrino is comparable to 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 configuration files at all, which is achieved by encapsulating common scenarios for using the Webpack configuration in shareable presets. Today, presets are available for creating applications for the web, React, and even Node.js. Testing or linting are also added using presets.

Let's see how Neutrino can quickly start developing a React application.

React quick launch

In this article, I will 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 the 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

The React preset has several conventions:

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

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

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

Add to a package.jsoncouple of scripts for further assembly and launch of our application:

{
  "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 launch the application using the console command and open this URL:

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

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

• React doesn’t need any initial configuration to start developing and building a web application.
• the modern Babel compiler adds JSX and ES modules, the latest versions of two main browsers, asynchronous functions, and object rest / spread syntax ;
• there is support for React Hot Loader with a "hot" replacement of modules;
• expands with neutrino-preset-web;
• included are Webpack downloaders for importing HTML, CSS, images, icons and fonts directly from JavaScript.
• during development can be used webpack-dev-server;
• automatic creation of static HTML pages without the use of templates;
• production-optimized bundles with Babili minification and simplified chunking;
• the ability to easily expand to customize projects without the use of "black boxes" and extraction (ejecting).

Code quality

Linting is added very easily. For example, 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 teams. But first, transfer it from “scripts” to “presets” to reduce cumbersomeness and repeatability. First, load the Airbnb preset, and then our build 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 this 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, you just need to add presets and abide by the conventions. In the same way, tests are added to the project: just select the desired preset and you can work.

Great service - great and caring

In your future work, situations may arise when 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 saved, nor does it put all its dependencies into your project. Each Neutrino preset has a carefully thought-out mechanism for complementing the assembly using a compact but intuitive API. You can unify the configuration for several projects, as well as reduce the amount of making any changes of the same type by creating your own presets. Just post them to npm or GitHub, add as another dependency and continue development.

Motivation

We created Neutrino as a solution to the problems faced by the front-end application development team from Mozilla's 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 do

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