Tem um tipo no meu javascript

Palestra realizada em Porto Alegre/RS durante o Insiter.

Com o advento das SPA (single page apps), o uso do Javascript não se limita apenas a validação de forms e chamadas ajax. Codificar regras de negócio complexas já faz parte do dia a dia de grande parte dos desenvolvedores JS. Mas, a medida que as linhas de código aumentam, como garantir que tudo está funcionando perfeitamente? Nesta talk falarei sobre o Flow e como ele pode ajudar na diminuição de erros de runtime e na definição de tipos específicos de negócio.

Transcript

1. TEM UM TIPO NO MEU JAVASCRIPT 1
2. ! 2
3. VALEU TIARLI 3
4. ! 4
5. ! 5
6. Matias H. Leidemer Software Dev @ Stickermule.com http://leidemer.com @matiasleidemer 6
7. DISCLAIMER 7
10. function sum(a, b) { return a + b; } sum(1, 1); // => ? 10
11. function sum(a, b) { return a + b; } sum(1, 1); // => 2 11
12. function sum(a, b) { return a + b; } sum("1", 1); // => ? 12
13. function sum(a, b) { return a + b; } sum("1", 1); // => "11" 13
14. function sum(a, b) { return a + b; } sum({}, []); // => ? 14
15. function sum(a, b) { return a + b; } sum({}, []); // => "[object Object]" 15
16. https://www.destroyallsoftware.com/ talks/wat 16
17. TYPES 17
18. STATIC TYPING "In a statically typed language, variables, parameters and members of objects have types that the compiler knows at compile time. The compiler can use that information to perform type checks and to optimize the compiled code." 18 — http://2ality.com/2013/09/types.html
19. public class Example { private static Integer sum(Integer a, Integer b) { return a + b; } public static void main(String[] args) { sum(5, "foo"); } } // javac Example.java // // Example.java:7: error: incompatible types: String cannot be converted to Integer // sum(5, "foo") 19
20. DYNAMIC TYPING "Dynamic type checking is the process of verifying the type safety of a program at runtime. (...) By definition, dynamic type checking may cause a program to fail at runtime. In some programming languages, it is possible to anticipate and recover from these failures. In others, type-checking errors are considered fatal." 20 — https://en.wikipedia.org/wiki/Type_system
21. # Ruby def sum(a, b) a + b end sum(1, '1') # => TypeError: String can't be coerced into Fixnum # from (irb):3:in `+' # from (irb):3:in `sum' # from (irb):5 21
22. // Javascript '3' * '4' 12 Number(true) 1 Number('123') 123 String(true) 'true' 22 — https://hackernoon.com/understanding-js-coercion-ff5684475bfc
24. FLOW IS A STATIC TYPE CHECKER FOR JAVASCRIPT 24
25. // @flow function sum(a: number, b: number): number { return a + b; } sum("1", 1); 25
26. // @flow function sum(a: number, b: number): number { return a + b; } sum("1", 1); 26
27. // @flow function sum(a: number, b: number): number { return a + b; } sum("1", 1); 27
28. › yarn run flow yarn run v1.3.2 $ /Users/matias/Desktop/insiter-poa/code/node_modules/.bin/flow Error: src/sum.js:7 7: sum("1", 1); ^^^ string. This type is incompatible with the expected param type of 3: function sum(a: number, b: number): number { ^^^^^^ number Found 1 error error Command failed with exit code 2. 28
29. // @flow function sum(a: number, b: number): number { return a + b; } sum(1, 1); 29
30. › yarn run flow yarn run v1.3.2 $ /Users/matias/Desktop/insiter-poa/code/node_modules/.bin/flow No errors! ✨ Done in 0.16s. 30
31. SETUP 31
32. yarn add --dev flow-bin yarn run flow init => .flowconfig 32
33. yarn add --dev flow-bin yarn run flow init => .flowconfig 33
34. [ignore] <PROJECT_ROOT>/lib/.* [include] [libs] [lints] [options] [strict] 34
35. // @flow function sum(a: number, b: number): number { return a + b; } 35
37. yarn add --dev babel-cli babel-preset-flow .babelrc { "presets": ["flow"] } 37
38. SHOW ME THE CODE 38
39. > Primitive Types > Literal Types > Mixed Types > Any Types > Maybe Types > Variable Types > Function Types > Object Types > Array Types > Tuple Types > Class Types > Type Aliases > Opaque Type Aliases > Interface Types > Generic Types > Union Types > Intersection Types > Typeof Types > Type Casting Expressions > Utility Types > Module Types > Comment Types 39
41. Primitives, Literals and Union primitives.js 41
42. Arrays arrays.js 42
43. Functions functions.js 43
44. Aliases aliases.js 44
45. Modules modules.js types.js 45
46. Business Logic business_logic.js 46
47. BENEFITS 47
48. > Simple syntax > Relatively easy to learn > Helps reducing bugs > Helps with business logic > Easy to integrate, even in big projects > Integrates nice with text editors > It's self documenting > Makes maintaining code safer 48
50. > https://github.com/matiasleidemer/flow-insiter > https://flow.org/ > https://www.destroyallsoftware.com/talks/wat > http://2ality.com/2013/09/types.html > https://en.wikipedia.org/wiki/Type_system > https://hackernoon.com/understanding-js-coercion- ff5684475bfc > https://www.saltycrane.com/flow-type-cheat-sheet/latest/ > http://www.adamsolove.com/js/flow/type/2016/04/13/ modeling-with-adts.html > http://thejameskyle.com/adopting-flow-and-typescript.html > https://github.com/rpl/flow-coverage-report > https://jcemer.com/types-in-javascript-what-you-should- care.html 50
51. ! 51