Bower on Rails

Frontend Dependency-Management in Rails

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
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