Outsystems, a power and efficient low code platform which enables the developer to create application of both reactive as well as mobile in less time and efforts. It basically follows drag and drop feature for development of application.
One of the most essential and basic element is screen. Screen for a developer is like a canvas for a painter, no matter how much color they blend without canvas they can’t show their talent, same will go with screens for developer where they can work and show their feature.
As you know how important screen is then it is also very important for you to know about the lifecycle and important events of the screens, so you can ensure the optimal performance, maintainability, and a seamless user experience.
This blog will explore everything you should know about the lifecycle of a screen, screen’s events, stages, and best practices for screen, providing a detailed guide for developers.
What is a Screen Lifecycle
Lifecycles must have clicked something inside your mind, most probably lifecycle of a frog or human. Well Screen lifecycle is not much different, as the words expresses it includes all those events from the moment user navigated to screen.
In other words we can say that a screen lifecycle in Outsystem means the sequence of events which happens from the moment screen is requested by the user to when user exits the screen. Understanding lifecycle of screen helps the developer to decide where they should place data fetching, where they should execute logics and when UI will load for better and more efficient code.
Important Lifecycle Events in OutSystems
Lifecycle have some important events, having clear understanding about these event will help you to decide what logic should be implemented when. In addition to that you can also use the event handlers of the screen provided in Outsystems, efficiently during development.
There are main four event in screen lifecycle, they are as follows :
OnInitialize
As the name suggests this event occurs when the screen is first loaded. In other words when the user navigated to the screen or refreshed a screen this will be the first event. ‘On Initialize ‘ event handlers are mainly used when the developer wants to initial default values to the parameters or local variables and implements the logics which does not require DOM as DOM is not loaded during this event.
OnReady
In this event, the DOM is loaded and data for the aggregates and data actions are started fetching. Other than that the UI widgets of the screen is also displayed. In other words we can say that during this event the screen’s HTML and JavaScript are generated and shown on the screen. During this event the developers are not recommended to write logic including data from database as the data might not be fetched.
This is an implicit phase where the screen’s HTML and JavaScript are generated and displayed. Developers do not explicitly write logic here, but it’s essential for understanding UI behavior.
OnRender
This event fetches the data of aggregate and data actions of the screens and will bind the UI with its respective data and evaluates the expression.
There is another important thing to keep in mind that ‘OnRender’ event is executed after ‘OnReady’ event when the first time screen is loading. After that the ‘OnRender’ event executes everytime the data needs to be fetched again or when data is modified. Due to which developers are not recommended to to refresh the aggregate in ‘OnRender’ event handler as this action can lead to infinite loop because of which the screen will never loaded with the data.
OnDestroy
This event is called when the user exit the screen or when the screen is removed from the memory. This event is useful for implementing the logics which developers wants to execute during the destruction of the screen. This is the last event of any screen lifecycle, as after this screen will be destroyed.
Data Handling Best Practices
Even when we can optimize a lot of things by writing logic in the right screen event handler, there are many practices a developer should keep in mind to make sure the screen is optimized and working efficiently.
Use Aggregates Wisely : While aggregates is one of the trump card in outsystem, as it makes data fetching an effortless job but developers should use aggregates wisely as every time data is refreshed in an aggregate it hits the server.
Leverage Server Actions for Complex Logic : The complex logic takes long time for execution, this could increase the time complexity of the application because of which complex and long logics should be written in server side to not overload the server.
Minimize Client Server Roundtrips : Hitting server for every minimal change will increase the server hit and makes the application slow, so using local variable and client actions are more suitable for use cases where there can occur lot of changes in a very short span.
Paginate Large Data Sets : Developer should make sure to not load a very large dataset at once as it increases the time for loading the screen which can affect overall performance of the application. Instead of that, the developer can use the pagination or lazy loading fetch the data in batches which not only makes the application more efficient but also let the data be more organized.
Use Blocks : Even when screen is very important in Outsystems, developers should use blocks rather than screen for lighter and easy to maintain code, as screen is more billable and takes larger spaces then the blocks. Blocks in Outsystems is same as the function in core coding, it not only makes the code cleaner, it can also be used multiple times.
Key Phases in the Screen Lifecycle
There are mainly five phases from which every screen go through, they are important makes sure the smooth interaction of user with screen. These key phases are explained in detail below for your better understanding.
1. Screen Initialization
This is the first phase of the screen. It starts the moment user request for the screen, where screen starts loading DOM (Document Object Module) so that further data can be loaded.
Screen initialization is the stage where you can assign the default values to your local variables and input and output parameters and can implement all the logics which does not require DOM as it is not loaded completely. You can do that by using the ‘On Initialize ‘ event handler of the screen.
When the ‘On Initialize’ event handler ends, the Aggregate and Data Action of default screen starts to load simultaneously.
2. Rendering the Screen
In this phase the DOM of the screen is ready and displays the widgets of the screen while binding all the UI components with the data which is fetched at the same time it also starts evaluating expressions for the screen, but it is recommended not to access data at this time since maybe data wasn’t fetched yet.
This phases includes both ‘On Ready’ and ‘On Render’ events but the main difference between them is that ‘On Ready’ only executes once, after the screen is initialized. On the other hand ‘On Render’ executes everytime any UI widget, data or expression is modified during the lifecycle of screen.
3. User Interaction
Once the screen is ready with all the UI and data, then the role of the users came as that’s the time when user can interacts with the screen. Then they can do anything they want from clicking buttons to trigger client and server actions or just filling the form these all things will come under this phase.
But every time the user makes a change the render event will run and implement the logic inside the ‘On Render’ event handler, if you created a logic there.
4. Screen Actions and Events
These are the custom logic blocks which is the response to the user interaction. In this phase the blocks of the screen will implement the lifecycle of the block.
Lifecycle of block is not much different, it just have a different event named as ‘On Parameter Change’ by which every time any input parameter changes and executes inside the event handler.
5. Screen Refresh and Navigation
This phase is based on the interaction of the user, as it can occur when the user is made a change because of which whole screen needs to be refreshed or when the user navigated to another screen.
While during both either refresh or navigation to another screen, complete lifecycle of the screen implements as refreshing is considered as again navigating to the same page.
Conclusion
Mastering the screen lifecycle in Outsystems is very important for developing an efficient and user-friendly experience as it helps the developer to create responsive, scalable and maintainable applications. But getting through every phase and understanding its unique importance will make it easier for the developer to identify during which phase the what will be suitable to implement to enhance the experience of the user and optimize app performance.
Either developers is creating a responsive web application or mobile application, using the screen lifecycle, it’s event handlers and best practices will help them to write a more cleaner, more efficient and user-friendly apps.
Wants to know about other Outsystems important topics with detailed and knowledgeable article then subscribe our newsletter, where we upload a new blog every week for you to be guided and grow with us.
You can visit Outsystem’s official website for many more important topics and regular updates.
Happy developing!
