Bower introduction

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

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