$30 off During Our Annual Pro Sale. View Details »

Bower introduction

Bower introduction

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

David DeSandro

October 12, 2013
Tweet

More Decks by David DeSandro

Other Decks in Programming

Transcript

  1. Bower

    View Slide

  2. We make websites

    View Slide

  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

    View Slide

  4. How do you get it?
    Download
    git  clone
    Saved locally, copy files

    View Slide

  5. Where do you put it?
    lib/
    lib/vendor/
    assets/js/vendor,  
    assets/css/vendor,  
    assets/*/vendor

    View Slide

  6. How you keep track
    of it?
    Centralized server
    In git, commit to repo
    git-submodules

    View Slide

  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

    View Slide

  8. View Slide

  9. Messy Desk
    Not enough space to do work
    Slow down creative process
    Hard to collaborate
    Spend time cleaning desk

    View Slide

  10. Package
    Management

    View Slide

  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

    View Slide

  12. Package
    Management

    View Slide

  13. Problem
    Package
    management
    Solution Bower
    Reason Why use Bower
    Results
    How I’ve done
    so far

    View Slide

  14. What is Bower?

    View Slide

  15. Bower
    A package manager
    for the web

    View Slide

  16. What is Bower?
    Command-line utility
    Built on Node JS

    View Slide

  17. Install packages
    bower  install  jquery

    View Slide

  18. View Slide

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

    View Slide

  20. View Slide

  21. Search packages
    bower  search  normalize

    View Slide

  22. View Slide

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

    View Slide

  24. bower.json
    bower  init

    View Slide

  25. View Slide

  26. bower.json
    "dependencies":  {  
       "jquery":  "1.x",  
       "normalize-­‐css":  "~2.1.3"  
    }

    View Slide

  27. bower  install  bootstrap

    View Slide

  28. View Slide

  29. Installing
    dependencies
    Bower will install the package
    and its dependencies
    !"#  bootstrap#3.0.0  
       !""  jquery#2.0.3

    View Slide

  30. Dependencies
    Powerful feature
    Build packages on top of one
    another
    No longer have to depend on big
    frameworks

    View Slide

  31. Lots of other great
    features
    --offline: Offline mode
    Read the docs:
    bower.io

    View Slide

  32. What Bower does
    Easily gets packages
    Keeps them organized
    Manages dependencies

    View Slide

  33. Problem
    Solution
    Reason
    Results
    Package
    management
    Bower
    Why use Bower
    How I’ve done
    so far

    View Slide

  34. Why Bower?

    View Slide

  35. Package managers
    Volo
    git-submodules
    Jam
    Component
    Browserify (npm)
    Ender

    View Slide

  36. Bower is special
    Unopinionated
    Provides no direct way to
    consume packages
    Core part of its philosophy

    View Slide

  37. Consuming packages
    ,
    SASS or preprocessor
    RequireJS
    Grunt
    Your own build script

    View Slide

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

    View Slide

  39. Unopinionated
    Choosing on behalf of anyone
    else
    Don’t lock your users into a
    methodology

    View Slide

  40. Using Bower
    Twitter: Flight
    Google: Yeoman,
    Angular
    jQuery

    View Slide

  41. Problem
    Solution
    Reason
    Results
    Package
    management
    Bower
    Unopinionated
    How I’ve done
    so far

    View Slide

  42. Results

    View Slide

  43. Isotope
    Masonry

    View Slide

  44. Same problem with
    unloaded images

    View Slide

  45. Masonry
    !
    Isotope
    !

    View Slide

  46. Masonry
    !
    Isotope
    !
    images

    Loaded
    images

    Loaded
    images

    Loaded

    View Slide

  47. Masonry
    !
    Isotope
    !
    images

    Loaded
    images

    Loaded
    images

    Loaded

    View Slide

  48. Maintaining one project
    in three places

    View Slide

  49. Now with Bower
    No more committing other
    projects into yours
    Keep them separated
    Bower allows easily add them as
    dependencies

    View Slide

  50. Front-end
    development with
    dependencies

    View Slide

  51. Developing with
    dependencies
    Removing duplicated code
    jquery-bridget get-size
    get-style-property
    doc-ready
    eventie
    EventEmitter

    View Slide

  52. Each dependency
    Its own repository
    Its own issue tracker
    Its own tests
    Finer granularity over bigger
    projects

    View Slide

  53. For example:
    masonry#417

    View Slide

  54. masonry#417
    Issue reported in Masonry
    Actual problem with getSize

    View Slide

  55. getSize
    Fix
    cut new
    release
    (v1.1.5)
    Masonry
    bower update
    deploy

    View Slide

  56. Masonry
    !
    getSize
    Isotope
    !
    Dragga-
    billy
    ...

    View Slide

  57. Encapsulation
    Literal naïve definition:
    Make capsules
    Breaking down something large
    into smaller pieces, easier to
    swallow

    View Slide

  58. Encapsulation
    Like DRY, a principle of good
    programming
    Take and apply it project-level

    View Slide

  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

    View Slide

  60. Growing up
    Growing out of relying on
    monolithic frameworks
    Empowering developers to make
    and distribute their own purpose-
    built components

    View Slide

  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  

    View Slide

  62. Problem
    Solution
    Reason
    Results
    Package
    management
    Bower
    Unopinionated
    Grow

    View Slide

  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 ?
    How do you create concatenated source files,
    for easy ing?

    View Slide

  64. Why use Bower and
    not ______?
    Because Bower is
    unopinionated.

    View Slide

  65. Why use Bower
    at all?
    Because building
    with dependencies
    is how we will grow.

    View Slide

  66. Thank you!
    I have stickers.
    Get in my van.
    – @desandro

    View Slide