takusuta tech conf #1 で使用したスライドです。 Riot.jsを使ったweb開発に触れています。

1. Riot.jsを用いたWeb開発
Takusuta TechConf #1
- ライブ配信サービス作ってみた -

2. INTRODUCTION
自己紹介
> 2015年 CyberAgent 新卒入社
> 学生時代にサンフランシスコ少しだけ留学
> 現在、ライブ配信動画サービス「Takusuta」を立ち上げ、運用中
今井啓介 (KEISUKE IMAI) ENGINEER
株式会社 タクスタ 15年新卒
@ imakei
#js #android #node.js ...

3. キーワード
Gulp(Browserify)
Riot(←いちおうメイン)
Flux
Isomorphic(ServerSideRendering)
JWPlayer

4. 現在のWEBに行き着くまで
拡散でweb必要じゃね？
React + SPA でさくっと
でもこれ重くね？てかSEO弱くね？
くっそ軽くてSEO強いやつあるらしいよ
を使おう. ←今ここ

6. Riot
A React-like user interface micro-library

7. Riot
● とにかく軽い
● カスタムタグ
● Isomorphic

8. WEBの構成

9. WEBの構成
ー 通常のアクセス APIサーバー
Node
APIサーバ
配信サーバ
ブラウザからのアクセス
HTML

10. WEBの構成
ー Botからのアクセス
Node
APIサーバ
配信サーバ
Botからのアクセス
HTML
APIサーバー

11. 開発環境

12. 開発環境

13. ソースコードの構成

14. ソースコードの構成
frontend backendapp

15. APP
app - FrontendとBackendの共通部分
Component
Action
Store
Utility
etc...

16. フロントエンド

17. フロントエンド
backendfrontend app

18. フロントエンド
Flux

19. フロントエンド ー Flux
ほんとにシンプル
https://facebook.github.io/flux/docs/overview.html

20. フロントエンド
コンポーネント

21. フロントエンド - コンポーネント
DOM + Style + Script

22. フロントエンド - コンポーネント
DOM
Style
Script

23. フロントエンド - コンポーネント

24. バックエンド

25. バックエンド
frontend backendapp

26. バックエンド
APIサーバー
+
HTML配信サーバー
（Isomorphic）

27. バックエンド
Isomorphic
(サーバサイドレンダリング)

28. バックエンド - Isomorphic

29. Player

30. Player

31. End