Benefits of responsive component in React Application
Author: Usman Arif
Summary:
This article is not explaining the technical aspects of CSS to make responsive components. It’s all about the theory behind the benefits of a responsive component. majorly when you are in the situation when you have an application running on multiple platforms like desktop, tablets, mobile and native apps, and the main challenge is to maintain all from one place.
What is a web-page and component?
Web-page
A web-page is a single document written in HTML (Hypertext Markup Language) that can be accessed through the Internet using any browser like Internet Explorer, Google Chrome. It can be accessed by entering a URL address in the browser. the web page may contain text, graphics, and hyperlinks to point to another web-page.
Component
The component is the part of a web-page, it can be a single button, widget, section or set of some widgets. It can be repetitive on a single page. Generally, components are reusable and commonly used on multiple pages.
In the above screen, a combination of all blocks is a web-page and the blocks are components.
Before going forward, I just wanted to explain the scenario and challenges we had with our old application architecture and how we solve those with the new one.
Problems and challenges in our application.
Below are the main problem areas we had with our application.
1. The different application code base for different devices.
We had a multi-page-application (MPA) and we were working on pure SSR technology to build our Application which was on desktop and mobile. But interestingly we had separate code bases for desktop and mobile.
Also, we have an Android APP, A different code base and a different team.
2. different webpage layouts for mobile and desktop.
Since we have a different code base for both platforms so our designer was very free to put a different design for both and we as a developer easily accepted it to change our application accordingly without any effect.
3. Big team size to handle the application and less output in a long time span.
Whenever we get any new requirement at the application level then it estimates for both desktop and mobile separately, and developers made changes in their own code to make it live. Some time developers of any platform had been occupied in some other project then the same feature was being live in a different time. In this case, our users were experiencing some mismatch of the same feature on desktop and mobile during the gap period.
4. Small productivity
Since team size was big and they are involved to develop the same feature on different devices so obviously it can be considered as small productivity by the big team size.
5. Big time consumption for Quality Assurance people. QA people always spent more time testing the feature of the application on different devices. Also in case if some feature is going to be live for desktop only and after a couple of weak same feature is going live on mobile then in this case testing effort been duplicate for the feature.
How we solved It
Since web technology is moving ahead and there are a lot of options available on the web, based on the application’s need.
So we decided to build our application on PWA technology one step ahead in the market to serve our contents and application with native feels like app with good features of notifications for better information distributions and user engagements. So further we decided to rebuild our application for back end and front end.
Also, there was a major pain point with us, Since we are an internet company and we have a content-driven application, so we strongly needed SEO for it.
Apart from application architecture, we have one more challenge to simplify our front end part (Layout with HTML and CSS). So we have two approaches at this stage one is a full “Responsive website” and another one was “Responsive component”. After a lot of discussion and brainstorming, we decided to go with a responsive component. letter in this article you will see the benefits of it.
Below are the step taken by us to solve all the problems which we have earlier with our application.
1. React JS
We redesign our system and choose to react JS for backend and frontend logic and moved to the rest API based application.
For rest API we moved on microservices-based architecture.
By this approach, we simplify our application architecture in an ultimate manner.
2. Say no to the responsive webpage.
There are millions of fully responsive website on the internet which have the same code base for their application running on desktop, tablets, and mobiles, They have the header, navigation, menu, right panel, footer, and page contents. And similarly, on mobile, they have a hamburger, right panel, header, footer, and page content.
After too many brainstorming we match our requirement with internet theory and we found there are some challenges with this approach, just because we have a complex design on desktop and mobile. To solve this complexity we had two approaches, either by the media query or by the application logic.
But in both cases, there was a huge impact on code management and optimization.
3. Hello to Responsive Component
We just wanted to more optimized code and lightning-fast web-pages, and better code management and good productivity with fewer development efforts. so we decided to move with the responsive component. And this decision was a historical decision which solves all the problems which were facing for a decade.
4. Unique Skeleton for mobile, desktop and App
We created the separate skeleton for desktop, mobile and App, All the skeleton has its own common component (header, footer, search, hamburger/GNB). We made unique to all the page related content and converted into a responsive component and serve it on all platform desktop, mobile and app. In-app, we use web-view for a specific page and serve the responsive component there as well.
By adopting all the above approaches we made a unique code base for desktop, mobile and app. And our application had been maintainable, and fast to the user.
In the above fig. all the WGT are components commonly used throughout the application and others are the skeleton of each platform. for example, the combination of Desktop Navigation links, desktop footer, header, and page layout is the skeleton of desktop and the combination of the mobile footer, header and hamburger is the skeleton of the mobile site similarly in the app whole skeleton is the part of the app and components are visible in the web view inside the app.
What benefits we are getting?
However, there are a lot of benefits we are getting with our new application design approach but I am putting some main benefits over here.
1. User experience friendly
There are a lot of devices and they don’t have much ambiguity to each other so the user operates all the devices in a different manner. So our responsive approach could solve the challenges and provide the scale-able solutions to defeat the behavioral issue of users on different devices. It has a similar code base for all the targeted devices and users can see the same content on all devices with different layout and sequence, as per the device behaviors and their use cases. Hence we can say responsive component is much user friendly which serves the content in a more approachable way.
2. Saving development cost
Earlier web development was platform-specific and their application code and team used to be different for the same application and content. If you had any new requirements for all platforms then you had to plan it with different teams and they build it in their code. To manage resources and time for the same requirement was much cost-effective for any organization, but with the responsive, one team can build the same web page for all platforms with a single code base.
3. Good Code management
Single code for all approaches solves many things for us, we were able to make live any feature by changing in one place. Since developers are not occupied to change different codebases of all platforms for a single feature so we have more bandwidth of developers to involve them in other features to make productivity high.
4. SEO Friendly
Recently Google has changed their approach to crawling the content of any web page, It follows the mobile content and serves it on all the platform like mobile, tablets and desktop. So it is very easy to manage the SEO as well with this approach.
