How to Implement Responsive Framework with Single Page Application
Stay Ahead of the Curve: Implementing Responsive Frameworks in Single Page Applications
Justin Rebok, Lead Applications Developer
5 Min Read
Responsive frameworks and single page applications (SPAs) are different in web development. However, they work well together to create a modern and user-friendly web app.
What is Responsive Design?
Responsive design is a way to make websites and apps that look good on different devices and screens.
Responsive design aims to provide a consistent and user-friendly experience on various devices like desktops, laptops, tablets, and smartphones.
To go more in-depth, read our article about Responsive Design and Frameworks.
What is Single Page Application?
A Single Page Application (SPA) is a website that updates the current page with new data from the server. It does this instead of loading new pages.
In traditional web applications, when you click on a link or perform an action, the browser sends a request to the server, which responds by sending back an entirely new HTML page. This process can be slow and less user-friendly, especially for applications that require frequent updates and interactions.
SPAs load one HTML page first and then use JavaScript to change and update the content on that page as required. In the background, they communicate with the server to obtain information, typically in JSON format. They then update the page without having to reload the entire content. This approach provides a smoother and more responsive user experience, similar to that of native desktop or mobile applications.
Key characteristics of single page applications include:
- Single Initial Page: When the application is first accessed, SPAs load a single HTML page or template. This page typically includes the necessary JavaScript and CSS files.
- Dynamic Content: SPAs update page content by using JavaScript to change the DOM based on user actions or data updates.
- Client-Side Routing: SPAs use client-side routing to create the illusion of different pages or views, while keeping the same URL. JavaScript libraries or frameworks achieve this.
- API Communication: SPAs communicate with server-side APIs to fetch and send data in the background. This data is often exchanged in JSON format.
- Improved User Experience: SPAs can provide a more seamless and responsive user experience because they eliminate the need for full page reloads.
Popular JavaScript libraries and frameworks for building SPAs include Angular, React, and Vue.js. These frameworks provide tools and abstractions to simplify the development of SPAs and manage state, routing, and data fetching efficiently.
SPAs are a new way to develop web apps. They make the user experience smoother by reducing server trips and improving client-side rendering.
How to Implement a Responsive Framework with a Single Page Application
This brings us to the conclusion; how does one implement a responsive framework alongside an SPA (Single Page Application) framework? You can use these frameworks with traditional applications. However, we need to consider dependencies, implementation, and how the server framework interacts with the responsive framework.
For the purposes of this article, we’ll frame the implementation discussion around React.js (https://reactjs.org/), a popular SPA JavaScript framework.
Starting off, many responsive frameworks have React hooks and components available from NPM. This solves the problem of tying React processes to the responsive framework’s processes. Bootstrap for example provides this functionality (https://react-bootstrap.github.io/).
You don’t have to use this. You can use “raw” CSS classes for React components if you prefer, but you need to think about the JavaScript parts.
Some components will require hooks and connections to the JavaScript that React is executing. Bootstrap modals are an excellent example of this. The models require JavaScript interactions to open and close the modal when needed.
An example of using the React-Bootstrap components:
import React from 'react';
import { Row, Col } from 'react-bootstrap'
export default function MyComponent() {
return (
<Row>
<Col>
Left Column
</Col>
<Col>
Right Column
</Col>
</Row>
);
};
And an example that does not use React-Bootstrap:
import React from 'react';
export default function MyComponent() {
return (
<div className='row'>
<div className='col'>
Left Column
</div>
<div className='col'>
Right Column
</div>
</div>
);
};
In the React ecosystem, there is a divide in methodology between using what are “styled components” and using SASS-compiled CSS files for styling. The benefits of using styled components are that it keeps the styling of the component with the component. This can be helpful in large systems where the set of SASS files can become convoluted and difficult to manage as all components share them.
As for using SASS, it is more traditional to do so thus why people still take this route. For smaller apps, using a SASS file set is decent enough as the amount of overlap between components will be minimal.
Overall, a mix of these methodologies is the best route. Use SASS files for heavily used CSS classes and styling and then defer to the component’s local styling to determine how it should look.
import React from 'react';
export default function MyComponent() {
const style = {
border: '2px 3px',
backgroundColor: 'blue'
};
return (
<div className='base-component-style'
style={style}>
<div>Some content</div>
</div>
);
};
The order of components in React can determine if an application is responsive or not. If components are not well encapsulated and aligned in design, the application’s responsiveness will decrease and maintenance will be challenging. Changing the component state becomes difficult if the hierarchy is incorrect. Additionally, there may be unintended side-effects that impact the appearance of the app.
The app is designed for desktop use, but most users access it on their mobile browsers. If components cannot easily change based on the device context due to their organization, development will be slow. Additionally, the user’s app experience will suffer.
In Conclusion
Implementing a responsive design is easy with the right framework, but it’s not everything. The application’s design and architecture are still crucial.
How you integrate with the responsive framework and form your component hierarchy in React affects the overall responsive design. Analyzing these factors and how frameworks connect allows for achieving a responsive design for an app. Users will enjoy this design on many devices. Want to learn more, contact GDC to discuss your single page application requirements.
