Reason - React Meetup #20

Transcript

1. @anapbastos ANA BASTOS github.com/anabastos anabastos.me Software Developer na Quanto
2. JSLADIES fb.com/jsladiesbr twitter.com/jsladiessp meetup.com/JsLadies-BR/
4. • Qual a sua necessidade? • Um pouco sobre o que é o ReasonML / OCaml • Detalhes da linguagem • Um pouco sobre o ReasonReact
6. WTFJS https://github.com/denysdovhan/wtfjs
9. Linguagens que compilam JS são os novos frameworks JS.
10. State of Javascript 2017
13. StackOverFlow 107 Perguntas 7 Perguntas esse mês
15. https://github.com/BuckleScript/bucklescript#immutable-data-structures JS(Immutable) 3415ms 1186ms Reason Tempo de execução
16. https://github.com/neonsquare/bucklescript-benchmark JS Object.assign 710.390ms 8263.039ms Reason Records / Lists
17. https://github.com/BuckleScript/bucklescript#immutable-data-structures JS(Immutable) 55.3KBytes 899Bytes Reason Tamanho compilado
18. O que é ReasonML?
19. “it's a new syntax and toolchain powered by the battle-tested language.”
20. Uma sintaxe em cima do OCaml
21. Mesmo ecossistema React e workflow NPM/YARN
22. Mantida pelo Facebook Se tornou open source em 2016 Criado pelo Jordan Walke (criador do React) Sintaxe baseada no Ocaml e inspirada em Rust e JS
23. “ ”
25. O que é OCaml?
26. Linguagem da familia ML(SML, OCaml) Sistema de tipos muito poderoso É multi-paradigma com um suporte ao estilo funcional Hack do FB tem muitas ferramentas internas em OCaml.
27. Ocaml AST ReasonML Syntax refmt Parser BUCKLESCRIPT OCAMLOPT OCaml Syntax OCAMLC Javascript NativeCode ByteCode .ml == .re
29. Modulo ReasonML CommonJS / Webpack
30. • Libraries: Biblioteca Ocaml, interop simples javascript. • Build System: Bucklescript build tools, webpack bs-loader • Package Management: npm
31. Trade-offs • Mantenabilidade • Seguro(Tipos, Imutabilidade) • Expressividade • Experiência do desenvolvedor • Muito rápido • Elementos funcionais
32. Casos de Uso
33. Suporte a Editores
34. String Bool List Float Int Record Tuple Option Unit
35. Estruturas de dados imutáveis
36. type color_name = Blue | Black | Green; let color = Black;
38. type boleto = { value: int, status: statusType } type statusType = Paid | Expired | Valid
39. É uma LINGUAGEM ESTATICAMENTE tipada.
41. Inferencia de Tipos
42. Inferencia de Tipos 3 + 7 * 2; - : int = 17
43. let diff = (a, b) => a - b; Inferencia de Tipos val diff: Int => Int => Int
44. /* REASON */ let diff = (a, b) => a - b; /* JS */ const diff = (a, b) => a - b; JS x Reason
45. let f = () => 123; val f: (unit) => Int
46. Currying
47. let add = (x, y) => x + y; add(1); /* function */ add(1)(2); /* 3 */
48. Partial Application
49. let add = (x, y) => x + y; let inc = add(1); inc(10); /* 11 */
50. let multiply = (x, y) => x * y; let multiplyBy10 = multiply(10); multiplyBy10(10); /* 100 */
51. |> Pipeline
52. let number = 50 number |> inc |> multiplyBy10 /* 510 */ multiplyBy10(inc(50))
53. Loops
54. let print_numbers = (n) => { for (i in 1 to n) { print_int(i); }; };
55. Map Filter Reduce
56. Recursão
57. let rec fatorial n = match n with 0 -> 1 | 1 -> 1 | _ -> n * fatorial (n -1)
58. Condicionais
59. If / Else
60. let max = (x, y) => if (x > y) { x } else { y };
61. Pattern Matching
62. let max = (x, y) => switch(x > y) { | true => x | false => y };
63. type color_type = Blue | Black | Green let color = Blue let colorHex = (color) => switch(color) { | Blue => “#0000FF” | Black => “#000000” | Green => “#00FF00” };
64. ROUTES
65. www.hello.com/book/10/edit?name=Jane#author let watcherID = ReasonReact.Router.watchUrl (url => { switch (url.path) { | ["book", id, "edit"] => handleBookEdit( id) | ["book", id] => getBook(id) | ["book", id, _] => noSuchBookOperation () | _ => showNotFoundPage () } }); type = url { # endpoint path: list(string) # url hash’s hash: string, # query params search: string }
66. Interop
67. Js.log("React Meetup"); [%%bs.raw {| console.log('React Meetup'); |}];
68. Js.log("React Meetup"); Js.Promise(asyncStuff); Js.Number.Date.getMinutes(date);
69. Async
70. Promise Module
71. let resultPromise = (somePromise) => { somePromise |> Js.Promise.then_(value => { Js.Promise.resolve(value) }) |> Js.Promise.catch(err => { Js.Promise.reject(err) }) }
72. /* REASON */ let result = (promises) => Js.Promise.( promises |> List.fold_left( (resultP, promise) => resultP |> then_(promise), resolve() ) ); /* JS */ const result = promises => { return promises.reduce( (result, promise) => result.then(promise), Promise.resolve() ); };
73. Lwt Async
74. “null” “NaN” “undefined is not a function”
75. Option
76. type option('a) = None | Some('a);
77. let possiblyNullValue: option(string) = Some("Hello"); switch (possiblyNullValue) { | None => print_endline("Nothing") | Some(message) => print_endline(message) }; /* Hello */
78. let possiblyNullValue: option(string) = None; switch (possiblyNullValue) { | None => print_endline("Nothing") | Some(message) => print_endline(message) }; /* Nothing */
79. Pipeline Currying Pattern Matching Imutabilidade Loops Recursão
80. Linguagem funcional
81. Funções anônimas Closures Map Filter Reduce
84. ReasonML / ReasonReact
85. Bindings com ReactJs
87. JSX
88. <div foo={bar}> {child1} {child2} </div> ReactDOMRe.createElement ("div", ~props=ReactDOMRe.props(~foo=bar, ()), [|child1, child2|]); React.createElement(‘div’, { foo: bar }, child1, child2); .re .js
89. <div /> ReactDOMRe.createElement ("div", [||]); React.createElement(‘div’, undefined); .re .js
91. type state = { meetupName: string, attendees: list(person) }; type person = { name: string, going: status } type status = | Going | NotGoing | Waitlist
92. let component = ReasonReact.reducerComponent(“App”) let make = (~name, _children) => { ...component, initialState: () => {meetupName: “React”, attendees: [||]} render: _self => <div className= “App”> <h1>Meetup {ReasonReact.stringToElement(meetupName)}</h1> <div> { ReasonReact.arrayToElement( Array.of_list( List.map((attendees) => <Attendees attendee />, attendees) )) } </div> </div> };
93. AMBIENTE
94. npm install -g bs-platform
95. bsb -init test -theme react X create-react-app test
96. yarn start
98. <app-name>/ README.md node_modules/ package.json bsconfig.json .gitignore public/ favicon.ico index.html src/ index.re index.css app.re app.css logo.svg
99. <app-name>/ README.md node_modules/ package.json bsconfig.json .gitignore public/ favicon.ico index.html src/ index.re index.css app.re app.css logo.svg { "name": <app-name>, "sources": [ "src" ], "bs-dependencies": [ "reason-react", "bs-jest", ], "reason": { "react-jsx": 2 }, "bsc-flags": [ "-bs-super-errors" ], "refmt": 3 }
101. import { add } from './operations.re' const sum = add(1, 4) [%bs.raw {|require('./App.css')|}];
102. • PWA: Interop com web workers, localstorage. • TESTS: Vem com test runners configurados • CONFIG: Configuração de build otimizada
103. Eu vou ter de reescrever tudo?
104. adicionar bsconfig.json buildar com o bucklescript
105. PQ APRENDER É LEGAL? • PARADIGMA FUNCIONAL: A melhor forma de aprender novos paradigmas é por meio da experimentação de linguagens. • NOVAS PERSPECTIVAS: Nova visão sobre como resolver problemas. • FP JA E HYPE NA COMUNIDADE REACT: Todo mundo usa coisas pra fingir pra que JS é funcional. Muita coisa no React é inspirada em FP.
106. BAD PARTS • SSR: Não tem tem suporte para server side rendering • Curva de Aprendizagem: Paradigma novo, modo de pensar novo. • RELATIVAMENTE NOVA(QUASE 3 ANOS): Tools e bibliotecas ainda em desenvolvimento.
107. t.me/lambdastudygroup github.com/lambda-study-group
108. Documentação Ocaml caml.inria.fr/pub/docs/manual-ocaml/ Documentação BuckleScript bucklescript.github.io/docs/en/installation.html bucklescript.github.io/bucklescript/Manual.html Documentação Reason reasonml.github.io/docs/en/quickstart-javascript.html Documentação ReasonReact reasonml.github.io/reason-react/docs/en/installation.html Reason Package Index redex.github.io/
109. Tipagem - rrdelaney.github.io/ReasonablyTyped/ Fazer Forms - github.com/Astrocoders/reform Biblioteca inspirada em Ramda p/ Reason - github.com/jonlaing/rationale Implementação de Flexbox - github.com/jordwalke/flex BS-CSS - github.com/SentiaAnalytics/bs-css Extensão navegador(Converte .re .ml etc) - github.com/reasonml/reason-tools
110. Comunidade Discord discord.gg/reasonml Twitter twitter.com/reasonml Blog reasonml.github.io/blog/ Chat reasonml.chat
111. Trade-offs • Mantenabilidade • Seguro • Expressividade • Muito muito rápido • Elementos funcionais
112. OBRIGADA :) https://speakerdeck.com/anabastos
113. DÚVIDAS?