typescript design systems - react finland · why typescript? # contracts confidence % scale....
TRANSCRIPT
@tejaskumar___
!
@tejaskumar___
TejasLike “contagious”
@tejaskumar___
in Berlin, Germany "
@tejaskumar___
@tejaskumar___
@tejaskumar___
TYPESCRIPT
@tejaskumar___
@tejaskumar___
@tejaskumar___
@tejaskumar___
TYPESCRIPT
@tejaskumar___https://2018.stateofjs.com/javascript-flavors/typescript/
@tejaskumar___
@tejaskumar___
Why?
@tejaskumar___
🤝Contracts
@tejaskumar___
✍Confidence
@tejaskumar___
📈Scale
@tejaskumar___
Why TypeScript?
@tejaskumar___
Why TypeScript?
🤝 Contracts
✍ Confidence
📈 Scale
@tejaskumar___
Demo
@tejaskumar___
DESIGN SYSTEMS
@tejaskumar___
@tejaskumar___
@tejaskumar___
DESIGN SYSTEMS
@tejaskumar___
Kendo UI AuroraBackpack
BulbSalesforce Lightning Shopify Polaris
WeWork Plasma
DESIGN SYSTEMS
@tejaskumar___
Material Design
Operational UI
Kendo UI
Precise UIBlueprint
Ant Design
AuroraBackpack
BulbKiwi Orbit
Salesforce Lightning
SAP OpenUI
Shopify Polaris
WeWork Plasma
DESIGN SYSTEMS
@tejaskumar___
Semantic UI
Material Design
Operational UI
Kendo UI
Precise UIBlueprint
Ant DesignAudi UI Kit
AuroraBackpack
Bulb
eBay SkinIBM Carbon
Kiwi Orbit
Pusher Chameleon
Salesforce Lightning
SAP OpenUI
Shopify Polaris
Trello Nachos
WeWork Plasma
DESIGN SYSTEMS
@tejaskumar___
Semantic UI
Material Design
Operational UI
Kendo UI
Reach UI
Precise UIBlueprint
Ant Design
Aragon UIAudi UI Kit
AuroraBackpack
Base UI
Bulb
eBay Skin
CBRE Blocks
Elastic UI
PrimerPurple3
IBM Carbon
Kiwi Orbit
Office UI Fabric
Pusher Chameleon
Salesforce Lightning
SAP OpenUI
Shopify Polaris
Trello Nachos
WeWork Plasma
DESIGN SYSTEMS
@tejaskumar___
Why?
@tejaskumar___
🤝Contracts
@tejaskumar___
✍Confidence
@tejaskumar___
📈Scale
@tejaskumar___
Why Design Systems?
@tejaskumar___
Why Design Systems?
🤝 Contracts
✍ Confidence
📈 Scale
@tejaskumar___
TS + 🧱
@tejaskumar___
@tejaskumar___
react-styleguidistgithub.com / styleguidist / react-styleguidist
@tejaskumar___
C ❤ @iamsapeginThank you for react-styleguidist
@tejaskumar___
STYLEGUIDE
@tejaskumar___
TypeScript First
@tejaskumar___
Monaco
@tejaskumar___
Monaco
@tejaskumar___
Monaco Editor
@tejaskumar___
React
@tejaskumar___
Demo
@tejaskumar___
Takeaways
@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
@tejaskumar___
Takeaways•Learning === Hacks
•makeItWork().then(makeItRight).then(makeItFast)
•!(one tool for all)
• Docs Contributions are Contributions
