Riot.js Conference @Tokyo #3

1. で というOSSを作ったお話。
Riot.js 勉強会 @Tokyo #3
2018年4月5日
VIRON

2. - 自己紹介
- オレオレ解釈でこれまでのフロントエンドの歴史を振り返る
- Viron紹介
- 自作した周辺ライブラリ群
- VironでのRiotの使い方
アジェンダ

3. 大谷 剛
2010 株式会社サイバーエージェント入社
2017 株式会社シーエー・モバイル出向
歴は1年ほど
フロントエンドエンジニア
github: cathcheeno

4. オレオレ解釈で
これまでのフロントエンドの歴史を振り返る

5. フロントエンド 有名なライブラリは？

6. .etc

7. .etc
コンポーネント指向のViewライブラリ

8. オレオレ解釈 こんな歴史

11. 古き良き時代。

14. 変化が求められる時代。

16. HTMLがHyperに使われる。

19. のサービスのフロントエンドは？

22. VIRON
を作ることに。

23. Vironが求めるViewライブラリは、

24. みたいなコンポーネント指向Viewライブラリで、

25. みたいなコンポーネント指向Viewライブラリで、
難しくないもの。学習難易度が低いもの。

26. みたいなコンポーネント指向Viewライブラリで、
難しくないもの。学習難易度が低いもの。
他プロジェクトでも使えるもの。社内ノウハウを溜めれるもの。

27. みたいなコンポーネント指向Viewライブラリで、
難しくないもの。学習難易度が低いもの。
他プロジェクトでも使えるもの。社内ノウハウを溜めれるもの。

28. VIRON
って何？

29. OSS
VIRON
by

30. 運用管理ツール
VIRON

31. VIRON

32. プロジェクト

33. プロジェクト
API

34. プロジェクト
API

35. プロジェクト
API
プロジェクト
API
プロジェクト
API

36. プロジェクト
API
プロジェクト
API
プロジェクト
API

37. https://github.com/cam-inc/viron

40. デモサイト

41. みたいなコンポーネント指向Viewライブラリで、
難しくないもの。学習難易度が低いもの。
他プロジェクトでも使えるもの。社内ノウハウを溜めれるもの。

42. とはいえ、

43. とはいえ、

44. とはいえ、
公式サイト以外の情報リソースが少ない。

45. とはいえ、
公式サイト以外の情報リソースが少ない。
関連ライブラリが少ない。

46. とはいえ、
公式サイト以外の情報リソースが少ない。
関連ライブラリが少ない。
HOCやrender-propsのようなプラクティスが少ない。使えない。

47. とはいえ、
公式サイト以外の情報リソースが少ない。
関連ライブラリが少ない。
HOCやrender-propsのようなプラクティスが少ない。使えない。
「HTML in JS」ではなく「JS in HTML」。

48. でも、
は、シンプル・簡単さがウリ。

49. - Riotはシンプル。そこからブレない。
- 多くは求めない。
- 無ければ作る。
- 「100% x 複雑」よりも「90% x 簡単」を選ぶ。
基本方針

50. 状態管理ライブラリがなかったので...

51. 状態管理ライブラリがなかったので...
RiotX
https://github.com/cam-inc/riotx

52. 状態管理ライブラリがなかったので...
RiotX
https://github.com/cam-inc/riotx
VueX
https://vuex.vuejs.org/
のRiot版です。
ほとんどVueXと一緒です。
https://codepen.io/fkei/pen/ybmNqN?editors=1010#0

53. 良いルーターがなかったので...

54. 良いルーターがなかったので...
esr
https://github.com/cam-inc/esr

55. esr
https://github.com/cam-inc/esr

56. esr
https://github.com/cam-inc/esr

57. esr
https://github.com/cam-inc/esr

58. esr
https://github.com/cam-inc/esr
「/foo」 -> 「/bar」に変わったら、
onBefore
onEnter
onAfter
の順に実行される。非同期実行も出来る。

59. esr
https://github.com/cam-inc/esr
onBefore
onEnter
onAfter
事前に「:userId」のユーザ情報を取得。
(存在しなければTOPへリダイレクト。)
「/users/:userId」へ遷移した場合。
「:userId」のユーザ情報を画面に出力。
i.e.) riot.mount();
正常に画面出力が完了。
Google Analytics等、PV+1する。
みたいに使用できる。

60. VIRON
ではこう実装してます

61. 使い回し可能なRiotタグ群。コンポーネント。
エントリーポイント。
URLに紐付いて表示されるページ。
ルーター。esr。
状態管理。RiotX。
ディレクトリ構造

62. RiotタグのJS部。
「viron-」プレフィックス。
RiotタグのHTML部。
HTMLとJSは別ファイルで管理しています。

63. 「onTap」でDesktop/Mobile両デバイスに対応。
Desktop / Mobileへの対応

64. 「false」にしています。

65. Presentationalなコンポーネントに。

66. Presentationalなコンポーネントに。
i.e.
- optsを積極的に使用。
- コールバック関数を実行するだけ。
- this内でデータを管理しない。
- storeを監視しない。

67. mixinで
- RiotXとコネクト。
- esr(ルーター)とコネクト。
- i18n関連。
- .etc

68. その他、懇親会にて。

69. ご清聴ありがとうございました m( _ _ )m