This document introduces a front-end workflow consisting of three tools: yo, bower, and grunt. Yo is used to set up a project structure and folders. Bower manages front-end library dependencies. Grunt is a task runner that can compile Sass/Less to CSS, run tests, and minify files for production. The workflow allows setting up a new project, adding libraries, running tests, and deploying minified code with one command.

1. Introducing
By Anthony Doan

2. Email mythicalprogrammer@gmail.com
Github mythicalprogrammer.github.com
Linkedin https://www.linkedin.com/pub/anthony-anh-quoc-doan/21/343/a72
About me (shameless self promotion)
Contact info
Web developer for over 8 years. Been a programmers for over
a decade. Jack of all trades (android, machine learning, sys
admin, dev ops, etc..) & a polygot (Bash, C, C++, C#, Erlang,
Java, Javascript, MIPS, Matlab, PHP, Perl 5, Python, R,
Ruby, Scala, Scheme, VHDL).

3. What is it?
It's a workflow.
Consisting of three tools:

4. Workflow?
It's a front-end work flow.
Starting a new project you use yo to:
Set up your frontpage structure (folders and
such).
/app
/app/scripts
/app/stylesheets
/app/images
/test

5. Show live example
● Note to self use the tree command
●
● tree -L 2

6. Adding libraries (bower)
● Along the way...
You might want to add libraries such as
bootstrap, jquery, requirejs, angularjs, etc...
● You use bower to managed these
dependencies and packages (libraries) for you.
● It manage jQuery-Ui plugins, css/grid
frameworks, javascript libraries, all front end
libraries (not just javascript)

7. Why should I care about bower?
● If you work on something with a team of
programmers you should care.
● You should care that when they download your
codes it should work as expected
● For example you're using jQuery 1.3 and your
teammate downloaded jQuery 1.9. Your code
might not work with jQuery 1.9.

8. Show live example of Bower
● Show general command
● List, remove, add
● Download a github repo and show bower

9. Did I mention
Bower was created
by Twitter? Like
bootstrap?

10. Grunt

11. What is it?
● Grunt is a task tools
● You can download build tasks and use it as a build tool

12. Examples
● It can translate sass, less, whatever to css
● Use it to run test and TDD style programming
(like bundle exec rspec for those RoR people
out there)
● Probably more usage/tasks out there...

13. Production Ready
● Once you test out your front-end stuff via grunt
server and finish all your test (grunt test)
● Grunt will ulgify/minify for your js and css in one
file.
● Type grunt
● Your final code will be in the /dist folder

14. Show Live Example of Grunt
● grunt server
● grunt test
● grunt

15. Questions?
● Remember to repeat the questions so
everybody can hear.

16. Thank you for listening.