Spine入門

2012/07/11 第31回 HTML5とか勉強会 Acroquest Technology Co.,Ltd.Kenichiro Murata(@muraken720)

1. はじめに自己紹介 = 氏名: ‘村田　賢一郎’ twitter: ‘@muraken720’ 所属: ‘Acroquest Technology Co.,Ltd.’ 仕事: ‘ライフライン系ネットワーク集中監視システム開発’ ‘フレームワーク開発’ 言語: ‘Java’ #JavaScriptはWebアプリケーション開発で少々興味: ‘node.js’ ‘CoffeeScript’ ‘機関車トーマス！’ 3 Copyright © Acroquest Technology Co., Ltd. All rights reserved.

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.

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.

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.

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.

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.

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.

6. Spineの７つのお気に入りポイント ④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.

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.

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.

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.

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.

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.

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.

6-⑥. Hemで楽々デバッグ n  Hem とは、開発用サーバ＆依存関係管理ツールn  開発用サーバの起動ｈem server # 開発用のサーバを起動 ü  “*.coffee”, “*.styl” をapplication.js, application.cssに変換 ü  “*.eco”をpre-compile ü  ファイルの更新を監視しており、サーバの再起動なしで変更を自動反映 19 Copyright © Acroquest Technology Co., Ltd. All rights reserved.

6-⑦. Hemのビルドで頭スッキリ n  デプロイ用のビルドｈem build # application.js, application.cssを生成 ü  requireを解釈して、JavaScript間の依存関係を解消したデプロイ用の統合ファイル（application.js, application.css）を生成 20 Copyright © Acroquest Technology Co., Ltd. All rights reserved.

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.

7. まとめ：Spineの７つのお気に入りポイント ④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.

https://twimg0-a.akamaihd.net	5
https://si0.twimg.com	4
https://twitter.com	4
http://tweetedtimes.com	1
http://s.deeeki.com	1

Spine入門

by AdvancedTechNight on Jul 12, 2012

Accessibility

Categories

Upload Details

Usage Rights

5 Embeds 15

Statistics

Spine入門 Presentation Transcript