Introducing Yeoman 1.0 beta

1,380 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
1,380
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introducing Yeoman 1.0 beta

  1. 1. IntroducingBy Anthony Doan
  2. 2. Email mythicalprogrammer@gmail.comGithub mythicalprogrammer.github.comLinkedin https://www.linkedin.com/pub/anthony-anh-quoc-doan/21/343/a72About me (shameless self promotion)Contact infoWeb developer for over 8 years. Been a programmers for overa decade. Jack of all trades (android, machine learning, sysadmin, dev ops, etc..) & a polygot (Bash, C, C++, C#, Erlang,Java, Javascript, MIPS, Matlab, PHP, Perl 5, Python, R,Ruby, Scala, Scheme, VHDL).
  3. 3. What is it?Its a workflow.Consisting of three tools:
  4. 4. Workflow?Its a front-end work flow.Starting a new project you use yo to:Set up your frontpage structure (folders andsuch)./app/app/scripts/app/stylesheets/app/images/test
  5. 5. Show live example● Note to self use the tree command●● tree -L 2
  6. 6. Adding libraries (bower)● Along the way...You might want to add libraries such asbootstrap, jquery, requirejs, angularjs, etc...● You use bower to managed thesedependencies and packages (libraries) for you.● It manage jQuery-Ui plugins, css/gridframeworks, javascript libraries, all front endlibraries (not just javascript)
  7. 7. Why should I care about bower?● If you work on something with a team ofprogrammers you should care.● You should care that when they download yourcodes it should work as expected● For example youre using jQuery 1.3 and yourteammate downloaded jQuery 1.9. Your codemight not work with jQuery 1.9.
  8. 8. Show live example of Bower● Show general command● List, remove, add● Download a github repo and show bower
  9. 9. Did I mentionBower was createdby Twitter? Likebootstrap?
  10. 10. Grunt
  11. 11. What is it?● Grunt is a task tools● You can download build tasks and use it as a build tool
  12. 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 peopleout there)● Probably more usage/tasks out there...
  13. 13. Production Ready● Once you test out your front-end stuff via gruntserver and finish all your test (grunt test)● Grunt will ulgify/minify for your js and css in onefile.● Type grunt● Your final code will be in the /dist folder
  14. 14. Show Live Example of Grunt● grunt server● grunt test● grunt
  15. 15. Questions?● Remember to repeat the questions soeverybody can hear.
  16. 16. Thank you for listening.

×