International Research Journal of Engineering and Technology (IRJET)
e-ISSN: 2395-0056
Volume: 09 Issue: 05 | May 2022
p-ISSN: 2395-0072
www.irjet.net
Component based User Interface Rendering with State Caching Between Routes Jinu Sophia J1 Naveen Kumar A2, Nithish S3, Purushothaman J4 1Assistant
Professor, Department of Computer Science and Engineering, Rajalakshmi Engineering College, Chennai, Tamilnadu, India . 2-4Undergraduate student, Computer Science and Engineering, Rajalakshmi Engineering College, Chennai, Tamilnadu, India . ---------------------------------------------------------------------***---------------------------------------------------------------------
Abstract - The web has transformed itself into a platform
every time the link is visited. Network calls involved in fetching these files prove costly and repeated calls within a short period make the network calls a costly redundant work.
that can now run full-fledged application like websites enhancing the user experience and avoiding the hustle of installing bundles to run native applications. This change in the usage of the web as a platform to host applications has made client-side Javascript more the workhorse than it usually was in conventional websites. Routing is a major aspect in making the user experience a more native feel and so came into the limelight the concept of client-side routing. This enables the routing to be taken care of by the clientside Javascript, making the application's execution context remain the same for all the views of the application. The execution context not being disposed of for every action of changing route enables the state of the application to be stored in a cache for later use when the user visits a view that is already in the history of routes. Caching takes a major leap into providing a near native-like application fell as the user gets to come back to the same state of view that they left behind.
The downsides mentioned can be worked around by making the application client-side routed. In client-side routing, the entire application bundle is fetched in the very first request to the server and subsequent HTML to be rendered in the event of a view change is handled by the client-side Javascript by preventing the reload, hence preserving the execution context. This opens up the possibility to cache application state.
1.1 Server-Side Routing In server-side rendering/ server-side routing, the client(browser) requests the server with the URL(Uniform Resource Locator) that the user wants to visit. The server parses the URL for the path name of the route requested and finds the match with the routes registered in the server. The server now responds back with the HTML, CSS, Javascript and other dependent files.
Key Words: Component Based UI, State Driven UI, Client-Side Routing, Rendering HTML, Caching State Between Routes
In dynamic websites that show different content depending on the user interacting with the website, the HTML built by the server using a template engine is shipped to the browser. The initial load time of a serverside routed web page is fast compared to a client-side routed website as the documents corresponding only to the requested route are shipped. Server-side routing gets the upper hand in First Paint, First Contentful Paint, and Time to Interactive. Server-side routing has a clear upper hand in making websites easy to scrap so that search engines can readily index the websites.
1. INTRODUCTION The Web has evolved into a platform that can host applications rather than conventional websites. For long websites were used as a source for transferring information with hyperlinked documents. Then came websites that dynamically showed content based on the user. The user navigated between views of the website by clicking links embedded in the document with anchor tags. A hot reload of the page had to be performed as the browser fetched the HTML(HyperText Markup Language), CSS(Cascading Style Sheet), Javascript and other dependent files from the server. Once fetched the browser then rendered the page and executed the Javascript linked with the page. Hot-reloading of the page results in the application’s execution context changing for every view change resulting in any specific application state getting lost once and for all. This incoherent behavior alienates the web application from feeling seamless. Apart from delivering a non-seamless user experience, the HTML, CSS, and Javascript files for a view are fetched from the server
© 2022, IRJET
|
Impact Factor value: 7.529
|
ISO 9001:2008 Certified Journal
|
Page 1318