Single Page Applications or SPA Frameworks are JavaScript libraries or frameworks that are designed to make it easy to build web applications that run entirely on the client side.
Unlike Traditional Multi Page applications these Applications have just a single page and Client Side Code HTML CSS and JS are delivered Earlier from the Data which will be rendered on this App. This helps with achieving better Performance and Desktop apps like Feel since they are no further page refreshes when you navigate from one functionality to other.
There are multiple SPA Frameworks available in Market Like Angular, Vue, and React with their own Pros and Cons and there are developer communities that prefer one over the other.
In This Article, we are going to discuss some of the common features of a SPA Application so that while learning a new Framework we would have a rough guide of what we need to cover to make sure we understand this new framework. So, for example, I learned Angular first, and for one of the projects I had to learn React and I knew some concepts of Angular would be the same in React or would be available with a different name. This also allows us to have a better understanding of what’s different in those frameworks and how one has a better implementation over other in certain aspects.
Let’s discuss these ones by one.
Routing (Way to Navigate)
SPA Frameworks use client-side routing, which allows the application to navigate between different sections of the app without requiring a full page refresh. This allows for a faster and more seamless user experience. Some of the topics you might have learned in routing in various frameworks are
- Route Configuration – How Path Matches a Component (Functional Unit)
- Router Outlet – A placeholder Component that will replace the Content when a new Route is Loaded.
- Link – How you create anchors to different Routes.
- Guards – How you restrict access to certain Routes.
- Lazy Loading – How you delay the loading of a component related to this route.
Data Binding
SPA Frameworks use data binding to define how data will sync with the UI. This allows for a dynamic and responsive UI that updates in real-time. Some topics here are
- One Way or Two Way Binding.
- Rendering Cycle – How SPA Framework identifies the change in data and applies it to UI.
Template Libraries
SPA Frameworks would require a lot of pre-existing Components Like Modals Accordions and other UI Frameworks it’s better to use an external library than write your own UI components. Some topics to learn here are
- Material
- Bootstrap
- Customizing Template Libraries for your Branding.
Components
SPA Frameworks are often built using a component-based architecture, which allows for the creation of reusable UI elements that can be easily composed to build the overall application. Topics to look at here are
- Smart and Dumb Components
- Parent and Child Components.
- Communication Between Components
- Components Life Cycle.
State Management
A Single Page Application Framework has Two Main Parts a View and Data that travels between these views. The data depends upon the type of Objects the Application is handling. So, for example, a Shopping Application will have a User Object, Product Object, and Cart Object, and the data of these Objects will be traveling across the View (Components) depending upon what Events are happening on the Application. The Snapshot of data at any given point is called the State of the Application and it becomes very difficult to manage if we are not using the right State Management Tool. Redux or MobX are some commonly used libraries for State Management
Asynchronous Programming
In Order to Talk to the backend the SPA framework would need some way of calling REST API’s it could be through the use of Promises, Async Await, or HTTPClient with Observables (mostly in Angular) creating a different layer for API Calls a good approach for modularity. So a Service Layer and dependency Injection of these services are some things we need to understand when learning these frameworks. In React we use fetch or Axios for doing API Calls.
Build Tools
We know what we write in Angular/React etc needs to convert into something that the browser understands and is also production ready so for that we need some build tools like Webpack, babel, and Typescript for transpiling, bundling, and other build processes. Some of the things we need to know here are
- What is package.json?
- what are npm and node.?
- What are dependencies and dev dependencies and their versioning?
- What are npm scripts?
- What is babel, What is transpiling.?
- What is bundling and some of the bundlers like webpack, parcel, etc?
Performance Optimization
Performance Optimization on Frontend is a big topic and is covered in separate posts but to understand the summary the performance on frontend can be broadly classified as –
1. Data transferred over the network – More data is transferred meaning more time it will take for an application to load so here optimizing asset size, minifying content, etc are some of the things that are done. More on this in detail later.
2. Perceived Performance – This is more about the UX side of it, To Deliver Critical content earlier and show something to the user as soon as possible and also engage him properly by showing time left to download, etc are some of the things that can be done here.
3. Runtime Performance – This is when you start using the application but it starts becoming slow because of factors like Poor Memory Management, Poorly Handled Rendering, or Cycling Dependencies.
Server Side Rendering in SPA
Although SPA Frameworks are all cook and modern they have some disadvantages like
- Poor SEO Performance
- Poor Initial Load Time
- Poor Performance on Mobiles or Low Powered Devices.
This is all because of the fact that UI Travels Separately from the Data in SPA Frameworks and Search Engines dot have anything to Index. SSR (Server Side Rendering) is the technique used by this SPA to perform better in these aspects as well.
Testing
Unit Testing your Code is like using Safety Gear for the Application Requirements although all applications should have unit testing for SPA frameworks specifically we have frameworks like Jasmine, Karma Jest, etc which allow us to cover unit testing.
Mobile Optimization
Many SPA frameworks are optimized for mobile devices, with features such as touch-based gestures and responsive design.
Security
Some SPAs frameworks provide built-in features for security such as form validation, cross-site scripting (XSS) protection, and cross-site request forgery (CSRF) protection.
In summary, Single page application frameworks are designed to make it easy to build web applications that run entirely on the client side. They typically include features such as client-side routing, templates, and data binding, a component-based architecture, state management, asynchronous programming, build tools, performance optimization, mobile optimization, and security. These features make it easy to create dynamic and responsive web applications that provide a fast and seamless user experience.
What other common features do you think should be added here in the list? Please share in the Comments.