Bower introduction

Bower introduction

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

2ce95c1d4f7e79263c7fa261f12c47c9?s=128

David DeSandro

October 12, 2013
Tweet

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
  8. None
  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

  18. None
  19. Install a version bower  install  jquery#1.x

  20. None
  21. Search packages bower  search  normalize

  22. None
  23. bower.json Manifest file Use same installation on another machine Collaboration

  24. bower.json bower  init

  25. None
  26. bower.json "dependencies":  {      "jquery":  "1.x",      "normalize-­‐css":

     "~2.1.3"   }
  27. bower  install  bootstrap

  28. None
  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