Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Componentization with Gilgamesh

3,249 views

Published on

Hope for componentizing ui elements with less pain.

Published in: Technology
  • Be the first to comment

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. ありがとうございました

×