Recommended
More Related Content
Similar to Componentization for Reality
Similar to Componentization for Reality (20)
More from Yusuke Goto
More from Yusuke Goto (20)
Recently uploaded
Recently uploaded (9)
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. ありがとうございました