Componentization with Gilgamesh

3,053 views

Published on

Hope for componentizing ui elements with less pain.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,053
On SlideShare
0
From Embeds
0
Number of Embeds
1,846
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Componentization with Gilgamesh

  1. 1. アメーバ事業本部
 フロントエンドディベロッパー 五藤 佑典 Componentization
 with Gilgamesh - Frontrend Conference Final 2015.02.21 -
  2. 2.   @ygoto3_ ygoto3.com
  3. 3. UIコンポーネント
  4. 4. 最近は選択肢が多いです。(迷います)
  5. 5. コンポーネントを揃えて
 UIのコードを綺麗にしたい
  6. 6. angular.module(‘demo’).directive(
 ‘postForm’,
 function () {
 return {
 restrict: ‘E’,
 templateUrl: ‘./template.html’,
 link: function () {}
 };
 }
 );
  7. 7. <post-form /> stockimages / FreeDigitalPhotos.net
  8. 8. <body>" <global-header />" <key-visual />" <post-form />" </body>
  9. 9. 理想
  10. 10. でも現実は…
  11. 11. このページだけラベル変えたい。
  12. 12. 👍
  13. 13. <post-form" label=“まずは試してみる”
 />
  14. 14. これ、このタイミングは、 あんまり主張してほしくないなー
  15. 15. 👍
  16. 16. <post-form" label=“最初の投稿”
 size=“small”" />
  17. 17. 数字が下がってる。明日イベント打ちたい! あそこで使ってるアレ、アレと同じで 大丈夫なんで、ちょっとテイスト変えて 明日までにお願いしますー
  18. 18. 👍
  19. 19. <post-form" label=“最初の投稿”
 size=“small”" skin=“dark”" />
  20. 20. ………………………………… …………………… ……………………………
  21. 21. 👍
  22. 22. <post-form" label=“最初の投稿”
 size=“small”" skin=“dark”" is-followed=“true”" stars=“12”" limit=“1000”" …" …" />
  23. 23. stockimages / FreeDigitalPhotos.net
  24. 24. 最初は綺麗だった…
  25. 25. 汎用性は必要
  26. 26. どこまで必要かは 予測が難しい
  27. 27. Gilgamesh to the Rescue
  28. 28. Gilgamesh to the Rescue https://github.com/sskyy/Gilgamesh
  29. 29. Gilgamesh JavaScript フレームワークを拡張するライブラリ集 • テンプレート拡張ライブラリ • データソースライブラリ • もっと増える?
  30. 30. Gilgamesh JavaScript フレームワークを拡張するライブラリ集 • テンプレート拡張ライブラリ • データソースライブラリ • もっと増える?
  31. 31. 予期できなかった必要な汎用性を 復活してくれるライブラリ
  32. 32. サポート対象 サポート済 サポート予定 サポート予定
  33. 33. Gilgamesh で
 コンポーネント作成(w/ Angular)
  34. 34. directive component
  35. 35. angular.module(‘demo’).directive(
 ‘postForm’,
 function () {
 return {
 templateUrl: ‘./template.html’,
 link: function () {}
 };
 }
 );
  36. 36. angular.module(‘demo’).directive(
 ‘postForm’,
 function () {
 return {
 templateUrl: ‘./template.html’,
 link: function () {}
 };
 }
 );
  37. 37. angular.module(‘demo’).component(
 ‘postForm’,
 function () {
 return {
 templateUrl: ‘./template.html’,
 link: function () {}
 };
 }
 );
  38. 38. <div post-form></div>
  39. 39. <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
  40. 40. ラベルと色が弱いな。。 ここだけはボタンを強調したい!
  41. 41. <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
  42. 42. <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>
  43. 43. <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>
  44. 44. <div post-form></div>
  45. 45. <div post-form gm-tpl-partial>" <button class="btn btn-danger btn-block" ng-click=“user.cancel()"" gm-role="cancel">解除</button>" </div>
  46. 46. <div post-form gm-tpl-partial>" <button class="btn btn-danger btn-block" ng-click=“user.cancel()"" gm-role="cancel">解除</button>" </div>
  47. 47. ここはユーザーにできるだけ登録させたい。 中止ボタンは見せたくない。
  48. 48. <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>
  49. 49. <div post-form></div>
  50. 50. <div post-form gm-tpl-exclude=“cancel”></div>
  51. 51. 思いきって中止ボタンをコンポーネントの 外に出して差別化して目立たせたい。
  52. 52. <button class=“btn btn-danger btn-block”" gm-import=“postForm”>" <div post-form id=“postForm”></div> 通常の DOM 構造では Scope 外となる 場所にもボタンを配置できる
  53. 53. 通常の DOM 構造では Scope 外となる 場所にもボタンを配置できる <button class=“btn btn-danger btn-block”" gm-import=“postForm”" ng-click=“cancel()”>" <div post-form id=“postForm”></div> import 元コンポーネントの scope を参照できる。
  54. 54. コンポーネントの拡張
  55. 55. angular.module(‘demo’).component(
 ‘postFormSubscribe’,
 function () {
 return {
 extend: ‘postForm’,
 templateUrl: ‘./template.html’,
 link: function (iScope) {
 iScope.user.subscription = true;
 }
 };
 }
 );
  56. 56. <div post-form-subscribe></div> postForm の link で設定された 機能も継承されている。
  57. 57. そのほかにも機能が多々
  58. 58. 触ってみて • コンポーネントの再利用性を後から高めるための便利な機能が追加できる • ドキュメントの不備が多い • バグにいっぱいあたる • パフォーマンス? • プロダクトではまだ使えない
 けど… コンポーネント・ベース開発の ヒントも多いのでゆるく追ってみたい
  59. 59. 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/
  60. 60. ありがとうございました

×