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
67k
Practical UI physics
desandro
3
1.5k
Other Decks in Programming
See All in Programming
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
20
8.2k
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
300
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
170
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
700
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
240
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
850
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.4k
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
270
Porting a visionOS App to Android XR
akkeylab
0
600
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
280
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Facilitating Awesome Meetings
lara
54
6.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
4 Signs Your Business is Dying
shpigford
184
22k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Done Done
chrislema
184
16k
Site-Speed That Sticks
csswizardry
10
690
Practical Orchestrator
shlominoach
189
11k
A Modern Web Designer's Workflow
chriscoyier
695
190k
A Tale of Four Properties
chriscoyier
160
23k
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