Перевод статьи «Building robust web apps with React: Part 2, optimising with Browserify», Matt Hinchliffe

От переводчика: это перевод второй части цикла статей «Building robust web apps with React».
Переводы:

Построение надежных веб-приложений на React: Часть 1, браузерные прототипы
Построение надежных веб-приложений на React: Часть 2, оптимизация с Browserify
Построение надежных веб-приложений на React: Часть 3, тестирование с Jasmine
Построение надежных веб-приложений на React: Часть 4, серверная генерация

В первой части, я осветил причины, почему по моему мнению, React захватывающий инструмент, который может быть использован для построения изоморфный или адаптивно-гибридных веб-сайтов, что может равняться динамичности мобильных приложений и надежности статичной страницы двадцатилетней давности. Я также написал базовое демо приложение, чтобы исследовать некоторые парадигмы и особенности React и показать, как быстро можно прототипировать динамические браузерные приложения, но это едва ли демонстрирует надежность, к которой я изначально стремился.

Код, который в начальном демо был представлен на выполнение браузеру, не проходит ни один базовый тест производительности; скрипты должны быть прекомпилированы, объединены и минифицированы перед отправкой на продакшн.

Прекомпилация кода из синтаксиса JSX в чистый JavaScript может быть сделана в командной строке React Tools, который устанавливается, как NPM пакет:

$ npm install -g react-tools

React Tools может производит преобразование один-к-одному из .jsx в .js файл, и он достаточно умен, чтобы распознать require инструкции CommonJS, для построения древа зависимостей проекта. Это значит, что данный инструмент может обрабатывать все приложение получая только одну точки входа, таким образом нет необходимости монотонно трансформировать каждый скрипт по отдельности. Как только зависимости приложения Tube Tracker будут определены, оно может быть трансформировано следующей командой, которая начинает с файлов с расширением .jsx:

$ jsx --follow-requires -x jsx app/ public/scripts/

React Tools решает часть проблемы, но отдельные скрипты до сих пор требуют объединения и минификации. Обычно, работая с процессом построения в несколько шагов, исполнитель задач(task runner), как Grunt или Gulp.js мог бы пригодится, но для такого простого приложения, которое к тому же должно выполняться на клиенте и на сервере, мы можем просто использовать Browserify и NPM скрипты.

Browserify позволяет разработчикам писать раздельные, совместимые с модульной системой Node.js модули в стиле CommonJS, с намерением компилировать их в единый файл. Browserify также включает браузерные версии некоторых модулей Node.js и даже используется самим React'ом для создания дистрибутивов этой библиотеки. Это хороший инструмент для использования в сугубо-JavaScript окружении, так как с некоторыми тщательными решениями он позволяет коду быть повторно использованным, как для клиентской так и для серверной частей приложения.

Нам не нужен исполнитель задач(task runner), так как Browserify поддерживает расширения или ‘исходные преобразования(source transforms)’, через которые он пропускает каждый обрабатываемый скрипт. Существуют трансформации для прекомпиляции JSX (Reactify) и последующей минификации (Uglifyify). Все пакеты могут быть установлены через NPM, для сохранения их в манифест пакета(package manifest):

$ npm install --save-dev browserify reactify uglifyify

Теперь процесс построения может быть запущен, но чтобы сохранить повторно вводящиеся команды, их можно сохранить в манифест пакета(package manifest), как пакетные скрипты. NPM имеет предопределенные сокращения для часто используемых случаев, например npm test или npm start, также произвольные скрипты построения могут быть определены для выполнения Browserify с соответствующими преобразованиями и флагами:

{
  ...
  "scripts": {
    "build-dev": "browserify -e app/bootstrap.js -t reactify -o public/scripts/bundle.dev.js -d",
    "build-min": "browserify -e app/bootstrap.js -t reactify -t uglifyify -o public/scripts/bundle.min.js"
  }
}

Таким образом, два пакетных скрипта могут быть последовательно запущены:

$ npm run-script build-dev && npm run-script build-min

Наконец, для удобности я установил внутренне перенаправление внутри сервера приложения (сделанном на Express) для предоставления нужных скриптов, в зависимости от окружения, в котором работает приложение:

app.set("js", app.get("env") === "development" ? "dev" : "min");

app.use(function(req, res, next) {
  if (req.url === "/scripts/bundle.js") {
    req.url = "/scripts/bundle." + app.get("js") + ".js";
  }

  next();
});

Если честно, написание этой короткой заметки не заняло у меня месяц, но объяснить, как тестировать React приложение оказалось труднее, чем я ожидал. Я вынес эти исследования в часть 3. Вы можете попробовать приложение прямо сейчас (внимание: пример запущен на бесплатном аккаунте, так что эта ссылка может быть неустойчивой) или пройти на GitHub, чтобы посмотреть исходный код. Пожалуйста, комментируйте или твитайте мне, я буду рад получить отзывы.

Построение надежных веб-приложений на React: Часть 2, оптимизация с Browserify