Pensar en React y Elm

La única opción para escribir aplicaciones web funcionales no es usar un lenguaje de programación funcional. Podemos pensar nuestras aplicaciones web en JavaScript con un enfoque funcional e incluso introducir gradualmente un lenguaje de programación funcional a dichas aplicaciones. En esta ocasión vamos a revisar una aplicación web funcional en React y a reemplazar una parte de la aplicación con el lenguaje de programación Elm.

Elm: https://elm-lang.org
React: https://reactjs.org

Expositor invitado: Juan Pedro Villa Isaza.

Transcript

1. Pensar en React y Elm
2. Introducción – React • “A JavaScript library for building user interfaces” – Elm • “A delightful language for reliable web apps” • “Generate JavaScript with great performance and no runtime exceptions”
3. Ejemplo (Contador) (React) import React, { Component } from "react";
4. Ejemplo (Contador) (React) export default class Counter extends Component { ... }
5. Ejemplo (Contador) (React) constructor(props) { super(props); this.state = { model: 0 }; this.decrement = this.decrement.bind(this); this.increment = this.increment.bind(this); }
6. Ejemplo (Contador) (React) decrement() { this.setState(state => ({ model: state.model - 1 })); }
7. Ejemplo (Contador) (React) increment() { this.setState(state => ({ model: state.model + 1 })); }
8. Ejemplo (Contador) (React) render() { return ( <div> <button onClick={this.decrement}>-</button> <div>{this.state.model} <button onClick={this.increment}>+</button> </div> ) }
9. Ejemplo (Contador) (React) state = { model: 0 }
10. Ejemplo (Contador) (React) decrement = () => { this.setState(state => ({ model: state.model - 1 })); }
11. Ejemplo (Contador) (React) increment = () => { this.setState(state => ({ model: state.model + 1 })); }
12. Ejemplo (Contador) (Elm) import Browser import Html exposing (Html, button, div, text) import Html.Events exposing (onClick)
13. Ejemplo (Contador) (Elm) main : Program () Model Msg main = Browser.sandbox { init = 0 , view = view , update = update }
14. Ejemplo (Contador) (Elm) type alias Model = Int
15. Ejemplo (Contador) (Elm) type Msg = Decrement | Increment
16. Ejemplo (Contador) (Elm) update : Msg -> Model -> Model update msg model = case msg of Decrement -> model - 1 Increment -> model + 1
17. Ejemplo (Contador) (Elm) view : Model -> Html Msg view model = div [] [ button [ onClick Decrement ] [ text "-" ] , div [] [ text (String.fromInt model) ] , button [ onClick Increment ] [ text "+" ] ]
18. Ejemplo (Contador) (React) import React from "react"; import ReactDOM from "react-dom"; import Counter from "./Counter.jsx"; ReactDOM.render( <Counter />, document.getElementById("app") );
19. Ejemplo (Contador) (Elm) import React from "react"; import ReactDOM from "react-dom"; import Elm from "react-elm-components"; import Counter from "./Counter.elm"; ReactDOM.render( <Elm src={Counter.Elm.Main} />, document.getElementById("app") );
20. Ejemplo (TODO) (React) import React, { Component } from "react";
21. Ejemplo (TODO) (React) export default class TodoApp extends Component { ... }
22. Ejemplo (TODO) (React) constructor(props) { super(props); this.state = { items: [], text: "" }; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); }
23. Ejemplo (TODO) (React) handleChange(e) { this.setState({ text: e.target.value }); }
24. Ejemplo (TODO) (React) handleSubmit(e) { e.preventDefault(); if (!this.state.text.length) { return; } const newItem = { text: this.state.text, id: Date.now() }; this.setState(state => ({ items: state.items.concat(newItem), text: "" })); }
25. Ejemplo (TODO) (React) render() { return ( <div> <h3>TODO</h3> <TodoList items={this.state.items} /> ... </div> ); }
26. Ejemplo (TODO) (React) render() { return ( <div> ... <form onSubmit={this.handleSubmit}> <label htmlFor="new-todo"> What needs to be done? </label> ... </form> </div> ); }
27. Ejemplo (TODO) (React) render() { return ( <div> ... <form onSubmit={this.handleSubmit}> ... <input id="new-todo" onChange={this.handleChange} value={this.state.text} /> ... </form> </div> ); }
28. Ejemplo (TODO) (React) render() { return ( <div> ... <form onSubmit={this.handleSubmit}> ... <button> Add #{this.state.items.length + 1} </button> </form> </div> ); }
29. Ejemplo (TODO) (React) class TodoList extends Component { render() { return ( <ul> {this.props.items.map(item => ( <li key={item.id}>{item.text}</li> ))} </ul> ); } }
30. Ejemplo (TODO) (Elm) import Browser import Html exposing (Html, button, div, form, h3, input, label, li, text) import Html.Attributes exposing (for, id, type_, value) import Html.Events exposing (onInput, onSubmit) import Html.Keyed exposing (ul) import Task import Time exposing (now, posixToMillis)
31. Ejemplo (TODO) (Elm) main : Program () Model Msg main = Browser.element { init = init , view = view , update = update , subscriptions = always Sub.none }
32. Ejemplo (TODO) (Elm) init : () -> (Model, Cmd Msg) init _ = ( { items = [] , text = "" } , Cmd.none )
33. Ejemplo (TODO) (Elm) type alias Model = { items : List { id : String, text : String } , text : String }
34. Ejemplo (TODO) (Elm) type Msg = Add String | Change String | Submit
35. Ejemplo (TODO) (Elm) update : Msg -> Model -> (Model, Cmd Msg) update msg model = case msg of Add id -> ( { items = model.items ++ [{ id = id, text = model.text }] , text = "" } , Cmd.none ) ...
36. Ejemplo (TODO) (Elm) update : Msg -> Model -> (Model, Cmd Msg) update msg model = case msg of ... Change text -> ( { model | text = text } , Cmd.none ) ...
37. Ejemplo (TODO) (Elm) update : Msg -> Model -> (Model, Cmd Msg) update msg model = case msg of ... Submit -> ( model , if String.isEmpty model.text then Cmd.none else let toString = String.fromInt << posixToMillis in Task.perform Add (Task.map toString now) )
38. Ejemplo (TODO) (Elm) view : Model -> Html Msg view model = div [] [ h3 [] [ text "TODO" ] , viewTodoList model , ... ]
39. Ejemplo (TODO) (Elm) view : Model -> Html Msg view model = div [] [ ... , form [ onSubmit Submit ] [ label [ for "new-todo" ] [ text "What needs to be done?" ] , ... ] ]
40. Ejemplo (TODO) (Elm) view : Model -> Html Msg view model = div [] [ ... , form [ onSubmit Submit ] [ ... , input [ id "new-todo" , value model.text , onInput Change ] [] , ... ] ]
41. Ejemplo (TODO) (Elm) view : Model -> Html Msg view model = div [] [ ... , form [ onSubmit Submit ] [ ... , button [] [ text "Add #" , let n = List.length model.items in text (String.fromInt (n + 1)) ] ] ]
42. Ejemplo (TODO) (Elm) viewTodoList : Model -> Html msg viewTodoList model = let viewItem item = ( item.id , li [] [ text item.text ] ) in ul [] (List.map viewItem model.items)
43. Ejemplo (TODO) (React) import React from "react"; import ReactDOM from "react-dom"; import TodoApp from "./TodoApp.jsx"; ReactDOM.render( <TodoApp />, document.getElementById("app") );
44. Ejemplo (TODO) (Elm) import React from "react"; import ReactDOM from "react-dom"; import Elm from "react-elm-components"; import TodoApp from "./TodoApp.elm" ReactDOM.render( <Elm src={TodoApp.Elm.Main} />, document.getElementById("app") );
45. Ejemplo (Formulario) (React) import React, { Component } from "react"; import Elm from "react-elm-components"; import styled from "styled-components"; import "bootstrap/dist/css/bootstrap.min.css"; import ValidatePassword from "./ValidatePassword.elm";
46. Ejemplo (Formulario) (React) const Wrapper = styled.div`...` const ValidationWrapper = styled.div`...` const Title = styled.h1`...`
47. Ejemplo (Formulario) (React) export default class ChangePassword extends Component { ... }
48. Ejemplo (Formulario) (React) state = { displayValidation: false, oldPassword: "", newPassword: "", confirmNewPassword: "", ports: undefined, validation: { ok: true, msg: "" } }
49. Ejemplo (Formulario) (React) init = ports => { ports.updateValidation.subscribe(validation => { this.setState({ validation }) }); this.setState({ ports }); }
50. Ejemplo (Formulario) (React) handleChangeOldPassword = e => { this.setState({ oldPassword: e.target.value }); }
51. Ejemplo (Formulario) (React) handleChangeNewPassword = e => { this.setState({ displayValidation: false, newPassword: e.target.value }); const ports = this.state.ports ports.updatePassword.send(e.target.value); }
52. Ejemplo (Formulario) (React) handleChangeConfirmNewPassword = e => { this.setState({ displayValidation: false, confirmNewPassword: e.target.value }); const ports = this.state.ports; ports.updateConfirmPassword.send(e.target.value); }
53. Ejemplo (Formulario) (React) handleSubmit = e => { e.preventDefault(); this.setState({ displayValidation: true }); }
54. Ejemplo (Formulario) (React) render() { const flags = { password: this.state.newPassword, confirmPassword: this.state.confirmNewPassword }; return ( <Wrapper> <Elm src={ValidatePassword.Elm.Main} flags={flags} ports={this.init} /> ... </Wrapper> ); }
55. Ejemplo (Formulario) (React) render() { ... return ( <Wrapper> ... <ValidationWrapper> {this.state.displayValidation && <Validation validation={this.state.validation} /> } </ValidationWrapper> ... </Wrapper> ); }
56. Ejemplo (Formulario) (React) render() { ... return ( ... <form ... onSubmit={this.handleSubmit}> ... <label>... <input ... onChange={this.handleChangeNewPassword} value={this.state.newPassword} required /> ... ); }
57. Ejemplo (Formulario) (React) const Validation = ({ validation }) => { const className = validation.ok ? "alert alert- success" : "alert alert-danger"; return ( <div className={className}> {validation.msg} </div> ) }
58. Ejemplo (Formulario) (Elm) port module Main exposing (..)
59. Ejemplo (Formulario) (Elm) main : Program Model Model Msg main = Platform.worker { init = init , update = update , subscriptions = subscriptions }
60. Ejemplo (Formulario) (Elm) validate : Model -> { ok : Bool, msg : String} validate { password, confirmPassword } = if String.isEmpty password then { ok = False , msg = "Error! Password is required." } else if password /= confirmPassword then { ok = False , msg = "Error! Passwords don't match." } ...
61. Ejemplo (Formulario) (Elm) validate : Model -> { ok : Bool, msg : String} validate { password, confirmPassword } = ... else if String.length password < 6 then { ok = False , msg = "Error! Password is too short." } else { ok = True , msg = "OK!" }
62. Ejemplo (Formulario) (Elm) init : Model -> (Model, Cmd Msg) init model = ( model , updateValidation (validate model) )
63. Ejemplo (Formulario) (Elm) type Msg = Password String | ConfirmPassword String
64. Ejemplo (Formulario) (Elm) port updateValidation : { ok : Bool, msg : String } -> Cmd msg port updatePassword : (String -> msg) -> Sub msg port updateConfirmPassword : (String -> msg) -> Sub msg
65. Ejemplo (Formulario) (Elm) update : Msg -> Model -> (Model, Cmd Msg) update msg model = case msg of Password password -> let newModel = { model | password = password } in (newModel, updateValidation (validate newModel)) ConfirmPassword password -> let newModel = { model | confirmPassword = password } in (newModel, updateValidation (validate newModel))
66. Ejemplo (Formulario) (Elm) subscriptions : Model -> Sub Msg subscriptions _ = Sub.batch [ updatePassword Password , updateConfirmPassword ConfirmPassword ]
67. Ejemplo (Formulario) (React) import React from "react"; import ReactDOM from "react-dom"; import Elm from "react-elm-components"; import ChangePassword from "./ChangePassword.jsx"; ReactDOM.render( <ChangePassword />, document.getElementById("app") );
68. Referencias – React • React • Thinking in React – Elm • Elm • An Introduction to Elm • Elm in Action