Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
サーバサイドエンジニアが
1年間まじめにSPAやってみた
D3 フロントエンド技術勉強会
2016.1.22
@kita_ly
今日話すこと
• 1年間まじめにSPA開発やってきた経験について
• その中で、ぶつかった課題と対策
• SPA開発の全体像
• Web/JS界隈の激しい変化の波に れないためのTips
今日触れる技術
• AngularJS と SPA の設計について
• TypeScript と ES6
• Gulp タスク
node
npm
Babel
TypeScript
AngularJS
React
Bower
Gulp
ES6
HTML
CSS
SASS
Browserify
コンポーネント指向
Flux
Nginx
TSLint
ESLint
Jenki...
自己紹介
• 北川 至 ( @kita_ly )
• 株式会社ビズリーチ
• Java -> Scala -> (エセ)フロントエンド
• 1年前から JS : Scala の割合が 7 : 3 に
• 最近使ってる技術:

MySQL, El...
サービス紹介
https://jp.stanby.co
スタンバイの技術スタック
サービス紹介
https://stanby.co
スタンバイカンパニーの構成
SPA
(AngularJS / TypeScript)
Backend API

(Play2 / Scala)
AWS
MySQL Elasticsearch
Other
API s
Memcached
スタンバイカンパニーの構成
SPA
(AngularJS / TypeScript)
Backend API

(Play2 / Scala)
AWS
MySQL Elasticsearch
Other
API s
Memcached
今日の話
デモ
AngularJS
とSPAの設計
AngularJS との出会い
• 1年前に今のチームに異動
• 「AngularJS で 開発してるらしい…」
• Directive とか聞いたことあるけど…
AngularJS との出会い
• 2Way データバインディング、凄いじゃん
最初はライトに
フォームバリデーション程度
↓
徐々に規模が大きくなってきて…
巨大な状態管理とテンプレート
• 巨大なテンプレートにJS (Angular Expression)
が散りばめられ見通しが全く効かない
• Super Fat な Controller
• 変数・メソッドが多すぎて解読困難
• 状態管理が複雑...
React に助けられた
!?
コンポーネント指向
• React の出現で根付いた

SPA (というかUI) の設計思想
• Angular2 でも 採用されている
• Angular1系 でも 1.3以降

徐々にコンポーネント指向寄りに…
Thinking in React
https://facebook.github.io/react/docs/thinking-in-react.html
コンポーネント指向
• コンポーネント = DOM と JS のセット、UI部品
• 再利用性
• カプセル化・責務の分離
• 複雑なものの単純化
• メンテナンス性
コンポーネント指向
• AngularJS でも実践可能 (限界はある)
• React の推奨するレベルでの細かい部品化はできてない
• 辛くならない大きさのコンポーネントを見極める
• コンポーネントのライフサイクルを見極める
• Tool...
さらに規模が
大きくなってきて…
モデル管理が破滅…
モデル管理が破滅…
• 大きな画面で、複数箇所の表示項目を同期する必要
• コンポーネント指向だけでは立ち向かえない
• React : Just the UI
• 共有範囲の広いモデルを全て押し付けて

Root のコンポーネントが肥大化
•...
MVC does not Scale
Hacker Way: Rethinking Web App Development at Facebook
https://www.youtube.com/watch?v=nYkdrAPrdcw
MVC does not Scale
Hacker Way: Rethinking Web App Development at Facebook
https://www.youtube.com/watch?v=nYkdrAPrdcw
Flux に助けられた
!?
Flux
• Facebook が提唱
• 特定のライブラリやFWではなく、アーキテクチャの呼称
• コンポーネントの構造に縛られない Store
• モデルを保持する
• Single Source of Truth
• 各 Componen...
Flux
• Angular でも応用可能

- https://github.com/wbuchwalter/ng-redux

- https://github.com/christianalfoni/flux-angular
• Store...
Flux やってみた
View View
View
View
View
View
JobList
Store
Application
List Store
Timeline
Store
Application
Store
Flux やってみた
View View View View
JobList
Store
Application
List Store
Timeline
Store
Application
Store
Dispatcher
Resume Upd...
結局 Angular 嫌いなの?
• 2009年に生まれいる先駆者として

