サーバサイドエンジニアが 1年間まじめにSPAやってみた

サーバサイドエンジニアが 1年間まじめにSPAやってみた

1. 1. サーバサイドエンジニアが 1年間まじめにSPAやってみた D3 フロントエンド技術勉強会 2016.1.22 @kita_ly
2. 2. 今日話すこと • 1年間まじめにSPA開発やってきた経験について • その中で、ぶつかった課題と対策 • SPA開発の全体像 • Web/JS界隈の激しい変化の波に れないためのTips
3. 3. 今日触れる技術 • AngularJS と SPA の設計について • TypeScript と ES6 • Gulp タスク
4. 4. node npm Babel TypeScript AngularJS React Bower Gulp ES6 HTML CSS SASS Browserify コンポーネント指向 Flux Nginx TSLint ESLint Jenkins FlowType EJS PDFViewer TSD UI-Router LocalStorage WebSocket EmberJS CycleJS Redux Angular2 promise RequireJS CoffeeScript １つ１つについては 深く話さないです
5. 5. 自己紹介 • 北川 至 ( @kita_ly ) • 株式会社ビズリーチ • Java -> Scala -> (エセ)フロントエンド • 1年前から JS : Scala の割合が 7 : 3 に • 最近使ってる技術:
 MySQL, ElasticSearch, Scala, 
 Play2, TypeScript, AngularJS • 家族: 嫁1名・子2名
6. 6. サービス紹介 https://jp.stanby.co
7. 7. スタンバイの技術スタック
8. 8. サービス紹介 https://stanby.co
9. 9. スタンバイカンパニーの構成 SPA (AngularJS / TypeScript) Backend API
 (Play2 / Scala) AWS MySQL Elasticsearch Other API s Memcached
10. 10. スタンバイカンパニーの構成 SPA (AngularJS / TypeScript) Backend API
 (Play2 / Scala) AWS MySQL Elasticsearch Other API s Memcached 今日の話
11. 11. デモ
12. 12. AngularJS とSPAの設計
13. 13. AngularJS との出会い • 1年前に今のチームに異動 • 「AngularJS で 開発してるらしい…」 • Directive とか聞いたことあるけど…
14. 14. AngularJS との出会い • 2Way データバインディング、凄いじゃん
15. 15. 最初はライトに フォームバリデーション程度 ↓ 徐々に規模が大きくなってきて…
16. 16. 巨大な状態管理とテンプレート • 巨大なテンプレートにJS (Angular Expression) が散りばめられ見通しが全く効かない • Super Fat な Controller • 変数・メソッドが多すぎて解読困難 • 状態管理が複雑でバグが生まれる気しかしない • Repeat Yourself しまくってる気がする
17. 17. React に助けられた !?
18. 18. コンポーネント指向 • React の出現で根付いた
 SPA (というかUI) の設計思想 • Angular2 でも 採用されている • Angular1系 でも 1.3以降
 徐々にコンポーネント指向寄りに…
19. 19. Thinking in React https://facebook.github.io/react/docs/thinking-in-react.html
20. 20. コンポーネント指向 • コンポーネント = DOM と JS のセット、UI部品 • 再利用性 • カプセル化・責務の分離 • 複雑なものの単純化 • メンテナンス性
21. 21. コンポーネント指向 • AngularJS でも実践可能 (限界はある) • React の推奨するレベルでの細かい部品化はできてない • 辛くならない大きさのコンポーネントを見極める • コンポーネントのライフサイクルを見極める • Tooltip、吹き出し、モーダルのようなUIパーツは迷いなく ドンドン切り出す
22. 22. さらに規模が 大きくなってきて…
23. 23. モデル管理が破滅…
24. 24. モデル管理が破滅… • 大きな画面で、複数箇所の表示項目を同期する必要 • コンポーネント指向だけでは立ち向かえない • React : Just the UI • 共有範囲の広いモデルを全て押し付けて
 Root のコンポーネントが肥大化 • コンポーネントのネストが深くなると
 データを受け渡す中間のコンポーネントからすると
 そのデータの意味が分かりづらい • MVCもフィットしなかった
25. 25. MVC does not Scale Hacker Way: Rethinking Web App Development at Facebook https://www.youtube.com/watch?v=nYkdrAPrdcw
26. 26. MVC does not Scale Hacker Way: Rethinking Web App Development at Facebook https://www.youtube.com/watch?v=nYkdrAPrdcw
27. 27. Flux に助けられた !?
28. 28. Flux • Facebook が提唱 • 特定のライブラリやFWではなく、アーキテクチャの呼称 • コンポーネントの構造に縛られない Store • モデルを保持する • Single Source of Truth • 各 Component (View) は自分が必要な Store だけ Subscribeする • Uni-Directional Data Flow • データの流れが決まっているので、デバッグも る • Fluxxor, Redux, Reflux, etc..
29. 29. Flux • Angular でも応用可能
 - https://github.com/wbuchwalter/ng-redux
 - https://github.com/christianalfoni/flux-angular • Store を Subscribe する Component の見極め • アプリ全体で共有すべきデータと、コンポーネント内の一時 的なデータを区別
