You’ve probably heard about reactive web applications by now, the highly performant and scalable way to build apps with the OutSystems low-code platform 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.
Table of contents:
- The Future of Web Development
- What Else Is New in Reactive Web?
- Quickly Start Building Your Reactive Apps
- Create Great Experiences For Your Users
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.
What’s the Difference Between Traditional Web and 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.
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.
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.
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.
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.
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.
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 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 in this forum post, and help us learn and evolve even further!
