Componentization for Reality
53
アメーバ事業本部 フロントエンドディベロッパー 五藤 佑典 Componentization for Reality
-
Upload
yusuke-goto -
Category
Technology
-
view
2.170 -
download
1
description
フロントエンドのコンポーネントベース開発についての話
Transcript of Componentization for Reality
アメーバ事業本部フロントエンドディベロッパー 五藤 佑典
Componentizationfor Reality
フロントエンドのコンポーネントベース開発の話
app ├─ js │ ├─ main.js │ ├─ sideMenu.js │ └─ ….js├─ css │ ├─ sideMenu.css │ ├─ header.css │ └─ ….css ├─ images │ ├─ banner.png │ └─ ….png . .
いつの間にか汚なくなり
Bill Longshaw / FreeDigitalPhotos.net
あるコードに修正を入れたら
marin / FreeDigitalPhotos.net
全然知らない場所が壊れた
Witthaya Phonsawat / FreeDigitalPhotos.net
この画像、差し替えでお願いしまーす！！って言われ
stockimages / FreeDigitalPhotos.net
どこにあるんやろ、これ？ってなる
stockimages / FreeDigitalPhotos.net
最初は小さいプロジェクトだと思っていても
Serge Bertasius Photography / FreeDigitalPhotos.net
思ってたより大きくなってしまった時の弊害は大きい
David Castillo Dominici / FreeDigitalPhotos.net
やがてコードが
人が認識できる単位ではなくなり
整理できなくなる
app ├─ js │ ├─ main.js │ ├─ sideMenu.js │ └─ ….js ├─ css │ ├─ sideMenu.css │ ├─ header.css │ └─ ….css├─ templates │ ├─ header.html │ ├─ sideMenu.html │ └─ ….html ├─ images │ ├─ banner.png │ └─ ….png . .
人が認識できる単位
ディレクトリ=
人が認識できる単位
コンポーネント化
概念的なこと
コンポーネントとして大事なこと
• 再利用が可能
• 交換が可能
さらにプロダクト開発においては
• 機能のカプセル化が可能
• コンポーネントの組み合わせで新たなコンポーネント作成が可能
• コンポーネント間のコミュニケーションが可能
コンポーネント化の対象
• UI = コンポーネント
• サービスとしてのロジック = モジュール
Web Component ?
platform.js ?
しかし
• ブラウザによって挙動が異なる
• Shadow DOM の CSS はカプセル化できない
• パフォーマンス的な懸念
• 外部依存コンポーネントの重複ロードによるリクエスト増加
UI の完璧なコンポーネント化は
（まだ）難しい
現実的な
コンポーネントベース開発
リソース管理だけでもいい
• コンポーネントに必要なリソースを１つの場所で管理できればいい
• コンポーネント単位でユニットテストも管理できればいい
• 別のプロジェクトを始めるときに再利用しやすければいい
ディレクトリ構造の強制
リソースのロード
スタイルの適用
ビューの生成
JS
これを比較的簡単に行うために
ツールを活用する
ディレクトリ構造の強制
基本となる 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 . . . .
コンポーネントのパターンが複数ある。
パターン分サブジェネレータを作る
Test Spec も一緒にジェネレートする
button というパターンのコンポーネント用に１サブジェネレータ作成しておく
$ yo my-proj:button upload-button
components└─ upload-button ├─ upload-button.js ├─ upload-buttonSpec.js ├─ style.css └─ template.html
リソースのロード
AMD も CommonJS もサポートする最強ローダー=
規模が大きくなるのでコードを分割したい。
分離したい箇所だけ Chunk で分割する
Chunk を使用することによってエントリーポイントから辿ってまとめる必要のないファイルを簡単に分割できる
require.ensure([‘modal’], function (require) { var modal = require(‘modal’); modal.create();});
スタイルの適用
insert-css restyle.js
substack が作った CSS の文字列を <head> に挿入するライブラリ=
insert-css
コンポーネントが呼び出されたときに CSS を適用させたい。CSS Preprocessor に Stylus を使いたい。
WebPack の style 系 loader と一緒使う挿入した <style> を取り除く機能がないので、ラップするinsert-css
WebPack で Stylus をロードし、insertCss() に渡すだけでコンポーネントのスタイルを適用できる
var style = require(‘!raw!stylus!./button.styl’);insertCss(style);
ビューの生成
コンポーネント単位でユニットテストしたい。
テスト環境の充実
カスタムエレメントでビューを扱いたい。
Element Directive を活用
ディレクトリ構造の強制
リソースのロード
スタイルの適用
ビューの生成
JS
JS
Reference• Componentizing the Webhttp://code.tutsplus.com/tutorials/componentizing-the-web--cms-20602
• The State of the Componentised Webhttp://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… Yethttp://developer.telerik.com/featured/web-components-arent-ready-production-yet/
• Why Web Components Are Ready For Productionhttp://developer.telerik.com/featured/web-components-ready-production/
ありがとうございました
