LESSONS FROM
alm.tools
![](https://s3.amazonaws.com/media-p.slid.es/uploads/9743/images/2367618/icon.png)
Background
Top Contributor TypeScript http://stackoverflow.com/tags/typescript/topusers
Member of all the significant TypeScript teams on Github
Identified Issues and helped with a bunch of stuff in the compiler
https://github.com/Microsoft/TypeScript/issues/created_by/basarat
I ♥ TypeScript
Atom TypeScript
Downloads: 217K
![](https://s3.amazonaws.com/media-p.slid.es/uploads/9743/images/2324896/CD3Pca-UsAAvKCE.jpg)
Then VSCode came
Share the awesome
![](https://s3.amazonaws.com/media-p.slid.es/uploads/9743/images/2324935/size.png)
npm i alm -g
alm -o
![](https://s3.amazonaws.com/media-p.slid.es/uploads/9743/images/2325075/hoverInfo.gif)
Stable NPM releases soon
Choices
- Browser Code Editor
- UI Framework
- WorkFlow (quick compile run lifecycle)
- FrontEnd - BackEnd Communication
- BackEnd workers
- TypeScript compiler / Language Service
Code Editor
![](https://s3.amazonaws.com/media-p.slid.es/uploads/9743/images/2325093/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/9743/images/2325172/pasted-from-clipboard.png)
Most famous: Chrome Devtools
Most famous: Cloud9, Github Online
Code Mirror
![](https://s3.amazonaws.com/media-p.slid.es/uploads/9743/images/2325175/pasted-from-clipboard.png)
React JS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/9743/images/2330037/reactjs.png)
Data In Data Out
- Maps really well to TypeScript
- Is just the View
Peaceful
Co-existance
![](https://s3.amazonaws.com/media-p.slid.es/uploads/9743/images/2330046/pasted-from-clipboard.png)
Semantic View Atom-TypeScript
Peaceful Co-existance
![](https://s3.amazonaws.com/media-p.slid.es/uploads/9743/images/2325075/hoverInfo.gif)
CSS in JS
*TypeScript
<div class="root">
<div class="hello">
Hello
</div>
<div class="me">
is it me
</div>
</div>
<div class="look">
you are looking for
</div>
CSS in JS
.root {
display: flex;
flex-direction: row;
.hello {
flex: 1
}
}
CSS in JS
<gls.ContentHorizontal>
<gls.Content>
Hello
</gls.Content>
<gls.Flex/>
<gls.Content>
is it me
</gls.Content>
</gls.ContentHorizontal>
<gls.Content>
you are looking for
</gls.Content>
GLS : http://basarat.com/gls
Webpack
![](https://s3.amazonaws.com/media-p.slid.es/uploads/9743/images/2330257/webpack.png)
Stop
grunting / gulping
npm run foo
![](https://s3.amazonaws.com/media-p.slid.es/uploads/9743/images/2330282/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/9743/images/2330295/pasted-from-clipboard.png)
WebPack API
TypeScript
More than just another transpiler
Lines in parser.ts : 6k~
Lines in checker.ts: 18K~
Lines in services.ts : 8k~
Thank You
Lessons from alm.tools
By basarat
Lessons from alm.tools
- 3,868