The surprising power of web apps

The new idea

A new idea is in the air. You would like to launch an app for your company's customers that allows users to access your new service from anywhere. It should not matter whether someone is in a big city with LTE or sitting on a train that is just going through a tunnel.

Of course this app should be available for Android as well as iOS, because you have to be reachable for every one of your customers. At the same time you need a web version of the application, because users want to use the new service on their laptop or desktop. Nevertheless, all systems must convey a consistent look and feel.

Instead of developing three different versions at high cost, web applications are used.

The beginnings of the web

If you rewind to the turn of the millennium, you will notice that the Internet looks different than today. Websites are static documents, similar to books in a library. Written some time ago and now unchangeable. Users consume without interacting. The highest of feelings is a contact form where users can submit their request in writing. Interactions such as navigation always follow the scheme "click; wait for modem to load new page; read".

The revolution of the web

In 2004, a trend started that was laughed at by many, but revolutionized the web:  Web 2.0

What are the principles underlying "Web 2.0"?

• The Web as a platform for applications and services
• User becomes a participant (keyword "Join-in Web")
• Social interaction between users

The "Join-in web" is created.

The user is no longer just a silent reader but a participant in a large group of like-minded people. Increasingly, the functionality is displayed directly in the browser. A click no longer leads to a new page, but opens a dialogue or starts an animation that reveals further content. Comment fields, guest books and GIFs shape the web pages and enable the user to become part of something. Something that he or she cannot really understand at that time.

Development is gaining momentum The existing and used technologies adapt to these changing requirements. Browsers can now handle images and videos better. Resourceful developers join forces and publish tools that make the implementation of interactive elements easier and more consistent. The result is MooTools, jQuery and later Angular, React, Vue and many more libraries and frameworks that try to increase the efficiency of frontend developers.

The first "Realtime" applications

To read new comments, the page does not need to be reloaded anymore. Instead, new comments pop up at the user's computer the moment another user clicks "send". So it is now possible to build applications that could be called and used on-demand by a large number of users. Even back then, there was no need to worry about how updates or new versions would reach users - they were just there when the page was called up.

Controlled access to their device

Until now, the applications were always "locked in". It quickly became clear that unconditional access to the visitor's system was not a good idea. With the increasing possibilities in the implementation of websites, the risk of misuse also increases. To counteract this, browser developers at Microsoft, Google, Mozilla or Apple are designing appropriate concepts.

How to control access

Clearly defined interfaces were offered, which always trigger a user request when used. This request ensures that the user really wants to allow certain functions of his hardware. For this reason, pop-ups appear on more and more websites asking the user whether his microphone, device location, camera, etc. may be used.

Browsers remember what you do

In addition to access to hardware functionality, it is now also possible to store data on the device. The browser could therefore remember which data the user had entered into a form and could display this again on the next visit to continue editing. Nevertheless, the user always needed a standing internet connection to initially load the page. Afterwards, stored data could be accessed without having to load them from a server.

The web leaves the browser

The extremely low barriers to entry ensure that web technologies are quickly picked up by both professional developers and hobbyists to implement simple web presences or more complex applications. As a result, JavaScript (the programming language of the Web) is now one of the most widely used programming languages worldwide. Due to the extremely good offer of web developers, the conclusion is obvious that these technologies should not only be used for websites in the classical sense. More and more apps and desktop applications rely on web standards that are embedded in a native application using WebViews.

Where are Web technologies hiding

For example, the Spotify desktop application (proprietary development - source), parts of the Instagram App on iOS and Android (React Native - source) or the chat applications Micrsoft Teams and Slack (Electron applications) are developed with web technologies without the user noticing any difference to classic applications.

Apps directly from the browser

The latest versions of current browsers blur the line between website and app even more.

Progressive Web Applications (PWA`s)

Under the name "Progressive Web Applications", websites are developed that can hardly be distinguished from native applications: After repeated visits, the user is asked if he wants to add the application to his home screen. From this moment on, the website "lives" among the other native apps the user has installed.

Using Progressive Web Applications (PWA`s) offline

When you use the new shortcut on the Home screen, the browser starts in a mode that hides the address bar and other UI elements typical of the browser. The user therefore does not notice that they opened a link to a Web page. Furthermore, these PWAs can also be opened without a running Internet connection. Features such as sending chat messages are of course not possible offline, but it is possible to retrieve data stored offline and edit it locally to synchronize it with the server at a later time.

Web applications do not only interact on request

Developers even have the option of incorporating push notifications into their web applications. These are sent from a server to the browser, which triggers the notification on the mobile device, even if the Web page is not currently open.

The limits of technology

Despite the constant development of web standards, there are certain limitations that prevent a generally valid recommendation for the development of web applications. The strong security precautions of browsers ensure that the user's file system cannot be accessed directly from the application (until soon - Native File System API).

Disadvantages of web technologies

Another disadvantage of using web technologies is the resources required. The browser is a relatively heavyweight program. So if an application is to be developed for systems with severe resource limitations, which are additionally equipped with large amounts of data or very complex interfaces, a native application should be used.

Summary: What web applications can do today

The use of web technologies is often the right choice to arrive at an efficient solution that can be continued by many developers. Besides normal interactions via mouse or touch, complex animations, access to sensors or hardware of the device (camera, microphone) are no longer a problem. On modern end devices, users can even install the website so that it can then be used as a native app with full offline functionality.

How exactly the interfaces can be used and what you have to pay attention to so that the application also feels native will be the subject of a later article.