Componentization with Gilgamesh

アメーバ事業本部 
フロントエンドディベロッパー五藤佑典
Componentization 
with Gilgamesh
- Frontrend Conference Final 2015.02.21 -

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

コンポーネントを揃えて 
ＵＩのコードを綺麗にしたい

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

<post-form />
stockimages / FreeDigitalPhotos.net

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

<post-form"
label=“まずは試してみる” 
/>

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

<post-form"
label=“最初の投稿” 
size=“small”"
/>

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

<post-form"
size=“small”"
skin=“dark”"
/>

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

<post-form"
size=“small”"
skin=“dark”"
is-followed=“true”"
stars=“12”"
limit=“1000”"
…"
…"
/>

stockimages / FreeDigitalPhotos.net

どこまで必要かは
予測が難しい

Gilgamesh
to the Rescue
https://github.com/sskyy/Gilgamesh

Gilgamesh
JavaScript フレームワークを拡張するライブラリ集
• テンプレート拡張ライブラリ
• データソースライブラリ
• もっと増える？

予期できなかった必要な汎用性を
復活してくれるライブラリ

サポート対象
サポート済サポート予定サポート予定

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

angular.module(‘demo’).directive( 
‘postForm’, 
function () { 
return { 
}; 
} 
);

angular.module(‘demo’).component( 
‘postForm’, 
function () { 
return { 
}; 
} 
);

<div class="well">"
<form class="form-horizontal">"
<ﬁeldset 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>"
</ﬁeldset>"
</form>"
</div>"
<div post-form></div>
template.html

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

<div class="well">"
</div>"
</div>"
</div>"
</div>"
</div>"
</div>"
</div>"
</div>"
</ﬁeldset>"
</form>"
</div>"
<div post-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>"
</ﬁeldset>"
</form>"
</div>"
<post-form />
template.html
<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’, 
link: function (iScope) { 
iScope.user.subscription = true; 
} 
}; 
} 
);

<div post-form-subscribe></div>
postForm の link で設定された
機能も継承されている。

そのほかにも機能が多々

触ってみて
• コンポーネントの再利用性を後から高めるための便利な機能が追加できる
• ドキュメントの不備が多い
• バグにいっぱいあたる
• パフォーマンス？
• プロダクトではまだ使えない 
けど…
コンポーネント・ベース開発の
ヒントも多いのでゆるく追ってみたい

Reference
• Gilgamesh 
http://sskyy.github.io/Gilgamesh/
• Gilgamesh: bring Angular to the next level 
http://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 TEMPLATE 
http://www.binarytheme.com/ecosave-bootstrap-environment-template/

ありがとうございました

Componentization with Gilgamesh

Recommended

Recommended

More Related Content

What's hot

What's hot (6)

Viewers also liked

Viewers also liked (20)

Similar to Componentization with Gilgamesh

Similar to Componentization with Gilgamesh (20)

More from Yusuke Goto

More from Yusuke Goto (20)

Recently uploaded

Recently uploaded (14)

Componentization with Gilgamesh