Rethink React in Elm

Transcript

1. Rethink React in Elm LY @ Modernweb 2016
2. LY Appier yhsiang elm.tw
3. The History of programming from Let’s be mainstream! User focused design in Elm Assembly
4. The History of programming Assembly C from Let’s be mainstream! User focused design in Elm
5. The History of programming Assembly C Java from Let’s be mainstream! User focused design in Elm
6. The History of programming Assembly C Java Javascript from Let’s be mainstream! User focused design in Elm
7. The History of programming Assembly C Java Javascript Maintainability from Let’s be mainstream! User focused design in Elm
8. The History of programming Assembly C Java Javascript Maintainability Memory
 Management from Let’s be mainstream! User focused design in Elm
9. 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
10. 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
11. https://www.flickr.com/photos/sorbus/2503348546
12. What is Elm? • Language for making UI • functional • static type • strong type • ML family • Framework • Elm Architecture
13. Elm tools • http://elm-lang.org/install • brew cask install elm-platform • elm-make • elm-package • elm-reactor • elm-repl • now version: 0.17
14. Elm package • http://package.elm-lang.org/ • namespace • API Design Guidelines
15. 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
16. Elm style guideline • http://elm-lang.org/docs/style-guide • homeDirectory = “/root/files”
 ->
 homeDirectory = 
 “/root/files” • type Skill
 = Code
 | Sleep
 | Argue • elm-format
17. 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
18. 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 }
19. https://www.flickr.com/photos/anderoo/3338275165
20. Be Direct pure function easy to reason about safe monad from Let’s be mainstream! User focused design in Elm
21. Be Direct pure function stateless function easy to reason about safe monad from Let’s be mainstream! User focused design in Elm
22. 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
23. 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
24. 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
25. 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
26. Elm Architecture
27. 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 “-“] ]
28. Communicate with JS • Native Modules • note by poying • _{github_user_name}${github_repo_name}$ {module_name}
29. 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
30. Communicate with JS • JavaScript Interop: Port • message
31. 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
32. Elm Recent • How to use at work • http://elm-lang.org/blog/how-to-use-elm-at-work • elm-html • Html.Keyed
33. 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
34. What about React? pattern ES2015 class functional null
35. What about React? pattern ES2015 class functional null component folder
36. What about React? pattern ES2015 class functional null component folder less inheritance
37. What about React? pattern ES2015 class functional null component folder less inheritance recompose
38. What about React? pattern ES2015 class functional null component folder less inheritance recompose null-input-value-prop
39. We are HIRING yhsiang@appier.com