Bower introduction

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