ReasonML - Front in Vale 2018

Transcript

1. ANA LUIZA BASTOS github.com/anabastos @naluhh @anapbastos Software Developer na Quanto e cientista da computação na PUC-SP anabastos.me
2. JSLADIES fb.com/jsladiesbr twitter.com/jsladiessp meetup.com/JsLadies-BR/ LAMBDA.IO t.me/lambdastudygroup github.com/lambda-study-group/ meetup.com/Lambda-I-O-Sampa- Meetup/
4. JAVASCRIPT
5. Javascript foi pensado em 10 dias pelo Brendan Eich em 1995 para fazer sites interativos
10. Linguagens que compilam JS são os novos frameworks JS.
11. • Mudar de um ecossistema para outro. • Necessidade de reescrever o projeto do 0. • Problemas com Interop. • Maioria das tools e frameworks são para o JS.
12. O que é ReasonML?
13. Mantida e usada pelo Facebook Se tornou open source em 2016 Criado pelo Jordan Walke (criador do React) Sintaxe em cima do OCaml e inspirada em JavaScript
14. Mesmo ecossistema e workflow
15. “it's a new syntax and toolchain for Ocaml.”
16. O que é OCaml?
17. Linguagem da familia ML(SML, OCaml, Haskell) Conhecido pela sua mantenabilidade Décadas de pesquisa em sistemas de tipos e engenharia de compiladores tops
18. O que é ser uma nova syntax pra OCaml?
19. WORKFLOW OCAML
20. Ocaml AST OCAMLOPT Syntax OCaml(.ml) OCAMLC NativeCode ByteCode BUCKLESCRIPT Javascript
22. Ocaml AST Syntax Reason(.re) BUCKLESCRIPT OCAMLOPT Syntax OCaml(.ml) OCAMLC Javascript NativeCode ByteCode .ml == .re
23. JAVASCRIPT FRIENDLY
24. let msg = ”hello world!”; Js.log(msg); // hello world! Hello World
25. let add = (a, b) => a + b; Função math.re
26. import { add } from “math.re”; add(1, 2) // 3 index.js
27. ESTRUTURAS DE DADOS IMUTÁVEIS & OTIMIZADAS const
28. É uma LINGUAGEM ESTATICAMENTE tipada.
29. String Bool List Float Int Record Tuple Option Unit
30. Inferencia de Tipos
31. let add = (a, b) => a + b; Inferencia de Tipos val add: Int => Int => Int
32. /* REASON */ let add = (a, b) => a + b; /* JS + FLOW / TYPESCRIPT */ const add = (a: number, b: number): number => a + b;
33. Declaração de Tipos
35. type item = { title: string, completed: boolean, }; type state = { items: list(item) };
36. type statusType = ToDo | Doing | Done
37. Option
38. null NaN -Infinity “undefined is not a function”
39. type option('a) = None | Some('a);
40. Currying & Partial Application (Proposal)
41. let add = (x, y) => x + y; let inc = add(1); inc(10); /* 11 */
42. let multiply = (x, y) => x * y; let multiplyBy10 = multiply(10); multiplyBy10(10); /* 100 */
43. Pipeline Operator (Proposal)
44. let number = 50 number |> inc |> multiplyBy10 /* 510 */ multiplyBy10(inc(50))
45. Pattern Matching (Proposal)
46. type color_type = White | Black let colorHex = (color) => switch(color) { | White => “#FFFFFF” | Black => “#000000” _ => “#999999” };
47. Recursão (ES6)
49. ReasonML x ReasonReact
50. REACT BINDINGS
52. JSX
53. AMBIENTE
54. npm install -g bs-platform
55. create-react-app NOME X bsb -init NOME -theme react
56. yarn start
59. NOME/ README.md node_modules/ public/ favicon.ico index.html src/ index.re index.css app.re app.css Logo.svg package.json bsconfig.json { "name": <app-name>, "sources": [ "src" ], "bs-dependencies": [ "reason-react", "bs-jest", ], "reason": { "react-jsx": 2 }, "bsc-flags": [ "-bs-super-errors" ], "refmt": 3 } bsconfig.json = package.json + .babelrc + .eslintrc
60. "scripts": { "build": "bsb -make-world -clean-world", "watch": "bsb -make-world -clean-world -w" }
61. Eu vou ter que reescrever tudo?
62. Adicionar bsconfig.json Buildar com o bucklescript
63. Já tem as features da ES2030 sem migrar de ecossistema para outro
64. Documentação Ocaml caml.inria.fr/pub/docs/manual-ocaml/ Documentação BuckleScript 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/ Exploring Reason reasonmlhub.com/exploring-reasonml
65. Comunidade Discord discord.gg/reasonml Twitter twitter.com/reasonml “StackOverFlow” reasonml.chat
66. OBRIGADA :) speakerdeck.com/anabastos anabastos.me github.com/anabastos @naluhh @anapbastos