Bower Introduction

1. Easy Library Manager
Bower
NHN Technology Services
프론트엔드개발팀 이진권

2. Beginning of Development

3. 반복적으로 하는 일
• Library download
- jquery.js / (or zepto.js)
- underscore.js
- require.js
…
• copy to
project directory

4. Library download
- jquery.js / (or zepto.js)
…
copy to project directory
Library download
- underscore.js
…
copy to project directory
Library download
- require.js
…
Library download
…
copy to project directory
Repeat,
Repeat,
Repeat again

5. 귀찮다
너무 귀찮다
Make Folder, Copy Libraries
麻烦
太麻烦

6. Searching for Solution

7. 무엇이 좋을까?
고민의 시작은 언제나 귀차니즘
그래서 열심히 찾기 시작

8. grunt-init ?
세팅을 미리 다 해주어야 하는군..
음, 세팅하기가 좀 거추장스러운 느낌.

9. Yeoman?
Total Service
너무 다 포함된 느낌. (yeoman에서도 bower 이용)

10. bower?
커맨드 한줄로 간편하게 라이브러리 설치?
오홋 편리하겠는데.

11. 귀찮은 작업을 줄이고,
그시간에 쉬자
그시간에 개발하자

12. Installation with NPM

13. Easy to Install
npm install -g bower
It’s Done!

14. Note for Windows
윈도우 환경에서는 msysgit 이 설치 되어야 함
https://code.google.com/p/msysgit/

15. How to use

16. npm
npm install express
npm search socket.io
bower install jquery
bower search underscore
Similar with

17. Let’s see “bower help”

18. Usage:
!
bower
<command>
[<args>]
[<options>]
!
Commands:
!
cache
Manage
bower
cache
help
Display
help
information
about
Bower
home
Opens
a
package
homepage
into
your
favorite
browser
info
Info
of
a
particular
package
init
Interactively
create
a
bower.json
file
install
Install
a
package
locally
link
Symlink
a
package
folder
list
List
local
packages
lookup
Look
up
a
package
URL
by
name
prune
Removes
local
extraneous
packages
register
Register
a
package
search
Search
for
a
package
by
name
update
Update
a
local
package
uninstall
Remove
a
local
package
version
Bump
a
package
version
!
Options:
!
-­‐f,
-­‐-­‐force
Makes
various
commands
more
forceful
-­‐j,
-­‐-­‐json
Output
consumable
JSON
-­‐l,
-­‐-­‐log-­‐level
What
level
of
logs
to
report
-­‐o,
-­‐-­‐offline
Do
not
hit
the
network
-­‐q,
-­‐-­‐quiet
Only
output
important
information
-­‐s,
-­‐-­‐silent
Do
not
output
anything,
besides
errors
-­‐V,
-­‐-­‐verbose
Makes
output
more
verbose
-­‐-­‐allow-­‐root
Allows
running
commands
as
root
!
See
'bower
help
<command>'
for
more
information
on
a
specific
command.

19. Flow
• 관리를 위한
설정 파일을 생성하고,
• 필요한 라이브러리를 검색해서,
• 프로젝트에 라이브러리 설치
• 필요 없어진 라이브러리는 지운다.
Create
Search
Install
Rem
ove

20. Commands

21. bower init
bower.json 생성 마법사
(bower.json : 프로젝트 전용 설정 파일)

22. bower install {Library Name} --save
라이브러리 설치
-- save 를 이용하면 bower.json에 의존성 기록

23. bower uninstall {Library Name}
설치된 라이브러리 제거

24. bower update
설치된 라이브러리 업데이트

25. bower ls (혹은 list)
설치된 라이브러리 리스트 보기

26. bower search {Library Name}
라이브러리 검색

27. bower lookup {Library Name}
일치하는 라이브러리 보기

28. Project Setting File
bower.json
• name: (필수값) 패키지명
• version: 버전 정보
• main: 패키지의 엔드포인트
• ignore: 패키지를 설치할 때 bower가 무시할 파일 목록
• dependencies : 프로덕션에서 사용할 패키지 의존성 정보
• devDependencies : 개발용 패키지 의존성 정보

29. Global Setting File
.bowerrc
!
• directory : 컴포넌트를 설치할 기본 디렉토리
• endpoint: 커스텀 등록 엔드포인트
• json: 의존성을 처리할 때 사용할 기본 JSON 파일
• searchpath: 추가적으로 검색할 읽기전용 Bower 저장소
• shorthand_resolver: 간단하게 지정할 패키지명의 템플릿

30. Searching Packages

31. http://bower.io/search/
웹 브라우저로
bower에 등록되어 있는 패키지 검색
!
(사실,
bower search {Library Name}
이 있는데 여길 들어갈 필요가 있나..)

32. Bonus!
Time Bench Marking

33. 그래서, 제 마음대로 시간을 재봤습니다
조건 : jquery, underscore.js, require.js, backbone.js, jindo, d3.js
Setup
0 5 10 15 20
기존방식 bower이용
unit : minutes

34. – by JK
PPT 만들다 보니,
좀 약파는 느낌도 나는데
혼자만 쓰려다,,
같이 쓰면 좋을꺼 같아서요.

35. 감사합니다~!
lee.jinkwon@nhn.com