Slide 1
Slide 1 text
Isomorphic Survival Guide
@koichik
Slide 2
Slide 2 text
話さ ない こ と
• Isomorphicなコ ー デ ィ ン グ ／テ ス ト
• Isomorphicなビ ル ド ／ト ラ ン ス パ イ ル
• Isomorphicなモ ジ ュ ー ル ／パ ッ ケ ー ジ ン グ
• Isomorphicなネ イ テ ィ ブ ア プ リ
Slide 3
Slide 3 text
Agenda
• What's Isomorphic？
• Client/Server Survival Guide
• Meet the Pioneers
• from Rendr
• to React
Slide 4
Slide 4 text
語源
ἴσος
(isos)
μορφή
(morphe)
equal form, shape
同 形
希
英
日
+
+
+
Slide 5
Slide 5 text
X ＋ morphic
同 一
isomorphic
多
変
metamorphic polymorphic
Slide 6
Slide 6 text
http://nodejs.connpass.com/event/13363/
Slide 7
Slide 7 text
Client ＋ Server
Client
JavaScript
JavaScript
Server
Your
Application API
Slide 8
Slide 8 text
Client ＋ Server
Client
JavaScript
JavaScript
Server
Your
Application
Backend
API
Slide 9
Slide 9 text
http://nodejs.connpass.com/event/13363/
Slide 10
Slide 10 text
Frontend ＋ Backend？
Frontend
JavaScript
Your
Application
Backend
JavaScript
Isomorphic？
Slide 11
Slide 11 text
2 x 2？
Frontend Backend
Client
Server
Slide 12
Slide 12 text
ア プ リ ケ ー シ ョ ン の 論理的なレ イ ヤ
本資料で の 定義
人間向け に
情報を 出し 入れ
ス ト レ ー ジ 向け に
情報を 出し 入れ
ネ ッ ト ワ ー ク の
こ ち ら (人間)側
ネ ッ ト ワ ー ク の
あ ち ら 側
Client Server
Frontend Backend
Network
コ ン ピ ュ ー タ の 物理的な位置
Slide 13
Slide 13 text
Agenda
• What's Isomorphic？
• Client/Server Survival Guide
• Meet the Pioneers
• From Rendr
• To React
Slide 14
Slide 14 text
60年代〜 メ イ ン フ レ ー ム の 時代
Client
(ダ ム 端末)
Server
(Host)
Front
end
Back
end
(表示の み)
IBM S/360〜390, z Systems
富⼠通・ ⽇⽴ Mシ リ ー ズ
NEC ACOS
BUNCH
IBM 3270, 5250
(DEC VT100)
Slide 15
Slide 15 text
90年頃〜 C/Sシ ス テ ム
Client
(Windows)
Server
Unix
WindowsNT
Oracle
SQL-Server
Front
end
Back
end
(RDBMSの み)
Visual Basic
Delphi
Slide 16
Slide 16 text
90年代前半〜 3層C/Sシ ス テ ム
Client
(Windows)
Server
(UNIX)
TPモ ニ タ
TUXEDO
Encina
CICS
OpenTP1
Front
end
Back
end
Visual Basic
Delphi
CORBA
Orbix
VisiBroker
M3 (WLE)
TPBroker
Slide 17
Slide 17 text
90年代半ば〜 World Wide Web
Client
(ブ ラ ウ ザ )
Server
Front
end
Back
end
(表示の み)
Perl (CGI)
Java (Servlet/JSP)
Netscape Navigator
Internet Explorer
Slide 18
Slide 18 text
00年頃〜 J2EE (Java2 Enterprise Edition)
Client
(ブ ラ ウ ザ )
Server
Back
end
(表示の み)
Servlet + JSP
Server
Front
end
EJB
RMI over IIOP
Slide 19
Slide 19 text
00年代前半〜 Ajax
Client
(ブ ラ ウ ザ )
Server
Front
end
Back
end
JavaScript
Dojo
Prototype
YUI
jQuery
…
Front
end
PHP
Python
Ruby
…
Slide 20
Slide 20 text
00年代半は〜 RIA (Rich Internet Application)
Client
(ブ ラ ウ ザ +プ ラ グ イ ン )
Server
Back
end
Flash/Flex
Silverlight
Curl
Front
end
Slide 21
Slide 21 text
00年代末〜 ス マ ホ
Client Server
Back
end
iOS
Android
Front
end
Slide 22
Slide 22 text
10年代前半〜 SPA (Single Page Application)
Client
(ブ ラ ウ ザ )
Server
Back
end
Backbone
Ember
Angular
React
Front
end
Slide 23
Slide 23 text
Back, Back Forth and Forth
Client Server
Back
end
Front
end
Client Server
Back
end
Front
end
Client Server
Back
end
Front
end
Slide 24
Slide 24 text
Agenda
• What's Isomorphic？
• Client/Server Survival Guide
• Meet the Pioneers
• From Rendr
• To React
Slide 25
Slide 25 text
Flatiron (Nodejitsu)
• 2011/11/09 公開
• "Isomorphic"生みの 親
• 小さ なIsomorphicラ イ ブ ラ リ の 集合
– テ ン プ レ ー ト (Plates)
– デ ー タ ア ク セ ス (Resourceful)
• CouchDB Client
– ル ー タ (Director)
– バ リ デ ー タ (Revalidator)
http://flatironjs.org/
Slide 26
Slide 26 text
Flatironの Isomorphic
Client
Back
end
Front
end
Client Server
Back
end
Front
end
Isomorphic
Slide 27
Slide 27 text
Mojito (Yahoo)
• 2012/04/01 公開
• YUI3ベ ー ス の MVWフ レ ー ム ワ ー ク
– フ ロ ン ト エ ン ド を C/Sで Isomorphic
• 課題
– 多様なデ バ イ ス 対応
https://developer.yahoo.com/cocktails/mojito/
Slide 28
Slide 28 text
課題
Client Server (PHP)
Back
end
Front
end
Client Server (PHP)
Back
end
Front
end
JS有効
辛い …
JS無効
Slide 29
Slide 29 text
Mojitoの Isomorphic
Client Server (PHP)
Back
end
Client Server (PHP)
Back
end
Front
end
Server (JS)
Front
end
JS有効
JS無効
Isomorphic！
Slide 30
Slide 30 text
Meteor
• 2012/04/11 公開
• Real time & Reactiveなプ ラ ッ ト フ ォ ー ム
• Minimongo
– MongoDBラ イ ク なイ ン メ モ リ DB
– バ ッ ク エ ン ド を C/Sで Isomorphic
• サ ー バ サ イ ド レ ン ダ リ ン グ はPhantomJS
– SEO対策
– フ ロ ン ト エ ン ド はIsomorphicで はない
• Reactへ 変更す る Issueあ り
https://www.meteor.com/
Slide 31
Slide 31 text
Meteorの Isomorphic
MongoDB
Client
Server
Back
end
Front
end
Back
end
Minimongo
Client
Front
end
Back
end
Minimongo
Isomorphic！
Slide 32
Slide 32 text
Mojitoと Meteorの Isomorphic
Client
Server
Frontend
Back
end
Front
end
Client
Server
Backend
Mojito Meteor
Slide 33
Slide 33 text
真の Isomorphic？
Frontend
on Client
Frontend
on Server
Backend
on Client
Backend
on Server
Truly
Isomorphic
？
Slide 34
Slide 34 text
こ れも Isomorphic？
Frontend Isomorphic? Backend
Slide 35
Slide 35 text
C/Sで 分断さ れない なら …
Client Server
(RDBMSの み)
Front
end
C/Sシ ス テ ム
Client Server
ク ラ シ ッ ク なWeb
Back
end
Front
end
Back
end
Slide 36
Slide 36 text
こ れなら Isomorphic
Frontend
on Client
Backend
on Server
Isomorphic
Slide 37
Slide 37 text
課題重要
• Flatiron
– 課題が 不明瞭 (利⽤者が 考え ろ )
• Mojito
– JSの 有効・ 無効
– 課題が ニ ッ チ
• Meteor
– リ ア ル タ イ ム 、 リ ア ク テ ィ ブ
– 人類に は早す ぎ
Slide 38
Slide 38 text
Agenda
• What's Isomorphic？
• Client/Server Survival Guide
• Meet the Pioneers
• From Rendr
• To React
Slide 39
Slide 39 text
Rendr (Airbnb)
• 2013/04/10 公開
– Airbnbの モ バ イ ル サ イ ト 向け に 開発
• Backboneベ ー ス の フ レ ー ム ワ ー ク
– フ ロ ン ト エ ン ド の Isomorphic
• 課題
– SPAの 初期表示
– SPAの SEO
https://github.com/rendrjs/rendr
Slide 40
Slide 40 text
SPAの 課題1－初期表示
Client Server
空の HTML
JSの
実⾏開始
レ ン ダ リ ン グ
GET /index.html
GET /js/main.js
GET /api/foo
index.html
main.js
JSON
遅
延
※2012〜13年頃の 話で す
Slide 41
Slide 41 text
SPAの 課題2－SEO
Crawler Server
空の HTML
GET /index.html
index.html
ク ロ ー ル
不可
※2012〜13年頃の 話で す
Slide 42
Slide 42 text
サ ー バ サ イ ド レ ン ダ リ ン グ と SPA
優れた
Web
サ イ ト
初期レ ス ポ ン ス
SEO
サ ー バ サ イ ド
レ ン ダ リ ン グ
マ イ ク ロ
イ ン タ ラ ク シ ョ ン
シ ン グ ル ペ ー ジ
ア プ リ ケ ー シ ョ ン
http://rauchg.com/2014/7-principles-of-rich-web-applications/
対⽴で はなく
両⽴す べ き ！
Slide 43
Slide 43 text
対⽴
優れた
Web
サ イ ト
初期レ ス ポ ン ス
SEO
サ ー バ サ イ ド
レ ン ダ リ ン グ
マ イ ク ロ
イ ン タ ラ ク シ ョ ン
シ ン グ ル ペ ー ジ
ア プ リ ケ ー シ ョ ン
Ruby on
Rails
JavaScript
異なる ⾔語・ 実装で は
無駄が 大き い
Slide 44
Slide 44 text
解消
優れた
Web
サ イ ト
初期レ ス ポ ン ス
SEO
サ ー バ サ イ ド
レ ン ダ リ ン グ
マ イ ク ロ
イ ン タ ラ ク シ ョ ン
シ ン グ ル ペ ー ジ
ア プ リ ケ ー シ ョ ン
JavaScript
JavaScript
Isomorphic！
Slide 45
Slide 45 text
Rendr
Client Server (RoR)
Back
end
Server (JS)
Front
end
初回表示
Server (RoR)
Back
end
そ の 後
Server (JS)
Front
end
Slide 46
Slide 46 text
初期表示の 改善
Client Server
HTML
JSの
実⾏開始
レ ン ダ リ ン グ
GET /index.html
GET /js/main.js
GET /api/bar
index.html
main.js
JSON
遅
延
レ ン ダ リ ン グ
操作
Slide 47
Slide 47 text
SEOの 改善
Crawler Server
HTML
GET /index.html
index.html
ク ロ ー ル
可能
レ ン ダ リ ン グ
Slide 48
Slide 48 text
Browser
DOM操作
イ ベ ン ト
'pushstate'
Backboneの 基本要素
Router
View Model Sync
B
r
o
w
s
e
r
B
a
c
k
e
n
d
Slide 49
Slide 49 text
Server
GET /users/1
Backboneの Isomorphic化
Router
Model Sync
B
r
o
w
s
e
r
B
a
c
k
e
n
d
HTML
View
Controller
Handlebars
New!
Slide 50
Slide 50 text
不⼀致
Client
Backboneの Isomorphic化 (Client-side)
View Model
S
e
r
v
e
r
モ デ ル が 空
B
r
o
w
s
e
r
HTML
Handlebars
Slide 51
Slide 51 text
Server
Backboneの Isomorphic化 (Server-side)
View Model
B
r
o
w
s
e
r
Handlebars
HTML
JSON
モ デ ル の 状態を
シ リ ア ラ イ ズ し て
HTMLに 埋め 込む Dehydrate
状態
Slide 52
Slide 52 text
Client
Backboneの Isomorphic化 (Client-side)
View Model
S
e
r
v
e
r
(Re)Hydrate
Handlebars
B
r
o
w
s
e
r
HTML
JSON
画面と モ デ ル の
内容が 一致
イ ベ ン ト
ハ ン ド ラ
登録
状態
Slide 53
Slide 53 text
MVWの Isomorphic化 4大エ リ ア
Rendering
Routing Fetching
Hydrating
Slide 54
Slide 54 text
何サ ー バ ？
Client Server (any)
Back
end
Server (JS)
Front
end
Front
end
こ れ
フ ロ ン ト エ ン ド
サ ー バ
不評
Slide 55
Slide 55 text
何サ ー バ ？
Client Server (any)
Back
end
Server (JS)
Front
end
Front
end
レ ン ダ リ ン グ
サ ー バ
バ ッ ク エ ン ド (の )
フ ロ ン ト エ ン ド
Slide 56
Slide 56 text
何サ ー バ ？
Client Server (any)
Back
end
Server (JS)
Front
end
Front
end
レ ン ダ リ ン グ
サ ー バ
バ ッ ク エ ン ド (の )
フ ロ ン ト エ ン ド
プ ロ キ シ
サ ー バ
オ ー ケ ス ト レ ー シ ョ ン
サ ー バ
？ ！？
Slide 57
Slide 57 text
レ ン ダ リ ン グ サ ー バ ？
Client Server (any)
Back
end
Server (JS)
Front
end
Front
end
レ ン ダ リ ン グ の み
ク ラ イ ア ン ト が
直接バ ッ ク エ ン ド に
ア ク セ ス す る なら …
こ れはRendr
で はあ り ま せ ん
Slide 58
Slide 58 text
Rendrの 場合
Client Server (any)
Back
end
Server (JS)
Front
end
Front
end
Proxy
ク ラ イ ア ン ト は
バ ッ ク エ ン ド に
直接ア ク セ ス し ない ！
レ ン ダ リ ン グ だ け じ ゃ ない ！
Proxyの た め の
Expressミ ド ル ウ ェ ア を
提供
Slide 59
Slide 59 text
フ ロ ン ト エ ン ド で セ ッ シ ョ ン 管理
Client Server (any)
Back
end
Server (JS)
Front
end
Front
end
Proxy
HTTP
Session
ス テ ー ト レ ス ！
Slide 60
Slide 60 text
ldjson
csv
APIの 変換
Client Server (any)
Back
end
Server (JS)
Front
end
Front
end
Gate-
way
External
Systems
ldjson
CSV
デ ー タ 形式を 変換
file
upload
Slide 61
Slide 61 text
Server (JS)
Orchestration (API Gateway Pattern)
Client Server (any)
Back
end
Front
end
Server (any)
Back
end
Server (any)
Back
end
Front
end
Orche-
stration
Experienced-based API Resource-based API
http://thenextweb.com/dd/2013/12/17/future-api-design-orchestration-layer/
http://microservices.io/patterns/apigateway.htm
Slide 62
Slide 62 text
Rendr的なIsomorphicの 可能性
Client Server (any)
Back
end
Server (JS)
Front
end
Front
end
ス テ ー ト レ ス
疎結合
セ ッ シ ョ ン
管理
API Gateway/
Orchestration
Microservices
Slide 63
Slide 63 text
タ イ ミ ン グ 重要
Rendr公開
Slide 64
Slide 64 text
Agenda
• What's Isomorphic？
• Client/Server Survival Guide
• Meet the Pioneers
• From Rendr
• To React
Slide 65
Slide 65 text
React (Facebook)
• ビ ュ ー に 特化し た ラ イ ブ ラ リ
• Virtual DOM
– Isomorphic！
https://facebook.github.io/react/
Slide 66
Slide 66 text
Virtual DOM
Client Server
Application
DOM Text
Virtual DOM
- ...
- ...
Slide 67
Slide 67 text
Flux
• Facebookに よ る MVWなア ー キ テ ク チ ャ
– 公式な実装は一部品(Dispatcher)の み
• オ レ オ レ 実装乱⽴
https://facebook.github.io/flux/
Slide 68
Slide 68 text
Client
DOM更新
イ ベ ン ト
'pushstate'
Flux的ア プ リ の 基本要素 (Client-side)
Router
React
Views
Store Dispatcher
B
r
o
w
s
e
r
B
a
c
k
e
n
d
Action
Creator
Fetcher
Slide 69
Slide 69 text
MVWの Isomorphic化 4大エ リ ア
Rendering
Routing Fetching
Hydrating
Reactが 対応済み
Slide 70
Slide 70 text
Fluxの Isomorphic化 4大エ リ ア
Singleton
free
Routing Fetching
Hydrating
New!
Slide 71
Slide 71 text
脱シ ン グ ル ト ン
• Facebookの Fluxサ ン プ ル ・ ド キ ュ メ ン ト
– Store・ Dispatcherはシ ン グ ル ト ン
• ク ラ イ ア ン ト で はOK
• サ ー バ で はNG
– リ ク エ ス ト 毎に 異なる ユ ー ザ
• Flux実装の 多く はコ ン テ キ ス ト を 導入
– コ ン テ キ ス ト 内で はStore・ Dispatcherは
シ ン グ ル ト ン
Slide 72
Slide 72 text
Client Server
Context
脱シ ン グ ル ト ン
Dispatcher
Context
Dispatcher
XxxStore
XxxStore
XxxStore
Context
Dispatcher
XxxStore
XxxStore
XxxStore
Context
Dispatcher
Req1
Req2
Req3
XxxStore
XxxStore
Slide 73
Slide 73 text
Fluxの Isomorphic化 4大エ リ ア
Singleton
free
Routing Fetching
Hydrating
Slide 74
Slide 74 text
Isomorphicなラ イ ブ ラ リ
• Routing
– React Router
• https://github.com/rackt/react-router
– Flatiron Director
• https://github.com/flatiron/director
• Fetching
– Super Agent
• https://github.com/visionmedia/superagent
– Isomorphic Fetch
• https://github.com/matthew-andrews/isomorphic-fetch
Slide 75
Slide 75 text
Fluxの Isomorphic化 4大エ リ ア
Singleton
free
Routing Fetching
Hydrating
Slide 76
Slide 76 text
Flummox
• シ ン プ ル なFlux実装
• Hydratingサ ポ ー ト
– Serialize/Deserialize
• Isomorphicサ ン プ ル
– https://github.com/acdlite/flummox-isomorphic-
demo
– Routing
• Flux Router
– Fetching
• Super Agent
http://acdlite.github.io/flummox/
Slide 77
Slide 77 text
IsomorphicなFetcher
Client Server (any)
Back
end
Server (JS)
Fetcher
Fetcher
ク ラ イ ア ン ト は
バ ッ ク エ ン ド に
直接ア ク セ ス
同じ Fetcherを
同じ 設定で 使う と
Slide 78
Slide 78 text
Fluxible (Yahoo)
• Isomorphic & PluggableなFlux実装
• Hydratingサ ポ ー ト
• ⽐較的重量級
– ボ イ ラ ー プ レ ー ト 削減に は関心薄そ う
• 絶賛開発中
– Yahoo内部で も ま だ 本格的に 使っ て ない
http://fluxible.io/
Slide 79
Slide 79 text
React Router
Pluggable
Fluxible
Fluxible Router Fetchr Plugin
for Fluxible
Routr Fetchr
Slide 80
Slide 80 text
Server
GET /user/1
HTML
Fluxibleの Fetchr (サ ー バ サ イ ド )
B
r
o
w
s
e
r
B
a
c
k
e
n
d
Service
Server側の み
(NOT Isomorphic)
Serviceを
直接呼び 出す
New!
Router
React
Views
Store Dispatchr
Action
Creator
Fetchr
Slide 81
Slide 81 text
GET /api/users/2
Client
DOM更新
/users/2
Fluxibleの Fetchr (ク ラ イ ア ン ト サ イ ド )
B
r
o
w
s
e
r
S
e
r
v
e
r
フ ロ ン ト エ ン ド の
APIを 呼び 出す
Router
React
Views
Store Dispatchr
Action
Creator
Fetchr
Slide 82
Slide 82 text
Server
Fluxibleの Fetchr (サ ー バ サ イ ド )
B
r
o
w
s
e
r
B
a
c
k
e
n
d
Action
Creator
Fetchr
Service
Expressの
ミ ド ル ウ ェ ア を 提供
GET /api/users/2
Router
React
Views
Store Dispatchr
Slide 83
Slide 83 text
Fluxibleの Fetchr (全体像)
Router
View
Store Dispatchr
B
r
o
w
s
e
r
B
a
c
k
e
n
d
Action
Creator
Fetchr Service
Router
View
Store Dispatchr
Action
Creator
Fetchr
Client Server
GET /users/1
HTML
GET /api/users/2
Slide 84
Slide 84 text
Fluxibleの Service
Rendr的な構成
Serviceか ら バ ッ ク エ ン ド APIを 呼び 出す
Client Server (any)
Back
end
Server (JS)
Front
end
Front
end
Service
Fetchr
Back
end
Slide 85
Slide 85 text
Fluxibleの Service
Client Server (JS)
Back
end
Front
end
Front
end
Service
Fetchr
Serviceに ロ ジ ッ ク ／デ ー タ ア ク セ ス を 実装
シ ン プ ル な構成
Slide 86
Slide 86 text
乗る し か ない
こ の ビ ッ グ ウ ェ ー ブ に
ト レ ン ド 重要
Slide 87
Slide 87 text
ま と め
• フ ロ ン ト エ ン ド ／バ ッ ク エ ン ド は
C/S間を ⾏っ た り 来た り
– フ ロ ン ト エ ン ド はク ラ イ ア ン ト に 限ら ない
– バ ッ ク エ ン ド はサ ー バ に 限ら ない
• フ ロ ン ト エ ン ド ／バ ッ ク エ ン ド を
C/S両方で 動か し て ブ レ ー ク ス ル ー
– 単なる コ ー ド の 共通化で はない
• フ ロ ン ト エ ン ド の Isomorphic
– 単なる サ ー バ サ イ ド レ ン ダ リ ン グ じ ゃ ない
– マ イ ク ロ サ ー ビ ス と の 融合
• Reactの 波に 乗れ！
Slide 88
Slide 88 text
No content
Slide 89
Slide 89 text
ご 清聴
あ り が と う ご ざ い ま し た