The User Interface of your app is one of the first things to consider when planning a migration from a Traditional App to a Reactive Web App.
There are different scenarios to start from.
- Traditional App using OutSystems UI Web
- Traditional App using Silk UI
- Traditional App using London UI or older
Find below the recommended approaches to each of these scenarios.
OutSystems UI Web
OutSystems UI Web uses the same styles and user interface of OutSystems UI, used in Reactive Web Apps. You need to consider the CSS customization you have created and reproduce it in the new app. This means you need to implement the styles and Theme from your style guide and recreate them using a Reactive Web style guide. The CSS classes and UI patterns are almost the same.
When migrating an app created with the patterns of the Silk UI framework, you need to recreate the customizations you had, like all the styles of your personal style guide, and consider all the overridden classes.
For information about migrating from Silk UI to OutSystems UI, read Migrating UI of the Silk Web applications to OutSystems UI Framework.
London UI or older
When you plan to migrate an app using London UI or older UIs, you need to change the layouts and the Themes used and recreate all your customizations from scratch, based on your style guide. There are two different approaches to this:
Using a Reactive Web App, a Reactive style guide, and customize only what you need for matching your current style guide - this option grants you the opportunity to build a cleaner style guide and to get rid of what's old or not used. It offers you also the advantage of having CSS variables that let you customize your styles in a few lines of code, and these are automatically used by all the Patterns and style guide consistently.
For more information about CSS see Cascading Style Sheets.
Analyzing existing customizations, like styles, colors, fonts, and logo, and recreating them in the Reactive Web App - meaning there's a great effort involved.
Continue to UI Flow elements.
Documents in this section:
- Introduction to migrating Traditional Web to Reactive Web Apps
- Differences to consider between Traditional and Reactive Web Apps
- Suggested stages of Traditional to Reactive Web App migration
- Traditional to Reactive Web App migration reference