React boilerplate — Rocket React

image
Хочу представити вашій увазі boilerplate (skeleton) на базі React.js + Backbone для швидкого старту розробки програми будь-якої складності. Ця зв'язка допомогла нашій команді в термін зробити складний додаток з мінімальною кількістю проблем а простота дозволила швидко підключати нових розробників в процес.

Працюючи тривалий час із JS, ми всякий раз стикаємося з різного роду проблемами і граблями. Від низки невдач і розчарувань ми створюємо все нові і нові велосипеди, винаходимо фреймверки, пишемо бібліотеки, розробляємо нові підходи. Я перебуваю в пошуках Єдинорога і намагаюся вивести для себе і своєї команди щось таке, що дозволить нам заощадити час на розробці та надати якість готового продукту.

image

Починаючи роботу над одним із великих проектів, постало питання про побудову архітектури та виборі фреймверка. Маючи досвід з великими проектами Angular, Backbone, Ember і згадуючи їх достоїнства і недоліки, хотілося позбавити нас від мінусів і зачерпнути всі плюси, а також освоїти щось нове. З цього вибір припав на тоді ще зовсім свіжий React, але виникла проблема зі зберіганням даних в додатку і тут нам на допомогу прийшов Backbone. Загалом, симбіоз з React + Backbone нам припав до душі, додаток пішло в продакшен, клієнт задоволений, а ми отримали відмінний інструмент для розробки, яким я б хотів поділитися з вами.

image

У чому його перевага? Простота. Ми не винаходили щось нове, це вже готовий, відтестовані, перевірений часом продукт. React дає нам відмінний компонентний підхід, з дуже ефективним data binding і відмінним роутером. Backbone дає можливість створювати моделі і колекції. Синтаксис ES6, компільований gulp'ом через babel дозволяє нам писати більш компактний і приємний код, розбивати його на модулі придатні для тестування і розуміння.

У бачиться вам прикладі я написав невеликий TODO List з використанням Node.js + express.js + Mongo Restfull сервісу для маніпуляцій зі списком робіт. Исходники клієнт програми знаходяться в «client\source\»

Rocket React включає в себе:
image

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».

image

Посилання на Github

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.