狠狠撸

Frontend 设计与实现
Mokoversity / Julie Huang

WoT
? IoT 的 Application Layer
? 使?用 Web 技術來打造 Application

WoT 关键技术
? Application Framework
? Application Frontend 的 Composition Layer 設計

?一个轻量级的 Composition Layer 实作
AutomationJS
? AutomationJS 是?一个轻量级的 MVVM
? 利?用 Virtual DOM 技术，来进?行 UI Boundary
Composition
? 使?用 Backbone 做为 Model-View 的基础
? 未来也将接轨 HTML 5 的新技术标准－Shadow
DOM

Single Page Web Apps
来源： http://apievangelist.com/2013/05/23/ember-
angular-backbone-single- page-applications-and-apis/

URL Router
来源: http://msdn.microsoft.com/en-us/magazine/hh288078.aspx

REST API
来源： http://apievangelist.com/2013/05/23/ember-
angular-backbone-single- page-applications-and-apis/

MVWhaterver
? MVC
? MVP
? MVVM
? MV*

MVVM vs MVC
MVC
写程式不?用写
Component
Template+
Data Binding
Template+
Control Logic

!
MVVM MVVM React

来源：http://code.tutsplus.com/tutorials/important- considerations-
when-building-single-page-web-apps-- net-29356

选择 Full Stack Framework

Backbone
? Backbone 必须与 Underscore 搭配使?用
? Backbone 是?一个 MVC 框架，?一开始先定义 Model 与 View
? Model 就是「表?示资料的模型」,也就是将会显?示在画?面上的
资料
? Model ?里的资料，要?用 Key-Value Pairs 的格式表?示
? View 的部份将负责处理 Template 与 Model 的对应
? View 的部份，也负责处理控制的部份，例如: Button 的
click 事件

Key-Value Pairs
? JSON 资料格式
? 将 JSON「套?用」到 Template
{ "name": "julie"}

Underscore ＆Backbone
? Underscore 会将 Model 的变数与 Template 做对
应，并且?用变数值取代，这个对应关系就是
ViewModel 的观念
? Underscore 透过 Template 将 Model ?里的资料,显?示
到画?面上
? 显?示资料到画?面上，不需要写程式；对设计师来说,
只要修改 Template

Backbone Data Model
? Backbone.Model 除了表?示资料外,还提供各种处理模型
? 最重要的处理模型：manage change
? ?一但 Model 裡的資料有變動（例如:新增、刪除等），就
透過 Backbone.Model.fetch 重新做 "Data Mapping”
? 使?用 Model fetch 的?方式,让 Response data 的处理更严
谨
? 使?用 Data model 的?方式，让 Data 与 API 偶和
（Aggregation）在?一起

Backbone 基本框架
/**!
* SETUP!
**/!
var app = app || {};!
!
/**!
* MODELS!
**/!
!
! /**!
* VIEWS! **/!
app.MessageView = Backbone.View.extend({!
events: {!
},!
});!
!
/**!
* BOOTUP!
**/!
$(document).ready(function() {!
app.messageView = new app.MessageView();!
});

!
!
script(type='text/template', id='tmpl-dust')
.col-md-4
a.text-center.btn-mbed-spot-news
img.img-responsive(src!='/images/gallery/timeline-1.jpg')
.info
h2 温度
h2 <%= sensordata %>
template－Jade
22
来取?用变数值

Backbone－Model
23
Key-Value Pairs
app.TestUp = Backbone.Model.extend({
url: function() {
return '/1/sandbox/weather/'
+ this.attributes.city;
},
wsUrl: function() {
return 'ws://wot.city/object/smarthome/viewer'
},
defaults: {
success: false,
errors: [],
errfor: {},
!
city: '',
temperature: 0
},
// AutomationJS plugins
parseJSON: function() {
var humidity = this.get('humidity')
, lowpulseoccupancytime = this.get('lowpulseoccupancytime')
, uv = this.get('uv')
, gas = this.get('gas')
, temperature = this.get('temperature');
this.set('result', false);
}
});
取得温度 RESTful
API

app.TemperatureView = Backbone.View.extend({
el: '#test-up',
template: _.template( $('#tmpl-dust').html() ),
events: {
},
initialize: function() {
this.component = new Automation({
el: this.$el,
model: app.TestUp,
template: this.template
});
!
// initialize sub tree
var model = this.component.add({
city: 'Taipei',
country: 'tw',
lowpulseoccupancytime: 0,
temperature:23,
href: 'https://www.mokoversity.com/coders',
img: '/images/gallery/timeline-1.jpg'
});
!
model.bind('notify.change', this.render, model);
},
render: function() {
$('#current div.bottom')
.css('height', '60px')
.animate({
height: this.get('x')
}, 1000);
}
});
Backbone－View
24
Template 的名称
当资料变了画?面就
跟着改变

WoT－Frontend
25
獨?立
Virtual DOM
说明：资料变动时只会
更新所属的 Virtual DOM

狠狠撸

WoT Frotend 的設計與實作

More Related Content

WoT Frotend 的設計與實作