Elm for React.js Users

React.js Meetup #3 での発表資料。Elmの簡単な紹介です。

Transcript

1. React.js ユーザのための Elm
   2016/02/23
   Yosuke Torii
   

   View Slide

2. ・鳥居　陽介
   ・株式会社ワークスアプリケーションズ勤務
   ・ CodeZine に 5 記事 (React.js, HTTP/2, Elm)
   ・ジンジャー研究室
   誰？
   @jinjor
   

   View Slide

3. Elm の紹介
   

   View Slide

4. main =
   span [class "message"] [text "Hello, World!"]
   ・関数型言語
   ・静的型付き言語
   ・ JavaScript にコンパイルされる
   ・ 2012 年誕生
   Elm is 何？
   

   View Slide

5. React.js Elm
   なぜ React.js Meetup で Elm ？
   ？
   

   View Slide

6. React.js
   Flux
   Elm
   と一緒に使われる
   アーキテクチャの
   なぜ React.js Meetup で Elm ？
   ？
   

   View Slide

7. React.js
   Flux
   Elm
   Redux
   と一緒に使われる
   アーキテクチャの
   で有名な
   ライブラリの
   なぜ React.js Meetup で Elm ？
   ？
   

   View Slide

8. React.js
   Flux
   Elm
   Redux
   と一緒に使われる
   アーキテクチャの
   で有名な
   ライブラリの
   が参考にしたと
   言われる
   なぜ React.js Meetup で Elm ？
   ？
   

   View Slide

9. React.js/Flux を追っている人なら
   Elm を楽しめるはず！
   

   View Slide

10. フロントエンド界隈で人気急上昇
    2015 年内に
    3 倍の伸び
    http://elm-lang.org/blog/new-adventures-for-elm
    

    View Slide

11. 最近の Elm
    Virtual DOM の導入
    The Elm Architecture
    

    View Slide

12. Virtual DOM の導入
    

    View Slide

13. VDOM の生成コストを抑えたい
    Old
    VDOM
    New
    VDOM
    diff
    

    View Slide

14. VDOM の生成コストを抑えたい
    Old
    Model
    Old
    VDOM
    New
    Model
    New
    VDOM
    diff
    diff
    ・ Model 同士を比較したい
    ・ shouldComponentUpdate()
    ・ Immutable.js
    

    View Slide

15. VDOM の生成コストを抑えたい
    Old
    Model
    Old
    VDOM
    New
    Model
    New
    VDOM
    diff
    diff
    ・ Model 同士を比較したい
    ・ shouldComponentUpdate()
    ・ Immutable.js
    Elm では全てのデータが
    Immutable
    

    View Slide

16. Elm の描画は速い
    ※2014 年当時
    

    View Slide

17. The Elm Architecture
    

    View Slide

18. Elm は FRP 言語
    ・ FRP = Functional Reactive Programming
    （関数型リアクティブプログラミング）
    ・ JS ライブラリでは RxJS, Bacon.js, Kefier など
    

    View Slide

19. Elm は FRP 言語
    Time
    a 2
    1
    Signal: 時間とともに変化する値
    

    View Slide

20. Elm は FRP 言語
    Time
    a 2
    1
    Time
    b 4
    2
    map
    (*2)
    Signal: 時間とともに変化する値
    

    View Slide

21. 例：クリック回数を出力する
    Time
    Time
    mouse
    clicks
    count 2
    1
    Time
    HTML
    1
    
    
    2
    
    map
    foldp
    

    View Slide

22. Elm アプリケーションの構造
    mouse
    position
    HTML
    mouse
    clicks keydown Enter
    ?
    アクションの Signal を
    最終的に HTML の Signal
    に変換するのが目的
    

    View Slide

23. 設計方針がないとカオスに
    mouse
    position
    mouse
    clicks
    keydown Enter
    HTML
    ? ?
    ?
    ?
    ?
    ?
    ?
    ?
    ?
    

    View Slide

24. The Elm Architecture
    ・ Elm 公式で推しているアーキテクチャ
    ・ Redux にインスピレーションを与えた
    ・ GitHub のチュートリアルが人気（★ 1774 ）
    

    View Slide

25. The Elm Architecture
    ・ Elm 公式で推しているアーキテクチャ
    ・ Redux にインスピレーションを与えた
    ・ GitHub のチュートリアルが人気（★ 1774 ）
    去年の 11 月
    

    View Slide

26. Elm Architecture に従うと
    Action
    View
    Model
    

    View Slide

27. Elm Architecture に従うと
    Action
    View
    Model
    しかも、
    開発者は Signal をほとんど意識しなくていい
    

    View Slide

