Hey, hello, everyone. I am a full stack web engineer, and thank you for joining my session on optimizing AEM performance and user experience with a single page application before we proceed with the discussion. I have a disclaimer to share the views and opinions shared in this presentation are my own. And do not represent the views or official position of my current and previous employees. The content is based on general industry knowledge and publicly available information. No sensitive or confidential information will be shared during this talk. Today, we'll talk about the importance of AEM single page application, issues, advantages, and resolutions. And how it will improve the server performance and user experience. A little bit background about me before starting into, talk. I'm a technology professional with more than 10 years of experience. Developing software for, various industries. I hold a master degree in computer science from the University of Central Missouri, USA. As a full stack developer, I bring exceptional proficiency in both front end and back end development, adding value and innovation to every project I work on. In this talk, we'll talk about introduction to single page application, before SPA, how it was in a traditional multi page application, how single page application work, traditional multi page application versus single page application. How SPA integrated in the EM issue software, SPA implementation resolving SPA issues In the EM overview of single page application, a single page application is a modern web application architecture where users load a single page initially, and that page dynamically updates the content without requiring a full page reload every time the user interacts with the app. Unlike traditional websites, the reload, each time you navigate to your new page, SPA remains on the same page. and make small data requests behind the scenes, updating only the relevant part of the page. before talking about the single page application, let's talk about a few minutes for traditional multi page application. a multi page application is a traditional web architecture where every user action, for example, clicking a link or submitting a form, result in a full page reload. Each interaction sends a new request to the server. Then the server sends back a complete new HTML page. Let's look into the flow here in this slide. When the browser requests to go to server and it responds with a complete HTML. Each request it will go to the server and respond back with a complete HTML. Like a full page reloads. Every time the user navigates to a new page or performance in action, the browser make a request to the server and it will respond with a complete HTML page. or performance in action, the browser make a request to the server and it responds with a complete HTML page. and it responds with a complete HTML page. which process the request and sends a full rendered HTML page back. Client server interactions, each time the user clicks a link or performs any actions, the server generates a new page and the client loads it from scratch. Let's take an example like, think of a traditional e commerce site. you browse through categories, select a product, and each click requires a full reload. Every new product page sends a fresh request to the server, making the experience feel slower and more segmented. Let's talk about some common issues before SPI implementing in AEM. Like a slow navigation, every time the user clicks to go to another section, a full page reload occurs. leading to slow transition and a fragmented experiences. SEO challenges for interactive or frequently updated websites. Multi page applications generally work well, but SEO optimization becomes challenging when rich interactive content is delivered, especially with client side rendering. Complex user interactions like creating smooth and complex user interactions in multi page applications is often challenging. Especially for applications that require real time updates like online chat systems or live dashboards increase server load With every user interaction triggering a new server request, every new server request, there is a heavier load on the server, leading to potential slowdowns and scaling issues. Impact user experience lag. With every page refresh, the user may lose their context. Example, form data might disappear if they navigate away and come back. And higher bandwidth usage. Reloading full page, including redundant parts like header and footer, consumes more bandwidth, increasing the data sent and received. Let's consider an example like a in traditional new site where every click on a new article to get a full page reload over time, this can slow down navigation, interrupt the user experience and increase the workload on the server, especially when traffic spikes. Let's talk about, how single page application works detail. Now let's talk about technical structure of SBA. SPA are primary built using modern JavaScript framework such as React, js. These frameworks manage the applicant's behavior and user interface directly in the browser instead of constantly communicating with the server to reload entire web pages. SPA work by dynamically updating only the necessary part of the page. The core difference lies in the shift of logic and rendering from the server to client. When we talk about technical structure of SPAs, we talk about a JavaScript as a controller. The framework act as a controller that respond to user action like clicks, form submissions, and navigation changes. The JavaScript is loaded initially and dynamically manage the state of application, ensuring only the relevant content is fetched or updated. Asynchronous data fetching. SPS use Ajax or Fetch API to send asynchronous requests to the server. These requests retrieve only the necessary data like a specific portion of text, image, or product details. Ajax or Fetch API is And update the page instantly without requiring any updates. Complete reload. Browser side logic. SPA shift most of the rendering and navigation control to the client side, the browser, which result in smoother transition and less load on the server. Let's talk about how, SPA load data. In initial load, when a user first visits the SPA, a browser download a single HTML page and associated JavaScript files. This include all necessary code for the application's layout, structure, and initial logic. Then dynamic updates instead of reloading the entire page, when the user interacts, example like clicks, clicking on a link or submitting a form. Only the specific part of the page that need to be changed or updated. This could involve fetching new content from the server without disturbing the rest of the page. Server interaction. Unlike traditional multi page applications, SPA do not send full page reload request to the server. Instead, asynchronous data requests are made, fetching only the required data and displaying it instantly. These reduces overall server load and ensures fast interactions for the user. Let's give you an one example like considering gmail when you open an email the rest of the interface the sidebar header all those things remains unchanged. Only the content of selected email is updated. This allows the app to feel fast and responsive as there is no need to reload the entire page. This is a core benefit of SPA reducing unnecessary page reloads to create a seamless user experience. Let's talk about the some key benefits like a drastically reduced load time in traditional websites like a multi page applications navigation to your new section or page involves reloading and JavaScript from the server. This can result in. Noticeable delays, especially, for a website with heavy content or media. In SPAs, only the necessary data or, content is fetched and updated, leaving the rest of the app intact. This leads to faster interactions and a more responsive application. Improved user experience, like a user expects immediate response from modern web applications with SPA. Actions such as clicking links, submitting forms, or updating content happen instantly. because the app does not reload the entire page. SPS creates a user experience similar to a native mobile or desktop applications with fast transitions and fluid interactions. Example on, example on Facebook, liking a post or leaving a comment happens almost immediately without reloading the entire page. This creates an engaging and seamless experience for users. As I talk about reduced server load, traditional multi page applications place a heavy load on the server because each user interacts requires generating a new page from scratch. This can slow down the performance, especially when many users are interacting simultaneously. Since SPS shift, much of the rendering to the browser. The server only needs to provide data, not full HTML pages. This makes SBA more scalable, especially for applications with heavy user interactions. Real time updates and interactions. SBA is very good in applications requiring real time data updates. For instance, messaging apps, live dashboards, and project management tools, benefit greatly from the ability to update. Content without page reloads. Let's give you like some real time examples like, Gmail, Google Maps, Facebook. when users zoom in, search for a location, or, or across the, or pan across the map, Only the relevant part of the map updates, the rest of the page, search bar, menu bar, etc. remains static. Even in the Facebook, scrolling through the feed, linking posters, or commenting happens without any noticeable page reload. The content updates dynamically as you interact with it. SVAs are ideal for applications that need to handle real time updates. dynamic content, and a high level of interactions. SBAs are commonly used in applications like dashboards, project management tools, social networks, video platforms. Let's talk about differentiations between the traditional multi page application and SBA. Imagine a traditional website is an old online store. Every time you click on a new product, the whole page reloads. which can slow and frustrating. With an SPA, when you click on your product, only the product details update, making for a smoother and faster experience. Even if you see in this slide, we have two diagrams where one represents traditional application and one is for SPA. In traditional, each request going from the client, it's coming out like a complete HTML and regulates the page. But in SPA, Only portion of Ajax call went to the server and get that JSON and update the page. Let's compare tabular format side by side to make it more understand like a navigation. in multi page application, each click lead to new page load causing slower transition and higher latency. In single page application, handle navigation inside the browser fetching only the required data so the user experience fast and seamless transition. Server request. Multi page application sends a new request to the server for every interaction. While in single page application, only load the full page once, then make subsequent data request as needed. This reduces server load and bandwidth usage. User experience. In multi page application, can feel sluggish as users wait for entire page to reload. In SPA, on the other hand, offer a more app like feel, where interactions feel immediately. Performance and, in multi page applications can be slower because each time you click something, the whole page reloads. which puts more work on the server and takes longer for users. SVO only loads what's needed after the first load, making them faster and reducing the strain on the server. Coming to SVO perspective, in traditional multi page applications are naturally more SEO friendly, because each page has its own distinct URL and content. The search engines can easily crawl. SBA requires additional techniques like server side rendering or dynamic rendering to make their content searchable. Development complexity. Multi page applications are more often simpler to develop since they rely on established server side frameworks. SBAs introduce more complexity as they require mastering JavaScript frameworks. client side routing and handling dynamic data. Coming to caching, multi page applications use simple caching where entire page or static content can be saved and reused easily. Single page applications like however need more advanced caching methods. like serving workers because they load data dynamically, making caching a bit more complicated. Coming to best use cases, as I mentioned, multi page applications work best for websites with a lot of content like blogs or news sites. SPS are perfect for interactive apps like social networks or online stores, when users expect real time updates and a smooth experience. Let's talk about how we can integrate in, Single page application in AEM like a client side rendering SPS in AEM use modern JavaScript frameworks like React or Vue. js to handle rendering the browser. Edible templates. Even though single page application or JavaScript based AEM allows content author to still create and edit pages easily integrated authoring experience in AEM content authors can edit single page application content dynamically seeing the changes as they make them without needing coding knowledge like in react based single page application integrated with AEM. Content authors can add a new sections or images in real time with the JavaScript handles the page updates instantly. Current issues after the SPA implementation, even after integrating AEM, we have some issues to talk about, like SEO optimization. By default, heavily on client side rendering, which can cause search engines to struggle with indexing dynamically generated content, leading to poor SEO performance. Debugging complexities, SPS are heavily dependent on JavaScript, making them harder to debug compared to standard. traditional application. And as I mentioned that caching difficulties SPA fetch data dynamically and this can be tricky to implement proper caching strategies. Compatibility issues. Some older AEM components might not work as smoothly in SPA. Require development to create custom solutions. Content authoring experience. Initially, content authors faced challenges managing content in SPS because traditionally visual editing tools and in context editings were difficult to implement in client rendering applications. for example, with an SPA might offer a sleek experience troubleshooting a bug related to dynamic data. Loading can be much more complex. And compared to traditional website. Let's talk about how we can overcome these issues. Like a SCVO solution like a server side rendering. Pre render pages on the server to help search engines index Content effect efficiently, dynamic rendering use tools like a Google dynamic rendering to show pre rendered content to search engines while still delivering an SPI experience to user debugging techniques like a source map. These map compile JavaScript code back to the original source code and make it easier to debug. Like a caching strategies. These allow us to cache dynamic content more effectively enabling offline capabilities. And, API caching. So frequently access data can be cast to minimize the load time. Also coming to compatibility, custom components, build components specifically for SBA to ensure smooth functionality, hybrid approach, use a mix of SBA and traditional multi page application where necessary to maintain flexibility, content, authoring, underwriting. AEM SBA editor is designed to overcome this, but it required proper configuration. ensure that SPA editor is correctly integrated to content authors can use in, in context editing and preview functionality. This requires a close coordination between front end developers and the AEM implementation team. Now let's talk about a case study like a large e commerce site faced issues with slow page loads. Taking up to three seconds after implementing an SPA load time drop to one second. Additionally, server, request were reduced by 20%. improving overall performance and user experience. Let's see the, let's see, revisit the advantage and everything what we discussed so far, like in conclusion. So SPA role in modern web development, like a performance boost, a single page application offers faster load time and smoother interactions, enhanced user experience, fluid navigation and real time updates keep user engaged, Developer flexibility. JavaScript frameworks give developers the tools to build robust applications. Competitive edge. Businesses that use single page applications deliver content faster, ensuring they stay ahead in the digital landscape. As the AEM continues to evolve, single page applications will become even more integrated, helping business creating faster and more dynamic, and, giving like a very smooth and, great web experience. By addressing challenges like SEO and caching, SPA can offer you a future proof solution for modern web applications. Thank you. I hope you enjoyed the talk.