company_banner
9 марта в 19:25

Использование 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

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. Наслаждайтесь!

Автор: @bbidox Eli Perelman
Badoo
рейтинг 433,29
Похожие публикации

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

  • 0
    Простите, я не понял, это перевод или нет?
    департамента Release & Productivity компании Mozilla

    Badoo или Mozilla?
    А, вот, вижу… уже перевод
  • 0
    Скудная информация. В Badoo вы это используете или нет? Помогает? И как? Это 15-й стандарт? Бутстрапов тысячи, чем этот лучше? Почему вы его рекомендуете (почему вы решили перевести эту статью)?
    • +1
      чем этот лучше?

      Плюшки вебпака без его наркоманских конфигов, видимо.


      Есть только проблема, что когда начинаешь новый проект, то действительно есть тысяча бойлерплейтов и не проблема взять любой. А если у тебя легаси, которое нужно органично эволюционировать и не поломать, то все равно придется писать ручками G(runt|ulp)file.js, webpack.config.js, karma.config.js и так далее ad infinitum ad nauseam:)

      • 0
        Спасибо, что очень точно сформулировали мои мысли по этому поводу
    • 0
      Это перевод. Нет, в Badoo мы его не используем (насколько мне известно). Почему? — потому что у нас как раз очень много своего хозяйства. Информации по Neutrino на русском языке, насколько я знаю, мало; это была одна из причин для перевода
    • +1
      Возможно Вам будет интересно почитать про мой анализ нескольких из этих тысяч бутстрапов: https://habrahabr.ru/post/323458.
  • 0
    Серверный рендеринг может?
    • 0
      Насколько я вижу, node.js может. Сам пока ещё в процессе ковыряния.
      • 0
        Node.js все может, а фреймворк то может? Или надо самому?
        • 0

          А webpack может в серверный рендеринг? Такой же точно вопрос.

Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

Самое читаемое Разработка
Интересные публикации