响应式 WEB
实时化、可接入化的 WEB 技术
@ sofish
@ sofish
@ sofish
@ sofish
Anywhere

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

第三⽅方接⼊入
… 到时候,你们外出并不
需要带手机,随处可见可以
共享的移动通讯设备,只要
拿过来输入你的身份识别,
就可以为你所用。
— Kevin Kelly
… 到时候,你们外出并不
需要带手机,随处可见可以
共享的移动通讯设备,只要
拿过来输入你的身份识别,
就可以为你所用。
— Kevin Kelly
… 到时候,你们外出并不
需要带手机,随处可见可以
共享的移动通讯设备,只要
拿过来输入你的身份识别,
就可以为你所用。
— Kevin Kelly
… 到时候,你们外出并不
需要带手机,随处可见可以
共享的移动通讯设备,只要
拿过来输入你的身份识别,
就可以为你所用。
— Kevin Kelly
未来的 WEB 将是响应式的
未来的 WEB 将是响应式的
但不仅仅是布局
hello wor
从现在开始进行响应式设计
•

技术实现(前、后端)

•

框架/库(市场)

•

第三方接入
comet

Flash

Ajax

Web Socket

stream

pjax

long polling

Angular.js

live binding

WebRTC
Ember

xmpp

socket.io

APE
comet

Flash

Ajax

Web Socket

stream

pjax

long polling

Angular.js

live binding

WebRTC
Ember

xmpp

socket.io

APE
http://staticfile.org
•

从布局上

•

从界面元素上

•

从数据上
•

从布局上

•

从界面元素上

•

从数据上

binding
•

从布局上

•

从界面元素上

•

从数据上

binding

ajax
•

从布局上

•

从界面元素上

•

从数据上

binding

ajax
用到的技术:
用到的技术:
•

Ajax - Template / Data
用到的技术:
•

Ajax - Template / Data

•

Template/DOM 数据绑定
用到的技术:
•

Ajax - Template / Data

•

Template/DOM 数据绑定

server
用到的技术:
•

Ajax - Template / Data

•

Template/DOM 数据绑定

tmpl
server

data (R)
用到的技术:
•

Ajax - Template / Data

•

Template/DOM 数据绑定

tmpl
server

data (R)
用到的技术:
•

Ajax - Template / Data

•

Template/DOM 数据绑定

tmpl
html
server

data (R)
用到的技术:
•

Ajax - Template / Data

•

Template/DOM 数据绑定

tmpl
html
server

data (R)
用到的技术:
•

Ajax - Template / Data

•

Template/DOM 数据绑定

tmpl
html
server

data (R)
用到的技术:
•

Ajax - Template / Data

•

server

Template/DOM 数据绑定

tmpl
html
server

data (R)
用到的技术:
•

Ajax - Template / Data

•

server

Template/DOM 数据绑定

tmpl

tmpl
html
server

data (R)

data(RW)
用到的技术:
•

Ajax - Template / Data

•

server

Template/DOM 数据绑定

tmpl

tmpl
html
server

data (R)

data(RW)
用到的技术:
•

Ajax - Template / Data

•

server

Template/DOM 数据绑定

tmpl

data(RW)

html
tmpl
html
server

data (R)
用到的技术:
•

Ajax - Template / Data

•

server

Template/DOM 数据绑定

tmpl

data(RW)

html
tmpl
html
server

data (R)
用到的技术:
•

Ajax - Template / Data

•

server

Template/DOM 数据绑定

tmpl

data(RW)

html
tmpl
html
server

data (R)
用到的技术:
•

Ajax - Template / Data

•

server

Template/DOM 数据绑定

tmpl

data(RW)

html
tmpl
html
server

data (R)
用到的技术:
•

Ajax - Template / Data

•

server

Template/DOM 数据绑定

tmpl

data(RW)

html
tmpl
html
server

data (R)
tmpl

模式/场景:

