Introducing Yeoman 1.0 beta
- 2. Email [email protected] 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.