top of page
Speedometer.jpeg
cfe35acb1d1ff8a1ddd98dda28f9aabb.png
react.png
angular-transparent.png

​

Single page application with aem 6.4 + react/angular
​

The Adobe Single Page Application (SPA) experience is a new architecture in Web experience. It means all pages are built in one page experience, so when a visitor navigates from one page to another, it is not a whole page reload. It is just a view change within the page.  If you ask, why would anyone do this. The reason is, we don't want a browser to fetch, parse, load the Javascript, CSS, header and footer on every page which takes 30% of the load time. It is a new concept (similar to AJAX in 2005) which a few industry leaders have started to adapt to this new architecture. Google is now honoring and indexing SPA pages.

 

​

Advantages:
​

  • Performance :  Take a look at couple of demo sites we built in AEM SPA framework. Navigate page to page, you will see 30% performance  (We actually measured it and averaged across all SPA sites vs traditional site navigation). We can demo the same too. How performance improvement may gain your site may be different but below are some facts from tech leading companies                                                                                                                                                                             

    • "1 second of load lag time would cost amazon $1.6 billion in sales per year" - Amazon                                  

    • "When load times jump from  1 second to 4 seconds, conversion decline sharply. For every 1 second of improvement, we experience 2% conversion increase" - Walmart                                                                  

    • "An extra 0.5 seconds in each search page generation would cause traffic to drop by 20%" - Google

​

​

  • Design to Develop gets better : There is always a friction what exactly the UI team owns and what AEM team owns. But by drawing the clear line with SPA architecture, the front end owns the Angular()/React templates. Also, they can design, demo, test with stub data that will be provided by Sling Models later by AEM dev team. So no more handlebar/static html for UI developer and throw them away.  What gets designed by UI team is what going to stay. The back end development team provides only the Sling Model to support the data for the Angular/React UI team in json format. More over with Sketch-ReactJS integration frameworks, what you see in design is what you get (No more design->mock html-> sightly development and no more pixel defects).

​

​

  • Resource diversification: Let's be honest, it is so hard to find a strong frontend developer who knows Sightly  and same other way (There is no AEM developer with strong frontend framework skills). There are more UI experts available in the market who knows Angular/React than Sighlty. Let them solve and build  your UI component use cases  whereas the AEM developers build the backend author experience. You will have better line of division on the Author vs Publish experience. Below is simple version of a teaser component in Angular. You see, all it needs is an Angular developer who knows the author/backend properties to access to build the component. Let the UI developer control the Angular and the CSS.

​

​

  • SEO : While this is really not an advantage, but with latest SPA framework every page in the site gets unique URL and maintains the same URL structure as multi page website. Also Google does index Single Page sites perfectly well. To see in action, search for "Angula router" in Google. You will be taken to https://angular.io.   This site is completely built in Single Page Experience (When you click any link on the site, you will see how fast it loads) and Google does index the deep pages also that are built in Single Page Experience.

​

​
Demo Time:
​
  • We have built 100+ demo SPA sites for you to experience. Please contact us to arrange a demo of your site in SPA experience and talk further.
​

​

​

bottom of page