html
server

data (R)
server

模式/场景:

tmpl

data(RW)

html
回顾一下讲的要点:
•

技术:ajax / live-binding

•

交互:单(双)向反馈

•

框架:Angular.js
mobile
desktop
mobile
desktop
mobile

http://shanghai.baixing.com
用到的技术:
用到的技术:
•

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

HTML5 File API (3rd Party Device) / Flash

•

Realtime Pub/Sub (Socket.io)
用到的技术:
•

HTML5 File API (3rd Party Device) / Flash

•

Realtime Pub/Sub (Socket.io)

Desktop

Mobile
用到的技术:
•

HTML5 File API (3rd Party Device) / Flash

•

Realtime Pub/Sub (Socket.io)

Mobile

Desktop

socket.io
用到的技术:
•

HTML5 File API (3rd Party Device) / Flash

•

Realtime Pub/Sub (Socket.io)

Mobile

Desktop

socket.io
用到的技术:
•

HTML5 File API (3rd Party Device) / Flash

•

Realtime Pub/Sub (Socket.io)

Mobile

Desktop

socket.io
用到的技术:
•

HTML5 File API (3rd Party Device) / Flash

•

Realtime Pub/Sub (Socket.io)

Mobile

Desktop

socket.io
用到的技术:
•

HTML5 File API (3rd Party Device) / Flash

•

Realtime Pub/Sub (Socket.io)
event

event
Mobile

Desktop

data

d...
Web Socket	

!

!
!

Long Polling
No one ever got fired for choosing	

long-polling. One thing is known
for certain. Long polling always
works.
— Guillermo R...
No one ever got fired for choosing	

long-polling. One thing is known
for certain. Long polling always
works.
— Guillermo R...
回顾一下讲的要点:
•

技术实现(前、后端)

•

框架/库(市场)

•

第三方接入
回顾一下讲的要点:
•

技术实现(前、后端)

•

框架/库(市场)

•

第三方接入

ajax / live-biding / web
socket / long-polling
回顾一下讲的要点:
•

技术实现(前、后端)

•

框架/库(市场)

•

第三方接入

ajax / live-biding / web
socket / long-polling

angular.js / socket.io
回顾一下讲的要点:
•

技术实现(前、后端)

•

框架/库(市场)

•

第三方接入

ajax / live-biding / web
socket / long-polling

angular.js / socket.io

纯浏...
Mobile Web 是⼀一个⼤大潮,但不是未来。互联
⽹网是⼀一种⼯工具,⼯工具永远是为⼈人类⽣生活更⽅方
便⽽而⽣生的。浪潮让我们看的更⾼高,⽽而为⼈人类
⽣生活更⽅方便的本质让我们⾛走得更远。
Web 的下⼀一个机会是什么 ?
Mobile Web
⽹网是⼀一种⼯工具,⼯工具永远是为⼈人类⽣生活更⽅方
便⽽而⽣生的。浪潮让我们看的更⾼高,⽽而为⼈人类
⽣生活更⽅方便的本质让我们⾛走得更远。
Web 的下⼀一个机会是什么 ?
Mobile Web
⽹网是⼀一种⼯工具,⼯工具永远是为⼈人类⽣生活更⽅方
便⽽而⽣生的。浪潮让我们看的更⾼高,⽽而为⼈人类
⽣生活更⽅方便的本质让我们⾛走得更远。
@ sofish
thank you!

@ sofish
实时/可接入的 Web 技术
实时/可接入的 Web 技术
实时/可接入的 Web 技术
实时/可接入的 Web 技术
实时/可接入的 Web 技术
实时/可接入的 Web 技术
Upcoming SlideShare
Loading in …5
×

实时/可接入的 Web 技术

1,407 views
1,322 views

Published on

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

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,407
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
29
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

