[Перевод] Использование Neutrino для быстрого начала разработки на JavaScript09.03.2017 19:48

Тайсон Нил Деграс в детекторе нейтрино


Привет! Меня зовут Артем, и я занимаюсь тестированием веб-приложений в 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(
Hacks: React!
, 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

https://habrastorage.org/files/72f/c36/c3a/72fc36c3ab074d739f77a26de9c63262.png


Не прошло и пяти минут, а у нас уже запущено 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. Наслаждайтесь!

Комментарии (0)

© Habrahabr.ru