In a world where web interactions can occur on any device, reactive design makes it simple to deliver next-generation software with lightning-fast performance for users – all while saving developers tons of development time by only developing the front-end once. And OutSystems makes the development of reactive web apps even simpler.

If you’re just starting to navigate through this new world of reactive web, this blog post is for you. Here I’ll share some of the best practices you should know when developing reactive web apps with OutSystems.

This blog post is based on my session at OutSystems NextStep conference from last year, so for the full presentation watch the video below.


When to Use Reactive Web Apps

Imagine you need to create an expenses approval app supported by workflows, email approvals, providing reports, and available for different offices in your company around the world. Employees will most likely access it through their desktops, but may also access it through mobile if needed.

Requirements list for expenses approval app  

Based on those requirements, you need to choose what type of app and which distribution channel is best. In OutSystems, you have three options:

  • Reactive web app: This is an app with a responsive interface that runs in the browser, displaying a user experience adapted to all kinds of devices and screen sizes. You can interact with the device's features and capabilities by extending the app scope with HTML5 and JavaScript. You only need a browser to run it. This type of app is mostly used to display high volumes of data like dashboards and tables, and is crucial when targeting web and responsive apps.
  • Mobile app: A mobile app is basically a native app shell developed using Apache Cordova that is UI-optimized for mobile. It can access device capabilities and plugins, it can work offline, and it has data cache features thanks to the device's local storage. The developed code is cross-platform, which means you only need to develop it once to have it work on all platforms (iOS and Android). You can generate apps and then distribute them in the stores or directly to the users.
  • PWA: PWAs are optimized versions of web pages that you can store in your phone and access through a browser. This way, you don’t have to deal with the inconvenience of an app store, enabling you to go to market faster. You can access the device's capabilities, but you can only use HTML5 to do it.

Going back to the example above, the requirements are email, workflows, and multiple devices, so the natural choice is a reactive web app as our flavor to create it.

Best Practices When Building Reactive Web Apps

Let’s look at a few best practices and tips and tricks that will help you take the most of reactive web in OutSystems.

1. Login & Menu - Theme

Every application should have a base theme.

Start by thinking about the purpose of the app you’ll create. For all those options, you’ll have the OutSystems UI as the base layer. You’ll then apply the corporate style, and if the apps are completely independent you can put the menu and login directly on them. If you’re developing intranet apps, it’s a good idea to keep the login and intranet theme while giving each app its own menu.

Different apps can then share the same users, but present different menus and contents. If you’re developing a portal, both menu and login should be kept in the portal theme to be shared across all portal apps.

Best practices for reactive web apps 1: Themes architecture 

2. Menu Blocks

Reactive web apps let you replace static submenus with a reactive list. You can also fetch the menu entity on demand. This lets you validate the roles properly on the server-side so you can load only the items that should be available to the logged-in user. This helps you avoid insecure validations on the client side.

In the “OnInitialize” handler, load the menu and define your caching strategy so that you don’t have to refresh the menu multiple times unnecessarily.

Best practices for reactive web apps 2: Fetching the menu entity 

3. Incorporate Email Flows

Because email blocks weren’t available in reactive web design before Platform Server 11.12.0, a workaround was to use a traditional web application to define and compose email templates, and then expose the server action to trigger the email.

With the release of Platform Server 11.12.0, you can now activate the Technical Preview feature Emails in Mobile and Reactive Web Apps to create, compose, and send emails in your Mobile and Reactive Web apps.

4. Use Pagination in Table Records

When using lists, infinite scroll refreshes the list with new records as soon as the user reaches the end; this is especially useful for performance on mobile devices. However, if you’re working with roles, you may only want to retrieve small portions of data at a time to improve performance.

Create a pagination block from the OutSystems UI and use “StartIndex” to determine where to start the records for each role and “MaxRecords” to define the maximum amount of records to display for each role.

In addition, set the “OnPaginationNavigate” handler to refresh the data using these updated variables when the user clicks on the pagination widget.

Best practices for reactive web apps 4: Using pagination in table records 

5. Enable Pagination with Aggregates

By setting the same variables that you use in the Pagination widget, these values will be reflected directly in the database and the query will only affect the data you want to reach.

It’s also possible to replicate the pagination behaviour in advanced SQL, but you need to make some adjustments in your query to reflect that.

Best practices for reactive web apps 5: Enabling pagination with aggregates 

6. Create Lists Inside of Lists

If you have blocks inside of list items, a large list in reactive design can run the query several times on the server despite the fact that you already have all the data you need on the first screen.

To avoid repeat server calls, pass through the “Input Parameters” desired by the child list as a “Value” and then reuse as needed.

Best practices for reactive web apps 6: Creating lists inside of lists 

7. Format Reusable Popups

Reactive web design creates reusable popups to help make the process more efficient.

To use it, drag the popup onto your screen and set the variables. You can use several popup instances on the same screen, or you can use blocks to create each popup individually.

Use custom classes to apply different sizes and styles as needed. Use the “OnParametersChanged”' handle to trigger an event whenever a parameter from the block has been changed.

Best practices for reactive web apps 7: Creating format reusable popups 

8. Protect Writes and Reads

One of the most sensitive security considerations for reactive apps is writes and reads. The more you can centralize security, the easier it will be to ensure both operations are protected.

Put security logic in CRUD (Create, Read, Update, Delete) to ensure that all database writes are protected. To protect reads, use GetUserId() inside aggregates’ filters to ensure the only data the user can access comes to the client-side. Check out this article for more advice on how to secure reactive apps.

Ready to Start Thinking Reactive?

Hope you find these tips useful! If you’re looking for more sessions like this, check out last year's OutSystems Developer Conference.