WoT Frotend 的設計與實作
-
Upload
julie-huang -
Category
Internet
-
view
76 -
download
3
Transcript of WoT Frotend 的設計與實作
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
谢谢