Core Architecture Approach for SPA

Regardless of framework, the design of a SPA should follow common grounds for dealing with performance as ultimately all framework has to adhere to the basic rendering mechanism of HTML CSS and JavaScript.

• SSR

○ Hydrate

○ Dynamic index.html

○ SSG

• HTML

○ DOM should be minimum

○ Efficient vDOM with memo

○ Lazy load hidden components DOM

○ Reduce form nodes for efficiency

• CSS

○ Globally load Elements Component

○ Keep Components tightly coupled with Components itself

○ Layout CSS will be on-demand and reused with component and layout elements

○ No unused CSS in developers audit

○ Update stylesheet Map when idle

• JS

○ JS Loading

§ Shared common library CDN

§ Small button size load

§ Lazy load Chunks on routes

§ Lazy load hidden components on page

§ Update Chunk Map when idle

○ State Management

§ http://somebody32.github.io/

§ https://benchling.engineering/a-deep-dive-into-react-perf-debugging-fd2063f5a667

§ https://blog.isquaredsoftware.com/2017/01/practical-redux-part-6-connected-lists-forms-and-performance/

○ AJAX

§ Single calling source

§ Security 

§ Calling mechanism and storage

§ Facade and intercept

§ SAGAs mechanism (core logics)

○ PWA

§ Caching strategies

§ Caching API

§ Offline mode options

○ Routing

§ Wrapper is lightweight between routes

§ All routes are isolated with maximum performance