You’ve probably heard about reactive web applications by now, the new way of building highly performant and scalable applications that boosts the development experience across web and mobile. You may even have read about their 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 may take from developing with reactive web? 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 may call traditional web. These are what will enable improved performance and allow you to optimize your applications in less time.

Traditional We 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 much in-depth, 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.

Speed and experience
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 before the modern runtime architecture used by reactive web apps, but now let’s see what that really means.

Reactive web apps 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 to 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 in the OutSystems UI website.

What Else Is New in Reactive Web?

Besides the features that we’ve already covered here, and that 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 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.

Data fetching in reactive web apps
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 Is Form Default property, 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 Table Widget was added, along with an accelerator. This way, you can drag an entity to it to create a table with sorting and pagination.

Is Form Default feature in Reactive Web Apps
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.

Library that you can use to build reactive web apps
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 new reactive type of component. 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 web components in the forge
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. If you wish to migrate your apps, 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!