Componentization with Gilgamesh

アメーバ事業本部フロントエンドディベロッパー五藤佑典

Componentizationwith Gilgamesh- Frontrend Conference Final 2015.02.21 -

　 @ygoto3_ ygoto3.com!

https://twitter.com/ygoto3_

http://ygoto3.com

ＵＩコンポーネント

最近は選択肢が多いです。（迷います）

コンポーネントを揃えて

ＵＩのコードを綺麗にしたい

angular.module(‘demo’).directive( ‘postForm’, function () { return { restrict: ‘E’, templateUrl: ‘./template.html’, link: function () {} }; });

<post-form />

stockimages / FreeDigitalPhotos.net

<body>" <global-header />" <key-visual />"

<post-form />"</body>

理想

でも現実は…

このページだけラベル変えたい。

👤

👍

<post-form"

label=“まずは試してみる”/>

これ、このタイミングは、あんまり主張してほしくないなー

👤

👍

<post-form"

label=“最初の投稿” size=“small”"

/>

数字が下がってる。明日イベント打ちたい！あそこで使ってるアレ、アレと同じで大丈夫なんで、ちょっとテイスト変えて明日までにお願いしますー

👤

👍

<post-form"


skin=“dark”"

/>

………………………………… …………………… ……………………………

👤

👍

<post-form"


skin=“dark”"

is-followed=“true”"

stars=“12”"

limit=“1000”"

…"

…"

/>

stockimages / FreeDigitalPhotos.net

最初は綺麗だった…

汎用性は必要

どこまで必要かは

予測が難しい

Gilgamesh to the Rescue

Gilgamesh to the Rescue

https://github.com/sskyy/Gilgamesh

https://github.com/sskyy/Gilgamesh

Gilgamesh

JavaScript フレームワークを拡張するライブラリ集

• テンプレート拡張ライブラリ • データソースライブラリ • もっと増える？

Gilgamesh

JavaScript フレームワークを拡張するライブラリ集

• テンプレート拡張ライブラリ • データソースライブラリ • もっと増える？

予期できなかった必要な汎用性を

復活してくれるライブラリ

サポート対象

サポート済サポート予定サポート予定

Gilgamesh でコンポーネント作成（w/ Angular）

directive　component

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 post-form></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>"


<label for="E-mail" class="control-label col-xs-2">Ｅメール：</label>"


<input type="text" class="form-control" ng-model="user.email" placeholder="Ｅメール" />"

<div class="checkbox">"

<label><input type="checkbox">購読する</label>"

</div>"

</div>"

</div>"


<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>"


<button class="btn btn-block" ng-click="user.cancel()" gm-role="cancel">中止</button>"

</div>"

</div>"

</fieldset>"

</form>"

</div>"


template.html

ラベルと色が弱いな。。ここだけはボタンを強調したい！

👤

<div class="well">"








</div>"

</div>"







</div>"

</div>"

</div>"




</div>"



</div>"

</div>"

</fieldset>"

</form>"

</div>"


template.html

<div class="well">"








</div>"

</div>"







</div>"

</div>"

</div>"




</div>"



</div>"

</div>"

</fieldset>"

</form>"

</div>"


template.html


<button class="btn btn-block" ng-click=“user.cancel()""

gm-role="cancel">中止</button>"

</div>

<div class="well">"








</div>"

</div>"







</div>"

</div>"

</div>"




</div>"



</div>"

</div>"

</fieldset>"

</form>"

</div>"


template.html




</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">"








</div>"

</div>"







</div>"

</div>"

</div>"




</div>"



</div>"

</div>"

</fieldset>"

</form>"

</div>"

<post-form />

template.html




</div>


<div post-form gm-tpl-exclude=“cancel”></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; } }; });

<div post-form-subscribe></div>

postForm の link で設定された機能も継承されている。

そのほかにも機能が多々

触ってみて• コンポーネントの再利用性を後から高めるための便利な機能が追加できる

• ドキュメントの不備が多い

• バグにいっぱいあたる

• パフォーマンス？

• プロダクトではまだ使えないけど…

コンポーネント・ベース開発のヒントも多いのでゆるく追ってみたい

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/

http://sskyy.github.io/Gilgamesh/

http://www.reddit.com/r/programming/comments/2s5exu/gilgamesh_bring_angular_to_the_next_level/

http://bootswatch.com/

http://www.binarytheme.com/ecosave-bootstrap-environment-template/

ありがとうございました

Componentization with Gilgamesh

Technology