You’ve probably heard about reactive web applications by now, the highly performant and scalable way to build apps that boost the development experience across web and mobile. It is likely that you have even experienced this state-of-the-art web architecture and the single development experience.

But technically, what does it all mean? What are the concrete benefits that you get from developing with reactive web? And if you have an existing portfolio, can you convert your traditional web apps to reactive? (Spoiler: You can. Listen to our Tech Talk here.) That’s what this post is all about, as I’ll answer a few of the most asked questions regarding this upgrade to web and mobile development.

The Future of Web Development

There’s a set of main benefits in using reactive web when compared with what we can call traditional web. These are what will enable improved performance and allow you to optimize your apps in less time.

Traditional vs Reactive Web
What changed from traditional web to reactive web.

To put it simply, there are three main characteristics: server-side and client-side logic, asynchronous data fetching, and reactive client-side rendering.

What you can notice right away, and without needing to dig too deep, are the improvements in performance. Since all UI elements in reactive web update immediately, you won’t need to use Ajax Refresh anymore. The apps automatically understand what widgets need to be updated when data changes.

Experience and time relation
Speed brings user delight.

And since all client-side logic can be visually modeled, you won’t have to deal with hard-to-maintain JavaScript anymore; optimized JavaScript will be automatically created for you. OutSystems is also generating and securing REST APIs behind the scenes to support communication between browser and server, using the minimum network bandwidth required for the data transfer.

Your apps will also be more responsive and scalable. This means that they’ll continue to run and respond to user input in the browser when executing a server-side action, and you’ll get a warning if you accidentally create patterns that are not scalable. This way, you can correct and improve them right away.

State-of-the-Art Web Architecture

We’ve mentioned the modern runtime architecture used by reactive web apps before, but now let’s see what that really means.

Reactive Web App Architecture
A future-proof architecture.

With this new architecture, most code and resources are cached in the browser, eliminating the communication overhead for the majority of user interactions. The UI is rendered in the client-side, and all screens, blocks, and widgets are generated as reusable React components.

With reactive web, we’ve also made some significant changes to our UI frameworks. OutSystems UI Mobile has been renamed OutSystems UI, and has become the single UI framework that supports the development of all reactive web and mobile applications. You can see more about this new framework on the OutSystems UI website.

What Else Is New in Reactive Web?

Besides the features that we’ve already covered here, and which are commonly seen right next to the definition of reactive web, there are many more improvements that are no less important.

Data fetching is now easier to use in mobile and reactive web apps, as Screen Aggregates and Data Actions are now available in the scope of other Screen Aggregates and Data Actions. The Fetch property was also added with On Start and On Demand options, so that you can implement more complex patterns with less code.

Screen aggregates in reactive web
Screen Aggregates are now more powerful and can be combined.

Fetching from the server can also be limited to a minimum by creating Client Variables to store interface state like a filter or to cache user information.

Further Improvements

Regarding utility upgrades, you can expect button widgets with the property Is Form Default, which can be set to Yes to have the application submit the data from the related form when the end-user presses the Enter key. Additionally, a new Tablet Widget was added, along with an accelerator. This way, you can drag an entity to it to create a table with sorting and pagination.

Header Cell
A new table widget with sorting and pagination.

The Dropdown widget also has a new property - Options Content -, which you can set to Text Only or Custom. The first option will give a native look and feel of the dropdown lists in your reactive and mobile apps; the second is used to build a dropdown with a list of images or other widgets.

You’ll also be able to improve your logic with the Download Tool logic node that can be added to your flow to create a node that, when executed, sends a file for download to the end-user.

Quickly Start Building Your Reactive Apps

Start building great applications with a robust architecture right from the start. Take advantage of the new Library module that will guide you through the process of laying down the building blocks of your applications. Libraries can be used in both reactive and mobile apps.

Libraries
Libraries can be used in reactive and mobile.

When it comes to building the screens of your application, you’ll be thrilled to know that with scaffolding in reactive web you can just drag an entity to any UI flow. Two new screens will then be added, completed with working actions and validations — all ready to publish! Also, you can now easily populate menus by merely dragging your screens to the menu block.

In the Forge, you can expect to see a reactive type of component, too. These are similar to the mobile ones, and if you find a mobile component that you would like to use in your apps, and it doesn’t require native capabilities, you can convert it to a reactive component quickly using a simple menu option.

Reactive Forge components
Reactive Forge components can be shared across channels.

Reactive blocks, themes, and scripts can be shared by both mobile and reactive. This means that you will have much less work when delivering consistent user experiences across channels.

If you have an existing OutSystems traditional web application, you’ll be able to reuse their entities and server actions. All your backend logic, data, and services can be used across all channels.

However, the interface architecture is so different that you won’t be able to convert everything automatically. You can listen to this Tech Talk to delve deeper into converting your existing portfolio to reactive web, or consider following the introduction into migrating traditional web to reactive web apps guide in our documentation.

Create Great Experiences For Your Users

It all comes down to what you can do for your users. You have to experience this new way of developing applications to understand how users delight with smooth transitions and fast response times. And all of this only with easy-to-change visual low code!

This is a revolution, changing the way you get your apps out there, and there is still a lot more we intend to do with reactive web. You can share your feedback here, and help us learn and evolve even further!