OutSystems Reactive Web Apps — First Impressions
OutSystems (OS) reactive web apps (ReApps) was launched during NextStep 2019 and since them I tried to get be updated with all details. Now it is possible to see the NextStep presentations and watch the courses in the OS learning pages. You can be updated with the main resources available until now reading this post, you only need to follow the links presented here. However, I would like to present something practical to complement what OS has been done for while. So, I tried to evaluate the available materials with some suggestions and I applied ReApps in my current OS system to see the impact of changes. Let's see what happened?
Fast adoption
To get a fast adoption there is a mix of things that could be combined like courses, complementary resources and pratical use. The links and details below will help your learning.
Presentations
NextStep brought a presentation about ReApps and highlights the main difference between traditional web development (this is the name used by OS to refer to the version before ReApps). Now https is the normal standard, there is no preparation, a reinforcement of MVC, asynchronous data fetching, update of screen data without ajax, data fetching on demand, aggregate dependencies, client variables replacing session variables and the last but not the least, the option to create web and mobile apps with a single UI framework. if you have more interest to learn more what is happening in the OS world, check the other NextStep videos out.
Courses
Unfortunately you will find basic development in the OS ReApps courses web site. Those are very different from the ones created by Scott Karabin and Pedro Freire with more detailed information, more useful and complex sample applications. In summary, you will need to research by yourself to be more proficient on ReApps.
Note: the actual course available is here
Supplementary resources
Preview Style guide — the preview style guide is supported by OS and until now I didn't receive from OS any status when the new one based on ReApps will appear. I did some questions about this during the London OutSystems User group meeting but no one had detailed information. The last version(I call last because the new one will be that based on OutSystemsUI of ReApp) will help during the development. The absence of it implies in a search in the css files to check if new variables was added or names changed.
Sketch files — unfortunately there is no mention that they are supported by OS. With Sketch you can create screen prototypes and the final css code for your website. For sure will be cheaper work with Sketch before starting your development and you will solve many problems in advance.
Practical use of ReApps
Usually the business development is different from the theoretical presentation. Business systems usually present more complex scenarios where a new approach is needed. I started migrating my personal productivity improvement system which resulted on the following learnings.
Mobile development: for sure OS learns by itself. During the development of tools for creating mobile apps they realised that was not needed to use preparation on every page and still it is possible to affirm that mobile development is the constraint to keep a continuous software development compatible with any device. So, ReApps is the reorganization of all learned lessons that OS acquired.
Library module: this new module can be created in ReApps. It is the realization of 4 layer canvas pattern adopted by OS and OS platform is growing up toward this concept. Now, imagine you would like to create an audit web block to show at the end of some screens the date/time and name of the person who created and/or updated the data. As it will be common to many screens and there are only parameters associated to it, your natural thinking is to put it on a library module, right? Well, when you try to associate the dependency of user entity from the System module to show the user name, you are blocked because libraries can’t depend on entities from other modules or static entities from System. Similar error will occur when you try to access entities from service modules. The error message that will appear is: “this module is a library. It can only have dependencies on elements from libraries and extensions” or in other words, don’t do that. Library module comes totally pure. You need to set the default theme to have access to the CSS code.
Automatic Get<Entity> access action: If you can’t use the user entity from System module in a library module, at least you could use the getuser() to retrieve the user data, right? Unfortunatelly this premisse is wrong too. From now on the user can only be shared between espaces with the same user provider and beyond that, there is no more standard get access actions to entities. Only static entities can be accessed using the standard get<entity name>(id) action in an expression editor. If you need to acess the user name, now you can use the User_GetName() function. But, to be sincere, I couldn’t use it in an expression into a web block in a library ReApp module.
Global exception: a new module in ReApps doesn’t inherit the global exception from the main application and when you try to enter in a new web page without the authentication an error message will appear.
Screen scaffoldings: ReApps is based on templates screens that came from the previous OS version. OS is always trying to fully implement your 4 layer canvas pattern and the natural way to create an web app is to create the service module to hold the entities and a normal web app module to hold the screens. If you set the entity to “no” read only on the service module, update the references and try to drag it to the UI flow, the scaffolding will not work. The same will occur if you create an entity in the data tab in the UI module and try to drag and drop an entity in the Mainflow UI flow canvas. Definitely screen scaffolding is not available with ReApp.
Note: OS already released the scaffolding option.
Fake preparation: I have a card that shows all main information about a task and I need to call server actions because of the structure you need to create to implement 4 layer canvas. As I can’t access directly the server actions on screens I decided to create a fake preparation to get all calls at once and store the results. I still can't affirm that I have a bottleneck here but I was only allowed to do this because an action can have more than one output. I imagine that complex web blocks will have much more outputs than my actual 5. However, there is a decrease in the number of function calls once you have a central point to use all your data. Another interesting approach would be to create an action to every server action that I call, but I don't think this would be productive.
Remaining considerations:
-It is not possible to reuse old UI code: as copy/paste doesn't apply to reuse traditional components to ReApp, you will need to code everything again.
-Entry widget vanished: entry widget was used to set a "static” link point between other applications and now I will need to research if the links will be updated automatically.
-List : argument line separator vanished. You will need to customize your css to achieve this and I shared a possible solution in this link in the community.
-Expression: escape content vanished and now html element is available.
Conclusion
ReApps can be an opportunity to develop a page and reuse it on many devices what means better productivity at all. However, adopt it at the moment can require more research due to missing of good learning material and complementary resources. The size of the system that will be developed can be an indicator to adopt ReApps. Big legacy systems will need a lot of effort to migrate to ReApps because it is not possible to reuse traditional UI components and new small pilots, as opposite, become a good opportunity to this new "technology". My advice is: use ReApps wisely.
For sure ReApps will request much more time to understand and apply it and OS is expanding the implementation of 4 layer canvas when released the library module. I think that OS could improve more the developers productivity implementing what I call Architectural Scaffolding. If the 4 layer canvas is increasingly being implemented, why there is no a scaffolding that implement it? If you would like to support this idea, go to our community following this idea link and give your like on it.
If you are looking for samples on how to create a ReApp, check this complementary article here.
