演讲：Open IoT Cloud 设计思想之 WoT Frotend 的設計與實作。2015 年 4 月 11 日在深圳南山智园。

1. Frontend 设计与实现
Mokoversity / Julie Huang

2. WoT
• IoT 的 Application Layer
• 使⽤用 Web 技術來打造 Application

3. WoT 关键技术
• Application Framework
• Application Frontend 的 Composition Layer 設計

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

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

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

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

8. MVC
View
Controller Model

9. MVC
View
Controller Model

10. MVC
View
Controller Model

11. MVC
View
Controller Model

12. MVP
View
Presenter Model

13. MVVM
View
ViewModel Model

14. MVWhaterver
• MVC
• MVP
• MVVM
• MV*

15. MVVM vs MVC
MVC
写程式 不⽤用写
Component
Template+
Data Binding
Template+
Control Logic
!
MVVM MVVM React

16. 来源：http://code.tutsplus.com/tutorials/important- considerations-
when-building-single-page-web-apps-- net-29356
选择 Full Stack Framework

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

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

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

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

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

22. !
!
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
来取⽤用变数值

23. 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

24. 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 的名称
当资料变了画⾯面就
跟着改变

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

26. 谢谢