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.

Componentization for Reality

4,036 views

Published on

フロントエンドのコンポーネントベース開発についての話

Published in: Technology
  • Be the first to comment

Componentization for Reality

  1. 1. Componentization for Reality アメーバ事業本部 フロントエンドディベロッパー 五藤 佑典
  2. 2. @ygoto3_ ygoto3.com
  3. 3. フロントエンドの コンポーネントベース開発の話
  4. 4. app ├─ js │ ├─ main.js │ ├─ sideMenu.js │ └─ ….js ├─ css │ ├─ sideMenu.css │ ├─ header.css │ └─ ….css ├─ images │ ├─ banner.png │ └─ ….png . .
  5. 5. 最初は整理されていたのに Sira Anamwong / FreeDigitalPhotos.net
  6. 6. いつの間にか汚なくなり Bill Longshaw / FreeDigitalPhotos.net
  7. 7. あるコードに 修正を入れたら marin / FreeDigitalPhotos.net
  8. 8. 全然知らない場所が壊れた Witthaya Phonsawat / FreeDigitalPhotos.net
  9. 9. この画像、差し替えで お願いしまーす!!って言われ stockimages / FreeDigitalPhotos.net
  10. 10. どこにあるんやろ、これ?ってなる stockimages / FreeDigitalPhotos.net
  11. 11. 最初は小さいプロジェクトだと 思っていても Serge Bertasius Photography / FreeDigitalPhotos.net
  12. 12. 思ってたより 大きくなってしまった時の 弊害は大きい David Castillo Dominici / FreeDigitalPhotos.net
  13. 13. やがてコードが 人が認識できる単位ではなくなり 整理できなくなる app ├─ js │ ├─ main.js │ ├─ sideMenu.js │ └─ ….js ├─ css │ ├─ sideMenu.css │ ├─ header.css │ └─ ….css ├─ templates │ ├─ header.html │ ├─ sideMenu.html │ └─ ….html ├─ images │ ├─ banner.png │ └─ ….png . .
  14. 14. 人が認識できる単位 = ディレクトリ
  15. 15. 人が認識できる単位  コンポーネント化
  16. 16. 概念的なこと
  17. 17. コンポーネントとして大事なこと • 再利用が可能 • 交換が可能
  18. 18. さらにプロダクト開発においては • 機能のカプセル化が可能 • コンポーネントの組み合わせで新たなコンポーネント作成が可能 • コンポーネント間のコミュニケーションが可能
  19. 19. コンポーネント化の対象 • UI = コンポーネント • サービスとしてのロジック = モジュール
  20. 20. Web Component ?
  21. 21. platform.js ?
  22. 22. しかし • ブラウザによって挙動が異なる • Shadow DOM の CSS はカプセル化できない • パフォーマンス的な懸念 • 外部依存コンポーネントの重複ロードによるリクエスト増加
  23. 23. UI の完璧なコンポーネント化は (まだ)難しい
  24. 24. 現実的な コンポーネントベース開発
  25. 25. リソース管理だけでもいい • コンポーネントに必要なリソースを1つの場所で管理できればいい • コンポーネント単位でユニットテストも管理できればいい • 別のプロジェクトを始めるときに再利用しやすければいい
  26. 26. ディレクトリ構造の強制 リソースのロード スタイルの適用 ビューの生成 JS
  27. 27. これを比較的簡単に行うために ツールを活用する
  28. 28. ディレクトリ構造の強制
  29. 29. 基本となる JavaScript と共に Style / Template / 画像などのリソースも 一緒に管理 components ├─ menu │ ├─ menu.js │ ├─ menuSpec.js │ ├─ style.css │ └─ template.html ├─ user-list │ ├─ user-list.js │ ├─ user-listSpec.js │ ├─ style.css │ ├─ template.html │ └─ icon.png ├─ sns-button │ ├─ banner.png . . . .
  30. 30. コンポーネントのパターンが複数ある。 パターン分サブジェネレータを作る Test Spec も一緒にジェネレートする
  31. 31. button というパターンの コンポーネント用に 1サブジェネレータ作成しておく $ yo my-proj:button upload-button components └─ upload-button ├─ upload-button.js ├─ upload-buttonSpec.js ├─ style.css └─ template.html
  32. 32. リソースのロード
  33. 33. AMD も CommonJS もサポートする 最強ローダー=
  34. 34. 規模が大きくなるのでコードを分割したい。 分離したい箇所だけ Chunk で分割する
  35. 35. Chunk を使用することによって エントリーポイントから辿って まとめる必要のないファイルを 簡単に分割できる require.ensure([‘modal’], function (require) { var modal = require(‘modal’); modal.create(); });
  36. 36. スタイルの適用
  37. 37. insert-css restyle.js
  38. 38. substack が作った CSS の文字列を <head> に 挿入するライブラリ= insert-css
  39. 39. コンポーネントが呼び出されたときに CSS を適用させたい。 CSS Preprocessor に Stylus を使いたい。 WebPack の style 系 loader と一緒使う insert-css 挿入した <style> を取り除く機能がないので、ラップする
  40. 40. WebPack で Stylus をロードし、 insertCss() に渡すだけで コンポーネントのスタイルを 適用できる var style = require(‘!raw!stylus!./button.styl’); insertCss(style);
  41. 41. ddpavumba / FreeDigitalPhotos.net
  42. 42. ビューの生成
  43. 43. コンポーネント単位でユニットテストしたい。 テスト環境の充実 カスタムエレメントでビューを扱いたい。 Element Directive を活用
  44. 44. ディレクトリ構造の強制 リソースのロード スタイルの適用 ビューの生成 JS
  45. 45. JS
  46. 46. Reference • Componentizing the Web http://code.tutsplus.com/tutorials/componentizing-the-web--cms-20602 • The State of the Componentised Web http://www.futureinsights.com/home/the-state-of-the-componentised-web.html • The Problem With Using HTML Imports For Dependency Management http://tjvantoll.com/2014/08/12/the-problem-with-using-html-imports-for-dependency-management/ • Why Web Components Aren’t Ready for Production… Yet http://developer.telerik.com/featured/web-components-arent-ready-production-yet/ • Why Web Components Are Ready For Production http://developer.telerik.com/featured/web-components-ready-production/
  47. 47. ありがとうございました

×