实时/可接入的 Web 技术

  1. 1. 响应式 WEB 实时化、可接入化的 WEB 技术
  2. 2. @ sofish
  3. 3. @ sofish
  4. 4. @ sofish
  5. 5. @ sofish
  6. 6. Anywhere @ sofish
  7. 7. 移动 Web 时代已经到来,桌 面 Web 将面临各种冲击,它 会消失吗?下一次桌面的革 命是何时?
  8. 8. 实时响应 第三⽅方接⼊入
  9. 9. … 到时候,你们外出并不 需要带手机,随处可见可以 共享的移动通讯设备,只要 拿过来输入你的身份识别, 就可以为你所用。 — Kevin Kelly
  10. 10. … 到时候,你们外出并不 需要带手机,随处可见可以 共享的移动通讯设备,只要 拿过来输入你的身份识别, 就可以为你所用。 — Kevin Kelly
  11. 11. … 到时候,你们外出并不 需要带手机,随处可见可以 共享的移动通讯设备,只要 拿过来输入你的身份识别, 就可以为你所用。 — Kevin Kelly
  12. 12. … 到时候,你们外出并不 需要带手机,随处可见可以 共享的移动通讯设备,只要 拿过来输入你的身份识别, 就可以为你所用。 — Kevin Kelly
  13. 13. 未来的 WEB 将是响应式的
  14. 14. 未来的 WEB 将是响应式的 但不仅仅是布局 hello wor
  15. 15. 从现在开始进行响应式设计 • 技术实现(前、后端) • 框架/库(市场) • 第三方接入
  16. 16. comet Flash Ajax Web Socket stream pjax long polling Angular.js live binding WebRTC Ember xmpp socket.io APE
  17. 17. comet Flash Ajax Web Socket stream pjax long polling Angular.js live binding WebRTC Ember xmpp socket.io APE
  18. 18. http://staticfile.org
  19. 19. • 从布局上 • 从界面元素上 • 从数据上
  20. 20. • 从布局上 • 从界面元素上 • 从数据上 binding
  21. 21. • 从布局上 • 从界面元素上 • 从数据上 binding ajax
  22. 22. • 从布局上 • 从界面元素上 • 从数据上 binding ajax
  23. 23. 用到的技术:
  24. 24. 用到的技术: • Ajax - Template / Data
  25. 25. 用到的技术: • Ajax - Template / Data • Template/DOM 数据绑定
  26. 26. 用到的技术: • Ajax - Template / Data • Template/DOM 数据绑定 server
  27. 27. 用到的技术: • Ajax - Template / Data • Template/DOM 数据绑定 tmpl server data (R)
  28. 28. 用到的技术: • Ajax - Template / Data • Template/DOM 数据绑定 tmpl server data (R)
  29. 29. 用到的技术: • Ajax - Template / Data • Template/DOM 数据绑定 tmpl html server data (R)
  30. 30. 用到的技术: • Ajax - Template / Data • Template/DOM 数据绑定 tmpl html server data (R)
  31. 31. 用到的技术: • Ajax - Template / Data • Template/DOM 数据绑定 tmpl html server data (R)
  32. 32. 用到的技术: • Ajax - Template / Data • server Template/DOM 数据绑定 tmpl html server data (R)
  33. 33. 用到的技术: • Ajax - Template / Data • server Template/DOM 数据绑定 tmpl tmpl html server data (R) data(RW)
  34. 34. 用到的技术: • Ajax - Template / Data • server Template/DOM 数据绑定 tmpl tmpl html server data (R) data(RW)
  35. 35. 用到的技术: • Ajax - Template / Data • server Template/DOM 数据绑定 tmpl data(RW) html tmpl html server data (R)
  36. 36. 用到的技术: • Ajax - Template / Data • server Template/DOM 数据绑定 tmpl data(RW) html tmpl html server data (R)
  37. 37. 用到的技术: • Ajax - Template / Data • server Template/DOM 数据绑定 tmpl data(RW) html tmpl html server data (R)
  38. 38. 用到的技术: • Ajax - Template / Data • server Template/DOM 数据绑定 tmpl data(RW) html tmpl html server data (R)
  39. 39. 用到的技术: • Ajax - Template / Data • server Template/DOM 数据绑定 tmpl data(RW) html tmpl html server data (R)
  40. 40. tmpl 模式/场景: html server data (R)
  41. 41. server 模式/场景: tmpl data(RW) html
  42. 42. 回顾一下讲的要点: • 技术:ajax / live-binding • 交互:单(双)向反馈 • 框架:Angular.js
  43. 43. mobile
  44. 44. desktop mobile
  45. 45. desktop mobile http://shanghai.baixing.com
  46. 46. 用到的技术:
  47. 47. 用到的技术: • HTML5 File API (3rd Party Device) / Flash
  48. 48. 用到的技术: • HTML5 File API (3rd Party Device) / Flash • Realtime Pub/Sub (Socket.io)
  49. 49. 用到的技术: • HTML5 File API (3rd Party Device) / Flash • Realtime Pub/Sub (Socket.io) Desktop Mobile
  50. 50. 用到的技术: • HTML5 File API (3rd Party Device) / Flash • Realtime Pub/Sub (Socket.io) Mobile Desktop socket.io
  51. 51. 用到的技术: • HTML5 File API (3rd Party Device) / Flash • Realtime Pub/Sub (Socket.io) Mobile Desktop socket.io
  52. 52. 用到的技术: • HTML5 File API (3rd Party Device) / Flash • Realtime Pub/Sub (Socket.io) Mobile Desktop socket.io
  53. 53. 用到的技术: • HTML5 File API (3rd Party Device) / Flash • Realtime Pub/Sub (Socket.io) Mobile Desktop socket.io
  54. 54. 用到的技术: • HTML5 File API (3rd Party Device) / Flash • Realtime Pub/Sub (Socket.io) event event Mobile Desktop data data socket.io event
  55. 55. Web Socket ! ! ! Long Polling
  56. 56. 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/
  57. 57. 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/
  58. 58. 回顾一下讲的要点: • 技术实现(前、后端) • 框架/库(市场) • 第三方接入
  59. 59. 回顾一下讲的要点: • 技术实现(前、后端) • 框架/库(市场) • 第三方接入 ajax / live-biding / web socket / long-polling
  60. 60. 回顾一下讲的要点: • 技术实现(前、后端) • 框架/库(市场) • 第三方接入 ajax / live-biding / web socket / long-polling angular.js / socket.io
  61. 61. 回顾一下讲的要点: • 技术实现(前、后端) • 框架/库(市场) • 第三方接入 ajax / live-biding / web socket / long-polling angular.js / socket.io 纯浏览器与桌⾯面同步图⽚片
  62. 62. Mobile Web 是⼀一个⼤大潮,但不是未来。互联 ⽹网是⼀一种⼯工具,⼯工具永远是为⼈人类⽣生活更⽅方 便⽽而⽣生的。浪潮让我们看的更⾼高,⽽而为⼈人类 ⽣生活更⽅方便的本质让我们⾛走得更远。
  63. 63. Web 的下⼀一个机会是什么 ? Mobile Web ⽹网是⼀一种⼯工具,⼯工具永远是为⼈人类⽣生活更⽅方 便⽽而⽣生的。浪潮让我们看的更⾼高,⽽而为⼈人类 ⽣生活更⽅方便的本质让我们⾛走得更远。
  64. 64. Web 的下⼀一个机会是什么 ? Mobile Web ⽹网是⼀一种⼯工具,⼯工具永远是为⼈人类⽣生活更⽅方 便⽽而⽣生的。浪潮让我们看的更⾼高,⽽而为⼈人类 ⽣生活更⽅方便的本质让我们⾛走得更远。
  65. 65. @ sofish
  66. 66. thank you! @ sofish

×