Visual webapps

Geschreven door Giuseppe Maggiore

Gepubliceerd op

Since the dawn of the modern web, the main goal of a website was to show data coming from a server in the form of passive web pages. You would (and still do!) download a webpage, read it, and eventually submit a single interaction such as submitting a form. The exchange of information was slow by design, and mostly focused on consuming content. We can see traces of this in the HTTP protocol that still powers most of the web: it is optimized for fragmented interactions. Even the fact that in many cases a new connection is opened towards the server for each new request to a page suggests an underlying assumption: communication between client and server will not be continuous, but rather always initiated by the client (and thus as a response to an explicit end-user action).

This has led to a web where websites mostly feature slow, rather passive interactions. The coming of AJAX first and then Single Page Applications (SPAs) has partially changed this. Thanks to modern technologies such as React and TypeScript, end-users can perform actions that require partial reloads of a page instead of full reloads, leading to more granular visual changes that give an impression of a smoother, richer exchange of information between client and server. Even though interactions are still all initiated by the end-user, thanks to the smaller nature of these updates we can have more frequent exchanges between client and server, thereby increasing the density of interactions.

Still, we can do better. A recent innovation in modern web development are websockets as an alternative to the HTTP protocol. Websockets enable a 2-way flow of communication by allowing the server to push messages to connected clients, thereby offering a rich flow of information proactively coming to the client without waiting for the end-user to interact with the platform. Websockets are supported by many languages and framework, but they are so important that Microsoft published a wrapper, SignalR, that improves websockets and significantly facilitates their use in ASP .Net and React applications. Thanks to SignalR, it is possible to build all sorts of richly interactive applications such as self-updating dashboards, monitoring systems, maps with realtime moving markers, notifications, and much more.

Deze video kun je alleen bekijken als je de cookies accepteert. Meer informatie over cookies.

A typical example of this is next-level chat. Thanks to SignalR we can create a realtime chat that seamlessly integrates in our web application. What does seamlessly integrate mean though? A web application has a datamodel storing all sorts of information about business objects, running processes, etc. By connecting a real-time chat to some specific objects both visually and in the data model, we create the possibility to not only let users chat, but also to group users together based on the objects they interact with.

For example, in an e-learning application we could automatically create a virtual chatroom around each question of a questionnaire so that people can chat and be notified in realtime about that specific question, as well as see old conversations on that same question from past users. As another example, in a patient community platform we could have a realtime chat around specific informative articles about treatments between specialists and patients, so that the chat is focused on a specific topic and thus gathers users interested in that topic in a natural way.

The possibilities of real-time 2-way communications are endless, and they all boil down to creating a richer, contextual interaction between (end-)users and the content of a web application so that conversions as well as engagement are increased in a natural way. What an awesome opportunity!

At Hoppinger we do love a challenge. Would you like to explore opportunities to bring your web application to life via real-time 2-way communication and websockets? Drop us a line!

Mis niets

Schrijf je in voor onze nieuwsbrief en laat ons jouw gids zijn in een complexe digitale wereld.