MY WEBAPP WORKFLOW
ABOUT ME
Rubyist / JavaScripter
Yeoman team member
blog.revathskumar.com
Twitter/Github - @revathskumar
YEOMAN
Opinionated stack for web application development
IDEA TO PROTOTYPE IN 10 MINUTES
WHAT YEOMAN CAN DO 4 U?
Create directory structure
Boiler plate your code
/goa dfn*
*lbl eie/
dfn(
eie[
'nesoe,
udrcr'
'akoe
bcbn'
] fnto (,Bcbn){
, ucin _ akoe
's src'
ue t...
Install dependencies
Choose only what you needed
INSTALL

INSTALL YEOMAN
$nmisal- y
p ntl g o

USAGE
$y bcbn
o akoe
$y bcbn:oe Td
o akoemdl oo
$y bcbn:olcinTds
o akoecleto...
OTHER HELPS!
1. Install/Run/Update generators
GRUNT

The JavaScript Task Runner
WHY GRUNT?

Task runner based on CLI
Alternative to Rake/Cake/Make/Jake
100+ plugins
Lint, test, concat, watch, min etc .....
GRUNTFILE . JS
mdl.xot =fnto(rn){
oueeprs
ucingut
gutiiCni(
rn.ntofg{
ulf:{
giy
ds:{
it
fls {
ie:
"itsrpsapj" "p/cit/.s
ds...
TASKS
$gutcen
rn la
$gutulf
rn giy
$gutbid
rn ul

OTHER TASKS
ln,ts,lvrla,cp,cmietmlts
it et ieeod oy opl epae
BOWER
Package manager for the web
MANAGE YOUR PACKAGES/DEPENDECIES
FROM CLI
FLOW
Create boilerplate code with yo
Install dependencies with bower
Start grunt server
Compiles coffeescipt
Compiles sass...
grunt lint
grunt test
grunt build
jslint, run tests
concat and minify your dependencies
copy assets to dist dir
YEOMAN
Twitter :
Github :

GRUNTJS
Twitter :
Github :

BOWER
Twitter :
Github :
QUEST
 



Upcoming SlideShare
Loading in …5
×

My webapp workflow

4,201 views

Published on

My webapp workflow with Yeoman, Grunt and Bower.
From Kerala Ruby user Group meetup.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,201
On SlideShare
0
From Embeds
0
Number of Embeds
2,954
Actions
Shares
0
Downloads
9
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

My webapp workflow

  1. 1. MY WEBAPP WORKFLOW
  2. 2. ABOUT ME Rubyist / JavaScripter Yeoman team member blog.revathskumar.com Twitter/Github - @revathskumar
  3. 3. YEOMAN Opinionated stack for web application development
  4. 4. IDEA TO PROTOTYPE IN 10 MINUTES
  5. 5. WHAT YEOMAN CAN DO 4 U? Create directory structure
  6. 6. Boiler plate your code /goa dfn* *lbl eie/ dfn( eie[ 'nesoe, udrcr' 'akoe bcbn' ] fnto (,Bcbn){ , ucin _ akoe 's src' ue tit; vrTdMdl=Bcbn.oe.xed{ a oooe akoeMdletn( dfut:{ eals } }; ) }; ) rtr TdMdl eun oooe;
  7. 7. Install dependencies
  8. 8. Choose only what you needed
  9. 9. INSTALL INSTALL YEOMAN $nmisal- y p ntl g o USAGE $y bcbn o akoe $y bcbn:oe Td o akoemdl oo $y bcbn:olcinTds o akoecleto oo $y bcbn:iwIdxiw o akoeve neVe $y bcbn:otrTd o akoerue oo
  10. 10. OTHER HELPS! 1. Install/Run/Update generators
  11. 11. GRUNT The JavaScript Task Runner
  12. 12. WHY GRUNT? Task runner based on CLI Alternative to Rake/Cake/Make/Jake 100+ plugins Lint, test, concat, watch, min etc .... Customize task as you wish!
  13. 13. GRUNTFILE . JS mdl.xot =fnto(rn){ oueeprs ucingut gutiiCni( rn.ntofg{ ulf:{ giy ds:{ it fls { ie: "itsrpsapj" "p/cit/.s ds/cit/p.s: apsrps*j" } } } , cen [ds/', la: 'it*] }; ) gutlaNmak(gutcnrbulf"; rn.odpTss"rn-oti-giy) gutlaNmak(gutcnrbcen) rn.odpTss"rn-oti-la"; } gutrgseTs(bid,[cen,'giy]; rn.eitrak'ul' 'la' ulf')
  14. 14. TASKS $gutcen rn la $gutulf rn giy $gutbid rn ul OTHER TASKS ln,ts,lvrla,cp,cmietmlts it et ieeod oy opl epae
  15. 15. BOWER Package manager for the web
  16. 16. MANAGE YOUR PACKAGES/DEPENDECIES FROM CLI
  17. 17. FLOW Create boilerplate code with yo Install dependencies with bower Start grunt server Compiles coffeescipt Compiles sass/scss open page in default web browser live reload
  18. 18. grunt lint grunt test grunt build jslint, run tests concat and minify your dependencies copy assets to dist dir
  19. 19. YEOMAN Twitter : Github : GRUNTJS Twitter : Github : BOWER Twitter : Github :
  20. 20. QUEST
  21. 21.  
 


×