rentalutions_angular_webpack.markdown

OMG WEBPACK, ES6, EVERYTHING, ^{_{IN ONE SMALL BUNDLE}} , SUCH WOW

Think of /frontend as the precompiled app. We're not going to use rails to compile anything really. Hopefull we can fit everything we need into this one folder on production (we'll see). Anyway, so the /frontend uses gulp and webpack to compile everything down into a bundle.min.js in app/assets/javascripts.

To get up and running here are the steps.

1. git clone https://whatever.git
2. bundle install
3. cd frontend
4. npm install
5. gulp // in the frontend folder
6. rails s // in another console.

Thought process

1. We don't have es6 features out of the box with Rails and the sprockets-es6 gem is the only one thats production ready and it doesn't work with our Rails (or maybe its our Ruby) version.
2. Webpack does a stellar job of wiring angular apps together so I'd like to leverage that power
3. With Webpack we're able to compile html templates and scss files into the components we're building, less requests, les chance of something going wrong. This is huge. Yes, the user wouldn't see anything if js was disabled, but even if we didn't do this they'd still be screwed.
4. We won't have to manage dependencies manually (this is a big one in my opinion as well)
5. Webpack let's us autoprefix our css files. (No more mixin hell)
6. We're future proofing ourselves by using the es6 syntax and a flux-like architecture. Everything is uber module.

Build your own

cd Dev/angular_rails_webpack

echo "rvm use --create ruby-1.9.3-p194@whatever" > .rvmrc

cd .. && cd -

rails _3.2.16_ new . -db postgresql // you can get rid of jquery and rails-coffee. We won't be needing them. Sass too really.

bundle install

rake db:create

mkdir frontend && cd frontend

npm init

touch gulfile.js .babelrc client.js client.config.js

npm install --save-dev angular angular-ui-router angular-resource webpack webpack-stream babel-core babel-loader babel-preset-es2015 raw-loader css-loader postcss-loader style-loader sass-loader

We Now Have all the dependencies we need (for now).

Now we'll create a gulpfile to process frontend/client.js and put it in app/assets/javascripts. Really the most important part about this is that webpack uses loaders that watch files and when changed they are compiled into a bundle.js. We're using webpack-stream WITH webpack (cause I like the simplicity of the gulp build and watch). If you don't like Gulp you could just have a webpack.config.js and replace webpack-stream with webpack-dev-server and run the command webpack server instead of gulp.

In frontend/client.js we are instantiating the angular app and defining it as 'rentalutions'. We're importing all the dependencies this will need with things like:

import angular from 'angular'

We have a models folder that contains classes that interact with whatever api. Our controllers then interact with those models to put and update data in the view. I really like the flux architecture of grouping components together (controller, router, template, styles) so that everything is basically an island unto itself.

client.js

import angular from 'angular'
import tenant from './tenant'

angular
  .module('rentalutions', [
  // dependencies like ui-router and ng-resource here
  uirouter,
  resource,
  login,
  tenant,
  landlord
  ])
  .config(configurationObject)

tenant/index.js

// as an aside, webpack will look for an index.js in the folder if you don't give it a specific file to import

import youGetIt from './you/get/it'

export default angular
  .module('tenant')
  .config(config)
  .controller(controller.object)

class controller.object {
  constructor() {
    this.name = 'Namey McNameface',
  }
}