SLIDE 1
@tejaskumar_ _ _
@tejaskumar_ _ _
Tejas
Like “contagious”
_ @tejaskumar _ _ Tejas Like contagious _ @tejaskumar _ _ in - - PowerPoint PPT Presentation
_ @tejaskumar _ _ Tejas Like contagious _ @tejaskumar _ _ in - - PowerPoint PPT Presentation
_ @tejaskumar _ _ Tejas Like contagious _ @tejaskumar _ _ in Berlin, Germany _ @tejaskumar _ _ _ @tejaskumar _ _ _ @tejaskumar _ _ TYPESCRIPT _ @tejaskumar _ _ _ @tejaskumar _ _ _ @tejaskumar _ _ _ @tejaskumar _ _
SLIDE 2
SLIDE 3
@tejaskumar_ _ _
in Berlin, Germany
SLIDE 4
@tejaskumar_ _ _
SLIDE 5
@tejaskumar_ _ _
SLIDE 6
@tejaskumar_ _ _
TYPESCRIPT
SLIDE 7
@tejaskumar_ _ _
SLIDE 8
@tejaskumar_ _ _
SLIDE 9
@tejaskumar_ _ _
SLIDE 10
@tejaskumar_ _ _
TYPESCRIPT
SLIDE 11
@tejaskumar_ _ _ https://2018.stateofjs.com/javascript-flavors/typescript/
SLIDE 12
@tejaskumar_ _ _
SLIDE 13
@tejaskumar_ _ _
Why?
SLIDE 14
@tejaskumar_ _ _
🤞
Contracts
SLIDE 15
@tejaskumar_ _ _
✍
Confidence
SLIDE 16
@tejaskumar_ _ _
📉
Scale
SLIDE 17
@tejaskumar_ _ _
Why TypeScript?
SLIDE 18
@tejaskumar_ _ _
Why TypeScript?
🤞 Contracts ✍ Confidence 📉 Scale
SLIDE 19
@tejaskumar_ _ _
Demo
SLIDE 20
@tejaskumar_ _ _
DESIGN SYSTEMS
SLIDE 21
@tejaskumar_ _ _
SLIDE 22
@tejaskumar_ _ _
SLIDE 23
@tejaskumar_ _ _
DESIGN SYSTEMS
SLIDE 24
@tejaskumar_ _ _ Kendo UI Aurora Backpack Bulb Salesforce Lightning Shopify Polaris WeWork Plasma
DESIGN SYSTEMS
SLIDE 25
@tejaskumar_ _ _ Material Design Operational UI Kendo UI Precise UI Blueprint Ant Design Aurora Backpack Bulb Kiwi Orbit Salesforce Lightning SAP OpenUI Shopify Polaris WeWork Plasma
DESIGN SYSTEMS
SLIDE 26
@tejaskumar_ _ _ Semantic UI Material Design Operational UI Kendo UI Precise UI Blueprint Ant Design Audi UI Kit Aurora Backpack Bulb eBay Skin IBM Carbon Kiwi Orbit Pusher Chameleon Salesforce Lightning SAP OpenUI Shopify Polaris Trello Nachos WeWork Plasma
DESIGN SYSTEMS
SLIDE 27
@tejaskumar_ _ _ Semantic UI Material Design Operational UI Kendo UI Reach UI Precise UI Blueprint Ant Design Aragon UI Audi UI Kit Aurora Backpack Base UI Bulb eBay Skin CBRE Blocks Elastic UI Primer Purple3 IBM Carbon Kiwi Orbit Office UI Fabric Pusher Chameleon Salesforce Lightning SAP OpenUI Shopify Polaris Trello Nachos WeWork Plasma
DESIGN SYSTEMS
SLIDE 28
@tejaskumar_ _ _
Why?
SLIDE 29
@tejaskumar_ _ _
🤞
Contracts
SLIDE 30
@tejaskumar_ _ _
✍
Confidence
SLIDE 31
@tejaskumar_ _ _
📉
Scale
SLIDE 32
@tejaskumar_ _ _
Why Design Systems?
SLIDE 33
@tejaskumar_ _ _
Why Design Systems?
🤞 Contracts ✍ Confidence 📉 Scale
SLIDE 34
@tejaskumar_ _ _
TS + 🧲
SLIDE 35
@tejaskumar_ _ _
SLIDE 36
@tejaskumar_ _ _
react-styleguidist
github.com / styleguidist / react-styleguidist
SLIDE 37
@tejaskumar_ _ _
C ❤ @iamsapegin
Thank you for react-styleguidist
SLIDE 38
@tejaskumar_ _ _
STYLEGUIDE
SLIDE 39
@tejaskumar_ _ _
TypeScript First
SLIDE 40
@tejaskumar_ _ _
Monaco
SLIDE 41
@tejaskumar_ _ _
Monaco
SLIDE 42
@tejaskumar_ _ _
Monaco Editor
SLIDE 43
@tejaskumar_ _ _
React
SLIDE 44
@tejaskumar_ _ _
Demo
SLIDE 45
@tejaskumar_ _ _
Takeaways
SLIDE 46
@tejaskumar_ _ _
Takeaways
- Static Type Analysis is Valuable 🤞 ✍ 📉
- Working with Monaco
- Run workers in separate threads
- Inject type declarations at run time
- Working with Hooks
- Pass mutable references via useRef
SLIDE 47
@tejaskumar_ _ _
Takeaways
- Learning === Hacks
- makeItWork()
.then(makeItRight) .then(makeItFast)
- !(one tool for all)
- Docs Contributions are Contributions
SLIDE 48
Thank You
tej.as twitter.com / tejaskumar_
SLIDE 49
Thank You
twitter.com / tejaskumar_ tej.as