Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Elm の紹介

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Virtual DOM の導入

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

The Elm Architecture

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Elm Architecture に従うと Action View Model

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

コードが見たい

Slide 29

Slide 29 text

カウンターを作る

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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 "+" ] ]

Slide 32

Slide 32 text

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 "+" ] ] 初期状態

Slide 33

Slide 33 text

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 "+" ] ] 初期状態 アクションの種類

Slide 34

Slide 34 text

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 "+" ] ] 初期状態 アクションの種類 アクションの種類に 応じて状態を更新

Slide 35

Slide 35 text

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 を生成

Slide 36

Slide 36 text

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 を生成

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

改めて Elm の良さ

Slide 39

Slide 39 text

膨大なスタックを必要としない 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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

ありがとうございました