Transcript

• 1. 真の Isomorphic Javascript @axross SCRIPTY #03 at Mar 10, 2015
• 2. Kohei Asai @axross TriFort, Inc. UI / UX div. Javascript engineer LT童貞・http://axross.org I am…
• 3. よろしくお願いします
• 4. 今日の話 Isomorphic
• 5. isomorphic あいそもーふぃっく 【形容詞】 1. 同形の, 同一構造の. 2. 〔生物〕同形の, 同類形態の; 〔化学〕同形の; 〔数学〕同型の.
• 6. つまり… クライアントもサーバーも、 同じ言語で、同じコードを流用する みたいな意味
• 7. なぜIsomorphicとか 言ってるのか
• 8. 業務つらい
• 9. つらい ① 「クローラーに弱くない」 SPAを作りたい
• 10. • SPA (Single Page Application) の隆盛 • ページ遷移しても状態を保持しておけると アプリケーションを作りやすい • データバインディングも便利 Client-side MVW
• 11. • クローラーはJavascriptを読めない • Googleは読めるようになるらしいけど… • bingは？ • そもそも検索エンジンだけじゃないよね？ だけど…
• 12. • 気にしなきゃいけないことが多い • どれも対処療法的 • 『べつに凝ったことしなくていいじゃん』 とか言われる つらい
• 13. 迫ってくる上司と現実 そして深い悲しみ
• 14. つらい ② インターフェースの不整合
• 15. よくある現状 • 充分な対話がなくプロジェクトスタート • モデルのインターフェース定義的なものが サーバーとクライアント両方に1つずつある • サーバーとクライアントで考えてること違う
• 16. つらい • 仕様変更の度にその2つを別々の人が修正 • どんどん乖離していくインターフェース • 結局クライアントサイドがモデルを捨てる
• 17. 終わった！ → 終わってない 「繋ぎ込み」という のフェーズ
• 18. つらい ③ 重複バリデーション
• 19. 重複バリデーション • クライアントサイドもバリデーションする • 実装が違うだけでやりたいことは似てる • 似てるというか半分くらいは同じ
• 20. つらい • クライアントのバリデーション通る • しかしサーバーのバリデーション通らない • 認識の違い • エラーメッセージがちゃんと分かれてない
• 21. 人間関係の崩壊
• 22. なんとかしたい
• 23. おかしいところ • 同じことが違う実装で点在する • 設定の共有とかでなんとかならんのか • → むずかしい
• 24. 対人的な問題 • そもそもコミュニケーションコストがヤバい • 業務時間の2割くらいコミュニケーションに 支払っている気がする • いくら技術的に解決しようとしても、 まずはここがネックになってしまっている
• 25. なんとかしたい！！！！！111
• 26. Isomorphic Javascript
• 27. Isomorphic Javascript • クライアントもサーバーもJavascript • 言語が同じだから共通部分を統一できる • 両方から require() して使う
• 28. SPAのクローラー対策 • React.js → Isomorphic • Node上で動かして、DOMの文字列を吐く • クローラーからのアクセスの時だけ、 そっちをレスポンスとして返す
• 29. 統一されたインターフェース • DBのテーブル構造の定義みたいなのを書く • 両方から require() • 各々メソッドを足したりして、モデルとし て利用 • スキームが乱れることはない
• 30. バリデーションの再利用 • validator.jsとか → Isomorphic • 1つバリデーションを書き殴る • 両方から require() • 共通部分とそうでない部分はもちろんある • かなり手軽にできる
• 31. 対人的な解決 • 同じ言語・同じライブラリで開発するなら チームに知見が溜まる、活用できる • コミュニケーションコストが下がる • 自然と相手のことを考えてコードを書ける
• 32. 根本的な解決 • そもそも目的は同じはず • そのプロダクトを作ること • クライアントとサーバーの の距離感 • → コミュニケーションコスト • その距離感を少なくする
• 33. 誰もが使う require() 両方で動くnpm package
• 34. 同じものを require() できれば ロジックの統一化ができる
• 35. やりたいことは すごくシンプル
• 36. もはや未来の話ではない
• 37. 今すぐ、取り組める
• 38. Isomorphicで 最初にやるべきこと
• 39. サーバサイドの気持ちを知る
• 40. サーバーサイドを書いてみる • Isomorphicはサーバーサイドとの協調 • サーバーサイドの気持ちを理解するべき • 苦しくなるまでがんばる
• 41. つらいことがわかってくる • れ出る、労いの気持ち • クライアントサイドとまったく同じようには できない • 「でもここはIsomorphicれるな」とかわかる
• 42. お互いが幸せになれる 開発を目指す
• 43. それこそが 真の Isomorphic
• 44. ご清聴ありがとうございました