Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Bower introduction
Search
David DeSandro
October 12, 2013
Programming
2
1.1k
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
Share
More Decks by David DeSandro
See All by David DeSandro
Read color hex codes
desandro
3
64k
Practical UI physics
desandro
3
1.4k
Other Decks in Programming
See All in Programming
個人開発で使ってるやつを紹介する回
yohfee
1
700
Introduce dRuby
ledsun
0
120
4年間変わらなかった YOUTRUSTのアーキテクチャ
daiki1003
1
630
tsconfig.jsonの最近の新機能 ファイルパス編
uhyo
6
1.7k
Serverless renderování Webových komponent
rarous
PRO
0
100
もう実家に手頃な情シス娘は不要!Bedrockでもう一人の娘を作る
komakichi
0
100
"noncopyable types" の使いどころについて考えてみた
andpad
0
160
[PHPカンファレンス沖縄2024]「無理なくできるだけ安全に」テストもないレガシーコードをリファクタリングするテクニック
ikezoemakoto
3
130
色んなオートローダーを覗き見る #phpcon_okinawa
o0h
PRO
5
400
空間の中でアイドルとレッスンする技術 - 1st "Vision" / Spatial Lesson technologies with my idol - 1st "Vision"
banjun
PRO
0
100
複数プロダクトの技術改善・クラウド移行に向き合うチームのフレキシブルなペア・モブプログラミングの実践 / Flexible Pair Programming And Mob Programming
honyanya
0
230
Cloud Adoption Framework にみる組織とクラウド導入戦略
tomokusaba
2
520
Featured
See All Featured
A Tale of Four Properties
chriscoyier
156
22k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
7.5k
A better future with KSS
kneath
237
17k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
130k
Fireside Chat
paigeccino
32
3k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
Creatively Recalculating Your Daily Design Routine
revolveconf
217
12k
Into the Great Unknown - MozCon
thekraken
31
1.4k
Building an army of robots
kneath
302
42k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Transcript
Bower
We make websites
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
How do you get it? Download git clone Saved locally,
copy files
Where do you put it? lib/ lib/vendor/ assets/js/vendor, assets/css/vendor,
assets/*/vendor
How you keep track of it? Centralized server In git,
commit to repo git-submodules
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
None
Messy Desk Not enough space to do work Slow down
creative process Hard to collaborate Spend time cleaning desk
Package Management
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
Package Management
Problem Package management Solution Bower Reason Why use Bower Results
How I’ve done so far
What is Bower?
Bower A package manager for the web
What is Bower? Command-line utility Built on Node JS
Install packages bower install jquery
None
Install a version bower install jquery#1.x
None
Search packages bower search normalize
None
bower.json Manifest file Use same installation on another machine Collaboration
bower.json bower init
None
bower.json "dependencies": { "jquery": "1.x", "normalize-‐css":
"~2.1.3" }
bower install bootstrap
None
Installing dependencies Bower will install the package and its dependencies
!"# bootstrap#3.0.0 !"" jquery#2.0.3
Dependencies Powerful feature Build packages on top of one another
No longer have to depend on big frameworks
Lots of other great features --offline: Offline mode Read the
docs: bower.io
What Bower does Easily gets packages Keeps them organized Manages
dependencies
Problem Solution Reason Results Package management Bower Why use Bower
How I’ve done so far
Why Bower?
Package managers Volo git-submodules Jam Component Browserify (npm) Ender
Bower is special Unopinionated Provides no direct way to consume
packages Core part of its philosophy
Consuming packages <link />, <script /> SASS or preprocessor RequireJS
Grunt Your 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" }
Unopinionated Choosing on behalf of anyone else Don’t lock your
users into a methodology
Using Bower Twitter: Flight Google: Yeoman, Angular jQuery
Problem Solution Reason Results Package management Bower Unopinionated How I’ve
done so far
Results
Isotope Masonry
Same problem with unloaded images
Masonry ! Isotope !
Masonry ! Isotope ! images Loaded images Loaded images Loaded
Masonry ! Isotope ! images Loaded images Loaded images Loaded
Maintaining one project in three places
Now with Bower No more committing other projects into yours
Keep them separated Bower allows easily add them as dependencies
Front-end development with dependencies
Developing with dependencies Removing duplicated code jquery-bridget get-size get-style-property doc-ready
eventie EventEmitter
Each dependency Its own repository Its own issue tracker Its
own tests Finer granularity over bigger projects
For example: masonry#417
masonry#417 Issue reported in Masonry Actual problem with getSize
getSize Fix cut new release (v1.1.5) Masonry bower update deploy
Masonry ! getSize Isotope ! Dragga- billy ...
Encapsulation Literal naïve definition: Make capsules Breaking down something large
into smaller pieces, easier to swallow
Encapsulation Like DRY, a principle of good programming Take and
apply it project-level
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
Growing up Growing out of relying on monolithic frameworks Empowering
developers to make and 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
Problem Solution Reason Results Package management Bower Unopinionated Grow
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?
Why use Bower and not ______? Because Bower is unopinionated.
Why use Bower at all? Because building with dependencies
is how we will grow.
Thank you! I have stickers. Get in my van. –
@desandro