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
.
git clone https://whatever.git
bundle install
cd frontend
npm install
gulp
// in the frontend folderrails s
// in another console.
- 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.
- Webpack does a stellar job of wiring angular apps together so I'd like to leverage that power
- 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.
- We won't have to manage dependencies manually (this is a big one in my opinion as well)
- Webpack let's us autoprefix our css files. (No more mixin hell)
- We're future proofing ourselves by using the es6 syntax and a flux-like architecture. Everything is uber module.
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
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',
}
}