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