Your SlideShare is downloading. ×
0
TECH TALKS                                             Yeoman-powered web development | Patrick Williams          http://y...
INTRODUCTION             GOAL?            Everyone have Yeoman installed yet?            ‘yeoman--help’         BitTorrent...
WHAT DO YOU GET FOR FREE?          Project scaffolding          Package manager          Auto-reloading          Automated...
SHOULDERS OF GIANTS         BitTorrent, Inc / 2013 Tech Talks   04                                             06Monday, F...
‘YEOMAN INIT’            Require.js? Compass (is it sass/scss)? Bootstrap plugins?            ‘app’ directory is where the...
HIDES THE UGLY            <!DOCTYPE html>            <!--[if lt IE 7]>                <html class=”no-js lt-ie9 lt-ie8 lt-...
‘YEOMAN TEST’            Look in ‘test/index.html’            Jasmine vs. Mocha?            Grunt task using phantomjs    ...
(function() {                 describe(‘Give it some context’, function() {                           describe(‘maybe a bi...
‘YEOMAN SERVER’            Crack open another terminal window...this can just stay open            Let’s take this opportu...
‘YEOMAN INSTALL’            Defers to Bower            Tinyurl for git repos... just dumps them into a directory         B...
component.json           {                     “dependencies”: {                                     “underscore”: “1.4.3”...
BROWSER            Did it work?            Is ‘_’ available yet?            Did you have to reload?         BitTorrent, In...
DEPLOYMENT... WHATTODO?            Images compression            Minification            Concatenation            Closure ...
SHOULDN’T HAVE TO HOME ROLL!            ‘yeoman build’         BitTorrent, Inc / 2013 Tech Talks   14Monday, February 11, 13
DOES THE BUILT VERSION WORK?            ‘yeoman server:dist’               *Still does reloads on your built files... try ...
GITHUB PAGES (DETOUR)            Just use the gh-pages for static file serving!            Stuff your ‘dist’ directory int...
GH PAGES AS A SUB-MODULE?            (Still detouring)            ‘git add submodule -b gh-pages git@REPO.git site’       ...
ROUND TRIP COMPLETE!            QUESTIONS?         BitTorrent, Inc / 2013 Tech Talks   19Monday, February 11, 13
OTHER YEOMAN TIDBITS            Alternate Yeoman project generators (chrome extension, etc)            Additional grunt ta...
Upcoming SlideShare
Loading in...5
×

BitTorrent TechTalks_yeoman_021113

142

Published on

A short overview of Yeoman for front-end workflow.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
142
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "BitTorrent TechTalks_yeoman_021113"

  1. 1. TECH TALKS Yeoman-powered web development | Patrick Williams http://yeoman.io BitTorrent, Inc / 2013 Tech Talks 01Monday, February 11, 13
  2. 2. INTRODUCTION GOAL? Everyone have Yeoman installed yet? ‘yeoman--help’ BitTorrent, Inc / 2013 Tech Talks 02Monday, February 11, 13
  3. 3. WHAT DO YOU GET FOR FREE? Project scaffolding Package manager Auto-reloading Automated testing/linting Fancy compression/build stuffs BitTorrent, Inc / 2013 Tech Talks 03Monday, February 11, 13
  4. 4. SHOULDERS OF GIANTS BitTorrent, Inc / 2013 Tech Talks 04 06Monday, February 11, 13
  5. 5. ‘YEOMAN INIT’ Require.js? Compass (is it sass/scss)? Bootstrap plugins? ‘app’ directory is where the magic happens ‘test’ is where more magic should happen ‘yeoman init -- help’ BitTorrent, Inc / 2013 Tech Talks 05Monday, February 11, 13
  6. 6. HIDES THE UGLY <!DOCTYPE html> <!--[if lt IE 7]> <html class=”no-js lt-ie9 lt-ie8 lt-ie7”> <![endif]--> <!--[if lt IE 7]> <html class=”no-js lt-ie9 lt-ie8”> <![endif]--> <!--[if lt IE 8]> <html class=”no-js lt-ie9”> <![endif]--> <!--[if gt IE 8]><!--> <html class=”no-js”> <![endif]--> BitTorrent, Inc / 2013 Tech Talks 06Monday, February 11, 13
  7. 7. ‘YEOMAN TEST’ Look in ‘test/index.html’ Jasmine vs. Mocha? Grunt task using phantomjs BitTorrent, Inc / 2013 Tech Talks 07Monday, February 11, 13
  8. 8. (function() { describe(‘Give it some context’, function() { describe(‘maybe a bit more context here’, function() it(‘should run here few assertions’, function() { //YoU sHould RUn me On TRAVIS-ci? }); }); }); })(); BitTorrent, Inc / 2013 Tech Talks 08Monday, February 11, 13
  9. 9. ‘YEOMAN SERVER’ Crack open another terminal window...this can just stay open Let’s take this opportunity to fix the bootstrap <link> BitTorrent, Inc / 2013 Tech Talks 09Monday, February 11, 13
  10. 10. ‘YEOMAN INSTALL’ Defers to Bower Tinyurl for git repos... just dumps them into a directory BitTorrent, Inc / 2013 Tech Talks 10Monday, February 11, 13
  11. 11. component.json { “dependencies”: { “underscore”: “1.4.3” Looks for git tag “v1.4.3” } } Same as package json for npm... just a different package manager. Uses ‘Semantic Versioning” BitTorrent, Inc / 2013 Tech Talks 11Monday, February 11, 13
  12. 12. BROWSER Did it work? Is ‘_’ available yet? Did you have to reload? BitTorrent, Inc / 2013 Tech Talks 12Monday, February 11, 13
  13. 13. DEPLOYMENT... WHATTODO? Images compression Minification Concatenation Closure compiler? BitTorrent, Inc / 2013 Tech Talks 13Monday, February 11, 13
  14. 14. SHOULDN’T HAVE TO HOME ROLL! ‘yeoman build’ BitTorrent, Inc / 2013 Tech Talks 14Monday, February 11, 13
  15. 15. DOES THE BUILT VERSION WORK? ‘yeoman server:dist’ *Still does reloads on your built files... try rebuilding* BitTorrent, Inc / 2013 Tech Talks 15Monday, February 11, 13
  16. 16. GITHUB PAGES (DETOUR) Just use the gh-pages for static file serving! Stuff your ‘dist’ directory into your gh-pages branch BitTorrent, Inc / 2013 Tech Talks 16Monday, February 11, 13
  17. 17. GH PAGES AS A SUB-MODULE? (Still detouring) ‘git add submodule -b gh-pages git@REPO.git site’ WARNING! Can’t use dist as submodule location because .git files will be deleted during build BitTorrent, Inc / 2013 Tech Talks 17Monday, February 11, 13
  18. 18. ROUND TRIP COMPLETE! QUESTIONS? BitTorrent, Inc / 2013 Tech Talks 19Monday, February 11, 13
  19. 19. OTHER YEOMAN TIDBITS Alternate Yeoman project generators (chrome extension, etc) Additional grunt tasks? .bowerre (change where your ‘components’ folder is placed BitTorrent, Inc / 2013 Tech Talks 20Monday, February 11, 13
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×