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