Multi-Brand Frontends

Dissociative identity disorder done well

MASMOVIL TECHNOLOGY

Do we have the same concept of multi-brand?

 

Do we have the same vision of multi-brand?

Business Goals

  • Reduce development time

  • Reduce development costs

  • Multiple UI/UX

  • Multiple CRM's support

  • Multiple contents

  • Multiple TPV's

  • Multiple product portfolio

  • Multiple business rules

https://mmsistemas.atlassian.net/wiki/spaces/PIK/pages/612958213/Migraci+n+React

Squad Goals

  • Autonomy

  • Self-management

  • Product Ownership

  • Clear business roadmap

  • Priorized roadmap

  • Clear Technology long-term vision

  • Well defined automated workflow

  • Value delivery workflow

  • Few 3º parties dependencies

  • Avoid reinventing the wheel

Technology Goals

  • Unified technical vision

  • Identify technical needs

  • Priorize technical actions

  • Coordinate technical actions

  • Unblock technical actions

  • Define technical strategies

  • Technical quality baseline

  • Unified value delivery workflow

  • Shared knowledge

  • Avoid silos

  • Team mobility

  • Reduce stack entropy

  • Technical guidance

Strategies

MULTIBRAND-WEB

basket-BFF1

CRM-1

CRM-2

Front

 

Back

Only front

basket-BFF2

basket-BFF3

MULTIBRAND-WEB

basket-BFF-multibrand

CRM-1

CRM-2

Front

 

Back

Front+Back

top-bottom design

guided by front

Independent Apps

Auth

brand-A

business logic

Fn1B

Auth

Fn2B

Fn2B

Tariffs

Check

features

Tariffs

SEO

Shared

Error

Config

Terminal

Theme

Basket

brand-B

  • Full Independence

  • Full Autonomy

  • Full personalization

  • Product Ownership

Pros

  • Duplicated work

  • Potential silos

  • Costs

Cons

Experimentation and learning process

MVP stages

White-Label Apps

BrandA

Basket

https://github.com/masmovil/mb-react

Theme

Config

Assets

Tariffs

Coverage

Terminals

Offers

Auth

Checkout

Banners

Config

Rules

BrandB

Theme

Config

Assets

Config

Rules

BrandC

Theme

Config

Assets

Config

Rules

FUNCTIONALITIES

  • Shared components

  • Shared logic

  • Costs

Pros

  • UX/UI Constraints

  • Roadmap constraints

  • Code complexity

Cons

Backoffice applications

Shared-Logic Apps

shared logic

BrandA

BrandC

BrandB

Basket

Tariffs

Coverage

Terminals

Offers

Auth

Checkout

Banners

BEHAVIOR

models

helpers

actions

reducers

stores

effects

PRESENTATION

STRUCTURAL

Components

Containers

Layouts

Routes

Themes

https://github.com/fillipvt/portfolio

  • Good Independence

  • Good Autonomy

  • Shared knowledge

  • Multiple UI/UX

  • Multiple business logic

Pros

  • Merge conflicts

  • Monorepo challenges

Cons

Customer oriented applications

E-shops/E-cares applications

µService

µService

Front

µService

µService

µService

Front

µService

µService

µService

Front

µService

µService

µService

Front

µService

Converge strategy

Share code/knowledge

Product autonomy

Monorepos ecosystem

e-shops

e-cares

backoffices

...

Front Multi-brand

!==

Back Multi-brand

Do we have the same concept of multi-brand?

 

Do we have the same vision of multi-brand?

Is this the right time?

 

Do we have the needed resources for this?

Do we really need this?

Roadmap

Whe are here

SERIALIZED

Shared logic migration

angular apps refactor

react with rxjs

new brand apps in react

cross brands sync meetings

Multi-brand fronts!!!

proposal and core logic promotion

Multi-Brand Frontends

Dissociative identity disorder done well

MASMOVIL TECHNOLOGY

Q&A

@anthanh | #frontend-general | #tech-chat

Thanks!