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

1. Redux, Relay, Horizon
あるいはElm
TechBuzz #25 HTML5+JS勉強会

2. About me

3. @chuck0523
25歳 エンジニア歴2年⺫⽬目
フロントエンドエンジニア

4. My Skills
• HTML, Haml, Slim
• CSS, Sass, CSS Modules, PostCSS
• JavaScript, jQuery, React.js
• Ruby, Rails
• Webpack, npm

5. What I’m doing as OSS
• 技術ブログ “コンパイラかく語りき”
• Qiita 3000ストック @chuck0523
• TechTalkTokyo#1 登壇 ->資料

6. My jobs
• 株式会社リブセンス @Tokyo
• EastMeetEast, Inc @New York
• 所感 -> GRD - HOW IS IT LIKE
• （フリーランス興味あります…！）

7. 自己紹介おしまい。

8. From MVC to UI component

9. From MVC to UI components
• MVC全盛期 like Rails, Angular
• jQueryで状態管理つらい…
• React.js for View or SPA
• Flux戦争 → Redux

10. React.js + Redux is answer?

11. フロントエンドの多様性

12. – Rebuild.fm
“⽇日本のフロントエンドは多様性がない”

13. なるほど

14. Other options are…

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. Relay.js

17. • Facebook製フレームワーク
• React.jsとGraphQLをつなぐ
• componentがデータのやり取りを知っている

18. Sample code of Relay.js
https://facebook.github.io/relay/

19. Component-Data Co-location
Reduce coupling, increase reusability.

20. コンポーネントとデータが同じ場所に
少ない結びつきと⾼高い再利⽤用性

21. How Redux flows data
https://css-tricks.com/learning-react-redux/
single-source-of-truth

22. How Redux flows data
http://redux.js.org/docs/FAQ.html

23. How Relay deal with data
building-the-facebook-news-feed-with-relay

24. GraphQL補⾜足

25. そもそもGraphQLとは
“ GraphQLは、クライアント・サーバ間でのデータのやりとりを記述
するためのクエリ⾔言語です。GraphQL⾃自体は2012年からFacebookで
開発されており、先⽉月の2015年7⽉月にRFCドラフト案を公開しました。
GraphQLの⽂文法は直感的で柔軟であり、学習コストが⼩小さいことが特
徴となっています。 “
GraphQLについて調べてみた - サイバーエージェント 公式エンジニア
ブログ

26. GraphQL query sample
{
user(id: 350) {
id,
name,
isViewerFriend,
profilePicture(size: 50) {
uri,
width,
height
}
}
}
↑ id = 350のuserを取得するクエリ

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. なぜGraphQLなのか

29. –Jacob Gillespie
“From REST to GraphQL”

30. RESTからGraphQLへ
at Medium.com

31. Relayまとめ

32. –Facebook Relayについてまとめ
“ReactがDOMの懸念事項を抹殺してくれ
たのと同じようにRelayはデータ取得時の
懸念事項を抹殺してくれる。”

33. Relayが解決すること
–Facebook Relayについてまとめ

34. Further about Relay
• Tokyo React.js #3 Meetup (ja): Missing
Pages: ReactJS/GraphQL/RelayJS
• Relay チュートリアル【⽇日本語翻訳】
• React, Express, Webpack, Relay, GraphQLで
つくるSPA

35. Horizon.js

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. Horizon.js is…
• リアルタイムWebApplicationを作るのに最適
• RethinkDBに乗っている
• RethinkDBとHorizonは同じ⼈人々によって開発
されており、完全にオープンソース
• バックエンドの機能を提供してくれる

38. Horizon Live DEMO

39. DEMOでやっていること
• DBから保存済みチャットの取得
• チャット⼊入⼒力後、保存ボタンによるDB記録
• チャットのsubscribe

40. Message.jsx
https://github.com/chuck0523/learning-langs/blob/gh-pages/js/reChat/src/
components/message.jsx

41. Messages.jsx(1)
https://github.com/chuck0523/learning-langs/blob/gh-pages/js/reChat/src/
components/messages.jsx

42. Messages.jsx(2)
https://github.com/chuck0523/learning-langs/blob/gh-pages/js/
reChat/src/components/messages.jsx
チャットのsubscribe

43. Messages.jsx(3)
https://github.com/chuck0523/learning-langs/blob/gh-pages/js/
reChat/src/components/messages.jsx
チャットのrender

44. App.jsx(1)
https://github.com/chuck0523/learning-langs/blob/gh-pages/js/reChat/src/
components/app.jsx
アプリケーションのsetup

45. App.jsx(2)
https://github.com/chuck0523/learning-langs/blob/gh-pages/js/reChat/src/
components/app.jsx
reactイベントの定義

46. App.jsx(3)
https://github.com/chuck0523/learning-langs/blob/gh-pages/js/reChat/src/
components/app.jsx
DB保存イベント

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. 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. Elm

50. Elm is…
• 仮想DOM（React.js）
• AltJS（CoffeeScript, TypeScript）
• 静的型付け
• 関数型（Haskell, Scala）
• No runtime error

51. Elm Architecture
• Elmで広く採⽤用されている
• Reduxに影響を与えた
• 基本パターンはModel, Update, View
The Elm Architecture - elm-lang.org

52. Sample code of Elm

53. Elm
⇣
React + Redux + Redux middleware
+ TypeScript + Immutable.js
??

54. まとめ

55. の代わりにいま気になるもの

56. Apollo

57. GraphQL with React + Redux

58. ご清聴ありがとうございました
諸々のご依頼、お待ちしてます🙌