Unified Interface on Isomorphic Javascript

Transcript

• 1. Unified Interface on Isomorphic JavaScript @axross Isomorphic meetup on Apr 30
• 2. Hi :) • Kohei Asai • @axross • TriFort, Inc. • Web developer.
• 3. In my actual project • 社内ツールを作るプロジェクト • 要件や他への依存はなし • >= モダンブラウザ • 決まっているのは機能だけ • Isomoるしかない！
• 4. Application components • Node • express • React • Reflux
• 5. My challenges • インターフェースの統一 • バリデーターの統一 • SPAのサーバーサイドレンダリング 特にこれ
• 6. Unified Interface
• 7. Motivation • モデルごとIsomorphicはキツい • じゃあせめてクラス欲しい • クラスのそれぞれの値の型を保証したい • SPAだと特に
• 8. Motivation • シンプルなAPI docsで済ませたい • 相談する時に少ない説明で理解できるといい
• 9. Simple API docs GET /comment request: { offset: number, } response: { error: null, comments: [comment...], count: number, } • こういうので済ませたい
• 10. Genuine RESTful API • 1つのWeb APIは、1つまたは複数の インターフェースに則った値を返すのが理想 • /comment/1はcommentクラスの インスタンスを表現するものを返す、的な • やりとりする値はそのシリアライズ成果物
• 11. What I did
• 12. Creating a Interface import unifly from 'unifly'; const commentInterface = unifly.define({ id: { type: 'integer' }, body: { type: 'string' }, ... }); • インターフェースを表現するレイヤーを作る
• 13. Creating Models with mix-in const Comment = commentInterface.mixin({ ... }); • インターフェースを継承(mixin)したモデルを作る • 実際にモデルとして利用するのはこれ
• 14. Usage in server const Comment = commentInterface.mixin({ fetchById() { return sequelize.query('SELECT …'); ... }, }); • サーバーならDBアクセスするメソッドをmixin
• 15. Usage in client const Comment = commentInterface.mixin({ fetchById() { return fetch('/comment', { method: 'post', body: JSON.stringify(Comment.toJSON(comment)), }) … }, }); • クライアントならHTTPするメソッドをmixin
• 16. Serialisation into JSON Comment.toJSON(comment) // => JSON Comment.fromJSON(json) // => comment • インターフェースはtoJSON() と fromJSON()を持つ • モデルはインターフェースを継承している
• 17. Convention of serialisation • 外に出す時はtoJSON()でシリアライズ • 入れる時はfromJSON()でデシリアライズ • を徹底 • クラスと型は守られる
• 18. Harvests • 余計なバリデーションを消せる • 可読性的にもGood • RESTfulな限りはリターンがある • どこまで複雑に耐えられるかはわからん
• 19. Unified Validator
• 20. Motivation • バリデーションの半分は共通化できる • 割と大事な部分なので、2つ書いて2つテスト 書くの、リスキーだと思う
• 21. What I did • isomorphicなValidatorを作って、toJSON()や fromJSON()の前でvalidateするだけ • 各バリデーターがPromiseを返すと楽 • 正直、特に話すことがない • 回収できるリスクは大きい、やった方がいい
• 22. Rendering SPA on a server
• 23. What I did • トップページしかやってない • 社内ツールなのでモチベーションが弱かった • React ComponentにStoreのlistenさえさせな ければ問題は起きない
• 24. Conclusion
• 25. Client dives to the heaven • 書きやすくなることこの上ない • Isomorphicに動作させる部分とそうでない部 分はきちんと分けて、意識する • 例えばReact Componentはpropsを受け取っ て表示させる機械であることを徹底するとか
• 26. Server does not dive to the hell, but… • そんなに恩恵はない • というのも、現状のここからクライアント、 ここからサーバーという区切りが良くない • 区切りを薄くすることで、サーバーのコードを 助けられる部分が出てくる → 恩恵になる
• 27. Let’s Isomorphic!
• 28. Thank you for listening :)