[Из песочницы] React boilerplate — Rocket React
Хочу представить вашему вниманию boilerplate (skeleton) на базе React.js + Backbone для быстрого старта разработки приложения любой сложности. Эта связка помогла нашей команде в срок сделать сложное приложение с минимальным количеством проблем, а простота позволила быстро подключать новых разработчиков в процесс.
Работая продолжительное время с JS, мы всякий раз сталкиваемся с разного рода проблемами и граблями. От череды неудач и разочарований мы создаем все новые и новые велосипеды, изобретаем фреймверки, пишем библиотеки, разрабатываем новые подходы. Я так же нахожусь в поисках Единорога и пытаюсь вывести для себя и своей команды нечто такое, что позволит нам сэкономить время на разработке и придать качество готовому продукту.
Начиная работу над одним из крупных проектов, встал вопрос о построении архитектуры и выборе фреймверка. Имея опыт с крупными проектами на Angular, Backbone, Ember и вспоминая их достоинства и недостатки, хотелось избавить нас от минусов и зачерпнуть все плюсы, а также освоить нечто новое. По этому выбор пал на тогда еще совсем свежий React, но возникла проблема с хранением данных в приложении и тут нам на помощь пришел Backbone. В общем, симбиоз из React + Backbone нам пришелся по душе, приложение ушло в продакшен, клиент доволен, а мы получили отличный инструмент для разработки, которым я бы хотел поделится с вами.
В чем его преимущество? Простота. Мы не изобретали нечто новое, это уже готовый, оттестированный, проверенный временем продукт. React дает нам отличный компонентный подход, с очень эффективным data-binding и отличным роутером. Backbone дает возможность создавать модели и коллекции. Синтаксис ES6, компилируемый gulp'ом через babel позволяет нам писать более компактный и приятный код, разбивать его на модули пригодные для тестирования и понимания.
В представляемом вам примере я написал небольшой TODO List с использованием Node.js + express.js + Mongo в качестве Restfull сервиса для манипуляций со списком работ. Исходники клиент приложения находятся в «client\source\»
Rocket React включает в себя:
Build system
Gulp — Настроенный сборщик, конфигурация находится в tasks/config.
NPM — Менеджер зависимостей. С его помощью происходит установка библиотек в приложение, с последующем их вызовом.
Browserify — DI менеджер.
Babel — поддержка ES6 синтаксиса.
babelify — Компиляция шаблонов React в JS.
Front End
React — Основа приложения. Страница и её элементы декомпозируются на малые компоненты, имеющие свою Backbone модель или коллекцию.
Backbone — Служит лишь для создания моделей и коллекций.
react.backbone — Модуль связывает React и Backbone.
wolfy87-eventemitter — Вынесен в Mixin для обмена сообщениями между компонентами. Пример можно посмотреть в «app\views\pubsub\».
react-router — роутинг.
Testing tool
Mocha, Chai, Sinon, jsdom — настроены и готовы к работе, поддерживают JSX синтаксис. Тесты находятся «tests\specs\».
Documentation
jsdoc — гнератор документации имеет баг, на сколько я понял, проблема в не полной поддержки JSDoc синтаксиса ES6, а именно, если в коде будет присутствовать arrow function, то компилятор не сбилдит документацию.
Server Side
Node, Express, Mongo, Mongoose, Winston — на основе этого стека технологий создано простое серверное приложение, для теста CRUD. находится в «server\».
Установка и запуск
1. Нужно запустить npm install в корне, а также в папке server.
2. gulp b — производит билд клиентского приложения с sourcemaps.
3. gulp b --production собирает приложение вырезая консоль логи и дебаггеры и JS, минифицируя код.
4. gulp w — запуск watcher, livereload, и сервера с клиентской частью приложения.
5. gulp d — деплой приложения на FTP. перед деплоем проверяется валидность JS, если JS выдает ошибку, приложение не будет залито.
6. gulp doc — генерация документации через JSDoc, со своими настройками и кастомным шаблоном, поддержкой JSX. Смотрите настройки в jsdoc.conf.json.
7. gulp lint — производит проверку через JSHint. Файл с настройками в корне .jshintrc.
8. gulp test — запуск тестов из «tests\spec». Просмотреть результаты тестов можно из «show_test_results.html».
9. gulp test-w — запуск вотчера для тестов. Следит за папкой tests\spec и пере собирает если произошли изменения.
Основные настройки можно найти в файле «tasks/config.js».
mongo.bat — запускает Монго указывая путь к приложению.
copyright.txt — шаблон для копирайтов, будет встроен в собранный JS и CSS. Настройки находятся в «tasks/config.js».
Ссылка на Github
