Application Modernization Industry Quick Guides
Application modernization enables you to optimize business processes and transform the way you do business today, and in the future. Our industry experts have collected the latest application modernization trends impacting the automotive, financial services, healthcare, and manufacturing verticals.
When the web was young, it was simple, it was stateless. It was originally envisioned by its creators as a set of hypertext documents linked together. Then, somebody added a forms tag and the era of web applications has begun.
Nowadays, web applications could be as complex as needed. Pretty much any kind of application could be implemented as web application. But advanced functionality requires advanced application architecture and design. There are two corner-stone design patterns for web applications – multi page web applications (MPA) and single page web applications (SPA).
MPA is traditional kind of web applications. Every time application needs to submit user input to the web server or needs to display new data to user, it have to request a new page from the server and then render it in the web browser. This approach works fine for simple pages, but when the application have a rich user interface, then pages may become very complex and loaded with a lot of data. Generating complex web pages on the server, transmitting them over the internet and rendering in the browser takes time and thus degrades user experience, because user can’t continue working with application while it’s in process of serving a new page. In the beginning of 2000s MPA were improved with AJAX technology, which allows to refresh parts of the page without reloading the whole page. That definitely makes user experience better, but it adds complexity to the page.
SPAs have the following advantages over MPAs:
– faster page loading times. Because page rendering happen on the client, less data travels over the wire and thus page loads faster. This is especially noticeable over slower networks, like mobile.
– improved user experience. Because it’s possible to data from the server in background, the application is always available for the user.
– simplified and streamlined development. No need to write code to render pages on the server.
– decoupling of frontend and backend development. Because backend is no longer responsible for rendering UI, UI development could be handled without dependency from backend development.
– simplified mobile development. Same backend could be used for web application and for a native mobile application.
– better unit-test-ability of UI and backend code
SPA have the following disadvantages to MPAs:
– UI code is not compiled, so it’s somewhat harder to debug and also it’s exposed to potential malicious user
In my experience I often see MPA and SPA patterns mixed together, so we have a MPA application (as a safer and more traditional pattern) where one of the pages is implemented as SPA. This hybrid approach is usually doesn’t provide benefits of either MPA not SPA and combines disadvantages of each other.
The hybrid application:
– loads pages slowly because both pre-renderd markup AND heavy client frameworks are loaded to the client
– have complicated development environment, because developer have to use TWO development frameworks (usually both client MVVM and server-side MVC frameworks)
– tightly coupled frontend and backend development
– same backend can’t be used from mobile application
– UI unit testing is complicated
Considering all of the above I’d like to warn against mixing MPA and SPA approaches in the same application. Each pattern is good for its use case, but mixing them together doesn’t produce an optimal result.