componentization with gilgamesh
TRANSCRIPT
アメーバ事業本部フロントエンドディベロッパー 五藤 佑典
Componentizationwith Gilgamesh- Frontrend Conference Final 2015.02.21 -
angular.module(‘demo’).directive( ‘postForm’, function () { return { restrict: ‘E’, templateUrl: ‘./template.html’, link: function () {} }; });
<post-form"
label=“最初の投稿” size=“small”"
skin=“dark”"
is-followed=“true”"
stars=“12”"
limit=“1000”"
…"
…"
/>
angular.module(‘demo’).directive( ‘postForm’, function () { return { templateUrl: ‘./template.html’, link: function () {} }; });
angular.module(‘demo’).directive( ‘postForm’, function () { return { templateUrl: ‘./template.html’, link: function () {} }; });
angular.module(‘demo’).component( ‘postForm’, function () { return { templateUrl: ‘./template.html’, link: function () {} }; });
<div class="well">"
<form class="form-horizontal">"
<fieldset class="">"
<legend>Post Form Component</legend>"
<div class="form-group">"
<label for="user" class="control-label col-xs-2">名前:</label>"
<div class="col-xs-10">"
<input type="text" class="form-control" ng-model="user.name" placeholder="名前" />"
</div>"
</div>"
<div class="form-group">"
<label for="E-mail" class="control-label col-xs-2">Eメール:</label>"
<div class="col-xs-10">"
<input type="text" class="form-control" ng-model="user.email" placeholder="Eメール" />"
<div class="checkbox">"
<label><input type="checkbox">購読する</label>"
</div>"
</div>"
</div>"
<div class="form-group">"
<div class="col-xs-offset-2 col-xs-2">"
<button class="btn btn-primary btn-block" ng-click="user.save()" gm-role="save">登録</button>"
</div>"
<div class="col-xs-2">"
<button class="btn btn-block" ng-click="user.cancel()" gm-role="cancel">中止</button>"
</div>"
</div>"
</fieldset>"
</form>"
</div>"
<div post-form></div>
template.html
<div class="well">"
<form class="form-horizontal">"
<fieldset class="">"
<legend>Post Form Component</legend>"
<div class="form-group">"
<label for="user" class="control-label col-xs-2">名前:</label>"
<div class="col-xs-10">"
<input type="text" class="form-control" ng-model="user.name" placeholder="名前" />"
</div>"
</div>"
<div class="form-group">"
<label for="E-mail" class="control-label col-xs-2">Eメール:</label>"
<div class="col-xs-10">"
<input type="text" class="form-control" ng-model="user.email" placeholder="Eメール" />"
<div class="checkbox">"
<label><input type="checkbox">購読する</label>"
</div>"
</div>"
</div>"
<div class="form-group">"
<div class="col-xs-offset-2 col-xs-2">"
<button class="btn btn-primary btn-block" ng-click="user.save()" gm-role="save">登録</button>"
</div>"
<div class="col-xs-2">"
<button class="btn btn-block" ng-click="user.cancel()" gm-role="cancel">中止</button>"
</div>"
</div>"
</fieldset>"
</form>"
</div>"
<div post-form></div>
template.html
<div class="well">"
<form class="form-horizontal">"
<fieldset class="">"
<legend>Post Form Component</legend>"
<div class="form-group">"
<label for="user" class="control-label col-xs-2">名前:</label>"
<div class="col-xs-10">"
<input type="text" class="form-control" ng-model="user.name" placeholder="名前" />"
</div>"
</div>"
<div class="form-group">"
<label for="E-mail" class="control-label col-xs-2">Eメール:</label>"
<div class="col-xs-10">"
<input type="text" class="form-control" ng-model="user.email" placeholder="Eメール" />"
<div class="checkbox">"
<label><input type="checkbox">購読する</label>"
</div>"
</div>"
</div>"
<div class="form-group">"
<div class="col-xs-offset-2 col-xs-2">"
<button class="btn btn-primary btn-block" ng-click="user.save()" gm-role="save">登録</button>"
</div>"
<div class="col-xs-2">"
<button class="btn btn-block" ng-click="user.cancel()" gm-role="cancel">中止</button>"
</div>"
</div>"
</fieldset>"
</form>"
</div>"
<div post-form></div>
template.html
<div class="col-xs-2">"
<button class="btn btn-block" ng-click=“user.cancel()""
gm-role="cancel">中止</button>"
</div>
<div class="well">"
<form class="form-horizontal">"
<fieldset class="">"
<legend>Post Form Component</legend>"
<div class="form-group">"
<label for="user" class="control-label col-xs-2">名前:</label>"
<div class="col-xs-10">"
<input type="text" class="form-control" ng-model="user.name" placeholder="名前" />"
</div>"
</div>"
<div class="form-group">"
<label for="E-mail" class="control-label col-xs-2">Eメール:</label>"
<div class="col-xs-10">"
<input type="text" class="form-control" ng-model="user.email" placeholder="Eメール" />"
<div class="checkbox">"
<label><input type="checkbox">購読する</label>"
</div>"
</div>"
</div>"
<div class="form-group">"
<div class="col-xs-offset-2 col-xs-2">"
<button class="btn btn-primary btn-block" ng-click="user.save()" gm-role="save">登録</button>"
</div>"
<div class="col-xs-2">"
<button class="btn btn-block" ng-click="user.cancel()" gm-role="cancel">中止</button>"
</div>"
</div>"
</fieldset>"
</form>"
</div>"
<div post-form></div>
template.html
<div class="col-xs-2">"
<button class="btn btn-block" ng-click=“user.cancel()""
gm-role="cancel">中止</button>"
</div>
<div post-form gm-tpl-partial>"
<button class="btn btn-danger btn-block" ng-click=“user.cancel()""
gm-role="cancel">解除</button>"
</div>
<div post-form gm-tpl-partial>"
<button class="btn btn-danger btn-block" ng-click=“user.cancel()""
gm-role="cancel">解除</button>"
</div>
<div class="well">"
<form class="form-horizontal">"
<fieldset class="">"
<legend>Post Form Component</legend>"
<div class="form-group">"
<label for="user" class="control-label col-xs-2">名前:</label>"
<div class="col-xs-10">"
<input type="text" class="form-control" ng-model="user.name" placeholder="名前" />"
</div>"
</div>"
<div class="form-group">"
<label for="E-mail" class="control-label col-xs-2">Eメール:</label>"
<div class="col-xs-10">"
<input type="text" class="form-control" ng-model="user.email" placeholder="Eメール" />"
<div class="checkbox">"
<label><input type="checkbox">購読する</label>"
</div>"
</div>"
</div>"
<div class="form-group">"
<div class="col-xs-offset-2 col-xs-2">"
<button class="btn btn-primary btn-block" ng-click="user.save()" gm-role="save">登録</button>"
</div>"
<div class="col-xs-2">"
<button class="btn btn-block" ng-click="user.cancel()" gm-role="cancel">中止</button>"
</div>"
</div>"
</fieldset>"
</form>"
</div>"
<post-form />
template.html
<div class="col-xs-2">"
<button class="btn btn-block" ng-click=“user.cancel()""
gm-role="cancel">中止</button>"
</div>
<button class=“btn btn-danger btn-block”"
gm-import=“postForm”>"
<div post-form id=“postForm”></div>
通常の DOM 構造では Scope 外となる
場所にもボタンを配置できる
通常の DOM 構造では Scope 外となる
場所にもボタンを配置できる
<button class=“btn btn-danger btn-block”"
gm-import=“postForm”"
ng-click=“cancel()”>"
<div post-form id=“postForm”></div>
import 元コンポーネントの scope を参照できる。
angular.module(‘demo’).component( ‘postFormSubscribe’, function () { return { extend: ‘postForm’, templateUrl: ‘./template.html’, link: function (iScope) { iScope.user.subscription = true; } }; });
触ってみて• コンポーネントの再利用性を後から高めるための便利な機能が追加できる
• ドキュメントの不備が多い
• バグにいっぱいあたる
• パフォーマンス?
• プロダクトではまだ使えないけど…
コンポーネント・ベース開発の ヒントも多いのでゆるく追ってみたい
Reference• Gilgameshhttp://sskyy.github.io/Gilgamesh/
• Gilgamesh: bring Angular to the next levelhttp://www.reddit.com/r/programming/comments/2s5exu/gilgamesh_bring_angular_to_the_next_level/
• Bootswatch: Free themes for Bootstrap http://bootswatch.com/
• ECOSAVE BOOTSTRAP ENVIRONMENT TEMPLATEhttp://www.binarytheme.com/ecosave-bootstrap-environment-template/