Rethink React in Elm LY @ Modernweb 2016 

LY Appier yhsiang elm.tw 

The History of programming from Let’s be mainstream! User focused design in Elm Assembly 

The History of programming Assembly C from Let’s be mainstream! User focused design in Elm 

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

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

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

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

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 

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 

https://www.flickr.com/photos/sorbus/2503348546 

What is Elm? • Language for making UI • functional • static type • strong type • ML family • Framework • Elm Architecture 

Elm tools • http://elm-lang.org/install • brew cask install elm-platform • elm-make • elm-package • elm-reactor • elm-repl • now version: 0.17 

Elm package • http://package.elm-lang.org/ • namespace • API Design Guidelines 

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 

Elm style guideline • http://elm-lang.org/docs/style-guide • homeDirectory = “/root/files”
 ->
 homeDirectory = 
 “/root/files” • type Skill
 = Code
 | Sleep
 | Argue • elm-format 

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 

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 } 

https://www.flickr.com/photos/anderoo/3338275165 

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

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

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 

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 

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 

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 

Elm Architecture 

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 “-“] ] 

Communicate with JS • Native Modules • note by poying • _{github_user_name}${github_repo_name}$ {module_name} 

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 

Communicate with JS • JavaScript Interop: Port • message 

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 

Elm Recent • How to use at work • http://elm-lang.org/blog/how-to-use-elm-at-work • elm-html • Html.Keyed 

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 

What about React? pattern ES2015 class functional null 

What about React? pattern ES2015 class functional null component folder 

What about React? pattern ES2015 class functional null component folder less inheritance 

What about React? pattern ES2015 class functional null component folder less inheritance recompose 

What about React? pattern ES2015 class functional null component folder less inheritance recompose null-input-value-prop 

We are HIRING [email protected]