NEW STUFF IN WEB DEVELOPMENT

at DriveTime!


Jenkins, Jasmine, Karma, AMD, RequireJS, 

Typescript, Web Components, Node & Gulp


Created by Allen Rice with help from

Ryan Blatz, Chaz Guerrero and Eric Blatz


Client side applications are getting serious, our tooling needs to be up to par (Builds, Package Managers, Languages, Features)

 

Jenkins is a real CI platform where real, 
in depth automation can thrive

Automation needs to be easy, 
so your CI platform better be easy to use!

Demo!
 

Client side builds

Calls
Runs on
Downloads libraries
from
Compiles

Code Organization: AMD

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

AMD is built into TypeScript, and is  very easy to use : 
import ns = require("ns"); 
ns.CompiledMethodCall(true);

We need a way to consume AMD

      


CV.Search.viewModel.filterBoxes.financing.CreditBucketModel
becomes
financing.CreditBucketModel

Unit testing with Karma and Jasmine

Runner:
Framework:





Demo

Web Components!
AKA Knockout 3.2


An entirely new way to build components

Loading and scoping is done for you

There is a standard life cycle to follow and hook into

Provides a very clean way to re-use components!

Syntax



<dealership-selector params="data: someData">
</dealership-selector>
or 
<!-- ko component: { name: "dealership-selector", data: someData } -->
<!-- /ko -->
and  
ko.components.register("dealership-selector", {
    template: ..., // Element name, or source URL, or a function 
                   // that asynchronously returns a node array,
    viewModel: ... // Object, or AMD module name, or a function that
                   // asynchronously returns an object
});

examples

Entire pages as components
<ko-component name="{{ route().page }}" route="{{ route }}">
</ko-component>

Date pickers
<date-picker params="value: someObservable" />

Something in between
<override-field params="type: apr" />

What was all this again?


Introduction of a real CI platform

Improved build process

Improvements in client development

Recap:
Introduction of a real CI platform


Jenkins will be our build server, working along side TFS

Less down time due to build issues

Vast capabilities with minimal work

RECAP:
INTRODUCTION OF A new Build process

Gulp will run build processes for our client side related code

Gives us  a solid platform for putting build related work

Works out of the box already

RECAP: 
Improvements in client development

AMD modules
  • Change the way we write and share client side code
  • Fix maintenance nightmares
KO 3.2 components
  • Change the way we write components 
RequireJS optimization
  • Fix bundling and minfication nightmares
  • Allow us to extremely tweak our UX

Resources (1/3)

Resources (2/3)

Resources (3/3)

New Web Dev Stack

By Allen Rice

Made with Slides.com

New Web Dev Stack

A brief overview of the new technology that is going into the buy from public project and web development in general at DriveTime

  • 927

More from Allen Rice