bittorrent techtalks_yeoman_021113
Post on 29-Nov-2014
247 Views
Preview:
DESCRIPTION
TRANSCRIPT
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 git@REPO.git 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
top related