Core Architecture Approach for SPA

Wednesday, October 27, 2021

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.

○ Hydrate
○ Dynamic index.html
○ DOM should be minimum
○ Efficient vDOM with memo
○ Lazy load hidden components DOM
○ Reduce form nodes for efficiency
○ 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
§ Single calling source
§ Security 
§ Calling mechanism and storage
§ Facade and intercept
§ SAGAs mechanism (core logics)
§ Caching strategies
§ Caching API
§ Offline mode options
○ Routing
§ Wrapper is lightweight between routes
§ All routes are isolated with maximum performance

No comments: