Web applications are an area that every front-end engineer is familiar with. However, when you create these in practice for enterprise clients, there are things that you learn along the way to add to your experience and understanding. Development of web apps can be complex, but when done right the result for the customer is a beautifully simple product and user experience.
Magdalena Marjanovic, LotusFlare’s Communications and Content Manager, spoke with one of our Canadian Engineering Team leads, Jin Liu, who skyrocketed his career in LotusFlare by providing an innovative approach to the development processes around web apps.
Magdalena: Thanks for joining us and taking the time to give your views on the development of web apps. In particular, you have worked a lot with single-page applications (SPAs). What have you learned about this area?
Jin Liu: There were a lot of changes in front-end development in the past decade. From static web pages to frameworks like React, Vue, and Angular and new approaches like Svelte and Qwik. In the past few years, the Single-Page Application (SPA) has become mainstream in the front-end world.
I started by asking what is a single-page application, which in my view is a common and imprecise way to understand the mechanism of the SPA is to load everything you need other than the body content to the client side, then load the body content from the server via JavaScript APIs.
Magdalena: What is LotusFlare’s part in this area?
Jin: In serving communication services providers, LotusFlare has used web apps to create their self-service marketplaces so that CSPs can better monetize their advanced network assets. LotusFlare already offers marketplaces as a service to its clients, and our engineers have firsthand experience in implementing the right user experiences successfully.
Magdalena: Getting back to SPAs, what do you see as the advantages and disadvantages of the SPAs?
Jin: I’d identify the following as advantages of using SPAs:
- Client-side routing
- Speed
- Re-usability
- Caching capability
The single-page application is the preferred technology used in many front-end projects. Yet, two clear disadvantages make the single-page application unfit for a user-facing website.
- Slow initial loading
- Search engine optimization (SEO)
Magdalena: Can you explain a little bit more about these disadvantages?
Jin: Many factors could make a SPA slow. For example, huge images, the size of the app, and bundle configuration. On the SPA, the content will be displayed to the client once it loads all necessary files and completes the initiation. Some websites could take a few seconds to display content to the user. A few seconds of loading time may not seem to be an issue. However, research by Google shows 53% of users leave the mobile website if it takes longer than 3 seconds to load the page.
For (SEO), there is no doubt as to the usage and relationship of the search engine and driving traffic to a specific website. The website needs to be visible and be the top result on search engines like Google. The benefits of SEO are:
- Cost saving
- Supporting content marketing
- Growing user base and market share
Most search engines don’t wait for the page to load, they don’t even execute the JavaScript at all. When search engines crawl the SPA website, they will get an empty page without any content if it’s not implemented properly.
Magdalena: Ok, then what have you learned when it comes to addressing these issues?
Jin: Of course, there are solutions to fix the SPA’s slow initial loading and SEO issue. One of the most popular solutions is Server Side Rendering (SSR). Server Side Rendering is a technique to render the request path for a website on the server and send it to the client. Many frameworks can do the SSR for the SPA framework. Some well-known frameworks are:
- Next.js
- Nuxt.js
- Gatsby.js
Magdalena: How can these frameworks be used in a project?
Jin: Here’s a brief description that illustrates how SSR works with the SPA framework.
- The server will generate the HTML for each request.
- As the static web page, you can insert some dynamic data into the responsive HTML file or respond to different HTML files based on a cookie, IP, location, etc.
- After the client side receives the response, it will display the content rendered from the server.
- The hydration step will happen on the client’s side. The web app will be running as SPA afterward.
It’s a simple, yet difficult to master, flow but our implementation has worked well in our customer deployments.
Magdalena: Jin, thanks very much for your insights and your leadership in this important area of development for LotusFlare customers.
