What is Bower, why use it, and how I've been using it. Presented at ConvergeSE Richmond
Bower
View Slide
We make websites
Lots of stuffBootstrapFoundation normalize.cssfitvid.jsModernizrd3jQueryUnderscore / Lo-dashBackbone Angular JS Effeckt.cssMasonryFont AwesomeCompass H5BPjQuery UI Easing form gallerymodal / popup tooltipbase CSS helper JS
How do you get it?Downloadgit cloneSaved locally, copy files
Where do you put it?lib/lib/vendor/assets/js/vendor, assets/css/vendor, assets/*/vendor
How you keep trackof it?Centralized serverIn git, commit to repogit-submodules
Messy DeskNot enough space to do workSlow down creative processHard to collaborateSpend time cleaning desk
PackageManagement
ProblemPackagemanagementSolution BowerReason Why use BowerResultsHow I’ve doneso far
What is Bower?
BowerA package managerfor the web
What is Bower?Command-line utilityBuilt on Node JS
Install packagesbower install jquery
Install a versionbower install jquery#1.x
Search packagesbower search normalize
bower.jsonManifest fileUse same installationon another machineCollaboration
bower.jsonbower init
bower.json"dependencies": { "jquery": "1.x", "normalize-‐css": "~2.1.3" }
bower install bootstrap
InstallingdependenciesBower will install the packageand its dependencies!"# bootstrap#3.0.0 !"" jquery#2.0.3
DependenciesPowerful featureBuild packages on top of oneanotherNo longer have to depend on bigframeworks
Lots of other greatfeatures--offline: Offline modeRead the docs:bower.io
What Bower doesEasily gets packagesKeeps them organizedManages dependencies
ProblemSolutionReasonResultsPackagemanagementBowerWhy use BowerHow I’ve doneso far
Why Bower?
Package managersVologit-submodulesJamComponentBrowserify (npm)Ender
Bower is specialUnopinionatedProvides no direct way toconsume packagesCore part of its philosophy
Consuming packages, SASS or preprocessorRequireJSGruntYour own build script
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" }
UnopinionatedChoosing on behalf of anyoneelseDon’t lock your users into amethodology
Using BowerTwitter: FlightGoogle: Yeoman,AngularjQuery
ProblemSolutionReasonResultsPackagemanagementBowerUnopinionatedHow I’ve doneso far
Results
IsotopeMasonry
Same problem withunloaded images
Masonry!Isotope!
Masonry!Isotope!images Loadedimages Loadedimages Loaded
Maintaining one projectin three places
Now with BowerNo more committing otherprojects into yoursKeep them separatedBower allows easily add them asdependencies
Front-enddevelopment withdependencies
Developing withdependenciesRemoving duplicated codejquery-bridget get-sizeget-style-propertydoc-readyeventieEventEmitter
Each dependencyIts own repositoryIts own issue trackerIts own testsFiner granularity over biggerprojects
For example:masonry#417
masonry#417Issue reported in MasonryActual problem with getSize
getSizeFixcut newrelease(v1.1.5)Masonrybower updatedeploy
Masonry!getSizeIsotope!Dragga-billy...
EncapsulationLiteral naïve definition:Make capsulesBreaking down something largeinto smaller pieces, easier toswallow
EncapsulationLike DRY, a principle of goodprogrammingTake and apply it project-level
EncapsulationA new avenue of thinkingNo longer had to keep mentalmodel of entire library in my headFocus on small libraries withsingle purpose
Growing upGrowing out of relying onmonolithic frameworksEmpowering developers to makeand distribute their own purpose-built components
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
ProblemSolutionReasonResultsPackagemanagementBowerUnopinionatedGrow
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 RequireJSand ?How do you create concatenated source files,for easy ing?
Why use Bower andnot ______?Because Bower isunopinionated.
Why use Bower at all?Because buildingwith dependenciesis how we will grow.
Thank you!I have stickers.Get in my van.– @desandro