30. 30. Flux やってみた View View View View View View JobList Store Application List Store Timeline Store Application Store
31. 31. Flux やってみた View View View View JobList Store Application List Store Timeline Store Application Store Dispatcher Resume Update Action
32. 32. 結局 Angular 嫌いなの？ • 2009年に生まれいる先駆者として
 リスペクトしている • 豊富なAPI で結構何でもできる
 (逆にどう作ったらいいか分からない) • フルスタックのFWであり、Angularチームが
 メンテしてくれる安心感 • HTML を拡張して JS(風なもの) を書けるようにした
 (不満有り)
33. 33. 結局 React 好きなんでしょ？ • React が数年後にどう扱われているかは分からない • コンポーネント指向・Flux という考え方は 
 FW/言語を超えて暫く応用可能だと思っている • フルスタックではないので 3rd Party のライブラリの選定は慎重に • JSX: JS-Centric • JSを拡張してHTMLを書けるように • オレオレAPIに振り回されないで済む • コンパイルタイムにバグを防ぐ仕組み
 (型言語との相性)
34. 34. TypeScript と ES2015
35. 35. TypeScript • 静的型付けができるJavaScript
 (Java とか C# の様なSyntax) • 開発元: Microsoft • いわゆるAltJS の一種 • 結構本格的
 - interface, class, Generic Type
 - Structural Sub-Typing
 - abstract class
 - 型推論
 - many other .. • ECMAScript の スーパーセット
36. 36. TypeScript とは • 動かす前に気付ける • リファクタに強い
37. 37. ECMAScript2015 (ES6) • JavaScript系言語 の 標準仕様 • 2009 年の ES5 から 6年ぶり • 新機能多数
 - let, const
 - class
 - デフォルトパラメータ
 - アロー関数
 - 配列・オブジェクトの Desctucturing Assignment
 - ES6 module (import/export)
 - etc…
38. 38. SPA開発で利用する言語 • ES6は今すぐ使うべき • 一部ES7の機能も先行して利用検討すべき • 大規模になる想定なら静的型付け言語も検討 • 慣れると型無しのJSを書く時にワナワナするよ うになる • 特にReact は相性が良いと思っている
39. 39. React in TSX http://blog.wolksoftware.com/working-with-react-and-typescript
40. 40. ビルド編
41. 41. ES6 とか TypeScript とか
 ブラウザで動くの？ • 動かない • npmモジュールを利用して実行可能な形に変換 • tsc, babel, browserify • 使いやすくするために gulp などの
 タスクランナー上で gulp-typescript
42. 42. TypeScript ファイルを
 ブラウザで動かすために TypeScript 
 + ES6 Module ES6 
 + RequireJS Bundled
 ES5 ES5 
 + RequireJS tsc babel browserify ソース ファイル ブラウザ で動く
43. 43. ES6 Compatibility Table https://kangax.github.io/compat-table/es6/
44. 44. TypeScript/ES6 の実装が イマイチ根付かない • var 使ってる • function の先頭に var を全部並べる • unused variables/functions • 型付けをサボっている
45. 45. レビューで言うと面倒なので TSLint, ESLint, TSC に怒ってもらう • var 使ってる
 → Lint 「const/let 使ってください！」 • function の先頭に var を全部並べる
 → Lint 「ブロックスコープ活用しなさい！」 • unused variables/functions
 → Lint 「使われてないけどミスってない？」 • 型付けをサボっている
 → TSC 「暗黙に any 型は許しません」
46. 46. Gulp Task 一覧 • キャッシュ対策
 - RevisionHash for JS, CSS, 画像ファイル ( e.g. app-9x9x9x.js )
 - 3rd Party 製ライブラリの Bundle • パフォーマンス対策
 - GZip 圧縮 for JS, CSS (e.g. app.js.gz )
 - minify, uglify for JS, CSS • TypeScript ビルド: Browserify, Babel, TSC • SASSビルド • ESJビルド • 開発支援
 - TS-Lint, ES-Lint, SASS-Lint
 - Gulp-Webserver
 - ソースマップ for TS, SASS
 - 各種 watch (インクリメンタルビルド) • その他、細かいもの多数…
47. 47. 秘伝のタレ化！SPOF！ • 秘伝のタレ化しがち • 誰かがビルド職人化してSPOFになる • 乱立する npm モジュール間の依存解決が課題に • Transpile(ES6 -> ES5) がTSCだったりBabelだったり…
48. 48. Gulp = 秘伝のタレ • ビルドスクリプトだからと軽視せず
 リファクタを継続的に行う • 似たような機能を持つ別の npm モジュールを乱立させない • 便利なGulpプラグインになびかず、npm と仲良くする
49. 49. まとめ • れ出るライブラリ・FWのAPIの暗記をしようとしてはいけない • そのライブラリが実現しようとしていること、思想を理解する
 - コンポーネント指向、Flux、etc.
 - SPA初学者はいずれかのFWを真面目にやった方が良い • 大規模アプリなら静的型付け言語も視野にいれる • ES6 は今すぐ使え • ビルドスクリプトも軽視しない • Grunt / Gulp などに依存し過ぎず npm モジュールと仲良くなる • 変わるものと変わらないもの、を見分ける選球眼を鍛える
50. 50. Let's NOT 消耗 Let s Enjoy Chaos!