A Front-end Dev Stack in Visual Studio

Jasmine, AMD, RequireJS, Typescript, Knockout,

Node, Gulp, Side Waffle and how it all fits together

Created by Allen Rice, Sr. Architect at DriveTime

with help from Ryan Blatz, Chaz Guerrero and Eric Blatz

What I do at DriveTime

Agenda

New scripting language (TypeScript)
Legitimate dependency management (AMD & RequireJS)
Unit testing for the client side (Karma & Jasmine)
Proper build processes (Node & Gulp)
Package Management (npm & Bower)
Improved development tooling (Task Runner Explorer)
Wrapping it all up with a big picture view (Side Waffle)

A Dev stack built from lessons learned

Client side applications are getting serious,

our tooling needs to be up to par

A new language :

TypeScript

A superset of JavaScript
Compiled language with plenty of features

Optional typing, Compile-time type checking, Classes, Interfaces, Enums, Generics, Namespaces, Optional parameters and default parameter values, Tuples
These remove ambiguities in development techniques

Free , Open Source, Developed in the open
Built by Anders Hejlsberg
Comprehensive community built resources
Little to no risk to try

TypeScript + TypeLite

Demo!

dependency management

The answer is not List<string>

Dependencies are complex

We need something to do this for us

An easy solution: AMD

AMD, or Asynchronous Module Definition, is a
very widely adopted technique to define modules of JavaScript

It's built into TypeScript, and is very easy to use :

import ns = require("ns"); 
ns.CompiledMethodCall(true);

/// <amd-dependency path="unreferenced-code" />

You're going to need to load all
of these modules...

RequireJS can do a lot:

Knockout & Bundles

Knockout (components in version 3.2)

ko.components.register( 'minecraft-build-table' , {
    require: 'components/minecraft-build-table'
});

Html

<minecraft-build-table></minecraft-build-table>

RequireJS

bundles: {
     'dist/minecraft-bundle': [ 'components/minecraft-build-table' ]
}

Unit testing: Why?

"Oh, I didn't see that comment"

Unit testing our scripts

Large scale applications need to be unit tested

Give your developers a leg up by implementing the basics

import target = require("math-lib");
 
describe('our library: math-lib', () => {
    it('should be able to add', () => {
        var result = target.add(2, 2);		
		expect(result).toBe(4);
    });
});

Client Side builds

We're doing more client side stuff than ever before:

Generating sprites
Generating glyph fonts
Compiling LESS / SASS
Minification
TypeScript compilation
RequireJS optimization (bundling)

All of this stuff requires a legitimate place in our build process

Side note: Just like MsBuild, we need build configurations for the client side too

Client side builds - An illustration

Calls

Runs on

Downloads libraries
from

Compiles

etc

Packages? You mean nuget?

First thing is first, nuget is awesome

Package managers are differentiated by what

they contain and how they are used

contains node packages that are used at build time

contains client side packages that are used at run time

Some experiences with nuget, npm & bower

Overall - pretty similar, all are fairly easy to use

Standing up a private nuget repository is easy,

standing up a private npm repository is ???

Fixing a bug in a npm package

{
  "name": "Application.WebUI2",
  "version": "1.0.0",
  "devDependencies": {
    ...
    "gulp-tsc": "git://github.com/allenrice/gulp-tsc",
    ...
  }
}