Spine入門

2012/07/11 第31回 HTML5とか勉強会 Acroquest Technology Co.,Ltd.

Kenichiro Murata(@muraken720)

目次

1.  はじめに 2.  Spineに興味を持った経緯 3.  Spineとは？ 4.  Spineの３つの特徴 5.  何はともあれ、Todos App！ 6.  Spineの７つのお気に入りなポイント 7.  まとめ

Copyright © Acroquest Technology Co., Ltd. All rights reserved. 2

1. はじめに

自己紹介 = 氏名: ‘村田　賢一郎’ twitter: ‘@muraken720’ 所属: ‘Acroquest Technology Co.,Ltd.’ 仕事:

‘ライフライン系ネットワーク集中監視システム開発’ ‘フレームワーク開発’

言語: ‘Java’ #JavaScriptはWebアプリケーション開発で少々興味:

‘node.js’ ‘CoffeeScript’

‘機関車トーマス！’ Copyright © Acroquest Technology Co., Ltd. All rights reserved.

3

2. Spineに興味を持った経緯

n  WGP（Web Graphical Platform）を「JavaScriptMVCフレームワーク」を使って改良せよ！ Ø  WGPはグラフィカルなWebUI開発用のJavaScriptなOSS。


http://wgp.sourceforge.net/

3. Spineとは？

1.  Backbone.jsにインスパイアされて開発。

2.  開発者： Alex MacCaw (@maccam)氏 Ø  著書：

– ステートフルJavaScript(原書:JavaScript Web Applications) –  The Little Book on CoffeeScript

3.  「ステートフルJavaScript」で提案する手法を体現することを目指して、執筆時に開発。


本に出てくるSpine.jsは、CoffeeScriptに出会う前の純粋なJavaScript実装版です。

4. Spineの３つの特徴


1. Simple

2. Lightweight

3. CoffeeScript

4-1. SimpleなMVCモデルアーキテクチャ


Controller

View Model

Event Event

Bind

①  Data Model ②  Data storage and manipulation

①  Event Handling

②  Rendering ③  Routing

①  Layout ②  Template

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）

3.  依存ライブラリ：なし Ø  JQuery or Zepto.js は推奨


0 10 20 30 40 50

Spine.js

Backbone.js+Underscore.js

AngularJS

Ember.js

※ 勉強会後、サイズについて比較条件が同じではないとのコメントを頂き、条件をmin+gzip時のサイズに統一して改版しました。

4-3. CoffeeScriptは簡潔で分かりやすい！？


class Model extends Module …

@select: (callback) -> result = (record for id, record of @records when callback(record)) @cloneArray(result)

…

@each: (callback) -> for key, value of @records callback(value.clone())

Javaエンジニア的には分かりやすい！

Good-bye! prototype.

https://github.com/maccman/spine/blob/master/src/spine.coffee

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


5. Todos Appの構成


TaskController

TaskApp(Controller）

Task(Model)

task.eco(View)

The Element pattern

　Spine.js

6. Spineの７つのお気に入りポイント


Controller

View Model

Spine.app app generator

Hem dependency manager

& server

⑤Ecoテンプレートをpre-compile

①定形作業を自動化 ⑥楽々デバッグ ⑦ビルドで頭スッキリ！

②Storage機能を併せ持つ③Adapterの切り替えが簡単

④Event、Elementのマッピングが簡単

6-①. Spine.appで定形作業を自動化

n  Spine.app とは、アプリケーションの自動生成ツール n  インストール

n  各種コマンド


spine app todos　　　　　　 # アプリケーションのひな形を生成

spine model task # Modelのひな形を生成

spine controller taskctrl # Controllerのひな形を生成

> npm install spine.app hem # インストール

6-②. ModelはStorage機能を併せ持つ


Spine = require('spine')

class Task extends Spine.Model @configure 'Task', "name", "done” … @active: -> @select ( (item) -> !item.done ) …

module.exports = Task

Modelが提供する関数（抜粋）

create find save select exsits updateAttribute each all bind

configureで、Model名とプロパティ名を定義するだけ。 Storageに対する操作は標準で提供

app/models/task.coffee

6-③. Model Adapterの切り替えが簡単

ü  @LocalでHTML5のLocalStorageに永続化 ü  @AjaxでRESTでサーバサイドを呼び出し


Spine = require('spine')

class Task extends Spine.Model @configure 'Task', "name", "done”

@extend @Local

@active: -> @select ( (item) -> !item.done ) … module.exports = Task

app/models/task.coffee

extendでLocalStrorage用のAdapterを指定

6-④. ControllerでEventのマッピングが簡単

ü  events hashでユーザ操作によるイベントを関数にマッピング可能。


class TaskApp extends Spine.Controller …

events: "submit form": "create" "click .clear": "clear” … create: (e) -> e.preventDefault() Task.create(name: @input.val(), done: false) @input.val("")

app/index.coffee

Eventと関数の関連付け定義は以下の形式 events: “イベント名 Selector”: “関数名”

6-④. ControllerでElementのマッピングが簡単


class TaskApp extends Spine.Controller … elements: ".items": "items" ".countVal": "count" ".clear": "clearlink" "form input": "input” … addOne: (task) => taskctrl = new TaskController(item: task) @items.append(taskctrl.render().el) app/index.coffee

Elementと変数の関連付け定義は以下の形式 elements: “Selector”: “変数名”

ü  elements hashでDOMを変数にマッピング可能。

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にて以下のように利用する

render: => @replace require('views/task')(@item)

app/views/task.eco

6-⑥. Hemで楽々デバッグ

n  Hem とは、開発用サーバ＆依存関係管理ツール n  開発用サーバの起動

ü  “*.coffee”, “*.styl” をapplication.js, application.cssに変換 ü  “*.eco”をpre-compile ü  ファイルの更新を監視しており、サーバの再起動なしで変

更を自動反映


ｈem server # 開発用のサーバを起動

6-⑦. Hemのビルドで頭スッキリ

n  デプロイ用のビルド ü  requireを解釈して、JavaScript間の依存関係を解

消したデプロイ用の統合ファイル（application.js, application.css）を生成


ｈem build # application.js, application.cssを生成

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>

7. まとめ：Spineの３つの特徴


1. Simple

2. Lightweight

3. CoffeeScript

　Spine.js

7. まとめ：Spineの７つのお気に入りポイント


Controller

View Model

Spine.app app generator

Hem dependency manager

& server

⑤Ecoテンプレートをpre-compile

①定形作業を自動化 ⑥楽々デバッグ ⑦ビルドで頭スッキリ

②Storage機能を併せ持つ③Adapterの切り替えが簡単

④Event、Elementのマッピングが簡単

Spine入門

Technology

Transcript of Spine入門