DECIPHERING DEVELOPMENT TECHNOLOGIESWEBVISIONS PORTLAND
8 MAY 2014
Phillip Kerman
@phillip
EXPECTATIONSclient sidemore breadth, less depthtest
OUTLINEVersion ControlPackage ManagersJS/CSS FrameworksAutomationTest Driven Development
Terms, perspective, tips for learning
ROI LEARNINGAssessing what's "essential"Consider how it applies to your project. (Be goal oriented.)Learning on the fly.Better to do less and understand it vs. doing more withmystery.Advocacy
ESSENTIALSVersion ControlPackage Manager
VERSION CONTROLgit (is not github)~90% is just:
git statusgit addgit commitgit push
~10% is:git checkout -b (branch)git merge
VERSION CONTROL (DEMO)http://www.youtube.com/watch?v=SRn2UwWK7F0
0:00 / 6:41
git demo
PACKAGE MANAGERSInstall node.js ( ), and you'll have npmInstall bowerDiscover and getManage and distribute
http://nodejs.org/
PACKAGE MANAGERSInstall packages (usually from the web)
npm/bower install [package]npm/bower update [package]-g global flag
--saveflag adds dependency
PACKAGE MANAGERSGet dependencies for a project via its package.json or bower.json
file
npm/bower install
PACKAGE MANAGERS (DEMO)http://www.youtube.com/watch?v=TztY4deEMz8
0:00 / 7:03
using npm to manage dependencies
JS LIBRARIES AND FRAMEWORKSLibrary is a collection of utilities/functionsLibraries should work alongside other libraries (and withinframeworks)Frameworks always have some opinion how you should buildupon them.
JS LIBRARIESjQueryunderscore (lodash)three.js, D3.js, and many more
JS FRAMEWORKSAngularJS, Backbone, Emberbindingtemplating/renderingdependencycomponentsrouting
JS FRAMEWORKSLearning
AngularJS tutorials: React.js library:
egghead.iotinyurl.com/fbreact
COMPILINGCoffeeScriptTypeScriptasm.js
The Birth & Death of JavaScripttinyurl.com/banddjs
CSS FRAMEWORKSBootstrap, Foundation, many othersLayout/styleComponentsTransitionsCustomization
CSS PREPROCESSORSLESS and SASS are the languageCountless frameworks and mixins to automateCSS gets rendered
AUTOMATIONGruntGulpGrunt vs. Gulp: Plugins include:
minifying (uglify)concatentationlintingtests
Watch
tinyurl.com/gruntvgulp
AUTOMATIONBasic GruntFile.js
module.exports = function(grunt){ grunt.initConfig({ pkg: grunt.file.readJSON('package.json'),
//set up uglify uglify: { build: { src: 'main.js', dest: '_dist/main.min.js' } }, more: { demo: "na"} });
//into package.json via: npm install grunt-contrib-uglify --save-dev grunt.loadNpmTasks('grunt-contrib-uglify');
//register what to do when using the default 'grunt' command grunt.registerTask('default', ['uglify', 'more']);}
AUTOMATIONBasic gulpfile.js
//npm install gulp --save-devvar gulp = require('gulp');//npm install gulp-uglify --save-devvar uglify = require('gulp-uglify');
gulp.task('default', function() { gulp.src('./main.js') .pipe(uglify()) .pipe(gulp.dest('./_dist/main.min.js'));});//keeps runninggulp.watch('./main.js',['default']);
AUTOMATION (DEMO)http://www.youtube.com/watch?v=9EL_mZjg4xk
0:00 / 7:15
demo using gulp for automation
TDDProcess
write failing testsimplement the minimum code to pass testrepeat
TDDBasic syntax
//spec:describe('myAddFunction', function(){ it('should know one and one is two', function(){ expect(myAddFunction(1,1)).toEqual(2); });});
//code to testfunction myAddFunction(a,b){ return null;}
TDD (DEMO)http://www.youtube.com/watch?v=YyjlaSRFy00
0:00 / 9:37
tdd demo
TDDMore
describe('myAddFunction', function(){ beforeEach(function() { //set some globals });
it('should know one and one is two', function(){ expect(myAddFunction(1,1)).toEqual(2); });});
Also, mocks for integration testing and CI
(SOME) THINGS I LEFT OUTIn browser dev toolsBrowserify (like Require.js)Server side tooling
PLEASE DON'TJust use Yeoman
THE ENDPhillip Kerman | @phillip
phillipkerman.com/wv2014
