Новая встреча DZ CLUB в Варшаве: лид Google о будущем мобильной индустрии. Купить билет 🎟
Support us

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

Оставить комментарий
Как 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 в свой проект, мы рекомендуем использовать вариант с внешним сборщиком.

Присоединяйтесь к сообществу dev.by

Читать

Читайте также
Где изучать Scala тем, кто уже что-то знает. Собрали множество курсов и платформ (июнь, 2023)
Где изучать Scala тем, кто уже что-то знает. Собрали множество курсов и платформ (июнь, 2023)
Где изучать Scala тем, кто уже что-то знает. Собрали множество курсов и платформ (июнь, 2023)
Язык программирования Scala — один из самых популярных коммерческих языков, который используют Twitter, LinkedIn, WhatsApp. Scala-разработчики, возможно, не так востребованы как их коллеги, пишущие на Python или Java, но хороший специалист будет цениться высоко, а знание языка станет безусловным плюсом в резюме. В помощь тем, кто хочет пополнить ряды адептов Scala, Digitaldefynd составил (а мы дополнили) подборку онлайн-курсов и тренингов разных уровней сложности.
1 комментарий
10 популярных курсов по изучению JavaScript для крутой веб-разработки
10 популярных курсов по изучению JavaScript для крутой веб-разработки
10 популярных курсов по изучению JavaScript для крутой веб-разработки
JavaScript остается одним из самых популярных языков программирования в мире. Мы собрали список курсов и сертификаций по Javascript от основ до необычных особенностей. В листинге как платные, так и бесплатные онлайн-курсы. Погнали за новыми знаниями!
2 комментария
Как оплачиваются самые популярные языки GitHub и какой прогноз
Как оплачиваются самые популярные языки GitHub и какой прогноз
Как оплачиваются самые популярные языки GitHub и какой прогноз
Rust стал самым быстрорастущим языком по числу разработчиков
Rust стал самым быстрорастущим языком по числу разработчиков
Rust стал самым быстрорастущим языком по числу разработчиков

Хотите сообщить важную новость? Пишите в Telegram-бот

Главные события и полезные ссылки в нашем Telegram-канале

Обсуждение
Комментируйте без ограничений

Релоцировались? Теперь вы можете комментировать без верификации аккаунта.

Комментариев пока нет.