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

Learn Git Branching

VERSION CONTROL

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