Download - 实时/可接入的 Web 技术
响应式 WEB实时化、可接入化的 WEB 技术
@ sofish
@ sofish
@ sofish
@ sofish
@ sofishAnywhere
移动 Web 时代已经到来,桌面 Web 将面临各种冲击,它会消失吗?下一次桌面的革
命是何时?
第三⽅方接⼊入
实时响应
… 到时候,你们外出并不
需要带手机,随处可见可以
共享的移动通讯设备,只要
拿过来输入你的身份识别,
就可以为你所用。
— Kevin Kelly
… 到时候,你们外出并不
需要带手机,随处可见可以
共享的移动通讯设备,只要
拿过来输入你的身份识别,
就可以为你所用。
— Kevin Kelly
… 到时候,你们外出并不
需要带手机,随处可见可以
共享的移动通讯设备,只要
拿过来输入你的身份识别,
就可以为你所用。
— Kevin Kelly
… 到时候,你们外出并不
需要带手机,随处可见可以
共享的移动通讯设备,只要
拿过来输入你的身份识别,
就可以为你所用。
— Kevin Kelly
未来的 WEB 将是响应式的
但不仅仅是布局未来的 WEB 将是响应式的
hello wor
从现在开始进行响应式设计
• 框架/库(市场)
• 第三方接入
• 技术实现(前、后端)
AjaxWeb Socket
long polling
live binding
Flash
Angular.js
Ember
stream
socket.io
pjaxcomet xmpp
APEWebRTC
AjaxWeb Socket
long polling
live binding
Flash
Angular.js
Ember
stream
socket.io
pjaxcomet xmpp
APEWebRTC
http://staticfile.org
• 从界面元素上
• 从数据上
• 从布局上
• 从界面元素上
• 从数据上
• 从布局上 binding
• 从界面元素上
• 从数据上
• 从布局上 binding
ajax
• 从界面元素上
• 从数据上
• 从布局上 binding
ajax
用到的技术:
用到的技术:• Ajax - Template / Data
用到的技术:
• Template/DOM 数据绑定
• Ajax - Template / Data
用到的技术:
• Template/DOM 数据绑定
• Ajax - Template / Data
server
用到的技术:
• Template/DOM 数据绑定
• Ajax - Template / Data
data (R)
tmpl
server
用到的技术:
• Template/DOM 数据绑定
• Ajax - Template / Data
data (R)
tmpl
server
用到的技术:
• Template/DOM 数据绑定
• Ajax - Template / Data
data (R)
tmpl
serverhtml
用到的技术:
• Template/DOM 数据绑定
• Ajax - Template / Data
data (R)
tmpl
serverhtml
用到的技术:
• Template/DOM 数据绑定
• Ajax - Template / Data
data (R)
tmpl
serverhtml
用到的技术:
• Template/DOM 数据绑定
• Ajax - Template / Data
data (R)
tmpl
serverhtml
server
用到的技术:
• Template/DOM 数据绑定
• Ajax - Template / Data
data (R)
tmpl
serverhtml
server
tmpl data(RW)
用到的技术:
• Template/DOM 数据绑定
• Ajax - Template / Data
data (R)
tmpl
serverhtml
server
tmpl data(RW)
用到的技术:
• Template/DOM 数据绑定
• Ajax - Template / Data
data (R)
tmpl
serverhtml
server
tmpl data(RW)
html
用到的技术:
• Template/DOM 数据绑定
• Ajax - Template / Data
data (R)
tmpl
serverhtml
server
tmpl data(RW)
html
用到的技术:
• Template/DOM 数据绑定
• Ajax - Template / Data
data (R)
tmpl
serverhtml
server
tmpl data(RW)
html
用到的技术:
• Template/DOM 数据绑定
• Ajax - Template / Data
data (R)
tmpl
serverhtml
server
tmpl data(RW)
html
用到的技术:
• Template/DOM 数据绑定
• Ajax - Template / Data
data (R)
tmpl
serverhtml
server
tmpl data(RW)
html
模式/场景: data (R)
tmpl
serverhtml
模式/场景:
server
tmpl data(RW)
html
回顾一下讲的要点:
• 交互:单(双)向反馈
• 框架:Angular.js
• 技术:ajax / live-binding
mobile
mobile
desktop
mobile
desktop
http://shanghai.baixing.com
用到的技术:
用到的技术:• HTML5 File API (3rd Party Device) / Flash
用到的技术:
• Realtime Pub/Sub (Socket.io)
• HTML5 File API (3rd Party Device) / Flash
用到的技术:
• Realtime Pub/Sub (Socket.io)
• HTML5 File API (3rd Party Device) / Flash
Desktop Mobile
用到的技术:
• Realtime Pub/Sub (Socket.io)
• HTML5 File API (3rd Party Device) / Flash
socket.io
Desktop Mobile
用到的技术:
• Realtime Pub/Sub (Socket.io)
• HTML5 File API (3rd Party Device) / Flash
socket.io
Desktop Mobile
用到的技术:
• Realtime Pub/Sub (Socket.io)
• HTML5 File API (3rd Party Device) / Flash
socket.io
Desktop Mobile
用到的技术:
• Realtime Pub/Sub (Socket.io)
• HTML5 File API (3rd Party Device) / Flash
socket.io
Desktop Mobile
用到的技术:
• Realtime Pub/Sub (Socket.io)
• HTML5 File API (3rd Party Device) / Flash
socket.io
Desktop Mobile
eventevent
event
datadata
Web Socket !
!
!
Long Polling
http://www.devthought.com/2012/07/07/the-realtime-engine/
No one ever got fired for choosing long-polling. One thing is known for certain. Long polling always
works.
— Guillermo Rauch
http://www.devthought.com/2012/07/07/the-realtime-engine/
No one ever got fired for choosing long-polling. One thing is known for certain. Long polling always
works.
— Guillermo Rauch
回顾一下讲的要点:
• 框架/库(市场)
• 第三方接入
• 技术实现(前、后端)
回顾一下讲的要点:
• 框架/库(市场)
• 第三方接入
• 技术实现(前、后端)ajax / live-biding / websocket / long-polling
回顾一下讲的要点:
• 框架/库(市场)
• 第三方接入
• 技术实现(前、后端)ajax / live-biding / websocket / long-polling
angular.js / socket.io
回顾一下讲的要点:
• 框架/库(市场)
• 第三方接入
• 技术实现(前、后端)ajax / live-biding / websocket / long-polling
angular.js / socket.io
纯浏览器与桌⾯面同步图⽚片
Mobile Web 是⼀一个⼤大潮,但不是未来。互联⽹网是⼀一种⼯工具,⼯工具永远是为⼈人类⽣生活更⽅方便⽽而⽣生的。浪潮让我们看的更⾼高,⽽而为⼈人类⽣生活更⽅方便的本质让我们⾛走得更远。
Mobile Web ⽹网是⼀一种⼯工具,⼯工具永远是为⼈人类⽣生活更⽅方便⽽而⽣生的。浪潮让我们看的更⾼高,⽽而为⼈人类⽣生活更⽅方便的本质让我们⾛走得更远。
Web 的下⼀一个机会是什么 ?
Mobile Web ⽹网是⼀一种⼯工具,⼯工具永远是为⼈人类⽣生活更⽅方便⽽而⽣生的。浪潮让我们看的更⾼高,⽽而为⼈人类⽣生活更⽅方便的本质让我们⾛走得更远。
Web 的下⼀一个机会是什么 ?
@ sofish
thank you!@ sofish