Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Bower introduction
David DeSandro
October 12, 2013
Programming
2
780
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
55k
Practical UI physics
desandro
3
1k
Other Decks in Programming
See All in Programming
heyにおけるSREの大切さ~マルチプロダクト運用の「楽しさ」と「難しさ」および今後の展望~
fufuhu
3
1.6k
Loom is Blooming
josepaumard
3
530
WindowsコンテナDojo:第2回 Windowsコンテナアプリのビルド、公開、デプロイ
oniak3ibm
PRO
0
140
あなたの会社の古いシステム、なんとかしませんか?~システム刷新から考えるDX化への道筋とバリエーション~/webinar20220420-grapecity
grapecity_dev
0
130
バンドル最適化マニアクス at tfconf
mizchi
3
2k
GraphQL+KMM開発でわかったこと / What we learned from GraphQL+KMM development
kubode
0
120
Go API クライアントの実装 〜Go Conference に載せれなかったTIPS〜
yyoshiki41
0
190
Kueue入門/Kueue Introduction
bells17
0
510
Android Architecture Design With Koin
agiuliani
0
220
JGS594 Lecture 23
javiergs
PRO
0
400
Monadic Java
mariofusco
4
260
TechFeed Conference 2022 - Kotlin Experimental
jmatsu
0
620
Featured
See All Featured
Pencils Down: Stop Designing & Start Developing
hursman
112
9.8k
Raft: Consensus for Rubyists
vanstee
126
5.4k
Imperfection Machines: The Place of Print at Facebook
scottboms
253
11k
Designing for humans not robots
tammielis
241
23k
Building Better People: How to give real-time feedback that sticks.
wjessup
343
17k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
11
4.6k
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
196
9.4k
Why Our Code Smells
bkeepers
PRO
324
54k
Automating Front-end Workflow
addyosmani
1351
200k
Designing for Performance
lara
596
63k
Building an army of robots
kneath
299
40k
Atom: Resistance is Futile
akmur
255
20k
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