Rails AngularJS Bower Heroku

Presentation for the Vienna.rb Meetup on November 14th, 2013.

Transcript

1. Vienna.rb, November 14th, 2013 ! Hannes Stiebitzhofer hannes@stiebitzhofer.com @stiebitzhofer Rails-Angular-Bower- Heroku
2. Ruby on Rails Great!
3. AngularJS Model-View-Controller for web applications by Google It rocks!
4. Heroku Plattform as a Service for Ruby on Rails Again cool!
5. Front-end resources in Ruby Bundler aren’t cool //. Gemfile…. gem "angularjs-rails", "~> 1.0.8“ gem "jquery-rails", "~> 3.0.4“ ! Gems and required packages not up-to-date Version conflicts, headaches,…. Shouldn’t we separate package management for front-end and back-end?
6. Bower.io „Bower is a package manager for the web. It offers a generic, unopinionated solution to the problem of front-end package management.“
7. Using Bower is simple Part 1 Install NodeJS and npm package manager Installation Bower npm install -g bower Setup Bower // .bowerrc
 {
 "directory": "vendor/assets/components"
 }
8. Using Bower is simple Part 2 Install Packages bower install angular
 bower install angular-resource Running bower init creates bower.json defining all packages similar 
 to Gemfile Or write bower.json yourself…
9. Using Bower is simple Part 3 Configure Rails // ./config/application.rb config.assets.paths << Rails.root.join('vendor', 'assets', ‚components') ! // ./config/environments/production.rb config.assets.compile = true
10. Custom Heroku buildpack for installation with Bower Heroku supports custom buildpacks to install whatever wanted (except Windows only stuff). Custom buildpack supporting Ruby and Node.js executes bower which processes bower.json. heroku config:set BUILDPACK_URL=‚git:// github.com/qnyp/heroku-buildpack-ruby- bower.git#run-bower' Finally deploy with git push git@heroku.com…. master
11. Karma fills in the missing piece - testing JavaScript Spectacular Test Runner for JavaScript Supports test execution on real growers, phones and headless on PhantomJS. Testing framework agnostic - Jasmine, Mocha or QUnit Developed by Google AngularJS team
12. Install Bower and Karma with npm //. package.json { "name": "rails-angular-bower-heroku", "version": "0.0.0", "devDependencies": { "bower": "~1.2.6", "karma": "~0.10.4", "karma-jasmine": "~0.1.3", "karma-chrome-launcher": "~0.1.0", "karma-phantomjs-launcher":"~0.1.0" } }
13. Karma Runner needs all JavaScripts explicit module.exports = function(config) { config.set({ basePath: '', frameworks: ['jasmine'], files: [ 'vendor/assets/components/angular/angular.js', 'vendor/assets/components/angular-resource/ angular-resource.js', 'app/assets/javascripts/application.js', 'app/assets/javascripts/app.js', ‚app/assets/javascripts/**/*.js', ….
14. Continuous integration with Codeship.io Setup commands rvm use 2.0.0 bundle install export RAILS_ENV=test bundle exec rake db:schema:load npm install bower install Test commands bundle exec rspec karma start --single-run
15. Personal taste might matter more than benefits Separation of concerns and responsibilities Front-end packages maintained front-end developer Back-end packages maintained by back-end developer Reduce cost by automating whatever possible! Improve quality by automating whatever possible!
16. Questions? You find everything on Github http://stiebitzhofer.github.io/rails- angular-bower-heroku/ https://speakerdeck.com/stiebitzhofer/ rails-angularjs-bower-heroku Boilerplate application and detailed documentation More questions? Mail to hannes@stiebitzhofer.com