0
Single-Page-WebApp Architecture<br />程墨Morgan Cheng<br />@morgancheng<br />
Traditional Web<br />Server<br />Browser<br />Web Page<br />Page HTML<br />Navigate<br />Web Page<br />Page HTML<br />
Single Page WebApp<br />Server<br />Browser<br />Page HTML<br />Web Page<br />Navigate<br />XHR Response<br />Navigate<br ...
Not Just AJAX<br />
It Should Work as Web<br />
Bookmark-able<br />Navigable<br />Search-Engine-Friendly, if necessary<br />
VS<br />
Why to Single-Page?<br />
Squeeze Bits for Better Experience<br />
When to Single-Page?<br />
Frequently Navigated Page<br />Partial Difference Among Pages<br />Performance Critical<br />
How to Single-Page?<br />
Now we totally depend on JavaScript<br />
"The secret to building large apps is never build large apps. Break your applications into small pieces. Then, assemble th...
Singe Page App<br />=<br />Client Side Routing<br />Client Side Rendering<br />+<br />
First, Client-Side Routing<br />
Multiple Framework Choices<br />https://github.com/addyosmani/todomvc<br />
3.4.0 App F/W<br />
Why YUI3.4 app framework doesn't allow to use hash style URL for all browsers?<br />It was very important to make doing th...
Server Just Render HTML Skeleton<br />
Define Routes<br />varcontroller = new Y.Controller(<br />{<br />	routes: <br />	[<br />	{<br />path: “/”,<br />callback: ...
Dispatch on DOM Ready<br />controller.dispatch();<br />Trigger route according to current page URL<br />
Save on Navigation<br />Y.delegate('click', onNaviLinkClick, 'body', '.navi-link', this);<br />function onNaviLinkClick() ...
Page Load<br />&<br />Page Navigation<br />Routing Module<br />Page B<br />Page C<br />Page A<br />
Second, Client-Side Rendering<br />
Page Load<br />&<br />Page Navigation<br />Routing Module<br />Page B<br />Page C<br />Page A<br />Widget X<br />Widget Y<...
Widget or View-Model<br />
Decouple Modules with Events<br />
Page Load<br />&<br />Page Navigation<br />Routing Module<br />Page B<br />Page C<br />Page A<br />Widget X<br />Widget Y<...
Don’t Repeat Yourself<br />
Logic-less Template: Mustache<br />http://mustache.github.com/<br />
<div id="post_{{pid}}”<br />{{#post}}<br />data-original-pid="{{pid}}" <br />{{/post}}<br />><br />{<br />pid: ‘123’, <br ...
Ask Again:<br />Why to Single-Page?<br />
It should be Fast<br />
近身== Download It Fast<br />发力 == Run It Fast<br />
Download It Fast<br />
Non-Blocking JavaScript<br />
function loadJS(path) {<br />varscript = document.createElement("script");<br />script.type = "text/javascript";<br />scri...
Flush It!<br />
 …<br /></head><br /><?php<br />ob_flush();<br />flush();<br />?><br /><body><br />Flush for browser incremental rendering...
WTF?<br />
Position Inline JavaScript<br />http://www.stevesouders.com/blog/2009/05/06/positioning-inline-scripts/<br />
function loadJS(path) {<br />varscript = document.createElement("script");<br />script.type = "text/javascript";<br />scri...
Position Inline JavaScript Before External Style Link <br />
Caching:<br />Better Than Downloading<br />
Cache<br />AJAX<br />Inline Script<br />Data Source<br />Widget<br />
Run It Fast<br />
JavaScript Execution is Not Free<br />
Client-side Rendering Depends on CPU & JS Engine<br />
Mustache Performance Suffers From Nested Data<br />
Performance is Not Good<br />{<br />pid: ‘123’, <br />    entities: <br />    {<br />images: <br />[<br />			{<br />image_...
Twice faster!<br />{<br />pid: ‘123’, <br />    entities_images_0_image_medium: …,<br />    entities_images_0_image_medium...
Chunked Computation<br />
Web Worker<br />
How to Render First Page?<br />
Twitter Approach<br />The first page response is just HTML skeleton<br />Web is a client of its Open API<br />The page is ...
Facebook Approach<br />The first page response is HTML Skeleton with tailing inline JavaScript<br />Init data is flushed i...
Google+ Approach<br />The first page response is complete HTML<br />
Which is Better?<br />Twitter Approach<br />Facebook Approach<br />Google+ Approach<br />
Take-Away<br />Leverage Framework<br />Make decision according to app requirement<br />Watch the Performance<br />
Thank You!<br />
Upcoming SlideShare
Loading in...5
×

Single Page WebApp Architecture

11,367

Published on

Published in: Technology
2 Comments
16 Likes
Statistics
Notes
No Downloads
Views
Total Views
11,367
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
200
Comments
2
Likes
16
Embeds 0
No embeds

No notes for slide

Transcript of "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 />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×