Bower on Rails

Bower on Rails

Frontend Dependency-Management in Rails

8582e25bb23108d9cc68ecbc42a715b4?s=128

Roman Stranghöner

January 21, 2015
Tweet

Transcript

  1. Bower on Rails Frontend Dependency-Management in Rails

  2. Hi,
 my name is Roman

  3. I work at innoQ © Robert Glaser

  4. HTML JS CSS Frontend

  5. HTML JS CSS Frontend Components

  6. …have dependencies © Windell Oskay https://flic.kr/p/4hABNH

  7. What’s wrong with Rails?

  8. Gemfile gem "jquery-rails" vendor/assets/ jquery.plugin.js gem "bootstrap-sass"

  9. © Allan Rotgers https://flic.kr/p/mWat5p

  10. None
  11. Web sites are made of lots of things – frameworks,

    libraries, assets, utilities, and rainbows. Bower manages all these things for you. —bower.io “ „
  12. A package manager for the web

  13. generic, unopionionated and package-agnostic

  14. depends on node, npm & git

  15. Some commands

  16. init Interactively create a bower.json file search Search for a

    package by name install (--save) Install a package locally update Update a local package
  17. cache Manage bower cache help Display help information about Bower

    home Opens a package homepage info Info of a particular package link Symlink a package folder list List local packages - and possible updates lookup Look up a package URL by name prune Removes local extraneous packages register Register a package uninstall Remove a local package version Bump a package version
  18. { "name": "typeahead.js", "version": "0.10.5", "main": "dist/typeahead.bundle.js", "dependencies": { "jquery":

    ">=1.7" }, "devDependencies": { "jquery": "~1.7", "jasmine-ajax": "~1.3.1", "jasmine-jquery": "~1.5.2" } } bower.json
  19. { "directory": "app/components/", "timeout": 120000, "registry": { "search": [ "http://localhost:8000",

    "https://bower.herokuapp.com" ] } } .bowerrc
  20. 22115 Packages http://bower.io/search/

  21. BOWER ALL THE THINGS

  22. Bower on Rails

  23. 1. Plain Bower http://bower.io

  24. Configuration

  25. { "directory": "vendor/assets/bower_components" } .bowerrc

  26. class Application < Rails::Application ... config.assets.paths << Rails.root.join('vendor', 'assets', 'bower_components')

    ... end application.rb
  27. Usage

  28. @import 'mixins'; @import 'reset'; @import 'bower_component_name/stylesheet' application.scss //= require my_js_file

    //= require bower_component_name/js_file application.js
  29. > No indirections > Configuration is fairly easy > Optional

    check-in of dependencies
  30. > Install before (pre)compilation > Two frameworks and mindsets >

    Relative asset paths will cause issues
  31. 2. Rails Assets https://rails-assets.org

  32. Frictionless proxy between Bundler and Bower

  33. Configuration

  34. source 'https://rubygems.org' source 'https://rails-assets.org' […] gem 'rails-assets-bootstrap' gem 'rails-assets-angular' gem

    'rails-assets-leaflet' Gemfile
  35. Usage

  36. //= require_self //= require bootstrap //= require angular //= require

    leaflet //= require_tree . //= require_tree shared application.js application.scss @import 'mixins'; @import 'reset'; @import 'bootstrap'
  37. > Node and Bower not needed > Configuration in the

    Gemfile > Most popular packages available
  38. > Dependency to another service > Some packages do not

    work as expected
  39. 3. gem "bower-rails" https://github.com/rharriso/bower-rails/

  40. Bundler-like DSL +
 Rake tasks for Bower

  41. Configuration

  42. Works with default bower.json

  43. Can create custom bower.json

  44. rails g bower_rails:initialize json

  45. { "lib": { "name": "bower-rails generated lib assets", "dependencies": {

    … } }, "vendor": { "name": "bower-rails generated vendor assets", "dependencies": { … } } } bower.json
  46. Ruby DSL

  47. rails g bower_rails:initialize

  48. assets_path "assets/javascript" # Puts files under ./vendor/assets/js/bower_components group :vendor, :assets_path

    => "assets/js" do asset "jquery" asset "moment", "2.0.0" asset "secret_styles", "git@github.com:initech/secret_styles" end # Puts files under ./lib/assets/javascript/bower_components group :lib do asset "jquery" asset "backbone", "1.1.1" end Bowerfile
  49. More configuration with initializer and .bowerrc

  50. Usage

  51. rake bower:install rake bower:install:deployment rake bower:update rake bower:update:prune rake bower:list

    rake bower:clean rake bower:resolve rake bower:cache:clean
  52. > Ruby DSL for bower.json > Rake Tasks for Bower

    commands > Optional check-in of dependencies > Fine grained configuration
  53. > One more level of indirection > Node and npm

    dependency > Configuration fairly complicated > Relative asset paths will cause issues
  54. In summary …

  55. …it depends! © Sarah Buckley https://flic.kr/p/9x1tCJ

  56. Questions?

  57. KTHXBYE roman.stranghoener@innoq.com @rstrangh