Single Page WebApp Architecture
âąAls PPTX, PDF herunterladenâą
20 gefĂ€llt mirâą12,859 views
Empfohlen
Empfohlen
Weitere Àhnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (20)
Ăhnlich wie Single Page WebApp Architecture
Ăhnlich wie Single Page WebApp Architecture (20)
Mehr von Morgan Cheng
Mehr von Morgan Cheng (13)
KĂŒrzlich hochgeladen
KĂŒrzlich hochgeladen (20)
Single Page WebApp Architecture
- 1. Single-Page-WebApp Architecture çšćąšMorgan Cheng @morgancheng
- 2. Traditional Web Server Browser Web Page Page HTML Navigate Web Page Page HTML
- 3. Single Page WebApp Server Browser Page HTML Web Page Navigate XHR Response Navigate XHR Response
- 5. It Should Work as Web
- 6. Bookmark-able Navigable Search-Engine-Friendly, if necessary
- 7. VS
- 9. Squeeze Bits for Better Experience
- 11. Frequently Navigated Page Partial Difference Among Pages Performance Critical
- 13. Now we totally depend on JavaScript
- 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" -Justin Meyer, author JavaScriptMVC
- 15. Singe Page App = Client Side Routing Client Side Rendering +
- 17. Multiple Framework Choices https://github.com/addyosmani/todomvc
- 18. 3.4.0 App F/W
- 19. Why YUI3.4 app framework doesn't allow to use hash style URL for all browsers? It was very important to make doing the right thing easy and doing the wrong thing hard. Ryan Grove
- 20. Server Just Render HTML Skeleton
- 21. Define Routes varcontroller = new Y.Controller( { routes: [ { path: â/â, callback: onHomePage }, { path: â/user/:guidâ, callback: onUserPage } ] }); onHomePage is invoked when route â/â is triggered
- 22. Dispatch on DOM Ready controller.dispatch(); Trigger route according to current page URL
- 23. Save on Navigation Y.delegate('click', onNaviLinkClick, 'body', '.navi-link', this); function onNaviLinkClick() { ⊠varnewPath = currTarget.getAttribute('href'); if (controller.getPath() != newPath) { controller.save(newPagePath); } } Trigger route according to newPagePath
- 24. Page Load & Page Navigation Routing Module Page B Page C Page A
- 26. Page Load & Page Navigation Routing Module Page B Page C Page A Widget X Widget Y Widget Z
- 28. Decouple Modules with Events
- 29. Page Load & Page Navigation Routing Module Page B Page C Page A Widget X Widget Y Widget Z Event System
- 31. Logic-less Template: Mustache http://mustache.github.com/
- 32. <div id="post_{{pid}}â {{#post}} data-original-pid="{{pid}}" {{/post}} > { pid: â123â, post: { pid: â456â } } <div id="post_123â data-original-pid=â456" >
- 33. Ask AgainïŒ Why to Single-Page?
- 34. It should be Fast
- 35. èżèș«== Download It Fast ćć == Run It Fast
- 36. Download It Fast
- 38. function loadJS(path) { varscript = document.createElement("script"); script.type = "text/javascript"; script.src = path; document.getElementsByTagName("head")[0].appendChild(script); } Insert into <head>
- 39. Flush It!
- 40. ⊠</head> <?php ob_flush(); flush(); ?> <body> Flush for browser incremental rendering
- 41. WTF?
- 42. Position Inline JavaScript http://www.stevesouders.com/blog/2009/05/06/positioning-inline-scripts/
- 43. function loadJS(path) { varscript = document.createElement("script"); script.type = "text/javascript"; script.src = path; varfirst = document.getElementsByTagName(âscriptâ)[0]; first.parentNode.insertBefore(script, first); } Insert before first <script>
- 44. Position Inline JavaScript Before External Style Link
- 45. Caching: Better Than Downloading
- 46. Cache AJAX Inline Script Data Source Widget
- 47. Run It Fast
- 48. JavaScript Execution is Not Free
- 49. Client-side Rendering Depends on CPU & JS Engine
- 50. Mustache Performance Suffers From Nested Data
- 51. Performance is Not Good { pid: â123â, entities: { images: [ { image_medium: ⊠, image_small: ⊠, image_big: ⊠, } ] } }
- 52. Twice faster! { pid: â123â, entities_images_0_image_medium: âŠ, entities_images_0_image_medium: âŠ, entities_images_0_image_medium: âŠ, }
- 54. Web Worker
- 55. How to Render First Page?
- 56. Twitter Approach The first page response is just HTML skeleton Web is a client of its Open API The page is initialized with multiple AJAX response
- 57. Facebook Approach The first page response is HTML Skeleton with tailing inline JavaScript Init data is flushed in tailing JavaScript block It is called BigPipe The sequence of module rendering depends
- 58. Google+ Approach The first page response is complete HTML
- 59. Which is Better? Twitter Approach Facebook Approach Google+ Approach
- 60. Take-Away Leverage Framework Make decision according to app requirement Watch the Performance
- 61. Thank You!