Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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.j...
Relay.js
• Facebook製フレームワーク
• React.jsとGraphQLをつなぐ
• componentがデータのやり取りを知っている
Sample code of Relay.js
https://facebook.github.io/relay/
Component-Data Co-location
Reduce coupling, increase reusability.
コンポーネントとデータが同じ場所に
少ない結びつきと⾼高い再利⽤用性
How Redux flows data
https://css-tricks.com/learning-react-redux/
single-source-of-truth
How Redux flows data
http://redux.js.org/docs/FAQ.html
How Relay deal with data
building-the-facebook-news-feed-with-relay
GraphQL補⾜足
そもそもGraphQLとは
“ GraphQLは、クライアント・サーバ間でのデータのやりとりを記述
するためのクエリ⾔言語です。GraphQL⾃自体は2012年からFacebookで
開発されており、先⽉月の2015年7⽉月にRFCドラフト案を...
GraphQL query sample
{
user(id: 350) {
id,
name,
isViewerFriend,
profilePicture(size: 50) {
uri,
width,
height
}
}
}
↑ id ...
{
"user" : {
"id": 350,
"name": "Jing Chen",
"isViewerFriend": true,
"profilePicture": {
"uri": "http://someurl.cdn/pic.jp...
なぜGraphQLなのか
–Jacob Gillespie
“From REST to GraphQL”
RESTからGraphQLへ
at Medium.com
Relayまとめ
–Facebook Relayについてまとめ
“ReactがDOMの懸念事項を抹殺してくれ
たのと同じようにRelayはデータ取得時の
懸念事項を抹殺してくれる。”
Relayが解決すること
–Facebook Relayについてまとめ
Further about Relay
• Tokyo React.js #3 Meetup (ja): Missing
Pages: ReactJS/GraphQL/RelayJS
• Relay チュートリアル【⽇日本語翻訳】
• Reac...
Horizon.js
“The Horizon server packages a realtime database with convenient APIs and services that
make it easy to use modern JavaScr...
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
チャットのsubs...
Messages.jsx(3)
https://github.com/chuck0523/learning-langs/blob/gh-pages/js/
reChat/src/components/messages.jsx
チャットのrend...
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 metho...
Further about Horizon.js
• Horizon authentication
• Permissions and schema enforcement
• Example apps
• Express, Koa, Hapi...
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
ご清聴ありがとうございました
諸々のご依頼、お待ちしてます🙌
Nächste SlideShare
Wird geladen in …5
×

Redux, Relay, HorizonあるいはElm

かつて大人気であったMVCパターンに対して、最近のフロントエンド界隈ではすっかりポピュラーになったUIコンポーネント設計。
しかし国内のフロントエンド界隈では、React + Reduxの組み合わせが圧倒的に人気であるように思えます。今回はコンポーネント設計の別手段として、Relay, Horizon そしてElmについてカンタンな比較を行いたいと思います。

  • Als Erste(r) kommentieren

Redux, Relay, HorizonあるいはElm

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

×