deciphering development technologies
DESCRIPTION
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 emergeTRANSCRIPT
![Page 1: Deciphering development technologies](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c739584a7959e5208b4651/html5/thumbnails/1.jpg)
DECIPHERING DEVELOPMENT TECHNOLOGIESWEBVISIONS PORTLAND
8 MAY 2014
Phillip Kerman
@phillip
![Page 2: Deciphering development technologies](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c739584a7959e5208b4651/html5/thumbnails/2.jpg)
EXPECTATIONSclient sidemore breadth, less depthtest
![Page 3: Deciphering development technologies](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c739584a7959e5208b4651/html5/thumbnails/3.jpg)
![Page 4: Deciphering development technologies](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c739584a7959e5208b4651/html5/thumbnails/4.jpg)
OUTLINEVersion ControlPackage ManagersJS/CSS FrameworksAutomationTest Driven Development
Terms, perspective, tips for learning
![Page 5: Deciphering development technologies](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c739584a7959e5208b4651/html5/thumbnails/5.jpg)
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
![Page 6: Deciphering development technologies](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c739584a7959e5208b4651/html5/thumbnails/6.jpg)
ESSENTIALSVersion ControlPackage Manager
![Page 7: Deciphering development technologies](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c739584a7959e5208b4651/html5/thumbnails/7.jpg)
VERSION CONTROLgit (is not github)~90% is just:
git statusgit addgit commitgit push
~10% is:git checkout -b (branch)git merge
![Page 8: Deciphering development technologies](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c739584a7959e5208b4651/html5/thumbnails/8.jpg)
VERSION CONTROL (DEMO)http://www.youtube.com/watch?v=SRn2UwWK7F0
0:00 / 6:41
git demo
![Page 10: Deciphering development technologies](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c739584a7959e5208b4651/html5/thumbnails/10.jpg)
PACKAGE MANAGERSInstall node.js ( ), and you'll have npmInstall bowerDiscover and getManage and distribute
http://nodejs.org/
![Page 11: Deciphering development technologies](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c739584a7959e5208b4651/html5/thumbnails/11.jpg)
PACKAGE MANAGERSInstall packages (usually from the web)
npm/bower install [package]npm/bower update [package]-g global flag
--saveflag adds dependency
![Page 12: Deciphering development technologies](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c739584a7959e5208b4651/html5/thumbnails/12.jpg)
PACKAGE MANAGERSGet dependencies for a project via its package.json or bower.json
file
npm/bower install
![Page 13: Deciphering development technologies](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c739584a7959e5208b4651/html5/thumbnails/13.jpg)
PACKAGE MANAGERS (DEMO)http://www.youtube.com/watch?v=TztY4deEMz8
0:00 / 7:03
using npm to manage dependencies
![Page 14: Deciphering development technologies](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c739584a7959e5208b4651/html5/thumbnails/14.jpg)
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.
![Page 15: Deciphering development technologies](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c739584a7959e5208b4651/html5/thumbnails/15.jpg)
JS LIBRARIESjQueryunderscore (lodash)three.js, D3.js, and many more
![Page 16: Deciphering development technologies](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c739584a7959e5208b4651/html5/thumbnails/16.jpg)
JS FRAMEWORKSAngularJS, Backbone, Emberbindingtemplating/renderingdependencycomponentsrouting
![Page 17: Deciphering development technologies](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c739584a7959e5208b4651/html5/thumbnails/17.jpg)
JS FRAMEWORKSLearning
AngularJS tutorials: React.js library:
egghead.iotinyurl.com/fbreact
![Page 18: Deciphering development technologies](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c739584a7959e5208b4651/html5/thumbnails/18.jpg)
COMPILINGCoffeeScriptTypeScriptasm.js
The Birth & Death of JavaScripttinyurl.com/banddjs
![Page 19: Deciphering development technologies](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c739584a7959e5208b4651/html5/thumbnails/19.jpg)
CSS FRAMEWORKSBootstrap, Foundation, many othersLayout/styleComponentsTransitionsCustomization
![Page 20: Deciphering development technologies](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c739584a7959e5208b4651/html5/thumbnails/20.jpg)
CSS PREPROCESSORSLESS and SASS are the languageCountless frameworks and mixins to automateCSS gets rendered
![Page 21: Deciphering development technologies](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c739584a7959e5208b4651/html5/thumbnails/21.jpg)
AUTOMATIONGruntGulpGrunt vs. Gulp: Plugins include:
minifying (uglify)concatentationlintingtests
Watch
tinyurl.com/gruntvgulp
![Page 22: Deciphering development technologies](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c739584a7959e5208b4651/html5/thumbnails/22.jpg)
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']);}
![Page 23: Deciphering development technologies](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c739584a7959e5208b4651/html5/thumbnails/23.jpg)
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']);
![Page 24: Deciphering development technologies](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c739584a7959e5208b4651/html5/thumbnails/24.jpg)
AUTOMATION (DEMO)http://www.youtube.com/watch?v=9EL_mZjg4xk
0:00 / 7:15
demo using gulp for automation
![Page 25: Deciphering development technologies](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c739584a7959e5208b4651/html5/thumbnails/25.jpg)
TDDProcess
write failing testsimplement the minimum code to pass testrepeat
![Page 26: Deciphering development technologies](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c739584a7959e5208b4651/html5/thumbnails/26.jpg)
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;}
![Page 27: Deciphering development technologies](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c739584a7959e5208b4651/html5/thumbnails/27.jpg)
TDD (DEMO)http://www.youtube.com/watch?v=YyjlaSRFy00
0:00 / 9:37
tdd demo
![Page 28: Deciphering development technologies](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c739584a7959e5208b4651/html5/thumbnails/28.jpg)
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
![Page 29: Deciphering development technologies](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c739584a7959e5208b4651/html5/thumbnails/29.jpg)
(SOME) THINGS I LEFT OUTIn browser dev toolsBrowserify (like Require.js)Server side tooling
![Page 30: Deciphering development technologies](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c739584a7959e5208b4651/html5/thumbnails/30.jpg)
PLEASE DON'TJust use Yeoman
![Page 31: Deciphering development technologies](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c739584a7959e5208b4651/html5/thumbnails/31.jpg)
THE ENDPhillip Kerman | @phillip
phillipkerman.com/wv2014