Frontend Development

@

Picnic      Software

@basarat

TypeScript

Types + JavaScript of the future

TypeScript

Classes and Lambdas

     Source http://goo.gl/McnWTJ

Video http://goo.gl/HNnn0i

TypeScript

Discoverability

TypeScript

Refactoring

TypeScript

Generated DTO

Generated Services

TypeScript

TypeSafety is good

Not an all or nothing proposition

All our code is in TypeScript. But you can start using it quite quickly. 

  • Your JavaScript is TypeScript.
  • When it isn't you can type it. 
  • Most of the popular open source projects have a TypeScript definition (DefinitelyTyped)

RequireJS

Let the files manage their own ordering

Fast incremental compile https://github.com/TypeStrong/grunt-ts#fast-compile

Angular JS

Full stack. More than just a databinding framework (Routing, Directives)

AngularJS

I'm sure you've seen the google trend (http://goo.gl/psnLgv)

Other Frameworks

With TypeScript

Does not impose any restrictions on your code. 

Just works with JavaScript.

With TypeScript

AngularJS the bad

  • DI (good for testing but creates its own problems)
  • Routing (http://angular-route-segment.com/). Simpler than UI-State router.
  • Dynamically Typed Templates.

AtScript

AtScript Premier http://goo.gl/Fwczpf

class MyClass {
  methodA(name:string):int {
    var length:int = name.length;
    return length;
  }
}

Managing Application Links

linkto

Managing Application Links

Put it on $rootScope

At Dev Time

Easy to do from controllers

Grunt

Must to manage your frontend.

 

 

All it does

  • TypeScript -> JS compile
  • RequireJS -> single JS concatenation

 

  • SaSS -> CSS compile 
  • CSS + Vendor CSS -> Single CSS

 

  • Watches this stuff at dev time

TIP

Check in your node_modules folder

  • No dev machine setup
  • No build time delay
  • What happens if NPM is down 
  • What happens if NPM is exploited

Mocha

Let it do the clicking for you.

Prevents backend regressions and allows easier refactoring.

Mocha

Sample Spec

Mocha

  • Services are generated and shared between server and client
    • compiled TypeScript with `amd` for client and `commonjs` for testing
  • Isolate your Create, Get, Expect functions as these are reused
  • Use Promises!

Mocha

  • Replaced contract equivalent version of: 
    • $http: using request 
    • Custom Injector
    • Others

Mocha

Test users setup

Summary

  • TypeScript : Let the compiler work for you
  • AngularJS: Community
  • SaSS: Don't use CSS directly
  • Grunt: Some front-end compile pipeline
  • Mocha: Midway Tests are awesome

Picnic Software Frontend

By basarat

Picnic Software Frontend

  • 2,614