This Will Flow Your Mind

This talk is about flow, a static type-checker for JavaScript which is developed and maintained by Facebook. We have been using flow extensively at QuizUp for half a year now and it's been a great success in a big JS codebase. In this talk I will answer the following questions:

What is it?
Why use it?
What can it do?
What can't it do?
Lastly I will go over lessons learned and our experience with using flow.

Transcript

1. This Will Flow Your Mind @tryggivgy JSConf Iceland 2016 https://speakerdeck.com/tryggvigy/this-will-flow-your-mind
2. How To Find A Title For Your Talk *for dummies
3. STEP 1
4. STEP 2
5. STEP 3 THANK YOU
6. This Will Flow Your Mind @tryggivgy JSConf Iceland 2016 https://speakerdeck.com/tryggvigy/this-will-flow-your-mind
7. 1. WHAT IS IT 2. WHY USE IT 3. WHAT CAN IT DO 4. WHAT CAN IT NOT DO 5. LESSONS LEARNED
8. WHAT IS IT
9. LOW LOW LOW A STATIC TYPE CHECKER FOR JAVASCRIPT WHAT IS IT
10. Flow WHAT IS IT
11. Flow React WHAT IS IT
12. Flow React WHAT IS IT
13. WHAT IS IT
14. FLOW CHART WHAT IS IT
15. WHAT IS IT // @flow function addBangToNumber(num: number): string { return num + '!' } function addBangToNumber(num /*:number*/) /*:string*/ { return num + '!' }
16. WHY USE IT
17. function enforceObject(x) { if (typeof x === "object") return x else return {} } WHY USE IT
18. function enforceObject(x) { if (typeof x === "object") return x // x can still be null since `typeof null === "object"` else return {} } WHY USE IT
19. function enforceObject(x) { if (typeof x === "object" && x !== null) return x else return {} } WHY USE IT
20. function enforceObject(x: ?Object): Object { if (typeof x === "object" && x !== null) return x else return {} } WHY USE IT
21. WHAT CAN IT DO
22. WHAT CAN IT DO Autocompletion
23. WHAT CAN IT DO ES6+ async/await Promises Generators Arrow functions Destructuring Classes Modules Template strings let/const Spread
24. WHAT CAN IT DO
25. WHAT CAN IT DO
26. WHAT CAN IT DO REACT
27. WHAT CAN IT DO REACT - prop validation
28. WHAT CAN IT DO REACT - prop validation
29. WHAT CAN IT NOT DO
30. WHAT CAN IT NOT DO Warn about additional props not declared in a components Props type
32. IMMUTABLE IMMUTABLE IMMUTABLE Non-native data structures The more things change the more they stay immutable “ IMMUTABLE IMMUTABLE IMMUTABLE IMMUTABLE IMMUTABLE “ WHAT CAN IT NOT DO
33. WHAT CAN IT NOT DO
34. LESSONS LEARNED
35. LESSONS LEARNED Super easy to start using in an existing project
36. LESSONS LEARNED You don’t have to type-check everything
37. LESSONS LEARNED Avoid type laziness ❌ ✅
38. LESSONS LEARNED Types are great documentation
40. THANK YOU @tryggivgy https://speakerdeck.com/tryggvigy/this-will-flow-your-mind