Bower/Yeoman

Who are you ?

Yosuke!

Working at :

Twitter : @yosuke_furukawa

Blog : from scratch

Community :

What is Bower ?

• client side package manager.

• (It is like NPM on client side.)

Super Fast Bower Demo

Install

$ npm install -g bower

※ if you dont have npm, you would install node.js to be better.

Install

$ bower init // create bower.json
$ bower install jQuery // install latest version
$ bower install underscore#1.4.3 // specify version
$ bower install backbone --save // write bower.json

install them to ./components/[package_name].

--save option save the package to bower.json

you dont need to type "wget" any more!!

Update

$ bower update // update libraries

search modules

$ bower search backbone

OR

$ bower lookup backbone

get more infomation

$ bower info backbone

If you have cool client modules

$ bower register <module name> <git repository>

※ use git tag and put versions like 0.0.1, 0.0.2.

HOWEVER, Bower has some uncool points...

html script and link

<script src="/components/jquery/jquery.js" />
<script src="/components/impress.js/js/impress.js" />

bower does not have layout manager...

Use grunt-bower-task

grunt-bower-task can align our js/css to be better.

lib
|-- js
|   |- jquery
|   |  |- jquery.js
|   |
|   \- impress
|      |- impress.js
|-- css
    \- impress
       |- impress.css

YEAH !!

<link href="css/bootstrap.css" />
<script src="js/jquery.js" />
<script src="js/impress.js" />

So simple.

Yeoman

• task runner =>

• frontend package manager =>

• backend package manager =>

So you want to create your own templates??

yeoman can generate application templates.

DEMO

demo site

Summary

• Bower is useful tool.
• but Bower is not so cool, grunt-bower-task is really helpful.
• Yeoman can generate your application templates.
• I am creating our own templates for jsCafe!!

DeNA NEEDS YOU!!!

• JavaScript Engineers
• Noders
• Designers
• Join us!!!!