Downloaded 286 times
![Define Routesvarcontroller = new Y.Controller({ routes: [ {path: “/”,callback: onHomePage }, {path: “/user/:guid”,callback: onUserPage } ]});onHomePage is invoked when route “/” is triggered](https://image.slidesharecdn.com/singlepagewebapparch-110915044414-phpapp02/75/Single-Page-WebApp-Architecture-21-2048.jpg)
![function loadJS(path) {varscript = document.createElement("script");script.type = "text/javascript";script.src = path; document.getElementsByTagName("head")[0].appendChild(script);}Insert into <head>](https://image.slidesharecdn.com/singlepagewebapparch-110915044414-phpapp02/75/Single-Page-WebApp-Architecture-38-2048.jpg)
![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>](https://image.slidesharecdn.com/singlepagewebapparch-110915044414-phpapp02/75/Single-Page-WebApp-Architecture-43-2048.jpg)
![Performance is Not Good{pid: ‘123’, entities: {images: [ {image_medium: … ,image_small: … ,image_big: … , } ] }}](https://image.slidesharecdn.com/singlepagewebapparch-110915044414-phpapp02/75/Single-Page-WebApp-Architecture-51-2048.jpg)
Uploaded byMorgan Cheng
Single Page WebApp Architecture
This document discusses single-page web application architecture. It begins by comparing traditional web pages that require full page reloads on navigation to single-page apps that use client-side routing and rendering with no page reloads. It then discusses how to build single-page apps using client-side routing to handle navigation, client-side rendering of views, and an event system to decouple modules. The document also emphasizes the importance of performance in single-page apps and provides techniques for fast loading, execution and caching of assets.
More Related Content
Similar to Single Page WebApp Architecture
![[DevFest Strasbourg 2025] - NodeJs Can do that !!](https://cdn.slidesharecdn.com/ss_thumbnails/devfeststrasbourg2025-nodejscandothat-251127142731-da65b6fd-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BDD 2025 - Mobile Development] Mobile Engineer and Software Engineer: Are we...](https://cdn.slidesharecdn.com/ss_thumbnails/md-mobileengineerandsoftwareengineerarewestillrelevantsidiqpermana-251127010650-55224ef1-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BDD 2025 - Full-Stack Development] Digital Accessibility: Why Developers nee...](https://cdn.slidesharecdn.com/ss_thumbnails/fs-digitalaccessibilitywhydevelopersneedtoknowandcarein2025-251127011019-0674441d-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BDD 2025 - Full-Stack Development] Agentic AI Architecture: Redefining Syste...](https://cdn.slidesharecdn.com/ss_thumbnails/fs-agenticaiarchitectureredefiningsystemcommunication-251124030838-e6c70cc2-thumbnail.jpg?width=640&height=640&fit=bounds)
Single Page WebApp Architecture
- 1.
- 2. Traditional WebServerBrowserWeb PagePageHTMLNavigateWeb PagePage HTML
- 3. Single Page WebAppServerBrowserPageHTMLWeb PageNavigateXHR ResponseNavigateXHR Response
- 4.
- 5. It Should Workas Web
- 6.
- 7.
- 8.
- 9. Squeeze Bits forBetter Experience
- 10.
- 11. Frequently Navigated PagePartialDifference Among PagesPerformance Critical
- 12.
- 13. Now we totallydepend on JavaScript
- 14. "The secret tobuilding 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=ClientSide RoutingClient Side Rendering+
- 16.
- 17.
- 18.
- 19. Why YUI3.4 appframework 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 RenderHTML Skeleton
- 21. Define Routesvarcontroller =new Y.Controller({ routes: [ {path: “/”,callback: onHomePage }, {path: “/user/:guid”,callback: onUserPage } ]});onHomePage is invoked when route “/” is triggered
- 22. Dispatch on DOMReadycontroller.dispatch();Trigger route according to current page URL
- 23. Save on NavigationY.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 NavigationRoutingModulePage BPage CPage A
- 25.
- 26. Page Load&Page NavigationRoutingModulePage BPage CPage AWidget XWidget YWidget Z
- 27.
- 28. Decouple Modules withEvents
- 29. Page Load&Page NavigationRoutingModulePage BPage CPage AWidget XWidget YWidget ZEvent System
- 30.
- 31.
- 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 toSingle-Page?
- 34. It should beFast
- 35. 近身== Download ItFast发力 == Run It Fast
- 36.
- 37.
- 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.
- 40. …</head><?phpob_flush();flush();?><body>Flush forbrowser incremental rendering
- 41.
- 42.
- 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 JavaScriptBefore External Style Link
- 45.
- 46.
- 47.
- 48. JavaScript Execution isNot Free
- 49. Client-side Rendering Dependson CPU & JS Engine
- 50. Mustache Performance SuffersFrom Nested Data
- 51. Performance is NotGood{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: …,}
- 53.
- 54.
- 55. How to RenderFirst Page?
- 56. Twitter ApproachThe firstpage response is just HTML skeletonWeb is a client of its Open APIThe page is initialized with multiple AJAX response
- 57. Facebook ApproachThe firstpage response is HTML Skeleton with tailing inline JavaScriptInit data is flushed in tailing JavaScript blockIt is called BigPipeThe sequence of module rendering depends
- 58. Google+ ApproachThe firstpage response is complete HTML
- 59. Which is Better?TwitterApproachFacebook ApproachGoogle+ Approach
- 60. Take-AwayLeverage FrameworkMake decisionaccording to app requirementWatch the Performance
- 61.