redux, relay, horizonあるいはelm
TRANSCRIPT
Redux, Relay, Horizon あるいはElm
TechBuzz #25 HTML5+JS勉強会
About me
@chuck0523
25歳 エンジニア歴2年⺫⽬目
フロントエンドエンジニア
My Skills
• HTML, Haml, Slim
• CSS, Sass, CSS Modules, PostCSS
• JavaScript, jQuery, React.js
• Ruby, Rails
• Webpack, npm
What I’m doing as OSS
• 技術ブログ “コンパイラかく語りき”
• Qiita 3000ストック @chuck0523
• TechTalkTokyo#1 登壇 ->資料
My jobs
• 株式会社リブセンス @Tokyo
• EastMeetEast, Inc @New York
• 所感 -> GRD - HOW IS IT LIKE
• （フリーランス興味あります…！）
自己紹介おしまい。
From MVC to UI component
From MVC to UI components
• MVC全盛期 like Rails, Angular
• jQueryで状態管理つらい…
• React.js for View or SPA
• Flux戦争 → Redux
React.js + Redux is answer?
フロントエンドの多様性
– Rebuild.fm
“⽇日本のフロントエンドは多様性がない”
なるほど
Other options are…
Other options
• Relay: connects React.js with GraphQL
• Horizon.js: connects React.js with RethinkDB
• Elm: alters React.js and Redux(state management)
※ React + Redux をそっくり代替するわけではない
Relay.js
• Facebook製フレームワーク
• React.jsとGraphQLをつなぐ
• componentがデータのやり取りを知っている
Component-Data Co-location
Reduce coupling, increase reusability.
コンポーネントとデータが同じ場所に
少ない結びつきと⾼高い再利⽤用性
How Redux flows data
https://css-tricks.com/learning-react-redux/
single-source-of-truth
How Relay deal with data
building-the-facebook-news-feed-with-relay
GraphQL補⾜足
そもそもGraphQLとは
“ GraphQLは、クライアント・サーバ間でのデータのやりとりを記述するためのクエリ⾔言語です。GraphQL⾃自体は2012年からFacebookで開発されており、先⽉月の2015年7⽉月にRFCドラフト案を公開しました。 GraphQLの⽂文法は直感的で柔軟であり、学習コストが⼩小さいことが特徴となっています。 “
GraphQLについて調べてみた - サイバーエージェント 公式エンジニアブログ
GraphQL query sample
{ user(id: 350) { id, name, isViewerFriend, profilePicture(size: 50) { uri, width, height } }}
↑ id = 350のuserを取得するクエリ
{ "user" : { "id": 350, "name": "Jing Chen", "isViewerFriend": true, "profilePicture": { "uri": "http://someurl.cdn/pic.jpg", "width": 50, "height": 50 } }}
GraphQL query sample
↑クエリに対するレスポンス(GraphQL Introduction)
なぜGraphQLなのか
–Jacob Gillespie
“From REST to GraphQL”
Relayまとめ
–Facebook Relayについてまとめ
“ReactがDOMの懸念事項を抹殺してくれたのと同じようにRelayはデータ取得時の
懸念事項を抹殺してくれる。”
Relayが解決すること
–Facebook Relayについてまとめ
Further about Relay
• Tokyo React.js #3 Meetup (ja): Missing Pages: ReactJS/GraphQL/RelayJS
• Relay チュートリアル【⽇日本語翻訳】
• React, Express, Webpack, Relay, GraphQLでつくるSPA
Horizon.js
“The Horizon server packages a realtime database with convenient APIs and services that make it easy to use modern JavaScript frameworks like React, Angular, and React Native.”
https://horizon.io/
Horizon.js is…
• リアルタイムWebApplicationを作るのに最適
• RethinkDBに乗っている
• RethinkDBとHorizonは同じ⼈人々によって開発されており、完全にオープンソース
• バックエンドの機能を提供してくれる
Horizon Live DEMO
DEMOでやっていること
• DBから保存済みチャットの取得
• チャット⼊入⼒力後、保存ボタンによるDB記録
• チャットのsubscribe
Message.jsx
https://github.com/chuck0523/learning-langs/blob/gh-pages/js/reChat/src/components/message.jsx
Messages.jsx(1)
https://github.com/chuck0523/learning-langs/blob/gh-pages/js/reChat/src/components/messages.jsx
Messages.jsx(2)
https://github.com/chuck0523/learning-langs/blob/gh-pages/js/reChat/src/components/messages.jsx
チャットのsubscribe
Messages.jsx(3)
https://github.com/chuck0523/learning-langs/blob/gh-pages/js/reChat/src/components/messages.jsx
チャットのrender
App.jsx(1)
https://github.com/chuck0523/learning-langs/blob/gh-pages/js/reChat/src/components/app.jsx
アプリケーションのsetup
App.jsx(2)
https://github.com/chuck0523/learning-langs/blob/gh-pages/js/reChat/src/components/app.jsx
reactイベントの定義
App.jsx(3)
https://github.com/chuck0523/learning-langs/blob/gh-pages/js/reChat/src/components/app.jsx
DB保存イベント
“The heart of Horizon is the Collection object, which lets you store, retrieve, and filter documents. Many
Collection methods for reading and writing documents return RxJS Observables.”
個⼈人的COOLポイント
Further about Horizon.js• Horizon authentication
• Permissions and schema enforcement
• Example apps
• Express, Koa, Hapi
• React, Vue, CycleJS, RiotJS
• RethinkDB, React.js, horizon, Webpackでつくるリアルタイムチャットアプリ
Elm
Elm is…
• 仮想DOM（React.js）
• AltJS（CoffeeScript, TypeScript）
• 静的型付け
• 関数型（Haskell, Scala）
• No runtime error
Elm Architecture• Elmで広く採⽤用されている
• Reduxに影響を与えた
• 基本パターンはModel, Update, View
The Elm Architecture - elm-lang.org
Sample code of Elm
Elm ⇣
React + Redux + Redux middleware + TypeScript + Immutable.js
??
まとめ
の代わりにいま気になるもの
Apollo
GraphQL with React + Redux
ご清聴ありがとうございました
諸々のご依頼、お待ちしてます🙌