リスペクトしている
• 豊富なAPI で結構何でもできる

(逆にどう作ったらいいか分からない)
• フルスタックのFWであり、Angularチームが

メンテしてくれ...
結局 React 好きなんでしょ?
• React が数年後にどう扱われているかは分からない
• コンポーネント指向・Flux という考え方は 

FW/言語を超えて暫く応用可能だと思っている
• フルスタックではないので 3rd Party ...
TypeScript と
ES2015
TypeScript
• 静的型付けができるJavaScript

(Java とか C# の様なSyntax)
• 開発元: Microsoft
• いわゆるAltJS の一種
• 結構本格的

- interface, class, Gen...
TypeScript とは
• 動かす前に気付ける
• リファクタに強い
ECMAScript2015 (ES6)
• JavaScript系言語 の 標準仕様
• 2009 年の ES5 から 6年ぶり
• 新機能多数

- let, const

- class

- デフォルトパラメータ

- アロー関数

-...
SPA開発で利用する言語
• ES6は今すぐ使うべき
• 一部ES7の機能も先行して利用検討すべき
• 大規模になる想定なら静的型付け言語も検討
• 慣れると型無しのJSを書く時にワナワナするよ
うになる
• 特にReact は相性が良いと思っ...
React in TSX
http://blog.wolksoftware.com/working-with-react-and-typescript
ビルド編
ES6 とか TypeScript とか

ブラウザで動くの?
• 動かない
• npmモジュールを利用して実行可能な形に変換
• tsc, babel, browserify
• 使いやすくするために gulp などの

タスクランナー上で ...
TypeScript ファイルを

ブラウザで動かすために
TypeScript 

+ ES6 Module
ES6 

+ RequireJS
Bundled

ES5
ES5 

+ RequireJS
tsc
babel
browser...
ES6 Compatibility Table
https://kangax.github.io/compat-table/es6/
TypeScript/ES6 の実装が
イマイチ根付かない
• var 使ってる
• function の先頭に var を全部並べる
• unused variables/functions
• 型付けをサボっている
レビューで言うと面倒なので
TSLint, ESLint, TSC に怒ってもらう
• var 使ってる

→ Lint 「const/let 使ってください!」
• function の先頭に var を全部並べる

→ Lint 「ブロック...
Gulp Task 一覧
• キャッシュ対策

- RevisionHash for JS, CSS, 画像ファイル ( e.g. app-9x9x9x.js )

- 3rd Party 製ライブラリの Bundle
• パフォーマンス対策
...
秘伝のタレ化!SPOF!
• 秘伝のタレ化しがち
• 誰かがビルド職人化してSPOFになる
• 乱立する npm モジュール間の依存解決が課題に
• Transpile(ES6 -> ES5) がTSCだったりBabelだったり…
Gulp = 秘伝のタレ
• ビルドスクリプトだからと軽視せず

リファクタを継続的に行う
• 似たような機能を持つ別の npm モジュールを乱立させない
• 便利なGulpプラグインになびかず、npm と仲良くする
まとめ
• れ出るライブラリ・FWのAPIの暗記をしようとしてはいけない
• そのライブラリが実現しようとしていること、思想を理解する

- コンポーネント指向、Flux、etc.

- SPA初学者はいずれかのFWを真面目にやった方が良い
•...
Let's NOT 消耗
Let s Enjoy Chaos!
Upcoming SlideShare
Loading in …5
×

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

14,140 views

Published on

D3 フロントエンド技術勉強会
2016.1.22

- 1年間まじめにSPA開発やってきた経験について
- その中で、ぶつかった課題と対策
- SPA開発の全体像
- Web/JS界隈の激しい変化の波に溺れないためのTips

- AngularJS と SPA の設計について
- TypeScript と ES6
- Gulp タスク

Published in: Software
  • Be the first to comment

サーバサイドエンジニアが 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 1つ1つについては 深く話さないです
  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!

×