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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (6)

En vedette

En vedette (20)

Similaire à Componentization with Gilgamesh

Similaire à Componentization with Gilgamesh (20)

Plus de Yusuke Goto

Plus de Yusuke Goto (20)

Dernier

Dernier (10)

Componentization with Gilgamesh