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,676