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
   

   View Slide

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/
   

   View Slide

3. View Slide

4. JAVASCRIPT
   

   View Slide

5. Javascript foi pensado em 10 dias pelo
   Brendan Eich em 1995 para fazer sites
   interativos
   

   View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. Linguagens que compilam JS são os novos
    frameworks JS.
    

    View Slide

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.
    

    View Slide

12. O que é ReasonML?
    

    View Slide

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
    

    View Slide

14. Mesmo ecossistema e
    workflow
    

    View Slide

15. “it's a new syntax and
    toolchain for Ocaml.”
    

    View Slide

16. O que é OCaml?
    

    View Slide

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
    

    View Slide

18. O que é ser uma
    nova syntax pra
    OCaml?
    

    View Slide

19. WORKFLOW
    OCAML
    

    View Slide

20. Ocaml AST OCAMLOPT
    Syntax
    OCaml(.ml)
    OCAMLC
    NativeCode
    ByteCode
    BUCKLESCRIPT
    Javascript
    

    View Slide

21. View Slide

22. Ocaml AST
    Syntax
    Reason(.re) BUCKLESCRIPT
    OCAMLOPT
    Syntax
    OCaml(.ml) OCAMLC
    Javascript
    NativeCode
    ByteCode
    .ml == .re
    

    View Slide

23. JAVASCRIPT FRIENDLY
    

    View Slide

24. let msg = ”hello world!”;
    Js.log(msg); // hello world!
    Hello World
    

    View Slide

25. let add = (a, b) => a + b;
    Função
    math.re
    

    View Slide

26. import { add } from “math.re”;
    add(1, 2) // 3
    index.js
    

    View Slide

27. ESTRUTURAS DE
    DADOS IMUTÁVEIS
    & OTIMIZADAS
    const
    

    View Slide

28. É uma LINGUAGEM
    ESTATICAMENTE
    tipada.
    

    View Slide

29. String
    Bool
    List
    Float
    Int
    Record
    Tuple
    Option
    Unit
    

    View Slide

30. Inferencia
    de Tipos
    

    View Slide

31. let add = (a, b) => a + b;
    Inferencia de Tipos
    val add: Int => Int => Int
    

    View Slide

32. /* REASON */
    let add = (a, b) => a + b;
    /* JS + FLOW / TYPESCRIPT */
    const add = (a: number, b: number): number
    => a + b;
    

    View Slide

33. Declaração
    de Tipos
    

    View Slide

34. View Slide

35. type item = {
    title: string,
    completed: boolean,
    };
    type state = {
    items: list(item)
    };
    

    View Slide

36. type statusType = ToDo
    | Doing
    | Done
    

    View Slide

37. Option
    

    View Slide

38. null
    NaN
    -Infinity
    “undefined is not a function”
    

    View Slide

39. type option('a) = None | Some('a);
    

    View Slide

40. Currying
    & Partial Application
    (Proposal)
    

    View Slide

41. let add = (x, y) => x + y;
    let inc = add(1);
    inc(10); /* 11 */
    

    View Slide

42. let multiply = (x, y) => x * y;
    let multiplyBy10 = multiply(10);
    multiplyBy10(10); /* 100 */
    

    View Slide

43. Pipeline Operator
    (Proposal)
    

    View Slide

44. let number = 50
    number
    |> inc
    |> multiplyBy10
    /* 510 */
    multiplyBy10(inc(50))
    

    View Slide

45. Pattern Matching
    (Proposal)
    

    View Slide

46. type color_type = White | Black
    let colorHex = (color) => switch(color)
    {
    | White => “#FFFFFF”
    | Black => “#000000”
    _ => “#999999”
    };
    

    View Slide

47. Recursão
    (ES6)
    

    View Slide

48. View Slide

49. ReasonML x ReasonReact
    

    View Slide

50. REACT BINDINGS
    

    View Slide

51. View Slide

52. JSX
    

    View Slide

53. AMBIENTE
    

    View Slide

54. npm install -g bs-platform
    

    View Slide

55. create-react-app NOME
    X
    bsb -init NOME -theme react
    

    View Slide

56. yarn start
    

    View Slide

57. View Slide

58. View Slide

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": ,
    "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
    

    View Slide

60. "scripts": {
    "build": "bsb -make-world -clean-world",
    "watch": "bsb -make-world -clean-world -w"
    }
    

    View Slide

61. Eu vou ter que reescrever
    tudo?
    

    View Slide

62. Adicionar bsconfig.json
    Buildar com o bucklescript
    

    View Slide

63. Já tem as features da ES2030 sem
    migrar de ecossistema para outro
    

    View Slide

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
    

    View Slide

65. Comunidade Discord
    discord.gg/reasonml
    Twitter
    twitter.com/reasonml
    “StackOverFlow”
    reasonml.chat
    

    View Slide

66. OBRIGADA :)
    speakerdeck.com/anabastos
    anabastos.me
    github.com/anabastos
    @naluhh
    @anapbastos
    

    View Slide