Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Rethink React in Elm

Rethink React in Elm

Yuanhsiang Cheng

August 24, 2016
Tweet

More Decks by Yuanhsiang Cheng

Other Decks in Technology

Transcript

  1. The History of programming Assembly C Java from Let’s be

    mainstream! User focused design in Elm
  2. The History of programming Assembly C Java Javascript from Let’s

    be mainstream! User focused design in Elm
  3. The History of programming Assembly C Java Javascript Maintainability from

    Let’s be mainstream! User focused design in Elm
  4. The History of programming Assembly C Java Javascript Maintainability Memory


    Management from Let’s be mainstream! User focused design in Elm
  5. The History of programming Assembly C Java Javascript Maintainability Memory


    Management All those
 freakin’ types from Let’s be mainstream! User focused design in Elm
  6. The History of programming Assembly C Java Javascript Maintainability Memory


    Management All those
 freakin’ types Maintainability from Let’s be mainstream! User focused design in Elm
  7. What is Elm? • Language for making UI • functional

    • static type • strong type • ML family • Framework • Elm Architecture
  8. Elm tools • http://elm-lang.org/install • brew cask install elm-platform •

    elm-make • elm-package • elm-reactor • elm-repl • now version: 0.17
  9. Elm syntax • http://elm-lang.org/try • comment: --, {- -} •

    char: ‘a’ • string: “abc” • if … then … else • case .. of 
 a -> doSomething
 b -> — single line comment {- 
 multi line comment
 -} achar = ‘a’ astring = “abc” isEven number = if number % 2 == 0 then True else False
  10. Elm style guideline • http://elm-lang.org/docs/style-guide • homeDirectory = “/root/files”
 ->


    homeDirectory = 
 “/root/files” • type Skill
 = Code
 | Sleep
 | Argue • elm-format
  11. Elm syntax more… • add : Int -> Int ->

    Int • add x y = x + y • \n -> n + 1 • let .. in • type Tree =
 Branch | Leaf evenFilter data = let isEven number = if number % 2 == 0 then True else False in List.filter isEven data
  12. Elm data structure • List • Array • Set •

    Tuple • Dict • Record > data = [1, 2, 2, 3] [1,2,2,3] : List number > Array.fromList data Array.fromList [1,2,2,3] : Array.Array number > Set.fromList data Set.fromList [1,2,3] : Set.Set number > type Animal = Cat | Mouse > tom = (“Tom”, Cat) > animals = [tom, (“Jerry”, Mouse)] > Dict.fromList animals Dict.fromList [(“Jerry”,Mouse),(“Tom”,Cat)] : Dict.Dict String Repl.Animal > person = { name = “LY”, gender = “male” } { name = “LY, gender = “male” } : { gender : String, name : String }
  13. Be Direct pure function easy to reason about safe monad

    from Let’s be mainstream! User focused design in Elm
  14. Be Direct pure function stateless function easy to reason about

    safe monad from Let’s be mainstream! User focused design in Elm
  15. Be Direct pure function stateless function easy to reason about

    easy to refactor safe monad from Let’s be mainstream! User focused design in Elm
  16. Be Direct pure function stateless function easy to reason about

    easy to refactor safe reliable monad from Let’s be mainstream! User focused design in Elm
  17. Be Direct pure function stateless function easy to reason about

    easy to refactor safe reliable monad “callbacks” from Let’s be mainstream! User focused design in Elm
  18. Be Direct andThen : Maybe a -> (a -> Maybe

    b) -> Maybe b andThen maybe callback = case maybe of Just value -> callback value Nothing -> Nothing from Let’s be mainstream! User focused design in Elm
  19. Elm Architecture type alias Model = Int type Msg =

    Inc | Dec update : Msg -> Model -> Model update msg model = case msg of Inc -> model + 1 Dec -> model - 1 view : Model -> Html Msg view model = div [] [ button [onClick Inc] [text “+”] , text (toString model) , button [onClick Dec] [text “-“] ]
  20. Communicate with JS • Native Modules • note by poying

    • _{github_user_name}${github_repo_name}$ {module_name}
  21. Native module //Native/DateTime.js var _gdotdesign$elm_ui$Native_DateTime = function() { function now()

    { return new Date() } … return { …, now: now } }() — Ext/Date.elm import Native.DateTime now : a -> Date.Date now _ = Native.DateTime.now Nothing
  22. Ports // app.js var app = Elm.Spelling.fullscreen(); app.ports.check.subscribe(function(word) { var

    suggestions = spellCheck(word); app.ports.suggestions.send(suggestions); }); — Spelling.elm port module Spelling exposing (..) port check : String -> Cmd msg port suggestions : (List String -> msg) -> Sub msg
  23. Elm Future • Server-side render • Improved elm-reactor • Shuffling

    some Html functions
 • Removing Backticks / Flipping andThen something `andThen` doSomething => something |> andThen doSomething Html.App move to Html
  24. What about React? pattern ES2015 class functional null component folder

    less inheritance recompose null-input-value-prop