Spine入門

8,333 views

Published on

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

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

Published in: Technology, Business
0 Comments
15 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,333
On SlideShare
0
From Embeds
0
Number of Embeds
133
Actions
Shares
0
Downloads
38
Comments
0
Likes
15
Embeds 0
No embeds

No notes for slide

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.

×