28. コードが見たい
    

    View Slide

29. カウンターを作る
    

    View Slide

30. カウンターを作る
    import StartApp.Simple exposing (start)
    main =
    start { model = model, update = update, view = view }
    初期状態 状態を更新
    する関数
    HTML 描画
    する関数
    

    View Slide

31. model = 0
    type Action = Increment | Decrement
    update action model =
    case action of
    Increment ->
    model + 1
    Decrement ->
    model - 1
    view address model =
    div [ ]
    [ button [ onClick address Decrement ] [ text "-" ]
    , span [ ] [ text (toString model) ]
    , button [ onClick address Increment ] [ text "+" ]
    ]
    

    View Slide

32. model = 0
    type Action = Increment | Decrement
    update action model =
    case action of
    Increment ->
    model + 1
    Decrement ->
    model - 1
    view address model =
    div [ ]
    [ button [ onClick address Decrement ] [ text "-" ]
    , span [ ] [ text (toString model) ]
    , button [ onClick address Increment ] [ text "+" ]
    ]
    初期状態
    

    View Slide

33. model = 0
    type Action = Increment | Decrement
    update action model =
    case action of
    Increment ->
    model + 1
    Decrement ->
    model - 1
    view address model =
    div [ ]
    [ button [ onClick address Decrement ] [ text "-" ]
    , span [ ] [ text (toString model) ]
    , button [ onClick address Increment ] [ text "+" ]
    ]
    初期状態
    アクションの種類
    

    View Slide

34. model = 0
    type Action = Increment | Decrement
    update action model =
    case action of
    Increment ->
    model + 1
    Decrement ->
    model - 1
    view address model =
    div [ ]
    [ button [ onClick address Decrement ] [ text "-" ]
    , span [ ] [ text (toString model) ]
    , button [ onClick address Increment ] [ text "+" ]
    ]
    初期状態
    アクションの種類
    アクションの種類に
    応じて状態を更新
    

    View Slide

35. model = 0
    type Action = Increment | Decrement
    update action model =
    case action of
    Increment ->
    model + 1
    Decrement ->
    model - 1
    view address model =
    div [ ]
    [ button [ onClick address Decrement ] [ text "-" ]
    , span [ ] [ text (toString model) ]
    , button [ onClick address Increment ] [ text "+" ]
    ]
    初期状態
    アクションの種類
    アクションの種類に
    応じて状態を更新
    状態に対応する
    HTML を生成
    

    View Slide

36. model = 0
    type Action = Increment | Decrement
    update action model =
    case action of
    Increment ->
    model + 1
    Decrement ->
    model - 1
    view address model =
    div [ ]
    [ button [ onClick address Decrement ] [ text "-" ]
    , span [ ] [ text (toString model) ]
    , button [ onClick address Increment ] [ text "+" ]
    ]
    初期状態
    アクションの種類
    アクションの種類に
    応じて状態を更新
    状態に対応する
    HTML を生成
    

    View Slide

37. Model
    Model
    複雑なケースは Tutorial で
    ・コンポーネントの階層化
    ・非同期通信するコンポーネント
    Action
    View
    Model
    Action
    View
    Model
    Effect
    Action
    Action
    View
    View
    

    View Slide

38. 改めて Elm の良さ
    

    View Slide

39. 膨大なスタックを必要としない
    React
    TypeScript
    Fluxible
    FluxUtils
    virtual-dom
    Immutable.js
    Redux
    Flow
    Browserify
    Gulp
    react-tools
    Babel
    ES6
    JSX
    webpack
    (start-app)
    elm-html (Gulp)
    JS
    Elm
    

    View Slide

40. 静的型付け最高
    ・基本的にランタイムエラーが起きない
    ・超絶リファクタリングしてもバグらない
    ・アーキテクチャをきちんと守れる
    

    View Slide

41. 本番で使えるの？
    ・覚悟の問題
    ・まずは社内で
    社内ビデオ通話アプリ
    

    View Slide

42. Elm をはじめるには
    ・ Elm 公式
    http://elm-lang.org/
    ・ The Elm Architecture
    https://github.com/evancz/elm-architecture-tutorial
    ・関数型リアクティブプログラミング言語 Elm に学ぶ フロントエンド開発の
    新しい形 （ CodeZine ）
    【前編】 http://codezine.jp/article/detail/8873
    【後編】 http://codezine.jp/article/detail/8986
    ・ Elm Advent Calendar 2014
    http://qiita.com/advent-calendar/2014/elm
    ・ Elm Advent Calendar 2015
    http://qiita.com/advent-calendar/2015/elm
    

    View Slide

43. ありがとうございました
    

    View Slide