On Reactive Web Applications, Progressive Web Applications and Responsive Web Design
Marketeers (and developers alike) are all the time coming up with new (fancy) acronyms, generating buzz (read confusion) and promoting it as the New Cool Thing that will revolutionize everything… Then eventually the terms starts fading in speech and finally in memory, it becomes démodé in the marketing speech, however many times these concepts become a commodity.
… the New Cool Thing that will revolutionize everything…
This article aims to define, explain, and finally to clarify some of the terms (concepts) that are currently in vogue and relate with some others that are currently démodé.
Allow me to start with a story… Back in 2013, I did my first public presentation in an event [1]. I was obviously nervous, and I did several (against my will — Thank you Miguel Baltazar) bad and super bad reversal (we kind of gave up)… However, the presentation ran smoothly, without hiccups or presentation notes… I had a blast!
And back then, in this exactly presentation, I was arguing for the importance of using RWD (yet another acronym), that was in vogue at the time, for creating applications, while showing the problems of hybrid and native approaches.
I feel that RWD is nowadays démodé, even though, it became a true commodity (read — a must-have) for today’s web applications.
So let’s start with it…
What is RWD?
RWD — Responsive Web Design
: Is an approach to web design that makes web pages render well on a variety of devices and screen sizes. [2]
Characteristics
- Usage of fluid grid — making page sizing in relative units.
- Usage of flexible images — sized in relative units.
- Usage of Media queries — to use different CSS style rules based on characteristics of the device.
- Making the layouts automatically adjust and adapt to any device screen size
Interesting fact: the approach was firstly used in the Audi.com website, back in 2001. But the term was only coined by Ethan Marcotte in May 2010.
Read more about RWD in this knowledge hub.
Responsive Web Design lead to starting conceiving web applications that work every devices and screen-size
The development and usage of this design concept inevitably brought to the spotlight the limitations of the browsers, such as performance, availability, and access to peripheral sensors (e.g. Geo Location, audio capture, …).
Then with a new version of HTML — HTML5 — being brewed (January 2008) and then released as a W3C Recommendation in October 2014, there was finally the space and the technology to think further and deeper about the future of the Web experience — so PWA concept was born…
What is PWA?
PWA — Progressive Web App
: type of application software delivered through the web, designed to work on any browser that is compliant with web standards. As with other cross-platform solutions, the goal is to help developers build cross-platform apps more easily than they would with native apps [3]
Characteristics
- Progressive — Works for every user, regardless of browser choice, by using progressive enhancement principles.
- Responsive — Fits any form factor: desktop, mobile, tablet.
- Faster after initial loading — After the initial loading has finished, the same content and page elements do not have to be re-downloaded each time.
- Connectivity independent — allows offline uses, or on low-quality networks.
- App-like — Feels like an app to the user with app-style interactions and navigation.
- Fresh — Always up-to-date due to the service worker update process.
- Safe — Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with.
- Discoverable — Identifiable as an “application” by manifest.json and service worker registration, and discoverable by search engines.
- Re-engageable — Ability to use push notifications to maintain engagement with the user.
- Installable — Provides home screen icons without the use of an App Store.
- Linkable — Can easily be shared via a URL, and does not require complex installation.
Interesting fact: the term and characteristics were coined and defined by Alex Russel and Frances Berriman over dinner in June 2015. [4]
Ultimately, with the HTML5 standard, implementing a PWA becomes possible.
Progressive Web App, aim to bring the experience of the native applications into the web applications without the hassel of the appstores and platform-specific development
So… Does this mean that RWA followed PWA? Is RWA a technology?
The answer is neither yes or no. Let’s continue our definitions exercise, before answering these questions.
What is RWA?
RWA — Reactive Web App
: Reactive applications are built on top of components that communicate asynchronously as they react to user and system events. As a result, they become scalable, responsive, and fault-tolerant. [5]
Characteristics
As described by Manuel Bernhardt in his book Reactive Web Applications [6]
- Responsive — React to users and will satisfy the user’s expectations in terms of availability and real-time behavior.
- Scalable — React to load and must be able to make use of increased computational capacity when necessary. This means it must be able to make efficient use of the hardware on a single machine.
- Resilient — React to failure to meet the demand for continuous availability.
- Event-driven — React to events in the applications based on asynchronous communication can help you achieve the previously listed traits.
Interesting fact: there’s also The Reactive Manifest [7] published in September 2014, where the concept of Reactive Systems is defined.
Reactive Web App is the pinnacle of what all web apps should be…
Reactive Web Apps are only possible with the usage of the design principles defined by Responsive Web Design, and with the features that HTML5 standard brought. However, a Reactive Web App might only use a subset of the features that a Progressive Web App uses.
And Reactive Web Design as described by Owen Campbell-Moore in his article Reactive Web Design: The secret to building web apps that feel amazing[8], is the visual design approach required for this type of application.
Final thoughts
So how do these concepts relate in terms of time and how do they intersect?
Here’s a small timeline, for the appearance of each of the concepts:
Responsive Web Design, lead to starting conceiving web applications that display and work correctly in an ever-growing landscape of devices and screen-sizes but also showed the limitations of the browser.
With the creation of HTML5 standard, browsers finally had a standard to follow to implement new features, that solved some of the limitations found.
This advent (yes HTML5 was an advent IMO) enabled the developers to take the web-apps experience closer to the one in the native apps, and to define what that meant, Progressive Web App concept appeared, directing developers to what is a bringing a web-app experience closer the native one, while avoiding the hassle of the app stores and platform-specific development.
Finally, Reactive Web App is a way to create an application that is Responsive, Scalable, Resilient and Event-Driven. And this concept could be the pinnacle of web-apps, only possible because of RWD and PWA approaches.
If you have thoughts or you disagree, feel free to reach me out on twitter @techrug, and if you enjoyed this please give it a 👏!
P.s. — In my next article, I’ll discuss OutSystems Reactive Web Apps and what it means.
References
[1] OutSystems NextStep 2013 in Lisbon: https://www.slideshare.net/rubengoncalves/dos-and-donts-on-the-road-to-mobility
[2] https://en.wikipedia.org/wiki/Responsive_web_design
[3] https://en.wikipedia.org/wiki/Progressive_web_application
[4] https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/
[5] https://www.manning.com/books/reactive-web-applications
[6] https://livebook.manning.com/book/reactive-web-applications/chapter-1/point-6099-24-28-0
[7] https://www.reactivemanifesto.org/
[8] https://medium.com/@owencm/reactive-web-design-the-secret-to-building-web-apps-that-feel-amazing-b5cbfe9b7c50
