移动 Web 时代已经到来, 桌面 Web 将面临各种冲击, 它会消失吗? 下一次桌面的革命是何时?

1. 响应式 WEB
实时化、可接入化的 WEB 技术

2. @ sofish

3. @ sofish

4. @ sofish

5. @ sofish

6. Anywhere
@ sofish

7. 移动 Web 时代已经到来，桌
面 Web 将面临各种冲击，它
会消失吗？下一次桌面的革
命是何时？

9. 实时响应
第三⽅方接⼊入

10. … 到时候，你们外出并不
需要带手机，随处可见可以
共享的移动通讯设备，只要
拿过来输入你的身份识别，
就可以为你所用。
— Kevin Kelly

11. … 到时候，你们外出并不
需要带手机，随处可见可以
共享的移动通讯设备，只要
拿过来输入你的身份识别，
就可以为你所用。
— Kevin Kelly

12. … 到时候，你们外出并不
需要带手机，随处可见可以
共享的移动通讯设备，只要
拿过来输入你的身份识别，
就可以为你所用。
— Kevin Kelly

13. … 到时候，你们外出并不
需要带手机，随处可见可以
共享的移动通讯设备，只要
拿过来输入你的身份识别，
就可以为你所用。
— Kevin Kelly

14. 未来的 WEB 将是响应式的

15. 未来的 WEB 将是响应式的
但不仅仅是布局
hello wor

16. 从现在开始进行响应式设计
•
技术实现（前、后端）
•
框架/库（市场）
•
第三方接入

18. comet
Flash
Ajax
Web Socket
stream
pjax
long polling
Angular.js
live binding
WebRTC
Ember
xmpp
socket.io
APE

19. comet
Flash
Ajax
Web Socket
stream
pjax
long polling
Angular.js
live binding
WebRTC
Ember
xmpp
socket.io
APE

20. http://staticfile.org

21. •
从布局上
•
从界面元素上
•
从数据上

22. •
从布局上
•
从界面元素上
•
从数据上
binding

23. •
从布局上
•
从界面元素上
•
从数据上
binding
ajax

24. •
从布局上
•
从界面元素上
•
从数据上
binding
ajax

25. 用到的技术：

26. 用到的技术：
•
Ajax - Template / Data

27. 用到的技术：
•
Ajax - Template / Data
•
Template/DOM 数据绑定

28. 用到的技术：
•
Ajax - Template / Data
•
Template/DOM 数据绑定
server

29. 用到的技术：
•
Ajax - Template / Data
•
Template/DOM 数据绑定
tmpl
server
data (R)

30. 用到的技术：
•
Ajax - Template / Data
•
Template/DOM 数据绑定
tmpl
server
data (R)

31. 用到的技术：
•
Ajax - Template / Data
•
Template/DOM 数据绑定
tmpl
html
server
data (R)

32. 用到的技术：
•
Ajax - Template / Data
•
Template/DOM 数据绑定
tmpl
html
server
data (R)

33. 用到的技术：
•
Ajax - Template / Data
•
Template/DOM 数据绑定
tmpl
html
server
data (R)

34. 用到的技术：
•
Ajax - Template / Data
•
server
Template/DOM 数据绑定
tmpl
html
server
data (R)

35. 用到的技术：
•
Ajax - Template / Data
•
server
Template/DOM 数据绑定
tmpl
tmpl
html
server
data (R)
data(RW)

36. 用到的技术：
•
Ajax - Template / Data
•
server
Template/DOM 数据绑定
tmpl
tmpl
html
server
data (R)
data(RW)

37. 用到的技术：
•
Ajax - Template / Data
•
server
Template/DOM 数据绑定
tmpl
data(RW)
html
tmpl
html
server
data (R)

38. 用到的技术：
•
Ajax - Template / Data
•
server
Template/DOM 数据绑定
tmpl
data(RW)
html
tmpl
html
server
data (R)

