Deciphering development technologies

451 views

Published on

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

Published in: Software, Technology
  • Be the first to comment

  • Be the first to like this

Deciphering development technologies

  1. 1. DECIPHERING DEVELOPMENT TECHNOLOGIES WEBVISIONS PORTLAND 8 MAY 2014 Phillip Kerman @phillip
  2. 2. EXPECTATIONS clientside more breadth, less depth test
  3. 3. OUTLINE Version Control Package Managers JS/CSS Frameworks Automation TestDriven Development Terms, perspective, tips for learning
  4. 4. 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
  5. 5. ESSENTIALS Version Control Package Manager
  6. 6. VERSION CONTROL git(is notgithub) ~90%is just: gitstatus gitadd gitcommit gitpush ~10%is: gitcheckout-b (branch) gitmerge
  7. 7. VERSION CONTROL (DEMO) http://www.youtube.com/watch?v=SRn2UwWK7F0 0:00 / 6:41 git demo
  8. 8. Learn GitBranching VERSION CONTROL
  9. 9. PACKAGE MANAGERS Installnode.js ( ), and you'llhave npm Installbower Discover and get Manage and distribute http://nodejs.org/
  10. 10. PACKAGE MANAGERS Installpackages (usuallyfrom the web) npm/bower install[package] npm/bower update [package] -gglobalflag --saveflagadds dependency
  11. 11. PACKAGE MANAGERS Getdependencies for aprojectviaits package.json or bower.json file npm/bower install
  12. 12. PACKAGE MANAGERS (DEMO) http://www.youtube.com/watch?v=TztY4deEMz8 0:00 / 7:03 using npm to manage dependencies
  13. 13. 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.
  14. 14. JS LIBRARIES jQuery underscore (lodash) three.js, D3.js, and manymore
  15. 15. JS FRAMEWORKS AngularJS, Backbone, Ember binding templating/rendering dependency components routing
  16. 16. JS FRAMEWORKS Learning AngularJS tutorials: React.js library: egghead.io tinyurl.com/fbreact
  17. 17. COMPILING CoffeeScript TypeScript asm.js The Birth &Death of JavaScripttinyurl.com/banddjs
  18. 18. CSS FRAMEWORKS Bootstrap, Foundation, manyothers Layout/style Components Transitions Customization
  19. 19. CSS PREPROCESSORS LESS and SASS are the language Countless frameworks and mixins to automate CSS gets rendered
  20. 20. AUTOMATION Grunt Gulp Gruntvs. Gulp: Plugins include: minifying(uglify) concatentation linting tests Watch tinyurl.com/gruntvgulp
  21. 21. 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']); }
  22. 22. 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']);
  23. 23. AUTOMATION (DEMO) http://www.youtube.com/watch?v=9EL_mZjg4xk 0:00 / 7:15 demo using gulp for automation
  24. 24. TDD Process write failingtests implementthe minimum code to pass test repeat
  25. 25. TDD Basic syntax //spec: describe('myAddFunction',function(){ it('shouldknowoneandoneistwo',function(){ expect(myAddFunction(1,1)).toEqual(2); }); }); //codetotest functionmyAddFunction(a,b){ returnnull; }
  26. 26. TDD (DEMO) http://www.youtube.com/watch?v=YyjlaSRFy00 0:00 / 9:37 tdd demo
  27. 27. TDD More describe('myAddFunction',function(){ beforeEach(function(){ //setsomeglobals }); it('shouldknowoneandoneistwo',function(){ expect(myAddFunction(1,1)).toEqual(2); }); }); Also, mocks for integration testingand CI
  28. 28. (SOME) THINGS I LEFT OUT In browser devtools Browserify(like Require.js) Server side tooling
  29. 29. PLEASE DON'T Justuse Yeoman
  30. 30. THE END Phillip Kerman | @phillip phillipkerman.com/wv2014

×