Elm for React.js Users

Dc32f175bec875eed2147b404f9bdc5a?s=47 Yosuke Torii
February 23, 2016

Elm for React.js Users

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

Dc32f175bec875eed2147b404f9bdc5a?s=128

Yosuke Torii

February 23, 2016
Tweet

Transcript

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

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

    ・ジンジャー研究室 誰? @jinjor
  3. Elm の紹介

  4. main = span [class "message"] [text "Hello, World!"] ・関数型言語 ・静的型付き言語

    ・ JavaScript にコンパイルされる ・ 2012 年誕生 Elm is 何?
  5. React.js Elm なぜ React.js Meetup で Elm ? ?

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

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

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

    なぜ React.js Meetup で Elm ? ?
  9. React.js/Flux を追っている人なら Elm を楽しめるはず!

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

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

  12. Virtual DOM の導入

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

  14. VDOM の生成コストを抑えたい Old Model Old VDOM New Model New VDOM

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

    diff diff ・ Model 同士を比較したい ・ shouldComponentUpdate() ・ Immutable.js Elm では全てのデータが Immutable
  16. Elm の描画は速い ※2014 年当時

  17. The Elm Architecture

  18. Elm は FRP 言語 ・ FRP = Functional Reactive Programming

    (関数型リアクティブプログラミング) ・ JS ライブラリでは RxJS, Bacon.js, Kefier など
  19. Elm は FRP 言語 Time a 2 1 Signal: 時間とともに変化する値

  20. Elm は FRP 言語 Time a 2 1 Time b

    4 2 map (*2) Signal: 時間とともに変化する値
  21. 例:クリック回数を出力する Time Time mouse clicks count 2 1 Time HTML

    <div> 1 </div> <div> 2 </div> map foldp
  22. Elm アプリケーションの構造 mouse position HTML mouse clicks keydown Enter ?

    アクションの Signal を 最終的に HTML の Signal に変換するのが目的
  23. 設計方針がないとカオスに mouse position mouse clicks keydown Enter HTML ? ?

    ? ? ? ? ? ? ?
  24. The Elm Architecture ・ Elm 公式で推しているアーキテクチャ ・ Redux にインスピレーションを与えた ・

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

    GitHub のチュートリアルが人気(★ 1774 ) 去年の 11 月
  26. Elm Architecture に従うと Action View Model

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

  28. コードが見たい

  29. カウンターを作る

  30. カウンターを作る import StartApp.Simple exposing (start) main = start { model

    = model, update = update, view = view } 初期状態 状態を更新 する関数 HTML 描画 する関数
  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 "+" ] ]
  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 "+" ] ] 初期状態
  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 "+" ] ] 初期状態 アクションの種類
  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 "+" ] ] 初期状態 アクションの種類 アクションの種類に 応じて状態を更新
  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 を生成
  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 を生成
  37. Model Model 複雑なケースは Tutorial で ・コンポーネントの階層化 ・非同期通信するコンポーネント Action View Model

    Action View Model Effect Action Action View View
  38. 改めて Elm の良さ

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

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

  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
  43. ありがとうございました