39. 用到的技术：
•
Ajax - Template / Data
•
server
Template/DOM 数据绑定
tmpl
data(RW)
html
tmpl
html
server
data (R)

40. 用到的技术：
•
Ajax - Template / Data
•
server
Template/DOM 数据绑定
tmpl
data(RW)
html
tmpl
html
server
data (R)

41. 用到的技术：
•
Ajax - Template / Data
•
server
Template/DOM 数据绑定
tmpl
data(RW)
html
tmpl
html
server
data (R)

44. tmpl
模式/场景：
html
server
data (R)

46. server
模式/场景：
tmpl
data(RW)
html

47. 回顾一下讲的要点：
•
技术：ajax / live-binding
•
交互：单（双）向反馈
•
框架：Angular.js

49. mobile

50. desktop
mobile

51. desktop
mobile
http://shanghai.baixing.com

52. 用到的技术：

53. 用到的技术：
•
HTML5 File API (3rd Party Device) / Flash

54. 用到的技术：
•
HTML5 File API (3rd Party Device) / Flash
•
Realtime Pub/Sub (Socket.io)

55. 用到的技术：
•
HTML5 File API (3rd Party Device) / Flash
•
Realtime Pub/Sub (Socket.io)
Desktop
Mobile

56. 用到的技术：
•
HTML5 File API (3rd Party Device) / Flash
•
Realtime Pub/Sub (Socket.io)
Mobile
Desktop
socket.io

57. 用到的技术：
•
HTML5 File API (3rd Party Device) / Flash
•
Realtime Pub/Sub (Socket.io)
Mobile
Desktop
socket.io

58. 用到的技术：
•
HTML5 File API (3rd Party Device) / Flash
•
Realtime Pub/Sub (Socket.io)
Mobile
Desktop
socket.io

59. 用到的技术：
•
HTML5 File API (3rd Party Device) / Flash
•
Realtime Pub/Sub (Socket.io)
Mobile
Desktop
socket.io

60. 用到的技术：
•
HTML5 File API (3rd Party Device) / Flash
•
Realtime Pub/Sub (Socket.io)
event
event
Mobile
Desktop
data
data
socket.io
event

61. Web Socket
!
!
!
Long Polling

62. 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/

63. 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/

64. 回顾一下讲的要点：
•
技术实现（前、后端）
•
框架/库（市场）
•
第三方接入

65. 回顾一下讲的要点：
•
技术实现（前、后端）
•
框架/库（市场）
•
第三方接入
ajax / live-biding / web
socket / long-polling

66. 回顾一下讲的要点：
•
技术实现（前、后端）
•
框架/库（市场）
•
第三方接入
ajax / live-biding / web
socket / long-polling
angular.js / socket.io

67. 回顾一下讲的要点：
•
技术实现（前、后端）
•
框架/库（市场）
•
第三方接入
ajax / live-biding / web
socket / long-polling
angular.js / socket.io
纯浏览器与桌⾯面同步图⽚片

68. Mobile Web 是⼀一个⼤大潮，但不是未来。互联
⽹网是⼀一种⼯工具，⼯工具永远是为⼈人类⽣生活更⽅方
便⽽而⽣生的。浪潮让我们看的更⾼高，⽽而为⼈人类
⽣生活更⽅方便的本质让我们⾛走得更远。

69. Web 的下⼀一个机会是什么 ?
Mobile Web
⽹网是⼀一种⼯工具，⼯工具永远是为⼈人类⽣生活更⽅方
便⽽而⽣生的。浪潮让我们看的更⾼高，⽽而为⼈人类
⽣生活更⽅方便的本质让我们⾛走得更远。

70. Web 的下⼀一个机会是什么 ?
Mobile Web
⽹网是⼀一种⼯工具，⼯工具永远是为⼈人类⽣生活更⽅方
便⽽而⽣生的。浪潮让我们看的更⾼高，⽽而为⼈人类
⽣生活更⽅方便的本质让我们⾛走得更远。

71. @ sofish

72. thank you!
@ sofish