Yeoman is a robust and opinionated client-side stack, comprising tools and frameworks that can help developers quickly build beautiful web applications.

1. Automating
Front-End Workflow
1

2. Mohammed Arif
A husband, father and a Front End Specialist at Sapient-Nitro.
https://github.com/mdarif
https://twitter.com/#!/arif_iq
http://in.linkedin.com/in/mohdarif
www.mohammedarif.com
2

3. AGENDA
 What is automation?
 Why automation?
 Old way of doing things
 New way?
 Yeoman
 Grunt
 Grunt Tips
 Bower
 Showtime
 Q&A
3

4. WHAT IS AUTOMATION?
The technique of making a process, or a system operate
automatically.
4

5. WHY AUTOMATION?
To stay productive!
5

6. OLD WAY OF DOING THINGS?
•
•
•
•
Scaffolding
Download libraries
Download templates
Download frameworks
•
•
•
•
•
Watch Sass / Less / Stylus
Watch CoffeeScript
Watch Jade / Haml
LiveReload
JS / CSS Linting…
6

7. NEW WAY?
7

8. YEOMAN
8

9. 9

10. YEOMAN - Scaffold, write less with Yo
“Yeoman is a robust and opinionated client-side stack, comprising
tools and frameworks that can help developers quickly build beautiful
web applications”
http://yeoman.io/whyyeoman.html
10

11. YEOMAN - Scaffold, write less with Yo
• scaffolding, write less with Yo
• dependency management with Bower
• Wiring and integration of a number of commonly
used grunt tasks
• build, preview and test with Grunt
• maintained separately
• play well together, all part of the Yeoman workflow
11

12. YEOMAN - Scaffold, write less with Yo
$ npm install -g yo
12

13. YEOMAN - Scaffold, write less with Yo
$ yo webapp
•
•
•
•
•
•
•
•
HTML5 Boilerplate
Twitter Bootstrap
Project Structure
Mocha Tests
RequireJS (optional)
Modernizr (optional)
Build process
...
13

14. 14

15. GRUNT - Build, preview and test with Grunt
Grunt is a task-based command line build tool for JavaScript
projects.
http://www.slideshare.net/arif_iq/grunt-22465541
15

16. TASK-BASED?
•
•
•
•
•
•
•
Unit testing
JS linting
Concatenating/minifying
Image optimization
Replace scripts in html files
SASS
…
16

17. GRUNT TIPS
grunt-uncss
Remove unused CSS across your project at build time.
https://github.com/addyosmani/grunt-uncss
17

18. GRUNT TIPS
Build directly from DevTools
grunt-devtools extension
https://github.com/vladikoff/grunt-devtools
18

19. Bower
19

20. BOWER - Manage dependencies with Bower
A package manager for the web.
20

21. BOWER - Manage dependencies with Bower
Runs over:
• Git
• HTTP(s)
• Zip
• npm
21

22. BOWER - Manage dependencies with Bower
$ bower list
$ bower search
$ bower search jquery
$ bower install
$ bower install jquery –save-dev
22

23. BOWER - Manage dependencies with Bower
• maintained by Twitter and the open-source
community
• configuration in bower.json
https://egghead.io/lessons/bower-introduction-and-setup
23

24. SHOWTIME
24

25. Q&A

26. Thank You!
26