Hello and welcome to our new OutPower tutorial.
In this tutorial we're going to
check the key differences between Traditional Web Applications and
Reactive Web Applications.
without further ado, let's get right to it
Reactive web applications offers what we currently can get on the mobile apps.
But with improvements that facilitate the creation of web and mobile applications.
The key points that make the Traditional Web application differ from the
Reactive Web Application are the following:
On the Traditional Web App our
logic is executed on the server side while on the Reactive Web Application it
can be executed on the client and server-side.
All client-side logic can be
visually module instead of relying only on how to maintain JavaScript.
The flexibility to design client-side actions and server-side actions is the same,
When creating a server-side action from the client-side OutSystems
generates and secures REST API behind the scenes to support the communication
between browser and server
Using only the minimum network bandwidth required
For actual data transfer.
When developing a Traditional Web App we need
to consider it all of our requests are synchronous meaning you do a request
then get a response and so on.
While on the reactive web side we can
trigger several requests and then deal with the response once they are ready
Asynchronous in server communication keeps your apps always responsive,
While an app is executing a server-side action it continues to run and respond to user
input in the browser.
Also the two types of applications work with different types of rendering
On the traditional web we have explicit server-side rendering.
We have to make a server request to refresh the screen or part of the screen.
And on the reactive web we have the client-side rendering what this
means is all UI elements that I immediately when the data that they are
bound to changes.
First thing that should be pointed out,
Is when creating the application
a new library module is available from the picker.
This allows us to build applications with the solid architecture right from the very start.
These libraries can be used in both Reactive and Mobile apps.
The previously known OutSystems UI Mobile is now called OutSystens UI,
This is an important update
to support the single UI framework for all your apps.
But the Traditional Web Application will still use the OutSystems UI web.
With Reactive Web Applications, instead of using preparation, you'll find screen data
directly below the screen.
Screen data can be a mix of aggregates, data actions
And variables.
As before aggregates provide easy access to entities data.
While data actions can be used for more advanced cases like
fetching data from external sources.
All these are executed asynchronously and in parallel,
This will improve your apps user experience, since there is no need
to wait for all the data to arrive before starting to display the page.
In the traditional method we would prepare all of our data in the preparation and
the screen would only render once everything had been executed.
OutSystems added a Fetch property with OnStart and OnDemand
options to screen aggregates and data actions.
Now we can implement patterns such as master/detail with an excellent performance and user experience.
As we spoke before now we can execute client and server actions.
When executing the client actions we can make calls to the server and we can reuse other client actions.
Also when setting a client action as a function we cannot use
server actions in its flow, apart from that they both let us design our logic
in a similar way.
With this new technology OutSystems warns you whenever you create some scalability anti-pattern.
For example when you call Server actions inside a loop,
and do something that might delay the screen rendering or sequentially call server Actions,
OutSystems suggests alternatives for the best performance.
Now all UI elements update immediately when the data that they are bound to changes.
While in Traditional Web Applications we control the update on
the screen with the use of the Ajax refresh.
This implies for us, to change
our tactics when trying to implement screen updates.
Using this little demo let's use a client action to demonstrate the data
changing on the screen, has we mess with it.
Form validations have also changed a bit.
In the Traditional Web Apps we would
have to set client and server, server or none on the button validation.
In Reactive Web Apps it is similar but we are only prompted
with the option for Yes or No, for built-in validation.
Finally WebBlocks...
The biggest difference is that now we can trigger events from the WebBlocks
that allows us to pass information to the parent element.
Otherwise, this would only be possible by means of notify messages triggered from the WebBlock.
Which after a while it can become a bit cumbersome.
Another feature that is worth mentioning is that we can set the WebBlock to react
the on change of an input variable triggering the WebBlock to refresh its content.
That will be all for today,
We hope that with this tutorial you'll be able to
understand a bit better some of the differences between traditional
applications and reactive web applications.
Please join us next time for more OutSystems tutorials.