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/

MVC

View

Controller Model

MVC

View

Controller Model

MVC

View

Controller Model

MVC

View

Controller Model

MVP

View

Presenter Model

MVVMView

ViewModel Model

MVWhaterver

• MVC

• MVP

• MVVM

• MV*

MVVM vs MVCMVC

写程式 不⽤用写

ComponentTemplate+ 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

谢谢