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.

Spine入門

8,697 views

Published on

2012/07/11 第31回 HTML5とか勉強会 JavaScriptMVCフレームワーク「Spine入門」

(2012/07/12改版)ファイルサイズの比較について、比較条件が同じではないとのコメントを頂き、条件をmin+gzip時に統一して該当箇所を改版しました。

Published in: Technology, Business
  • Be the first to comment

Spine入門

  1. 1. 2012/07/11 第31回 HTML5とか勉強会 Acroquest Technology Co.,Ltd.Kenichiro Murata(@muraken720)
  2. 2. 目次 1.  はじめに 2.  Spineに興味を持った経緯 3.  Spineとは? 4.  Spineの3つの特徴 5.  何はともあれ、Todos App! 6.  Spineの7つのお気に入りなポイント 7.  まとめ 2 Copyright © Acroquest Technology Co., Ltd. All rights reserved.
  3. 3. 1. はじめに 自己紹介 = 氏名: ‘村田 賢一郎’ twitter: ‘@muraken720’ 所属: ‘Acroquest Technology Co.,Ltd.’ 仕事: ‘ライフライン系ネットワーク集中監視システム開発’ ‘フレームワーク開発’ 言語: ‘Java’ #JavaScriptはWebアプリケーション開発で少々 興味: ‘node.js’ ‘CoffeeScript’ ‘機関車トーマス!’ 3 Copyright © Acroquest Technology Co., Ltd. All rights reserved.
  4. 4. 2. Spineに興味を持った経緯 n  WGP(Web Graphical Platform)を「JavaScriptMVC フレームワーク」を使って改良せよ! Ø  WGPはグラフィカルなWebUI開発用のJavaScriptなOSS。 http://wgp.sourceforge.net/ 4 Copyright © Acroquest Technology Co., Ltd. All rights reserved.
  5. 5. 3. Spineとは? 1.  Backbone.jsにインスパイアされて開発。 2.  開発者: Alex MacCaw (@maccam)氏 Ø  著書: –  ステートフルJavaScript(原書:JavaScript Web Applications) –  The Little Book on CoffeeScript 3.  「ステートフルJavaScript」で提案する手法を体現する ことを目指して、執筆時に開発。 本に出てくるSpine.jsは、CoffeeScriptに出会う前の 純粋なJavaScript実装版です。 5 Copyright © Acroquest Technology Co., Ltd. All rights reserved.
  6. 6. 4. Spineの3つの特徴 1. Simple 3. CoffeeScript 2. Lightweight 6 Copyright © Acroquest Technology Co., Ltd. All rights reserved.
  7. 7. 4-1. SimpleなMVCモデルアーキテクチャ ①  Event ②  Rendering Handling ③  Routing Controller Event Event Bind View Model ①  Layout ①  Data Model ②  Template ②  Data storage and manipulation 7 Copyright © Acroquest Technology Co., Ltd. All rights reserved.
  8. 8. 4-2. Lightweightなフレームワーク 1.  ライン数: 約500 Line 2.  サイズ(min+gzip): 8.1k(最小構成4.1k) ü  Backbone.js(5.6k)+Underscore.js(4k) ü  Ember.js(42k) ü  AngularJS(29k) Ember.js ※ 勉強会後、サイズについて比較条件 が同じではないとのコメントを頂き、条件 AngularJS をmin+gzip時のサイズに統一して改版 しました。 Backbone.js +Underscore.js Spine.js 3.  依存ライブラリ: なし 0 10 20 30 40 50 Ø  JQuery or Zepto.js は推奨 8 Copyright © Acroquest Technology Co., Ltd. All rights reserved.
  9. 9. 4-3. CoffeeScriptは簡潔で分かりやすい!? class Model extends Module …  @select: (callback) ->    result = (record for id, record of @records when callback(record))    @cloneArray(result) … Javaエンジニア的に @each: (callback) -> は分かりやすい!   for key, value of @records Good-bye! prototype.      callback(value.clone()) https://github.com/maccman/spine/blob/master/src/spine.coffee 9 Copyright © Acroquest Technology Co., Ltd. All rights reserved.
  10. 10. 5. 何はともあれ、Todos App! n  Spineで、有名なTodos Appを使って作ってみよう! n  全ソースはGithubにて公開しています。 Ø  https://github.com/muraken720/todos-spineapp-hem-eco Ø  https://github.com/muraken720/todos-spineapp-hem-jqtmpl 10 Copyright © Acroquest Technology Co., Ltd. All rights reserved.
  11. 11. 5. Todos Appの構成 The Element pattern TaskApp(Controller) TaskController Task(Model) task.eco(View) 11 Copyright © Acroquest Technology Co., Ltd. All rights reserved.
  12. 12. 6. Spineの7つのお気に入りポイント ④Event、Elementのマッピングが簡単 ②Storage機能を併せ持つ Controller ⑤Ecoテンプレート ③Adapterの切り替えが簡単をpre-compile View Model  Spine.js ⑥楽々デバッグ①定形作業を自動化 ⑦ビルドで頭スッキリ! Hem Spine.app dependency manager app generator & server 12 Copyright © Acroquest Technology Co., Ltd. All rights reserved.
  13. 13. 6-①. Spine.appで定形作業を自動化 n  Spine.app とは、アプリケーションの自動生成ツール n  インストール > npm install spine.app hem # インストール n  各種コマンド spine app todos       # アプリケーションのひな形を生成 spine model task # Modelのひな形を生成 spine controller taskctrl # Controllerのひな形を生成 13 Copyright © Acroquest Technology Co., Ltd. All rights reserved.
  14. 14. 6-②. ModelはStorage機能を併せ持つ Spine = require(spine) class Task extends Spine.Model configureで、Model 名とプロパティ名を @configure Task, "name", "done” 定義するだけ。 … Storageに対する操 @active: -> 作は標準で提供 @select ( (item) -> !item.done ) … module.exports = Task app/models/task.coffee Modelが提供する関数(抜粋) create find save select exsits updateAttribute each all bind 14 Copyright © Acroquest Technology Co., Ltd. All rights reserved.
  15. 15. 6-③. Model Adapterの切り替えが簡単 Spine = require(spine) class Task extends Spine.Model @configure Task, "name", "done” @extend @Local extendでLocalStrorage用の Adapterを指定 @active: -> @select ( (item) -> !item.done ) … module.exports = Task app/models/task.coffee ü  @LocalでHTML5のLocalStorageに永続化 ü  @AjaxでRESTでサーバサイドを呼び出し 15 Copyright © Acroquest Technology Co., Ltd. All rights reserved.
  16. 16. 6-④. ControllerでEventのマッピングが簡単 class TaskApp extends Spine.Controller … events: Eventと関数の関連付け定義は "submit form": "create" 以下の形式 "click .clear": "clear” events:… “イベント名 Selector”: “関数名” create: (e) -> e.preventDefault() Task.create(name: @input.val(), done: false) @input.val("") app/index.coffee ü  events hashでユーザ操作によるイベントを関数にマッピング可能。 16 Copyright © Acroquest Technology Co., Ltd. All rights reserved.
  17. 17. 6-④. ControllerでElementのマッピングが簡単 class TaskApp extends Spine.Controller … Elementと変数の関連付け定義は elements: 以下の形式 ".items": "items" ".countVal": "count" elements: “Selector”: “変数名” ".clear": "clearlink" "form input": "input” … addOne: (task) => taskctrl = new TaskController(item: task) @items.append(taskctrl.render().el) app/index.coffee ü  elements hashでDOMを変数にマッピング可能。 17 Copyright © Acroquest Technology Co., Ltd. All rights reserved.
  18. 18. 6-⑤. ViewにてEcoテンプレートをpre-compile ü  Viewに関しては特に規定なし。 ü  後述のHemにてEcoテンプレートをpre-compileしてくれるので、 requireで簡単に利用可能。 <div class="item <%= "done" if @done %>"> <div class="view" title="Double click to edit..."> <input type="checkbox" <%= "checked=checked" if @done %>> <span><%= @name %></span> <a class="destroy"></a> </div> <div class="edit"> <input type="text" value="<%= @name %>"> </div></div> Controllerにて以下のように利用する app/views/task.eco render: => @replace require(views/task)(@item) 18 Copyright © Acroquest Technology Co., Ltd. All rights reserved.
  19. 19. 6-⑥. Hemで楽々デバッグ n  Hem とは、開発用サーバ&依存関係管理ツールn  開発用サーバの起動 hem server # 開発用のサーバを起動 ü  “*.coffee”, “*.styl” をapplication.js, application.cssに変換 ü  “*.eco”をpre-compile ü  ファイルの更新を監視しており、サーバの再起動なしで変 更を自動反映 19 Copyright © Acroquest Technology Co., Ltd. All rights reserved.
  20. 20. 6-⑦. Hemのビルドで頭スッキリ n  デプロイ用のビルド hem build # application.js, application.cssを生成 ü  requireを解釈して、JavaScript間の依存関係を解 消したデプロイ用の統合ファイル(application.js, application.css)を生成 20 Copyright © Acroquest Technology Co., Ltd. All rights reserved.
  21. 21. 6-⑦. Hemのビルドで頭スッキリ <head> <title>Todos</title> <link rel="stylesheet" href="css/todos.css" type="text/css" charset="utf-8"> <script src="lib/json2.js" type="text/javascript" charset="utf-8"></script> <script src="lib/jquery.js" type="text/javascript" charset="utf-8"></script> <script src="lib/jquery.tmpl.js" type="text/javascript" charset="utf-8"></script> <script src="lib/spine.js" type="text/javascript" charset="utf-8"></script> <script src="lib/local.js" type="text/javascript" charset="utf-8"></script> <script src="lib/todos.js" type="text/javascript" charset="utf-8"></script></head><head> <title>Todos</title> <link rel="stylesheet" href=”/application.css" type="text/css" charset="utf-8"> <script src=”/application.js" type="text/javascript" charset="utf-8"></script></head> 21 Copyright © Acroquest Technology Co., Ltd. All rights reserved.
  22. 22. 7. まとめ:Spineの3つの特徴 1. Simple 3. CoffeeScript 2. Lightweight 22 Copyright © Acroquest Technology Co., Ltd. All rights reserved.
  23. 23. 7. まとめ:Spineの7つのお気に入りポイント ④Event、Elementのマッピングが簡単 ②Storage機能を併せ持つ Controller ⑤Ecoテンプレート ③Adapterの切り替えが簡単をpre-compile View Model  Spine.js ⑥楽々デバッグ①定形作業を自動化 ⑦ビルドで頭スッキリ Hem Spine.app dependency manager app generator & server 23 Copyright © Acroquest Technology Co., Ltd. All rights reserved.
  24. 24. ご清聴、ありがとうございました。 Infrastructures  Evolution 24 Copyright © Acroquest Technology Co., Ltd. All rights reserved.

×