We’re proud to announce a whole new way of building highly performant and scalable applications. 

Using client-side development and a single codebase, you can create rich and engaging interfaces with a new type of web application that consolidates the development experience across mobile and web.

A revolutionary way of creating web applications

Reactive web apps give you the best of mobile apps with improvements that make creating web and mobile apps a lot easier. We’ll go into these them further ahead, but first here’s what we’ve brought from mobile to web.

Performance improvements

All UI elements in reactive web apps update immediately when the data they are bound to changes, instantly changing the interface. No more need to use Ajax Refresh; the apps are smart enough to understand what needs to be changed.

Client-side logic

In reactive web apps, all client-side logic can be visually modeled. Hard-to-maintain JavaScript will be a thing of the past. You can use the same logic construct across client and server actions. You have the full flexibility to create any kind of business logic. For client actions in the browser, calling server-side logic is just a drag-and-drop away. OutSystems generates and secures REST APIs behind the scenes to support communication between browser and server, using only the minimum network bandwidth required for the actual data transfer.

Responsiveness

Asynchronism in server communication keeps your apps always responsive. For example, while an app is executing a server-side action, it continues to run and respond to user input in the browser.

Scalability

OutSystems warns you whenever you accidentally create some scalability anti-pattern. For example, when you call a server action inside a loop, do something that might delay screen rendering, or sequentially call server actions, OutSystems suggests alternatives for the best performance of your apps.

A state-of-the-art runtime architecture

Reactive web apps use a modern runtime architecture built on industry standards and best practices taken to the limit. 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. All screens, blocks, and widgets are generated as reusable React components. Secure and fast REST APIs to handle communication are automatically generated from the actions defined in the IDE.

Data fetching

Instead of using Preparation, you’ll find screen data directly below the screen. Screen data is composed of aggregates, data actions, and variables. Aggregates provide easy access to entities’ data, while data actions can be used for more advanced cases, like fetching data from external services. All these are executed asynchronously and in parallel. This will improve your app’s UX, since there is no need to wait for all data to arrive before starting to display the page.

New capabilities introduced with Reactive Web

A Unified OutSystems UI framework

OutSystems UI Mobile is now called OutSystems UI. This is a big update to support the development of reactive web and mobile applications, a single UI framework for all your apps!

See more about the new framework in the OutSystems UI website.

Screen Aggregates and Data Actions scope improvements

We made data fetching straightforward to use in mobile and reactive web apps. Screen Aggregates and Data Actions are now available in the scope of other Screen Aggregates and Data Actions. For example, dropdowns that depend on other dropdowns’ selected values? No problem! Now you will be able to filter any aggregate using the results of another one. The platform will automatically understand the order in which these requests need to be done.

Fetch on Demand

We also added the Fetch property with On Start and On Demand options to Screen Aggregates and Data Actions. Now you can implement patterns such as master/detail with an excellent performance and user experience.

Client Variables

Create Client Variables in Mobile and Reactive Apps. Yes, that’s right. This will be useful to store interface state like a filter or to cache user information that you don’t want to fetch from the server all the time.

Default Buttons

Button widgets in mobile and reactive web apps now have the Is Form Default property, which you can set to Yes and have the App submit the data from the related form when the end-user presses the Enter key.

Table widget with simple Sorting

A new Table Widget comes with an accelerator: drag an Entity to it to create a table with sorting and pagination. Use tables to show data in cells distributed in rows and columns.

Start Index in Screen Aggregates for Pagination

Use the server-side pagination feature of the Screen Aggregates to build faster apps that need to handle large data sets. Enter the Start Index and fetch the number of records you define in Max Records.

Native Dropdown widget

The Dropdown Widget has a new property Options Content, which you can set to Text Only or Custom. Text Only gives a native look and feel of the dropdown lists in your reactive we and mobile apps. Set Options Content property to Custom to build a dropdown with a list of images or other widgets.

Download files

You can drag a Download Tool logic node to your Flow and create a node which, when executed, sends a file for download to the end-user.

New Library module type

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

Reactive in the Forge

In the Forge, you’ll have a new filter for the type of component “Reactive”. These share most of the same underlying technology as the mobile ones so, if you find a mobile component (not requiring native capabilities) that you would like to use in your apps, it is possible to convert it to a reactive component. With the help of the community, we expect the list of available reactive components to grow pretty fast.

Optimized Network Payloads

We improved the efficiency of the data exchange between the server and client-side for reactive web apps, by ensuring the client-side receives only the data it really needs. This is another step in making reactive web apps that focus on client-side development paradigm, even faster and snappier.

Reuse Logic and Data

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

Create awesome experiences for your users

It all boils down to what can you do for your users. You have to experience these new apps to understand how users delight in smooth transitions and fast response times. And all of this without JavaScript, only with easy-to-change visual low-code.

This is quite a revolution, and there is a lot more we intend to do with Reactive Web, but your help is crucial.

Please share your feedback by replying to this post. The good and the bad alike. We’re here to learn and evolve with you.