FOR THE ORIGINAL (WITH VIDEOS) PLEASE GO TO: http://www.phillipkerman.com/wv2014 Do know the difference between Backbone and Bootstrap? Do you consider “Grunt” and “Gulp” guttural sounds? The array of technologies a web developer is expected to master is daunting if not absurd. This session offers a high-level overview of everything from frameworks to automation tools to package manages by providing conceptual models that ensure you understand what each technology offers. By attending this session, you will: Be exposed to popular JavaScript libraries and frameworks (and understand the differences) Learn what a package manager offers See how an automation tool such as Grunt or Gulp can help you Understand the basics of test driven development Get strategies on how to evaluate new technologies in order to continually teach yourself new technologies as they emerge

1. DECIPHERING DEVELOPMENT TECHNOLOGIES
WEBVISIONS PORTLAND
8 MAY 2014
Phillip Kerman
@phillip

2. EXPECTATIONS
clientside
more breadth, less depth
test

4. OUTLINE
Version Control
Package Managers
JS/CSS Frameworks
Automation
TestDriven Development
Terms, perspective, tips for learning

5. ROI LEARNING
Assessingwhat's "essential"
Consider how itapplies to your project. (Be goaloriented.)
Learningon the fly.
Better to do less and understand itvs. doingmore with
mystery.
Advocacy

6. ESSENTIALS
Version Control
Package Manager

7. VERSION CONTROL
git(is notgithub)
~90%is just:
gitstatus
gitadd
gitcommit
gitpush
~10%is:
gitcheckout-b (branch)
gitmerge

8. VERSION CONTROL (DEMO)
http://www.youtube.com/watch?v=SRn2UwWK7F0
0:00 / 6:41
git demo

9. Learn GitBranching
VERSION CONTROL

10. PACKAGE MANAGERS
Installnode.js ( ), and you'llhave npm
Installbower
Discover and get
Manage and distribute
http://nodejs.org/

11. PACKAGE MANAGERS
Installpackages (usuallyfrom the web)
npm/bower install[package]
npm/bower update [package]
-gglobalflag
--saveflagadds dependency

12. PACKAGE MANAGERS
Getdependencies for aprojectviaits package.json or bower.json
file
npm/bower install

13. PACKAGE MANAGERS (DEMO)
http://www.youtube.com/watch?v=TztY4deEMz8
0:00 / 7:03
using npm to manage dependencies

14. JS LIBRARIES AND FRAMEWORKS
Libraryis acollection of utilities/functions
Libraries should work alongside other libraries (and within
frameworks)
Frameworks always have some opinion how you should build
upon them.

15. JS LIBRARIES
jQuery
underscore (lodash)
three.js, D3.js, and manymore

16. JS FRAMEWORKS
AngularJS, Backbone, Ember
binding
templating/rendering
dependency
components
routing

17. JS FRAMEWORKS
Learning
AngularJS tutorials:
React.js library:
egghead.io
tinyurl.com/fbreact

18. COMPILING
CoffeeScript
TypeScript
asm.js
The Birth &Death of JavaScripttinyurl.com/banddjs

19. CSS FRAMEWORKS
Bootstrap, Foundation, manyothers
Layout/style
Components
Transitions
Customization

20. CSS PREPROCESSORS
LESS and SASS are the language
Countless frameworks and mixins to automate
CSS gets rendered

21. AUTOMATION
Grunt
Gulp
Gruntvs. Gulp:
Plugins include:
minifying(uglify)
concatentation
linting
tests
Watch
tinyurl.com/gruntvgulp

22. AUTOMATION
Basic GruntFile.js
module.exports=function(grunt){
grunt.initConfig({
pkg:grunt.file.readJSON('package.json'),
//setupuglify
uglify:{
build:{
src:'main.js',
dest:'_dist/main.min.js'
}
},
more:{demo:"na"}
});
//intopackage.jsonvia:npminstallgrunt-contrib-uglify--save-dev
grunt.loadNpmTasks('grunt-contrib-uglify');
//registerwhattodowhenusingthedefault'grunt'command
grunt.registerTask('default',['uglify','more']);
}

23. AUTOMATION
Basic gulpfile.js
//npminstallgulp--save-dev
vargulp=require('gulp');
//npminstallgulp-uglify--save-dev
varuglify=require('gulp-uglify');
gulp.task('default',function(){
gulp.src('./main.js')
.pipe(uglify())
.pipe(gulp.dest('./_dist/main.min.js'));
});
//keepsrunning
gulp.watch('./main.js',['default']);

24. AUTOMATION (DEMO)
http://www.youtube.com/watch?v=9EL_mZjg4xk
0:00 / 7:15
demo using gulp for automation

25. TDD
Process
write failingtests
implementthe minimum code to pass test
repeat

26. TDD
Basic syntax
//spec:
describe('myAddFunction',function(){
it('shouldknowoneandoneistwo',function(){
expect(myAddFunction(1,1)).toEqual(2);
});
});
//codetotest
functionmyAddFunction(a,b){
returnnull;
}

27. TDD (DEMO)
http://www.youtube.com/watch?v=YyjlaSRFy00
0:00 / 9:37
tdd demo

28. TDD
More
describe('myAddFunction',function(){
beforeEach(function(){
//setsomeglobals
});
it('shouldknowoneandoneistwo',function(){
expect(myAddFunction(1,1)).toEqual(2);
});
});
Also, mocks for integration testingand CI

29. (SOME) THINGS I LEFT OUT
In browser devtools
Browserify(like Require.js)
Server side tooling

30. PLEASE DON'T
Justuse Yeoman

31. THE END
Phillip Kerman | @phillip
phillipkerman.com/wv2014