Embed Size (px)
DESCRIPTION
A short overview of Yeoman for front-end workflow.
Citation preview
TECH TALKSYeoman-powered web development | Patrick Williams
BitTorrent, Inc / 2013 Tech Talks 01
http://yeoman.io
Monday, February 11, 13
BitTorrent, Inc / 2013 Tech Talks
INTRODUCTION
02
Everyone have Yeoman installed yet?
‘yeoman--help’
GOAL?
Monday, February 11, 13
BitTorrent, Inc / 2013 Tech Talks
WHAT DO YOU GET FOR FREE?
03
Project scaffolding
Package manager
Auto-reloading
Automated testing/linting
Fancy compression/build stuffs
Monday, February 11, 13
BitTorrent, Inc / 2013 Tech Talks 06BitTorrent, Inc / 2013 Tech Talks
SHOULDERS OF GIANTS
04
Monday, February 11, 13
BitTorrent, Inc / 2013 Tech Talks
‘YEOMAN INIT’
05
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’
Monday, February 11, 13
BitTorrent, Inc / 2013 Tech Talks
HIDES THE UGLY
06
<!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]-->
Monday, February 11, 13
BitTorrent, Inc / 2013 Tech Talks
‘YEOMAN TEST’
07
Look in ‘test/index.html’
Jasmine vs. Mocha?
Grunt task using phantomjs
Monday, February 11, 13
BitTorrent, Inc / 2013 Tech Talks 08
(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?
});
});
});
})();
Monday, February 11, 13
BitTorrent, Inc / 2013 Tech Talks
‘YEOMAN SERVER’
09
Crack open another terminal window...this can just stay open
Let’s take this opportunity to fix the bootstrap <link>
Monday, February 11, 13
BitTorrent, Inc / 2013 Tech Talks
‘YEOMAN INSTALL’
10
Defers to Bower
Tinyurl for git repos... just dumps them into a directory
Monday, February 11, 13
BitTorrent, Inc / 2013 Tech Talks 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”
Monday, February 11, 13
BitTorrent, Inc / 2013 Tech Talks
BROWSER
12
Did it work?
Is ‘_’ available yet?
Did you have to reload?
Monday, February 11, 13
BitTorrent, Inc / 2013 Tech Talks
DEPLOYMENT... WHATTODO?
13
Images compression
Minification
Concatenation
Closure compiler?
Monday, February 11, 13
BitTorrent, Inc / 2013 Tech Talks
SHOULDN’T HAVE TO HOME ROLL!
14
‘yeoman build’
Monday, February 11, 13
BitTorrent, Inc / 2013 Tech Talks
DOES THE BUILT VERSION WORK?
15
‘yeoman server:dist’*Still does reloads on your built files... try rebuilding*
Monday, February 11, 13
BitTorrent, Inc / 2013 Tech Talks
GITHUB PAGES (DETOUR)
16
Just use the gh-pages for static file serving!
Stuff your ‘dist’ directory into your gh-pages branch
Monday, February 11, 13
BitTorrent, Inc / 2013 Tech Talks
GH PAGES AS A SUB-MODULE?
17
‘git add submodule -b gh-pages [email protected] site’
WARNING! Can’t use dist as submodule location because .git files will be deleted during build
(Still detouring)
Monday, February 11, 13
BitTorrent, Inc / 2013 Tech Talks 19
ROUND TRIP COMPLETE!QUESTIONS?
Monday, February 11, 13
BitTorrent, Inc / 2013 Tech Talks
OTHER YEOMAN TIDBITS
20
Alternate Yeoman project generators (chrome extension, etc)
Additional grunt tasks?
.bowerre (change where your ‘components’ folder is placed
Monday, February 11, 13
