Frontend Development
@
Picnic Software
@basarat
![](https://s3.amazonaws.com/media-p.slid.es/uploads/basarat/images/861626/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/basarat/images/862574/pasted-from-clipboard.png)
TypeScript
Types + JavaScript of the future
![](https://s3.amazonaws.com/media-p.slid.es/uploads/basarat/images/861733/pasted-from-clipboard.png)
TypeScript
Classes and Lambdas
![](https://s3.amazonaws.com/media-p.slid.es/uploads/basarat/images/861643/pasted-from-clipboard.png)
Source http://goo.gl/McnWTJ
Video http://goo.gl/HNnn0i
TypeScript
Discoverability
![](https://s3.amazonaws.com/media-p.slid.es/uploads/basarat/images/839251/pasted-from-clipboard.png)
TypeScript
Refactoring
![](https://s3.amazonaws.com/media-p.slid.es/uploads/basarat/images/839292/pasted-from-clipboard.png)
TypeScript
Generated DTO
![](https://s3.amazonaws.com/media-p.slid.es/uploads/basarat/images/839261/pasted-from-clipboard.png)
Generated Services
![](https://s3.amazonaws.com/media-p.slid.es/uploads/basarat/images/839279/pasted-from-clipboard.png)
TypeScript
TypeSafety is good
![](https://s3.amazonaws.com/media-p.slid.es/uploads/basarat/images/839308/pasted-from-clipboard.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/basarat/images/839117/pasted-from-clipboard.png)
Fast incremental compile https://github.com/TypeStrong/grunt-ts#fast-compile
Angular JS
Full stack. More than just a databinding framework (Routing, Directives)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/basarat/images/862380/pasted-from-clipboard.png)
AngularJS
I'm sure you've seen the google trend (http://goo.gl/psnLgv)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/basarat/images/839035/pasted-from-clipboard.png)
Other Frameworks
![](https://s3.amazonaws.com/media-p.slid.es/uploads/basarat/images/839077/pasted-from-clipboard.png)
With TypeScript
Does not impose any restrictions on your code.
Just works with JavaScript.
With TypeScript
![](https://s3.amazonaws.com/media-p.slid.es/uploads/basarat/images/839090/pasted-from-clipboard.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/basarat/images/861608/pasted-from-clipboard.png)
Managing Application Links
Put it on $rootScope
![](https://s3.amazonaws.com/media-p.slid.es/uploads/basarat/images/861619/pasted-from-clipboard.png)
At Dev Time
Easy to do from controllers
![](https://s3.amazonaws.com/media-p.slid.es/uploads/basarat/images/861664/pasted-from-clipboard.png)
Grunt
Must to manage your frontend.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/basarat/images/839134/pasted-from-clipboard.png)
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.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/basarat/images/861684/pasted-from-clipboard.png)
Mocha
Sample Spec
![](https://s3.amazonaws.com/media-p.slid.es/uploads/basarat/images/861681/pasted-from-clipboard.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/basarat/images/861700/pasted-from-clipboard.png)
Mocha
Test users setup
![](https://s3.amazonaws.com/media-p.slid.es/uploads/basarat/images/861705/pasted-from-clipboard.png)
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,675