Introduction about SPA
Single Page Application (SPA) are the web-application in which a single root view page will be loaded from the server and based on the user interaction the application dynamically updates the content at the client side without any page reload.
The SPAs are more fluidic and responsive than the conventional multi-page applications and they are best suited for creating SaaS (Software as a Service), enterprise dashboards, and other form-driven web applications.
In this article, I’ll walk through some fundamental concepts for building SPAs, and some single-page web applications created using Syncfusion Essential JS 2 components.
Lifecycle of a SPA
There are multiple frameworks to build SPA, and the concept of the SPA in every framework remains the same, where the entire client-side UI or view will be fetched from the server at the initial load and based on the user interactions or navigation through the application, the UI will be refreshed dynamically at the client-side.
While refreshing the webpage, the application uses minimum bandwidth to contact the server for updating of fetching the data from the server alone.
Advantages of SPA
The SPAs are more fluidic and more responsive due to which the applications are best suited also for mobile devices without having to build a separate native mobile application.
SPAs support rich interactions with multiple components such as editors and popups on the view page, these components may have intermediate states which can be harder to implement with server-side rendering.
Apart from initial page load, SPA uses lesser bandwidth for updating the UI and with no page refreshes while user navigates the application, making the application more comfortable to use it in mobile devices.
As the view layer and data layer are maintained separately in the SPA, this will be much easier to deploy in it the production.
Important concepts of SPA
Routing
In SPA every content is maintained with separate URLs and one can navigate to different content swiftly using these URLs.
Single-page applications maintains the state using URLs or track state internally, while the user navigates through the application.
The major use-case with page routing in SPA is, one can share the URL and be sure that anyone opening that link will see the exact same content by the navigating to the exact URL in the application.
Data binding and syncing
SPAs use minimal bandwidth for contacting the server for fetching the data or for updating the data model after the user interaction in the application.
While user navigates through the application, the data model in the server will be updated simultaneously using asynchronous HTTP request (AJAX).
Based on the user interactions, the data is updated to the data model in server. And these data changes are refreshed back to the UI simultaneously without any delay, thereby making the user to always view an updated webpage without refreshing the webpage.
Fast and fluid response time
SPAs are known for their fast and seamless responses to user interaction, their rich interfaces handle the user action and refreshes the UI dynamically without any delay or request from the server, therefore avoiding interruptions in the experience and making the web app behave more like a desktop application.
Separation of view and data layer
SPAs are built using Model-View-Controller (MVC) and Model-View-ViewModel (MVVM) patterns, but still you can build the application on your own MV* pattern.
The view file (along with the CSS bundle) which holds the UI rendering for the application and the data layer of the application are well maintained separately in the SPA architecture.
The separation of the view and data layer, intends the user to reuse the view page for different data set or altering the view page without affecting the data model in the production.
The view and data layer separation in SPA eases the versioning and roll back vows in the production.
Real world examples
There are some real-world applications built with SPA architecture using the Syncfusion Essential JS 2 components.
Expense tracker
The expense tracker application showcases several Essential JS 2 components together, to track and visualize the daily expenses with a great UI.
The different web pages available in the application, ‘Dashboard’, ‘Transactions’ and ‘About’ uses the Grid, Chart and other Essential JS2 components for visualizing the data model. This application uses page routing mechanism for page transitions to navigate between the views.
User can navigate between these views using the URLs, which will be created for each web page because of routing. Since this application is built using SPA architecture, all the web pages will be downloaded at the initial loading of web application, and the page transitions will happen completely at client-side without requesting any web pages to the server. While navigating to the different views, the URL of the application will be updated accordingly.
Data binding is a major role in SPAs, since all the web pages are downloaded at client side, the UI components should be refreshed with the updated data then and there. While performing any editing actions in the ‘Transaction’ web page, the changes will be updated to the data model simultaneously, and these changes are reflected to the UI components available in other pages also.
Since SPAs are best suited for rendering both in desktop browsers and mobile environments and considering the same, this application is also built with fluidic and responsive design for rendering in mobile devices.
The live demo of this application is available in here and you can find the GitHub source here
Web mail
Web mail is a single-page application with Outlook like user interface built for managing the mailbox.
This application is built with rich interfaces and the interactive design using the Syncfusion components like accordion, list view and sidebar as a single view web page. The application is split into three sections viz mail folders, mail items and the mail content area, for managing the mail box. Due to its responsive design, this application can be rendered with ease across mobile devices and desktop browsers.
The data binding plays a significant role in this application for updating the mailbox and for displaying the mail content based on the user interaction. The mail list items will be refreshed with the appropriate content based on the user selection in mail folders, and the mail area will be refreshed with the updated content when the user selects the mail item from the mail list.
You can find the live demo of this application here and you can find the GitHub source here.
The application handles multiple user interactions and refreshes the content accordingly without any page refreshes making the application to look alike a desktop application.
The responsive design of this application, makes it to render across mobile devices with the best UI.
Loan Calculator
Loan calculator is single-page application which showcases components like Grid, Chart, Slider and other Essential JS 2 components together in a single view page, for calculating the loan payment based on the loan amount, interest and term.
The data binding in this application works in such a way that, while adjusting the values of loan amount, interest and term using the slider component, the data for the chart and grid components will be refreshed with the appropriate data accordingly.
One can also refresh the chart content, by choosing the desired month to be viewed using the date picker component. When the month to be viewed has been changed, the data for the corresponding month will be returned from the model, and the same will be updated to the Chart component.
You can find the live demo of this application here and you can find the GitHub source here.
Considerations for SPAs
Besides multiple advantages of the single-page application, there are some special considerations to consider with SPAs. However, all these issues can be addressed with the right techniques.
- One should ensure the object-oriented principles while creating an SPA. If ignored, that will lead to memory leaks within the browser, causing the application to slow down thereby degrading the performance.
- SPAs are majorly built for enterprise dashboards, SaaS and for form driven websites, but if the main websites are built with SPAs, then one should consider search engine optimization (SEO) so that users can make use of an appropriate version of the page.
- The browser back button should be handled properly in the single-page applications. If not properly handled, the user can click the browser back button leading to workflow loss.
Summary
In this blog post, we saw the benefiting factors of the single-page application over the multi-page application. Also, we saw the real world single-page applications Expense Tracker, Loan Calculator and Web Mail built with multiple Syncfusion Essential JS 2 components.
The above discussed single-page applications are also available in Angular, JavaScript, ASP.NET core and ASP.NET MVC platforms, and you can find the live demo of these applications, here. You can also check the other real-world applications built with Syncfusion components here.
We also recommend for checking out through the source code yourself available on GitHub, which is readily runnable to see just how the single-page applications are built using the Syncfusion components.
If you have any questions or comments, please let us know in the comments below. You can also contact us through our support forum or Direct-Trac. We are always happy to assist you!