ReasonML - Front in Vale 2018

Slide 1

Slide 1 text

ANA LUIZA BASTOS github.com/anabastos @naluhh @anapbastos Software Developer na Quanto e cientista da computação na PUC-SP anabastos.me

Slide 2

Slide 2 text

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/

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

JAVASCRIPT

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

● 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.

Slide 12

Slide 12 text

O que é ReasonML?

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Mesmo ecossistema e workflow

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

O que é OCaml?

Slide 17

Slide 17 text

Linguagem da familia ML(SML, OCaml, Haskell) Conhecido pela sua mantenabilidade Décadas de pesquisa em sistemas de tipos e engenharia de compiladores tops

Slide 18

Slide 18 text

O que é ser uma nova syntax pra OCaml?

Slide 19

Slide 19 text

WORKFLOW OCAML

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

JAVASCRIPT FRIENDLY

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

ESTRUTURAS DE DADOS IMUTÁVEIS & OTIMIZADAS const

Slide 28

Slide 28 text

É uma LINGUAGEM ESTATICAMENTE tipada.

Slide 29

Slide 29 text

String Bool List Float Int Record Tuple Option Unit

Slide 30

Slide 30 text

Inferencia de Tipos

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Declaração de Tipos

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

type statusType = ToDo | Doing | Done

Slide 37

Slide 37 text

Option

Slide 38

Slide 38 text

null NaN -Infinity “undefined is not a function”

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Currying & Partial Application (Proposal)

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Pipeline Operator (Proposal)

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

Pattern Matching (Proposal)

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

Recursão (ES6)

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

ReasonML x ReasonReact

Slide 50

Slide 50 text

REACT BINDINGS

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

JSX

Slide 53

Slide 53 text

AMBIENTE

Slide 54

Slide 54 text

npm install -g bs-platform

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

yarn start

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

Eu vou ter que reescrever tudo?

Slide 62

Slide 62 text

Adicionar bsconfig.json Buildar com o bucklescript

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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