Today I want to dive deeper in the internals of the Outsystems frontend interface. We will learn about React and how its mental models are affecting the way you develop.
Switch to client side
A few years ago Outsystems introduced Reactive, successor of it’s Traditional Web app flavour. The latter is powered by server sided rendering, whereas Reactive is client side. This means that the JavaScript is heavily responsible for managing and rendering the data shown on the page. In most cases this means a major improvement in the perceived performance. Let’s consider a list with a delete function. When a user clicks the trash button in Traditional Web, the server is notified and executes the action related to it. After that the list is rebuild and rendered. Then the rendered html is sent to the user, and the page updated through an AJAX refresh. As you can see, every action needs a round trip to the server. Reactive is different. Since the HTML is rendered by the client, it’s able to update the page while the request is sent to the server. You probably can see why this will feel faster to the user.
Under the hood
Reactive is based on React, a popular JavaScript library. In 2021, React took over JQuery as most used library (according to Statista). Fun fact, JQuery is used quite a lot in Traditional web, but has become the dinosaur in web development.
Shared concepts
Since Reactive is built on React, it shares most of its concepts. I will name of few:
Page life cycle
Reactive follows the same life cycle stages when loading and interacting with a page. These life cycles are excellently explained here. You are able to define actions that are run after a lifecycle occurred. However, if you define an action for the wrong life cycle event, you may exactly slow down the loading of your page. Misunderstanding life cycles is one of the major mistakes I see with fellow developers. So stick with the purposes as defined in the Outsystems documentation.
Concurrent data retrieval
I got to be honest, concurrency is not exclusive to React. But since JavaScript is able to perform multiple tasks at once, data on your page is loaded simultaneously. This can mean a major performance gain. Instead of waiting for every query to finish, we can run them all at once.
Immediate page updates
React uses a mechanism called VirtualDOM, where it compares what’s changed when a page is updated. Only the parts that have been changed are rendered. This avoids costly re-renders of your whole page. As a Outsystems developer moving from Traditional Web to Reactive, you will notice the absence of the Refresh node in actions. Due to Reacts client side rendering this is simple not needed anymore.
Events in web blocks
Outsystems follows the one-way data binding concept, like React. Simply put, it means that data in your interface flows from top to bottom. I won’t fully explain this topic, but the need for events in web blocks springs from this concept.
Becoming a better developer
Since Outsystems relies so much on React, understanding its concepts will help you become a better developer. It will help you understand why your code slows down loading of your page. Or why a hacker was able to retrieve a secret code that was stored in the code client side. And why you should use Aggregates instead of Data Actions. Understanding the bits and pieces under the hood will prevent you from developing bad habits.