Bower introduction

What is Bower, why use it, and how I've been using it. Presented at ConvergeSE Richmond

Transcript

1. Bower
2. We make websites
3. Lots of stuff Bootstrap Foundation normalize.css fitvid.js Modernizr d3 jQuery Underscore / Lo-dash Backbone Angular JS Effeckt.css Masonry Font Awesome Compass H5BP jQuery UI Easing form gallery modal / popup tooltip base CSS helper JS
4. How do you get it? Download git  clone Saved locally, copy files
5. Where do you put it? lib/ lib/vendor/ assets/js/vendor,   assets/css/vendor,   assets/*/vendor
6. How you keep track of it? Centralized server In git, commit to repo git-submodules
7. Lots of stuff Bootstrap Foundation normalize.css fitvid.js Modernizr d3 jQuery Underscore / Lo-dash Backbone Angular JS Effeckt.css Masonry Font Awesome Compass H5BP jQuery UI Easing form gallery modal / popup tooltip base CSS helper JS
9. Messy Desk Not enough space to do work Slow down creative process Hard to collaborate Spend time cleaning desk
10. Package Management
11. Lots of stuff Bootstrap Foundation normalize.css fitvid.js Modernizr d3 jQuery Underscore / Lo-dash Backbone Angular JS Effeckt.css Masonry Font Awesome Compass H5BP jQuery UI Easing form gallery modal / popup tooltip base CSS helper JS
12. Package Management
13. Problem Package management Solution Bower Reason Why use Bower Results How I’ve done so far
14. What is Bower?
15. Bower A package manager for the web
16. What is Bower? Command-line utility Built on Node JS
17. Install packages bower  install  jquery
19. Install a version bower  install  jquery#1.x
21. Search packages bower  search  normalize
23. bower.json Manifest file Use same installation on another machine Collaboration
24. bower.json bower  init
26. bower.json "dependencies":  {      "jquery":  "1.x",      "normalize-­‐css":  "~2.1.3"   }
27. bower  install  bootstrap
29. Installing dependencies Bower will install the package and its dependencies !"#  bootstrap#3.0.0      !""  jquery#2.0.3
30. Dependencies Powerful feature Build packages on top of one another No longer have to depend on big frameworks
31. Lots of other great features --offline: Offline mode Read the docs: bower.io
32. What Bower does Easily gets packages Keeps them organized Manages dependencies
33. Problem Solution Reason Results Package management Bower Why use Bower How I’ve done so far
34. Why Bower?
35. Package managers Volo git-submodules Jam Component Browserify (npm) Ender
36. Bower is special Unopinionated Provides no direct way to consume packages Core part of its philosophy
37. Consuming packages <link />, <script /> SASS or preprocessor RequireJS Grunt Your own build script
38. bower  list  -­‐-­‐paths {      "bootstrap":  [          "bower_components/bootstrap/dist/js/            bootstrap.js",          "bower_components/bootstrap/dist/css/            bootstrap.css"      ],      "jquery":  "bower_components/jquery/jquery.js",      "normalize-­‐css":  "bower_components/normalize-­‐        css/normalize.css"   }
39. Unopinionated Choosing on behalf of anyone else Don’t lock your users into a methodology
40. Using Bower Twitter: Flight Google: Yeoman, Angular jQuery
41. Problem Solution Reason Results Package management Bower Unopinionated How I’ve done so far
42. Results
43. Isotope Masonry
44. Same problem with unloaded images
45. Masonry ! Isotope !
46. Masonry ! Isotope ! images
 Loaded images
 Loaded images
 Loaded
47. Masonry ! Isotope ! images
 Loaded images
 Loaded images
 Loaded
48. Maintaining one project in three places
49. Now with Bower No more committing other projects into yours Keep them separated Bower allows easily add them as dependencies
50. Front-end development with dependencies
51. Developing with dependencies Removing duplicated code jquery-bridget get-size get-style-property doc-ready eventie EventEmitter
52. Each dependency Its own repository Its own issue tracker Its own tests Finer granularity over bigger projects
53. For example:
    masonry#417
54. masonry#417 Issue reported in Masonry Actual problem with getSize
55. getSize Fix cut new release (v1.1.5) Masonry bower update deploy
56. Masonry ! getSize Isotope ! Dragga- billy ...
57. Encapsulation Literal naïve definition: Make capsules Breaking down something large into smaller pieces, easier to swallow
58. Encapsulation Like DRY, a principle of good programming Take and apply it project-level
59. Encapsulation A new avenue of thinking No longer had to keep mental model of entire library in my head Focus on small libraries with single purpose
60. Growing up Growing out of relying on monolithic frameworks Empowering developers to make and distribute their own purpose- built components
61. packery-­‐docs#1.0.0   $""  classie#1.0.0   $"#  doc-­‐ready#1.0.2   %  !""  eventie#1.0.3   $"#  draggabilly#1.0.6   %  $""  classie#1.0.0   %  $""  eventEmitter#4.2.4   %  $""  eventie#1.0.3   %  $"#  get-­‐size#1.1.4   %  %  !""  get-­‐style-­‐property#1.0.2   %  !""  get-­‐style-­‐property#1.0.2   $""  eventie#1.0.3   $""  get-­‐style-­‐property#1.0.2   $""  jquery#1.10.2   $""  jquery-­‐ui-­‐draggable#1.10.3   $""  normalize-­‐css#2.1.3   !"#  packery#1.1.2  
62. Problem Solution Reason Results Package management Bower Unopinionated Grow
63. How? How do you hook up Grunt tasks to Bower? How do you split a project into multiple files? How do you make JS work with both RequireJS and <script />? How do you create concatenated source files, for easy <link />ing?
64. Why use Bower and not ______? Because Bower is unopinionated.
65. Why use Bower
    at all? Because building with dependencies is how we will grow.
66. Thank you!
    I have stickers.
    Get in my van.
    – @desandro