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

Like this? Share it with your network

Share

实时/可接入的 Web 技术

on

  • 1,112 views

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

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

Statistics

Views

Total Views
1,112
Views on SlideShare
1,112
Embed Views
0

Actions

Likes
3
Downloads
20
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

实时/可接入的 Web 技术 Presentation Transcript

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