Flow in Action

Highlight the importance of static typing for the sake of your life.

Transcript

1. Flow In Action June 30, 2018
2. What are we gonna do? After a few years in hell (read: write programs dynamically), I learned that life can be easier when you write programs statically: 1. Bug’s Life 2. Type Checking and Lessons Learned 3. Flow: JavaScript Static Type Checker 4. Practical Flow
3. Bug’s Life
4. Bug’s Life-cycle Born accidentally Created during the process of writing programs due to the complexity of the programs and/or the incorrect way of solving problem. Bug Report Channel Reported by everyone except the creator himself. Debug Debugging is twice as hard as writing the code in the first place.
5. “Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live.” - Martin Golding
6. An ounce of prevention is worth a pound of cure it's easier to stop something from happening in the first place than to repair the damage after it has happened.
7. Prevention is better than a cure 1. Linter Discover problematic JavaScript code without running the actual code. 2. Static Type Checker Since debugging is twice as hard as writing code, we need to code smarter. Static type checking allows you to confidently write code faster, bigger, smarter. Unlike tests, it covers rarely-used code path better. 3. Tests Tests are slower and more expensive than static type checking but offers you higher guarantee of your program’s stability and consistency.
8. Type Checking and Lessons Learned
9. Type Checking The main purpose of a type system is to reduce possibilities for bugs in computer programs by defining interfaces between different parts of a computer program, and then checking that the parts have been connected in a consistent way.
10. Convert to supported interface
11. Type Checking Process Dynamic 1 Perform type checking at runtime Properties: • Able to perform features that difficult/impossible to verify statically: dynamic dispatch, downcasting, etc • Runtime overhead causes programs to run slower, bigger in size. Static 2 Perform type checking at compile-time Properties: • Compiled program runs faster, no runtime overhead. • Intuitive, don’t need to run the code path to verify the correctness.
13. Undefined is not a function “Don’t Check; Just Roll” guy
14. [ Flow ] [ Unsafe Code ] [ Flow ] [ Flow ] [ Flow ]
15. Lessons Learned It is a lot easier to revisit a codepath when it is statically typed. As it is harder to revisit a codepath when it is dynamically untyped.
16. Dynamic Codepath
17. Dynamic Codepath Now 3 Months Later
18. Static Codepath Always readable
19. Flow: JavaScript Static Type Checker
20. Flow: Installation 1. Install flow globally $ yarn global add flow-bin ; 2. Generate new .flowconfig for your project $ flow init ; 3. Add // @flow on top of your target file (configurable) 4. Run flow $ flow ;
21. Untyped
22. Type Annotations
23. Type Inference
24. Type Inference is not enough, possible bug is detected
25. Generic Type
26. Union Type feat. Type Refinement
27. Maybe Type
28. Mixed Type feat. Type Refinement
29. Soundness vs. Completeness Soundness The ability for a type checker to catch every single error that might happen at runtime. This comes at the cost of sometimes catching errors that will not actually happen at runtime. Completeness The ability for a type checker to only ever catch errors that would happen at runtime. This comes at the cost of sometimes missing errors that will happen at runtime. Both It’s like telling everyone to shut up, quietly. Flow sometimes has to make a tradeoff: being as sound and complete as possible; but tend to favor soundness over completeness, ensuring that code doesn’t have any bugs.
30. And more! Language • Type System • Types & Expressions • Subsets & Subtypes • Type Variance • Nominal & Structural Typing • Depth Subtyping • Width Subtyping • Type Refinements • Lazy Modes • And more.. Types • Type Annotations • Primitive Types • Literal Types • Variable Types • Function Types • Class Types • Interface Types • Generic Types • Union Types • Intersection Types • And more..
31. Practical Flow
32. Flow-typed: A central repository for Flow library definitions You will have your popular dependencies typed even though they were not written in Flow. 1. Install flow-typed globally $ yarn global add flow-typed ; 2. Pull libdefs (based on package.json) $ flow-typed install ; 3. You can use those types now
33. Apollo-codegen: Generate Typed GraphQL Query 1. Sync schema: $ apollo-codegen introspect-schema ; 2. Generate query types $ apollo-codegen generate --tag-name gql --target flow ;
34. (2) Apollo-codegen: Generated Notification Query
35. (3) Apollo-codegen: Notification Query Result 1
36. (4) Apollo-codegen: Notification Query Result 2
37. Summary 1. Life (read: debugging) is easier when the code is statically typed. 2. Refactor won’t be scary anymore if the code is statically typed. 3. It is harder to make a mistake (read: bug) than it is to make a program; when the code is statically typed. 4. Writing code is faster when the codebase is statically typed.
38. Summary (2) 1. Life (read: debugging) is easier when the code is statically typed. 2. Refactor won’t be scary anymore if the code is statically typed. 3. It is harder to make a mistake (read: bug) than it is to make a program; when the code is statically typed. 4. Writing code is faster when the codebase is statically typed.
39. Summary (3) 1. Life (read: debugging) is easier when the code is statically typed. 2. Refactor won’t be scary anymore if the code is statically typed. 3. It is harder to make a mistake (read: bug) than it is to make a program; when the code is statically typed. 4. Writing code is faster when the codebase is statically typed.
40. Kumparan Frontend Team Rizki Romadhoni Software Engineer Andhika Ventausa Engineering Manager Agastya Darma L Software Engineer ?You We are hiring! Join us at https://join.kumparan.com