Использование Neutrino для быстрого начала разработки на JavaScript

Привет! Меня зовут Артем, и я занимаюсь тестированием веб-приложений в Badoo. Я регулярно изучаю профили крупных компаний на Github для того, чтобы узнать что-то новое как в веб-разработке, так и в трендах (иногда в будущих трендах). И это перевод статьи о Neutrino от Mozilla.

Neutrino — это инструмент, объединяющий в себе лучшие компоненты набора современных JavaScript-инструментов и простоту отсутствия первоначальных настроек.

Иногда нас пугает перспектива пуститься в очередное приключение, коим является разработка на JavaScript. Конечно, приятно и интересно работать с самыми свежими инструментами и новейшими библиотеками, но прежде чем засесть за написание приложений, зачастую приходится тратить немало времени на первоначальную установку и настройку.

Аналитический паралич — распространённое явление, а необходимость долго налаживать комплекс инструментов для дальнейшей работы стала причиной возникновения такого понятия, как «утомление JavaScript'ом» (JavaScript fatigue). Neutrino как раз и был создан для того, чтобы вы могли сразу взяться за дело, избежав муторных предварительных работ.

По своим возможностям Neutrino сравним с Webpack, но при этом прост в использовании, как пресеты для создания веб- и Node.js-проектов. Он позволяет создавать приложения, вообще не касаясь конфигурационных файлов, что достигается за счёт инкапсулирования распространённых сценариев использования Webpack-конфигурации в совместно используемые пресеты (shareable presets). На сегодняшний день доступны пресеты для создания приложений для веба, React, и даже Node.js. Тестирование или линтинг добавляются тоже с помощью пресетов.

Давайте посмотрим, как с помощью Neutrino можно быстро начать разработку React-приложения.

Быстрый запуск React

В этой статье для работы с зависимостями и выполнения команд я буду использовать клиент Yarn. Это всего лишь моё личное предпочтение. Вы можете использовать, к примеру, клиент npm.

Во-первых, нам нужно место для создания нашего приложения. Создаём в терминале новую директорию и заходим в неё:

$ mkdir hacks-react
$ cd hacks-react

Теперь добавляем Neutrino и React-пресет для создания приложения, а также ряд других зависимостей для дальнейшей работы с React:

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

У React-пресета есть несколько соглашений:

• исходный код находится в src;
• входная точка приложения — src/index.js;
• можно монтировать приложение на элемент с ID “root”.

Создаём входной файл src/index.js, вносим в него несложные изменения и отрендерим:

import React from 'react';
import { render } from 'react-dom';

render(<h1>Hacks: React!</h1>, document.getElementById('root'));

Добавляем в package.json пару скриптов для дальнейшей сборки и запуска нашего приложения:

{
  "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"
  }
}

Теперь запускаем приложение с помощью консольной команды и открываем этот URL:

$ yarn start

 Development server running on: http://localhost:5000
 Build completed

Не прошло и пяти минут, а у нас уже запущено React-приложение! Более того, прямо из коробки Neutrino обладает богатым набором свойств и возможностей:

• для начала разработки и сборки веб-приложения с помощью React не нужна никакая начальная настройка;
• современный компилятор Babel добавляет модули JSX и ES, последние версии двух основных браузеров, асинхронные функции и синтаксис object rest/spread;
• есть поддержка React Hot Loader с «горячей» заменой модулей;
• расширяется с помощью neutrino-preset-web;
• в комплекте идут Webpack-загрузчики для импорта HTML, CSS, изображений, иконок и шрифтов напрямую из JavaScript.
• при разработке можно использовать webpack-dev-server;
• автоматическое создание статичных HTML-страниц без использования шаблонов;
• оптимизированные под production бандлы с минификацией Babili и упрощённым разбиением на чанки (chunking);
• возможность лёгкого расширения для кастомизации проектов без использования «чёрных ящиков» и извлечения (ejecting).

Качество кода

Линтинг добавляется очень легко. За образец возьмём руководство по оформлению кода Airbnb. Если добавить пресет Airbnb, то мы сможем контролировать качество исходного кода в соответствии принятой в этой компании системой:

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

Теперь добавим наш пресет в команды Neutrino. Но сначала перенесём его из “scripts” в “presets”, чтобы уменьшить громоздкость и повторяемость. Сначала загружаем пресет Airbnb, а затем наш сборочный пресет:

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

Если снова запустить приложение, но при этом сделать что-то, что не соответствует руководству Airbnb, то нам об этом сообщат прямо в консоли:

$ 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)

Так что для поддержания высокого качества кода достаточно лишь добавить пресеты и соблюдать соглашения. Точно так же в проект добавляются и тесты: просто выберите нужный пресет – и можно работать.

Велика служба — велики и заботы

В вашей дальнейшей работе могут возникнуть ситуации, когда потребуется что-то изменить в процессе сборки. К счастью, сделать это достаточно просто. Neutrino не заставляет целиком сохранять конфигурацию сборки, а также не помещает в ваш проект все свои зависимости. Каждый Neutrino-пресет имеет тщательно продуманный механизм дополнения сборки с помощью компактного, но интуитивно понятного API. Унифицировать конфигурацию для нескольких проектов, а также снизить количество внесения каких-то однотипных изменений можно с помощью создания собственных пресетов. Просто опубликуйте их в npm или GitHub, добавьте в качестве ещё одной зависимости и продолжайте разработку.

Мотивация

Мы создали Neutrino как средство решения проблем, с которыми столкнулись команды разработчиков фронтенд-приложений из департамента Release & Productivity компании Mozilla. Сегодня Neutrino используется в нескольких проектах Mozilla, в том числе TaskCluster, Treeherder и Unified Logviewer. Мы сопровождаем и поддерживаем Neutrino, потому что мы сами нуждаемся в этом инструменте и используем его. И мы надеемся, что он поможет в работе и другим.

Иди и твори

Neutrino со своими пресетами формирует окружение для быстрой разработки, снимая ряд характерных барьеров для разработчиков. Я рекомендую почитать исчерпывающую документацию и опробовать Neutrino в вашем следующем проекте. Весь исходный код распространяется под лицензией MPL v2 и доступен на GitHub. Наслаждайтесь!