Skip to main content





UI migration considerations

  • Edit
    Collaborate with us
    Edit this page on GitHub
  • 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.

    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.

    Silk UI

    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.

    Have a look at the OutSystems UI website to see the single UI framework for Reactive Web Apps. You can also check the OutSystems UI Style Guide Theme component in the OutSystems Forge.

    Continue to UI Flow elements.

    Documents in this section:

    • Was this article helpful?