Scalable

Front-End Architecture
Topics

● Introduction
● Use Silk UI Mobile as a starting point
● The Company Base front end
● Apps sharing customizations
● Apps with specific customizations
● Customize at the right level
● Ensure coherency
Introduction

OutSystems provides elements to

help build front ends like: Apps
Theme
App Patterns

○ Themes
○ Patterns
Custom
○ Templates Company Company Company
Theme Template Patterns

They allow the implementation of a

scalable front-end architecture
Use Silk UI Mobile as a starting point

OutSystems provides a framework

called Silk UI Mobile to accelerate
the creation of beautiful user Apps
App
interfaces for phones and tablets
Custom
of all sizes
Company Company Company
Theme Template Patterns

Silk UI Mobile is a great starting

Theme
Silk UI Patterns
point for creating the base elements Mobile
for a Company’s look and feel
The Company Base

Let’s refer to all customizations

required for the company’s apps as App

the “Company Base”:

○ Template Company
Company Template
Company
Base Theme
Company
○ Theme Custom Patterns

○ Patterns
Silk UI
○ ...
Mobile
The first app

B2C
App
So, consider the company starts with
a first app to consumers using the
Company
Base
customizations in the Company Base Custom

Silk UI
Mobile
Apps sharing customizations

B2E B2E B2C

App App App
As more apps are created, they
share the base customizations of
the company, which means they are Company
Custom Base

following the Company Base

Silk UI
Mobile
Apps with specific customizations

B2E B2E B2C

App App App
But, what if a group of apps have
specific customizations in addition to
the Company Base? Custom
? Company
Base
Custom

Silk UI
Mobile
Add levels of specific customizations

A group of apps with more specific B2E B2E B2C

App App App
customizations needs a new level of
customizations
B2E

The new level references Company Company

Custom Base

Base to inherit its customizations,

but, overrides the inherited Silk UI
Mobile
customizations or creates new ones
Add levels of specific customizations

B2E B2E B2C B2B B2B

App App App App App

For other groups of apps with specific

B2E B2B
customizations, just repeat the same
Company
Base
procedure Custom

Silk UI
Mobile
Customize at the right level

B2E B2E B2C B2B B2B

App App App App App
When a customization spreads across
all apps in a group, promote it to the
right level of customization B2E B2B

Company
Custom Base

It will improve the architecture and

scalability Silk UI
Mobile
Customize at the right level

B2E B2E B2C B2B B2B

App App App App App

A customization at the right level also

B2E B2B
facilitates propagating changes to
Company
Base
greatest number of apps at once. Custom

Silk UI
Mobile
Ensure coherency
B2E Team B2B Team

B2E B2E B2C B2B B2B

App App App App App
A good front-end architecture also
ensures coherency while teams
implement their apps B2E B2B

Company
Custom Base

Each team will only have access to

customizations for their apps Silk UI
Mobile
 Scalable
Front-End Architecture
Thank You!