React boilerplate - Rocket React

I want to bring to your attention a boilerplate (skeleton) based on React.js + Backbone for a quick start on developing an application of any complexity. This bundle helped our team in time to make a complex application with a minimum of problems and the simplicity allowed us to quickly connect new developers to the process.

Working for a long time with JS, every time we are faced with all sorts of problems and rakes. From a series of failures and disappointments, we are creating more and more new bikes, inventing frameworks, writing libraries, developing new approaches. I also search for the Unicorn and try to bring something for myself and my team that will allow us to save development time and give quality to the finished product.



Starting work on one of the major projects, the question arose of building architecture and choosing a framework. Having experience with large projects on Angular , Backbone , Ember and remembering their strengths and weaknesses, I wanted to save us from the minuses and scoop up all the advantages, as well as learn something new. Therefore, the choice fell on the then very fresh React , but there was a problem with the storage of data in the application, and then Backbone came to our aid. In general, we liked the symbiosis from React + Backbone , the application went into production, the client is satisfied, and we got an excellent development tool that I would like to share with you.
')


What is its advantage? Simplicity. We did not invent something new, this is a ready-made, tested, time-tested product. React gives us an excellent component approach, with very efficient data-binding and an excellent router. Backbone allows you to create models and collections. The ES6 syntax compiled by gulp 'om through babel allows us to write more compact and pleasant code, to break it into modules suitable for testing and understanding.

In the example presented to you, I wrote a small TODO List using Node.js + express.js + Mongo as a Restfull service for manipulating the list of jobs. Sources client application are in the "client \ source \"

Rocket React includes:

Build system

Gulp - The configured collector, the configuration is in tasks / config.
NPM - Dependency Manager. It installs the libraries into the application, and then calls them.
Browserify - DI Manager.
Babel - ES6 syntax support.
babelify - Compiling React templates in JS.

Front end

React - The basis of the application. The page and its elements are decomposed into small components that have their own Backbone model or collection.
Backbone - Serves only to create models and collections.
react.backbone - Module binds React and Backbone.
wolfy87-eventemitter - Delivered to Mixin for exchanging messages between components. An example can be found in “app \ views \ pubsub \”.
react-router - routing.

Testing tool

Mocha, Chai, Sinon, jsdom - configured and ready to work, support JSX syntax. Tests are "tests \ specs \".

Documentation

jsdoc - the documentation generator has a bug, as far as I understand it, the problem is not full support for JSDoc ES6 syntax, namely, if the arrow function is present in the code, then the compiler will not knock the documentation.

Server side

Node, Express, Mongo, Mongoose, Winston - a simple server application for the CRUD test is created on the basis of this technology stack. located in the "server \".

Install and Run

1. You need to run npm install in the root and in the server folder.
2. gulp b - builds a client application with sourcemaps.
3. gulp b --production collects the application by cutting the console logs and debuggers and JS, minifitsiruya code.
4. gulp w - launch of watcher, livereload, and server with the client part of the application.
5. gulp d - deploy the application on FTP. JS validity is checked before deployment, if JS gives an error, the application will not be flooded.
6. gulp doc - generation of documentation through JSDoc, with its own settings and custom template, JSX support. See settings in jsdoc.conf.json.
7. gulp lint - performs testing via JSHint. File with settings in the root .jshintrc.
8. gulp test - run tests from “tests \ spec”. You can view test results from “show_test_results.html”.
9. gulp test-w - launching yesterday for tests. It tracks the tests \ spec folder and reassembles if changes have occurred.

Basic settings can be found in the file “tasks / config.js” .

mongo.bat - launches mongo pointing the path to the application.

copyright.txt - template for copyrights, will be embedded in the compiled JS and CSS. Settings are in “tasks / config.js”.



Github Link