Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

Single Page WebApp Architecture

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Wird geladen in …3
×

Hier ansehen

1 von 61 Anzeige
Anzeige

Weitere Verwandte Inhalte

Diashows für Sie (20)

Andere mochten auch (20)

Anzeige

Ähnlich wie Single Page WebApp Architecture (20)

Anzeige

Aktuellste (20)

Single Page WebApp Architecture

  1. 1. Single-Page-WebApp Architecture<br />程墨Morgan Cheng<br />@morgancheng<br />
  2. 2. Traditional Web<br />Server<br />Browser<br />Web Page<br />Page HTML<br />Navigate<br />Web Page<br />Page HTML<br />
  3. 3. Single Page WebApp<br />Server<br />Browser<br />Page HTML<br />Web Page<br />Navigate<br />XHR Response<br />Navigate<br />XHR Response<br />
  4. 4. Not Just AJAX<br />
  5. 5. It Should Work as Web<br />
  6. 6. Bookmark-able<br />Navigable<br />Search-Engine-Friendly, if necessary<br />
  7. 7. VS<br />
  8. 8. Why to Single-Page?<br />
  9. 9. Squeeze Bits for Better Experience<br />
  10. 10. When to Single-Page?<br />
  11. 11. Frequently Navigated Page<br />Partial Difference Among Pages<br />Performance Critical<br />
  12. 12. How to Single-Page?<br />
  13. 13. Now we totally depend on JavaScript<br />
  14. 14. "The secret to building large apps is never build large apps. Break your applications into small pieces. Then, assemble those testable, bite-sized pieces into your big application" <br />-Justin Meyer, <br />author JavaScriptMVC<br />
  15. 15. Singe Page App<br />=<br />Client Side Routing<br />Client Side Rendering<br />+<br />
  16. 16. First, Client-Side Routing<br />
  17. 17. Multiple Framework Choices<br />https://github.com/addyosmani/todomvc<br />
  18. 18. 3.4.0 App F/W<br />
  19. 19. Why YUI3.4 app framework doesn't allow to use hash style URL for all browsers?<br />It was very important to make doing the right thing easy and doing the wrong thing hard.<br />Ryan Grove<br />
  20. 20. Server Just Render HTML Skeleton<br />
  21. 21. Define Routes<br />varcontroller = new Y.Controller(<br />{<br /> routes: <br /> [<br /> {<br />path: “/”,<br />callback: onHomePage<br /> },<br /> {<br />path: “/user/:guid”,<br />callback: onUserPage<br /> }<br /> ]<br />});<br />onHomePage is invoked when route “/” is triggered<br />
  22. 22. Dispatch on DOM Ready<br />controller.dispatch();<br />Trigger route according to current page URL<br />
  23. 23. Save on Navigation<br />Y.delegate('click', onNaviLinkClick, 'body', '.navi-link', this);<br />function onNaviLinkClick() {<br /> …<br />varnewPath = currTarget.getAttribute('href');<br />if (controller.getPath() != newPath) {<br />controller.save(newPagePath);<br /> }<br />}<br />Trigger route according to newPagePath<br />
  24. 24. Page Load<br />&<br />Page Navigation<br />Routing Module<br />Page B<br />Page C<br />Page A<br />
  25. 25. Second, Client-Side Rendering<br />
  26. 26. Page Load<br />&<br />Page Navigation<br />Routing Module<br />Page B<br />Page C<br />Page A<br />Widget X<br />Widget Y<br />Widget Z<br />
  27. 27. Widget or View-Model<br />
  28. 28. Decouple Modules with Events<br />
  29. 29. Page Load<br />&<br />Page Navigation<br />Routing Module<br />Page B<br />Page C<br />Page A<br />Widget X<br />Widget Y<br />Widget Z<br />Event System<br />
  30. 30. Don’t Repeat Yourself<br />
  31. 31. Logic-less Template: Mustache<br />http://mustache.github.com/<br />
  32. 32. <div id="post_{{pid}}”<br />{{#post}}<br />data-original-pid="{{pid}}" <br />{{/post}}<br />><br />{<br />pid: ‘123’, <br />post: {<br />pid: ‘456’<br /> }<br />}<br /><div id="post_123”<br />data-original-pid=”456" <br />><br />
  33. 33. Ask Again:<br />Why to Single-Page?<br />
  34. 34. It should be Fast<br />
  35. 35. 近身== Download It Fast<br />发力 == Run It Fast<br />
  36. 36. Download It Fast<br />
  37. 37. Non-Blocking JavaScript<br />
  38. 38. function loadJS(path) {<br />varscript = document.createElement("script");<br />script.type = "text/javascript";<br />script.src = path;<br /> document.getElementsByTagName("head")[0].appendChild(script);<br />}<br />Insert into <head><br />
  39. 39. Flush It!<br />
  40. 40. …<br /></head><br /><?php<br />ob_flush();<br />flush();<br />?><br /><body><br />Flush for browser incremental rendering<br />
  41. 41. WTF?<br />
  42. 42. Position Inline JavaScript<br />http://www.stevesouders.com/blog/2009/05/06/positioning-inline-scripts/<br />
  43. 43. function loadJS(path) {<br />varscript = document.createElement("script");<br />script.type = "text/javascript";<br />script.src = path;<br />varfirst = document.getElementsByTagName(‘script’)[0];<br />first.parentNode.insertBefore(script, first);<br />}<br />Insert before first <script><br />
  44. 44. Position Inline JavaScript Before External Style Link <br />
  45. 45. Caching:<br />Better Than Downloading<br />
  46. 46. Cache<br />AJAX<br />Inline Script<br />Data Source<br />Widget<br />
  47. 47. Run It Fast<br />
  48. 48. JavaScript Execution is Not Free<br />
  49. 49. Client-side Rendering Depends on CPU & JS Engine<br />
  50. 50. Mustache Performance Suffers From Nested Data<br />
  51. 51. Performance is Not Good<br />{<br />pid: ‘123’, <br /> entities: <br /> {<br />images: <br />[<br /> {<br />image_medium: … ,<br />image_small: … ,<br />image_big: … ,<br /> }<br /> ]<br /> }<br />}<br />
  52. 52. Twice faster!<br />{<br />pid: ‘123’, <br /> entities_images_0_image_medium: …,<br /> entities_images_0_image_medium: …,<br /> entities_images_0_image_medium: …,<br />}<br />
  53. 53. Chunked Computation<br />
  54. 54. Web Worker<br />
  55. 55. How to Render First Page?<br />
  56. 56. Twitter Approach<br />The first page response is just HTML skeleton<br />Web is a client of its Open API<br />The page is initialized with multiple AJAX response<br />
  57. 57. Facebook Approach<br />The first page response is HTML Skeleton with tailing inline JavaScript<br />Init data is flushed in tailing JavaScript block<br />It is called BigPipe<br />The sequence of module rendering depends<br />
  58. 58. Google+ Approach<br />The first page response is complete HTML<br />
  59. 59. Which is Better?<br />Twitter Approach<br />Facebook Approach<br />Google+ Approach<br />
  60. 60. Take-Away<br />Leverage Framework<br />Make decision according to app requirement<br />Watch the Performance<br />
  61. 61. Thank You!<br />

×