![Chunk を使用することによって
エントリーポイントから辿って
まとめる必要のないファイルを
簡単に分割できる
require.ensure([‘modal’], function (require) {
var modal = require(‘modal’);
modal.create();
});](https://image.slidesharecdn.com/componentizationforreality-140916093754-phpapp01/85/Componentization-for-Reality-40-320.jpg)
Componentization for Reality
- 1. Componentization for Reality アメーバ事業本部 フロントエンドディベロッパー 五藤 佑典
- 4. app ├─ js │ ├─ main.js │ ├─ sideMenu.js │ └─ ….js ├─ css │ ├─ sideMenu.css │ ├─ header.css │ └─ ….css ├─ images │ ├─ banner.png │ └─ ….png . .
- 6. 最初は整理されていたのに Sira Anamwong / FreeDigitalPhotos.net
- 7. いつの間にか汚なくなり Bill Longshaw / FreeDigitalPhotos.net
- 8. あるコードに 修正を入れたら marin / FreeDigitalPhotos.net
- 9. 全然知らない場所が壊れた Witthaya Phonsawat / FreeDigitalPhotos.net
- 10. この画像、差し替えで お願いしまーす！！って言われ stockimages / FreeDigitalPhotos.net
- 11. どこにあるんやろ、これ？ってなる stockimages / FreeDigitalPhotos.net
- 12. 最初は小さいプロジェクトだと 思っていても Serge Bertasius Photography / FreeDigitalPhotos.net
- 13. 思ってたより 大きくなってしまった時の 弊害は大きい David Castillo Dominici / FreeDigitalPhotos.net
- 14. やがてコードが 人が認識できる単位ではなくなり 整理できなくなる app ├─ js │ ├─ main.js │ ├─ sideMenu.js │ └─ ….js ├─ css │ ├─ sideMenu.css │ ├─ header.css │ └─ ….css ├─ templates │ ├─ header.html │ ├─ sideMenu.html │ └─ ….html ├─ images │ ├─ banner.png │ └─ ….png . .
- 17. 概念的なこと
- 18. コンポーネントとして大事なこと • 再利用が可能 • 交換が可能
- 19. さらにプロダクト開発においては • 機能のカプセル化が可能 • コンポーネントの組み合わせで新たなコンポーネント作成が可能 • コンポーネント間のコミュニケーションが可能
- 20. コンポーネント化の対象 • UI = コンポーネント • サービスとしてのロジック = モジュール
- 21. Web Component ?
- 23. platform.js ?
- 25. しかし • ブラウザによって挙動が異なる • Shadow DOM の CSS はカプセル化できない • パフォーマンス的な懸念 • 外部依存コンポーネントの重複ロードによるリクエスト増加
- 28. リソース管理だけでもいい • コンポーネントに必要なリソースを１つの場所で管理できればいい • コンポーネント単位でユニットテストも管理できればいい • 別のプロジェクトを始めるときに再利用しやすければいい
- 29. ディレクトリ構造の強制 リソースのロード スタイルの適用 ビューの生成 JS
- 31. ディレクトリ構造の強制
- 32. 基本となる 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 . . . .
- 34. コンポーネントのパターンが複数ある。 パターン分サブジェネレータを作る Test Spec も一緒にジェネレートする
- 35. button というパターンの コンポーネント用に １サブジェネレータ作成しておく $ yo my-proj:button upload-button components └─ upload-button ├─ upload-button.js ├─ upload-buttonSpec.js ├─ style.css └─ template.html
- 36. リソースのロード
- 38. AMD も CommonJS もサポートする 最強ローダー=
- 39. 規模が大きくなるのでコードを分割したい。 分離したい箇所だけ Chunk で分割する
- 40. Chunk を使用することによって エントリーポイントから辿って まとめる必要のないファイルを 簡単に分割できる require.ensure([‘modal’], function (require) { var modal = require(‘modal’); modal.create(); });
- 41. スタイルの適用
- 43. substack が作った CSS の文字列を <head> に 挿入するライブラリ= insert-css
- 44. コンポーネントが呼び出されたときに CSS を適用させたい。 CSS Preprocessor に Stylus を使いたい。 WebPack の style 系 loader と一緒使う insert-css 挿入した <style> を取り除く機能がないので、ラップする
- 45. WebPack で Stylus をロードし、 insertCss() に渡すだけで コンポーネントのスタイルを 適用できる var style = require(‘!raw!stylus!./button.styl’); insertCss(style);
- 47. ビューの生成
- 49. コンポーネント単位でユニットテストしたい。 テスト環境の充実 カスタムエレメントでビューを扱いたい。 Element Directive を活用
- 50. ディレクトリ構造の強制 リソースのロード スタイルの適用 ビューの生成 JS
- 51. JS
- 52. 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/
- 53. ありがとうございました