Creating web pages that work perfectly regardless of external variables (e.g., latency) is equal parts technical know-how and art-form. In this “hands-on” session, we will take a look at how OutSystems can help you build responsively smooth, and beautiful web pages that work as good as they look.

2. Review this (and all attended sessions)
Each review enters
you for a chance to
win a Mavic 2
Drone!

8. | Hands-on with Reactive Web Apps
Hands-on with
Reactive Web
Exercise Introduction and Overview

9. | Change session name in master slide| Hands-on with Reactive Web Apps
@ inmiguel.domingues@outsystems.co
m
/miguelbrazaodomingues
Miguel Domingues
Technical Knowledge Lead | OutSystems
@ injoao.carvalho@outsystems.com /joaomfcarvalho
João Carvalho
Lead Solutions Architect | OutSystems

10. | Hands-on with Reactive Web Apps
New application type: Reactive Web App

11. | Hands-on with Reactive Web Apps
Traditional vs. Reactive Web

12. | Hands-on with Reactive Web Apps
Reactive Web Approach & Technologies

13. | Hands-on with Reactive Web Apps
Reactive Web’s UI is still OutSystems UI

14. | Hands-on with Reactive Web Apps
Two important new client side capabilities:
● Client variables
● Visual modeling of client-side logic
Client-side capabilities

15. | Hands-on with Reactive Web Apps
● Client variables
■ Store client-side UI state as necessary
■ Stored and available across screens
■ Can act like “session” variables
■ Cache small bits of important content
■ Fewer calls to the server are needed
Client-side variables

16. | Hands-on with Reactive Web Apps
● Visual modeling of client-side logic
■ Reduces the need for writing JavaScript
■ Server-side calls still available (server actions)
■ Automatically generates secure REST calls
Client-side logic

17. | Hands-on with Reactive Web Apps
Two important changes to data fetching:
● Data fetching is on the screen level
■ No more Preparation
■ Queries are asynchronous
■ May return data at different times
Data fetching

18. | Hands-on with Reactive Web Apps
Two important changes to data fetching:
● Data fetching is on the screen level
■ No more Preparation
■ Queries are asynchronous
■ May return data at different times
● Timing of queries can be controlled
■ At Start or Only on demand
■ Easier to implement Lazy loading patterns
Data fetching

19. | Hands-on with Reactive Web Apps| Hands-on with Reactive Web Apps
Hands-on Exercise
Overview

20. | Hands-on with Reactive Web Apps
Navigation Flow
Projects Project Detail
Project Members

21. | Hands-on with Reactive Web Apps| Hands-on with Reactive Web Apps
Hands-on Exercise
Let’s do it
https://outsyste.ms/2MIQSPV

23. Review this (and all attended sessions)
Each review enters
you for a chance to
win a Mavic 2
Drone!

29. | Hands-on with Reactive Web Apps
Thank You!
@ inmiguel.domingues@outsystems.com /miguelbrazaodomingues
@ injoao.carvalho@outsystems.com /joaomfcarvalho