gistfile1.md

Runtime

• Install nodejs via nvm

Tools

• babel - JS transpiler
  • babel-polyfill - to enable regenerator runtime and corejs
• webpack - module bundler
  • babel-loader
  • postcss-loader ( autoprefixer, style-loader, css-loader )
  • url-loader
  • file-loader
  • worker-loader- for web workers
  • expose-loader - expose modules to the global namespace
  • eslint-loader
  • webpack-bundle-size-analyzer
  • assets-webpack-plugin ( for generating manifest.json, this allows to drop Asset Pipeline)
• react
• shrinkwrap - dependency locker (similar to Gemfile.lock)
• router5 or ReactRouter
  • react-router5
• redux
  • redux-saga - an alternative side effect model for Redux apps based on ES6 generators
  • redux-thunk
  • redux-form
  • react-redux
  • redux-router5 ( or redux-simple-router in case of ReactRouter )
  • redux-actions
  • redux-logger
  • redux-storage
• react-selectize - stateless and flexible select replacement
• api endpoints generator ( in progress )
• ramdajs - more functional and immutable replacement for lodash , and it's more lightweight
• fecha - date formatting and parsing, lightweight replacement for moment
• validate.js - separate validations library
• isomorphic-fetch - new standard instead of AJAX
• normalizr - normalizes nested JSON according to a schema
• classnames - a simple javascript utility for conditionally joining classNames together
• CSS
  • Bootstrap ( I encourage to drop it, or if not - make granular bundle to control what should be imported )
  • PureCSS - alternative to bootstrap
  • flexboxgrid - flexbox, are we ready?
• Testing
  • mocha or tape - those are test runners
  • enzyme - testing utilities for React components
  • sinon - mocking library
• Static code analysis
  • eslint
  • eslint-config-airbnb
  • eslint-plugin-react

Install above libraries:

npm install -g webpack webpack-dev-server webpack-bundle-size-analyzer

npm install --save react react-dom redux redux-saga redux-form react-redux redux-actions redux-logger redux-storage ramdajs fecha validate.js

npm install --save-dev webpack webpack-dev-server assets-webpack-plugin babel-loader babel-polyfill postcss-loader autoprefixer style-loader css-loader url-loader file-loader worker-loader expose-loader eslint-loader eslint-config-airbnb shrinkwrap mocha enzyme sinon

Folder structure

• client
  • fonts
  • images
  • styles
  • src
    • actionCreators
      • index.js ( all combined actionCreators )
    • components ( all components in hierarchical structure https://gist.github.com/ryanflorence/110d4538bf98694538de )
      • shared ... e.g.
        • InifiniteScroll.js
        • Spinner.js
      • Anonymous
        • shared
        • Handler.js
      • SignedIn
        • shared
        • Handler.js
      • Root.js
    • reducers
      • index.js ( all combined reducers )
    • ducks
    • router
      • createRouter.js
      • createRouter.development.js
      • createRouter.production.js
      • createRouter.staging.js
    • store
      • createStore.js
      • createStore.development.js
      • createStore.production.js
      • createStore.staging.js
    • sagas
      • index.js ( all sagas )
    • middlewares ( custom redux middlewares )
    • constants
      • actionTypes.js ( all redux action type in one file with some namespace )
    • utils
      • endpoint.js ( module for generating RESTful api endpoints )
  • webpack
    • webpack.base.config.js
    • webpack.development.config.js
    • webpack.production.config.js
    • webpack.${env}.config.js
  • .gitignore
  • .eslintrc
  • package.json

Common scripts:

Fire webpack-dev-server with webpack.development.config.js

npm run dev

Build with webpack ${environment} config

npm run build NODE_ENV=${env}

Run build, generate webpack manifest.json and copy them to /public folder to the according server and restart a web server

npm run deploy NODE_ENV=${env}

Run tests

npm run test

See library sizes in percentage

npm run analyze NODE_ENV=${env}

Run eslint

npm run lint

.gitignore

  /client/node_modules
  /client/fonts
  /client/images
  /client/npm-debug.log
  /client/_webpack.json

.eslintrc

  {
    "extends": "airbnb",
    "rules": {
      // Override rules here
    }
  }

TODO: Write yeoman generator to generate the above folder structure.

Deploy notes

There are 2 ways to handle deploy:

• "Rails" way

  • Install nodejs and npm packages on the server.
  • Write capistrano task to run npm install and npm run build NODE_ENV=${env}

• Run npm run deploy NODE_ENV=${env} which would generate manifest.json and scp bundles to the server /public folder and restart a web server.

I prefer the 2nd one, because:

1. no additional infrastructure support;
2. no capistrano task, capistrano does not handle assets anymore;
3. no dependency on Rails, could be used with any backend server;
4. npm is not so stable as Bundler, there is no way to easy update all the packages without breaking dependencies, which could lead to unstable build.
5. ability to deploy assets separately which means if you make small changes in the file you don't have to iterate through the whole server deploy process (git pulling, running migrations, sidekiq, etc.)

Roadmap

• Router
  • decide which one to use
• CSS
  • define stack of frameworks ( are we ready to drop bootstrap and move with flexbox and more lightweight JSless frameworks)
  • decide which CSS architecture to use ( BEM fits great into React )
• Tests
  • define test stack
  • add test config
  • tets files structure separate folder, or place tests adjacent to tested file?