ライブで学ぶ The Elm Architecture #meguroes / Meguro ES 23rd

Meguro.es # 23 で使用したスライドです。

当日の形式は、簡単な Elm のサンプルアプリを題材としたライブコーディングです。スライド中にあげたソースコードは、実際には発表中にその場で編集・ビルドしつつ、機能が追加されていく様子をリアルタイムにお見せしました。

イベント概要：https://meguroes.connpass.com/event/140366/

Transcript

1. ライブで学ぶ The Elm Architecture チェシャ猫 (@y_taka_23) Meguro.es #23 (2019/10/10) #meguroes
2. Elm http://elm-lang.org #meguroes
3. 目的特化 AltJS、Elm • Web フロントエンドに特化 ◦ サーバサイドは守備範囲外 • 必要最小限の言語使用 ◦ Haskell と似ているがかなり機能が絞られている • フレームワークと不可分 ◦ 面倒な部分はすべて隠蔽されている ◦ The Elm Architecture 略して TEA #meguroes
4. 前々回の発表 #meguroes
5. Msg Model Html (rendering) update view #meguroes
6. Msg Model Html (rendering) update view Model の更新 #meguroes
7. Msg Model Html (rendering) update view vDOM に反映 #meguroes
8. #meguroes Msg Model Html (rendering) update view #meguroes Msg を起点とする一方向性
9. Elm 書いたことある人？ #meguroes
10. （以下、ライブコーディング） #meguroes
11. 完成イメージ #meguroes
12. 1. アプリが持つデータを描画 #meguroes
13. Msg Model Html (rendering) update view #meguroes [ "Initial Message 2" , "Initial Message 1" ] <ul> <li>Initial Message 2</li> <li>Initial Message 1</li> </ul>
14. #meguroes type alias Comment = String type alias Model = { comments : List Comment } initComments : List Comment initComments = [ "Initial Message 2" , "Initial Message 1" ]
15. #meguroes view : Model -> Html Msg view model = div [] [ h1 [] [ text "Guestbook" ] , input [] [ type_ "text" , placeholder "Message..." ] , button [] [ text "Submit" ] , ul [] <| List.map comment model.comments ] comment : Comment -> Html Msg comment c = li [] [ text c ]
16. 2. 新しいコメントを追加 #meguroes
17. Msg Model Html (rendering) update view #meguroes [ "New Message" , "Initial Message 2" , "Initial Message 1" ] [ "Initial Message 2" , "Initial Message 1" ] AddComment "New Message"
18. #meguroes type Msg = NoOp | AddComment Comment update : Msg -> Model -> ( Model, Cmd Msg ) update msg model = case msg of NoOp -> ( model, Cmd.none ) AddComment c -> ( { model | comments = c :: model.comments } , Cmd.none )
19. #meguroes view : Model -> Html Msg view model = div [] [ h1 [] [ text "Guestbook" ] , input [] [ type_ "text" , placeholder "Message..." ] , button [ onClick <| AddComment "New Message" ] [ text "Submit" ] , ul [] <| List.map comment model.comments ]
20. 3. ユーザ入力の取得と反映 #meguroes
21. Msg Model Html (rendering) update view #meguroes AddComment $('#input').val()
22. Msg Model Html (rendering) update view #meguroes [ "Initial Message 2" , "Initial Message 1" ] SetInput "Current Input" "" "Current Input" [ "Initial Message 2" , "Initial Message 1" ]
23. Msg Model Html (rendering) update view #meguroes [ "Current Input" , "Initial Message 2" , "Initial Message 1" ] [ "Initial Message 2" , "Initial Message 1" ] AddComment "Current Input" ""
24. #meguroes update : Msg -> Model -> ( Model, Cmd Msg ) update msg model = case msg of SetInput c -> ( { model | currentInput = c }, Cmd.none ) AddComment -> ( { model | currentInput = "" , comments = model.currentInput :: model.comments } , Cmd.none )
25. #meguroes view : Model -> Html Msg view model = div [] [ h1 [] [ text "Guestbook" ] , input [] [ type_ "text" , placeholder "Message..." , onInput SetInput , value model.currentInput ] , button [ onClick AddComment ] [ text "Submit" ] , ul [] <| List.map comment model.comments ]
26. Would You Like a Cup of TEA? Presented by チェシャ猫 (@y_taka_23) #meguroes