响应式 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