wot frotend 的設計與實作
TRANSCRIPT
![Page 1: WoT Frotend 的設計與實作](https://reader030.vdocuments.site/reader030/viewer/2022012312/55a85a0f1a28ab876d8b45fc/html5/thumbnails/1.jpg)
Frontend 设计与实现Mokoversity / Julie Huang
![Page 2: WoT Frotend 的設計與實作](https://reader030.vdocuments.site/reader030/viewer/2022012312/55a85a0f1a28ab876d8b45fc/html5/thumbnails/2.jpg)
WoT• IoT 的 Application Layer
• 使⽤用 Web 技術來打造 Application
![Page 3: WoT Frotend 的設計與實作](https://reader030.vdocuments.site/reader030/viewer/2022012312/55a85a0f1a28ab876d8b45fc/html5/thumbnails/3.jpg)
WoT 关键技术• Application Framework
• Application Frontend 的 Composition Layer 設計
![Page 4: WoT Frotend 的設計與實作](https://reader030.vdocuments.site/reader030/viewer/2022012312/55a85a0f1a28ab876d8b45fc/html5/thumbnails/4.jpg)
⼀一个轻量级的 Composition Layer 实作 AutomationJS
• AutomationJS 是⼀一个轻量级的 MVVM
• 利⽤用 Virtual DOM 技术,来进⾏行 UI Boundary Composition
• 使⽤用 Backbone 做为 Model-View 的基础
• 未来也将接轨 HTML 5 的新技术标准-Shadow DOM
![Page 5: WoT Frotend 的設計與實作](https://reader030.vdocuments.site/reader030/viewer/2022012312/55a85a0f1a28ab876d8b45fc/html5/thumbnails/5.jpg)
Single Page Web Apps
来源: http://apievangelist.com/2013/05/23/ember-angular-backbone-single- page-applications-and-apis/
![Page 6: WoT Frotend 的設計與實作](https://reader030.vdocuments.site/reader030/viewer/2022012312/55a85a0f1a28ab876d8b45fc/html5/thumbnails/6.jpg)
URL Router
来源: http://msdn.microsoft.com/en-us/magazine/hh288078.aspx
![Page 7: WoT Frotend 的設計與實作](https://reader030.vdocuments.site/reader030/viewer/2022012312/55a85a0f1a28ab876d8b45fc/html5/thumbnails/7.jpg)
REST API
来源: http://apievangelist.com/2013/05/23/ember-angular-backbone-single- page-applications-and-apis/
![Page 8: WoT Frotend 的設計與實作](https://reader030.vdocuments.site/reader030/viewer/2022012312/55a85a0f1a28ab876d8b45fc/html5/thumbnails/8.jpg)
MVC
View
Controller Model
![Page 9: WoT Frotend 的設計與實作](https://reader030.vdocuments.site/reader030/viewer/2022012312/55a85a0f1a28ab876d8b45fc/html5/thumbnails/9.jpg)
MVC
View
Controller Model
![Page 10: WoT Frotend 的設計與實作](https://reader030.vdocuments.site/reader030/viewer/2022012312/55a85a0f1a28ab876d8b45fc/html5/thumbnails/10.jpg)
MVC
View
Controller Model
![Page 11: WoT Frotend 的設計與實作](https://reader030.vdocuments.site/reader030/viewer/2022012312/55a85a0f1a28ab876d8b45fc/html5/thumbnails/11.jpg)
MVC
View
Controller Model
![Page 12: WoT Frotend 的設計與實作](https://reader030.vdocuments.site/reader030/viewer/2022012312/55a85a0f1a28ab876d8b45fc/html5/thumbnails/12.jpg)
MVP
View
Presenter Model
![Page 13: WoT Frotend 的設計與實作](https://reader030.vdocuments.site/reader030/viewer/2022012312/55a85a0f1a28ab876d8b45fc/html5/thumbnails/13.jpg)
MVVMView
ViewModel Model
![Page 14: WoT Frotend 的設計與實作](https://reader030.vdocuments.site/reader030/viewer/2022012312/55a85a0f1a28ab876d8b45fc/html5/thumbnails/14.jpg)
MVWhaterver
• MVC
• MVP
• MVVM
• MV*
![Page 15: WoT Frotend 的設計與實作](https://reader030.vdocuments.site/reader030/viewer/2022012312/55a85a0f1a28ab876d8b45fc/html5/thumbnails/15.jpg)
MVVM vs MVCMVC
写程式 不⽤用写
ComponentTemplate+ Data Binding
Template+ Control Logic !
MVVM MVVM React
![Page 16: WoT Frotend 的設計與實作](https://reader030.vdocuments.site/reader030/viewer/2022012312/55a85a0f1a28ab876d8b45fc/html5/thumbnails/16.jpg)
来源:http://code.tutsplus.com/tutorials/important- considerations-when-building-single-page-web-apps-- net-29356
选择 Full Stack Framework
![Page 17: WoT Frotend 的設計與實作](https://reader030.vdocuments.site/reader030/viewer/2022012312/55a85a0f1a28ab876d8b45fc/html5/thumbnails/17.jpg)
Backbone• Backbone 必须与 Underscore 搭配使⽤用
• Backbone 是⼀一个 MVC 框架,⼀一开始先定义 Model 与 View
• Model 就是「表⽰示资料的模型」,也就是将会显⽰示在画⾯面上的资料
• Model ⾥里的资料,要⽤用 Key-Value Pairs 的格式表⽰示
• View 的部份将负责处理 Template 与 Model 的对应
• View 的部份,也负责处理控制的部份,例如: Button 的 click 事件
![Page 18: WoT Frotend 的設計與實作](https://reader030.vdocuments.site/reader030/viewer/2022012312/55a85a0f1a28ab876d8b45fc/html5/thumbnails/18.jpg)
Key-Value Pairs
• JSON 资料格式
• 将 JSON「套⽤用」到 Template
{ "name": "julie"}
![Page 19: WoT Frotend 的設計與實作](https://reader030.vdocuments.site/reader030/viewer/2022012312/55a85a0f1a28ab876d8b45fc/html5/thumbnails/19.jpg)
Underscore &Backbone
• Underscore 会将 Model 的变数与 Template 做对应,并且⽤用变数值取代,这个对应关系就是 ViewModel 的观念
• Underscore 透过 Template 将 Model ⾥里的资料,显⽰示到画⾯面上
• 显⽰示资料到画⾯面上,不需要写程式;对设计师来说,只要修改 Template
![Page 20: WoT Frotend 的設計與實作](https://reader030.vdocuments.site/reader030/viewer/2022012312/55a85a0f1a28ab876d8b45fc/html5/thumbnails/20.jpg)
Backbone Data Model• Backbone.Model 除了表⽰示资料外,还提供各种处理模型
• 最重要的处理模型:manage change
• ⼀一但 Model 裡的資料有變動(例如:新增、刪除等),就透過 Backbone.Model.fetch 重新做 "Data Mapping”
• 使⽤用 Model fetch 的⽅方式,让 Response data 的处理更严谨
• 使⽤用 Data model 的⽅方式,让 Data 与 API 偶和(Aggregation)在⼀一起
![Page 21: WoT Frotend 的設計與實作](https://reader030.vdocuments.site/reader030/viewer/2022012312/55a85a0f1a28ab876d8b45fc/html5/thumbnails/21.jpg)
Backbone 基本框架/**! * SETUP! **/! var app = app || {};! ! /**! * MODELS! **/! ! ! /**! * VIEWS! **/! app.MessageView = Backbone.View.extend({! events: {! },! });! ! /**! * BOOTUP! **/! $(document).ready(function() {! app.messageView = new app.MessageView();! });
![Page 22: WoT Frotend 的設計與實作](https://reader030.vdocuments.site/reader030/viewer/2022012312/55a85a0f1a28ab876d8b45fc/html5/thumbnails/22.jpg)
!! 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
来取⽤用变数值
![Page 23: WoT Frotend 的設計與實作](https://reader030.vdocuments.site/reader030/viewer/2022012312/55a85a0f1a28ab876d8b45fc/html5/thumbnails/23.jpg)
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
![Page 24: WoT Frotend 的設計與實作](https://reader030.vdocuments.site/reader030/viewer/2022012312/55a85a0f1a28ab876d8b45fc/html5/thumbnails/24.jpg)
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 的名称
当资料变了画⾯面就跟着改变
![Page 25: WoT Frotend 的設計與實作](https://reader030.vdocuments.site/reader030/viewer/2022012312/55a85a0f1a28ab876d8b45fc/html5/thumbnails/25.jpg)
WoT-Frontend
25
獨⽴立 Virtual DOM
说明:资料变动时只会更新所属的 Virtual DOM
![Page 26: WoT Frotend 的設計與實作](https://reader030.vdocuments.site/reader030/viewer/2022012312/55a85a0f1a28ab876d8b45fc/html5/thumbnails/26.jpg)
谢谢