Deciphering Development Technologies

Webvisions Portland

8 May 2014

Phillip Kerman

@phillip

phillipkerman.com/wv2014

Expectations

  • client side
  • more breadth, less depth
  • test

Outline

  • Version Control
  • Package Managers
  • JS/CSS Frameworks
  • Automation
  • Test Driven Development

Terms, perspective, tips for learning

ROI learning

  • Assessing 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 with mystery.
  • Advocacy

Essentials

  • Version Control
  • Package Manager

Version Control

  • git (is not github)
  • ~90% is just:
    • git status
    • git add
    • git commit
    • git push
  • ~10% is:
    • git checkout -b (branch)
    • git merge

Version Control (demo)

Version Control

Learn Git Branching

Package Managers

  • Install node.js (http://nodejs.org/), and you'll have npm
  • Install bower
  • Discover and get
  • Manage and distribute

Package Managers

Install packages (usually from the web)

  • npm/bower install [package]
  • npm/bower update [package]
  • -g global flag
  • --saveflag adds dependency

Package Managers

Get dependencies for a project via its package.json or bower.json file

  • npm/bower install

Package Managers (demo)

JS Libraries and Frameworks

  • Library is a collection of utilities/functions
  • Libraries should work alongside other libraries (and within frameworks)
  • Frameworks always have some opinion how you should build upon them.

JS Libraries

  • jQuery
  • underscore (lodash)
  • three.js, D3.js, and many more

JS Frameworks

  • AngularJS, Backbone, Ember
  • binding
  • templating/rendering
  • dependency
  • components
  • routing

JS Frameworks

Learning

Compiling

CSS Frameworks

  • Bootstrap, Foundation, many others
  • Layout/style
  • Components
  • Transitions
  • Customization

CSS Preprocessors

  • LESS and SASS are the language
  • Countless frameworks and mixins to automate
  • CSS gets rendered

Automation

  • Grunt
  • Gulp
  • Grunt vs. Gulp: tinyurl.com/gruntvgulp
  • Plugins include:
    • minifying (uglify)
    • concatentation
    • linting
    • tests
  • Watch

Automation

Basic 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']);
}

Automation

Basic gulpfile.js

//npm install gulp --save-dev
var gulp = require('gulp');
//npm install gulp-uglify --save-dev
var uglify = require('gulp-uglify');

gulp.task('default', function() {
  gulp.src('./main.js')
    .pipe(uglify())
    .pipe(gulp.dest('./_dist/main.min.js'));
});
//keeps running
gulp.watch('./main.js',['default']);

Automation (demo)

TDD

Process

  • write failing tests
  • implement the minimum code to pass test
  • repeat

TDD

Basic syntax

						//spec:
describe('myAddFunction', function(){
   
   it('should know one and one is two', function(){
        expect(myAddFunction(1,1)).toEqual(2);
    });
});
//code to test
function myAddFunction(a,b){
	return null;
}

TDD (demo)

TDD

More

						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 out

  • In browser dev tools
  • Browserify (like Require.js)
  • Server side tooling

Please don't

Just use Yeoman

THE END

Phillip Kerman | @phillip

phillipkerman.com/wv2014