Как back-end разработчики внедряли React JS

Евгений Краморенко, Владислав Дмитриев
March 11, 2016

На сегодняшний день одним из самых распространенных Scala фреймворков является Play. Он хорошо зарекомендовал себя в работе среди сотрудников нашей компании, поэтому мы решили стартовать новый проект именно на нём. Особенностью проекта являлась необходимость сделать отзывчивый frontend. Для выполнения данной задачи стандартных средств Twirl (шаблонизатор Play) оказалось недостаточно, поэтому было решено попробовать ныне модный React JS.

React JS - это популярная библиотека для рендеринга представлений, разработанная командой Facebook. Основными её преимуществами являются легковесность, скорость работы и компонентный подход.

Ниже мы описываем наш путь по внедрению этой библиотеки.

Подключение через script

Самым простой и быстрый способ добавить React в проект - это подключить sbt-web плагин sbt-reactjs и добавить ссылки на два JS файла в заголовке вашей страницы:

<script src="https://fb.me/react-0.14.7.js"></script>

<script src="https://fb.me/react-dom-0.14.7.js"></script>

Преимущества данного подхода:

Простота.
Скорость.
Изолированность - можно внедрить React только на одной странице в любой момент работы над проектом. Это никак не повлияет на уже написанный код.

Недостатки:

Повторение кода - файлы React'а необходимо подключать на каждой странице.
"Ад зависимостей" - кроме двух файлов React'а вам нужно будет подключить как минимум ещё один файл с вашим JS-кодом. Кроме того, вам могут понадобится другие библиотеки - ещё несколько JS-файлов. В конечном итоге подключение этих зависимостей в правильном порядке станет трудоёмкой задачей.

Данный подход отлично выполнил цель ознакомления с React, но для постоянной разработки хотелось бы более автоматизированное решение.

Использование внешних сборщиков

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

В нашем проекте мы использовали Gulp, но вы можете использовать и другие варианты (например Grunt). После этого, единственной задачей которую необходимо решить является интеграция Gulp в SBT. Сделать это можно двумя способами:

Использовать SBT plugin. Например: SBT Play Gulp Plugin.
Написать свою интеграцию. В качестве примера можно использовать play-gulp-standalone.

Преимущества:

Автоматизация - решение полностью самостоятельно. Вы можете просто писать код и быть уверенными, что он сработает на странице.
Современность - такие сборщики, как Gulp используют в качестве платформы Node.js, который предоставляет разработчику простой доступ к NPM (Node Package Manager). В репозитории этого пакетного менеджера около четверти миллиона пакетов! Данное сообщество развивается гораздо быстрее чем sbt-web.

Недостатки:

Требует настройки - необходимо приложить время и усилия чтобы настроить процесс сборки.
Сложность - для сборки проекта необходимо изучить и использовать ещё один инструмент.

Вывод

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

devby 17 лет!

Вспоминаем наш (и ваш) переходный возраст и делимся виш-листом