Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

实时/可接入的 Web 技术

1,758 views

Published on

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

Published in: Technology
  • Be the first to comment

实时/可接入的 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

×