Better Digital Products with Micro Frontends and Modyo

● Chilean 🇨🇱, father of 2 awesome boys
● CTO at Modyo since the beginning
● Passionate software developer
● Almost 20 years of development experience 🤓
● Areas of interest
○ DXP architectures
○ Backend / Frontend
○ Web architectures / scalability
○ Cloud computing

● A Next-Gen DXP
● Founded in 2008
● 100+ people creating a proﬁtable
company with an extreme focus in
generating value through digital
channels
● We love our clients. We create long
term relations with them

● Why Micro Frontends?
● Evolution away from monoliths
● Micro Frontend deﬁnition
● Modyo Platform: a Platform
for Micro Frontends

● Scaling frontend applications
(features and teams)
● Helps maintain cadence
● Enable internal teams’
independence
● Accelerate the innovation
● Components portability
(reduce vendor lock-in)

❤

● Developers must see and understand all the context
● Shorter and faster development cycles
● Remove the bottlenecks
● Feedback and monitoring (devops)
● Specialization and collaboration
Mik Kersten
https://www.amazon.com/Project-Product-Survive-Disruption-Framework/dp/1942788398

● Monoliths are more diﬃcult to maintain
● Starts fast but speed decreases over time
● Communication and coordination costs
● Less frequent deployments, with costly QA processes
● Diﬃcult to choose the right technical stack

Martin Fowler
https://martinfowler.com/bliki/MicroservicePremium.html

● Developing in the frontend is hard
● Teams start fast but eventually they lose cadence
● It’s even more diﬃcult to distribute teams
● Single codebases are complex to maintain
● Complicated upgrades of core base technologies
● Communication and coordination issues across teams

“We’ve seen significant benefits from introducing microservices, which have
allowed teams to scale the delivery of independently deployed and maintained services. Unfortunately,
we’ve also seen many teams create a front-end monolith a large, entangled browser application that sits on
top of the back-end services largely neutralizing the benefits of microservices.
Micro frontends have continued to gain in popularity since they were first introduced.”
https://assets.thoughtworks.com/assets/technology-radar-vol-22-en.pdf

● Domains and subdomains (partitioning)
● Domain model is the communication channel
● Ubiquitous language
● Contexts boundaries
● Contracts
Eric Evans:
https://www.amazon.com/-/es/Eric-Evans/dp/0321125215
Luca Mezzalira:
https://www.youtube.com/watch?v=BuRB3djraeM&ab_channel=UXDX

● Framework agnostic
● “Share nothing” architecture
● Independent teams
● Independent releases

My Site
Container Application
MFEs
Deﬁnes the structure
Deploys the reusable
components
Framework
Deﬁnes the contracts and
page structure

Micro frontend A
Source
control
Micro frontend B
Micro frontend C
Build and test pipeline
Production /
Certiﬁcation
The ﬁnal App is statically
generated

Micro frontend A
Source
control
Micro frontend B
Micro frontend C
Build and test pipeline
Production /
Certiﬁcation
The ﬁnal App is
composed for each user

Build Time
Pros
● Better dependency management
● Independent teams (with a common
release)
Cons
● Monolithic builds (diﬀerent teams)
● No atomic deployments
Run Time
Pros
● Independent teams and releases
● Atomic deployments
Cons
● More requests to the backend servers
(cache can help)
● Component size and duplicated
dependencies

● Atomic and independent releases
● Independent versioning
● Teams with more accountability
○ Container Team: focus on metrics and contracts
○ MFE Team: focus on the digital product (subdomain of it)
● More frequent releases → better cadence

● Implementation complexity: there is no standard
● The “Container Application” must be built
● Diﬀerence in the environments (“it works on my machine!”)
● Operational complexity
● CHAOS if is not well maintained

What Modyo does?
● Omnichannel Web Sites
● Public + transactional sites in one single
platform
● Content management for each channel
● Solutions for Digital Onboarding
● A platform for Frontend Development with
Micro Frontends y Microservices

Construction blocks for an
Modyo Digital Experience Platform
Web / PWA Mobile
Company
System
Company
System
Third Party
System
API Gateway

DXPs can...
● manage user sessions in a
secure way
● manage structured content
● manage routing and navigation
ﬂows
● simplify devops eﬀorts required
in the Web development
● Act as a proven solution for
most of the companies

Layout
My Site
Page
Widgets & Widget Manager
Shared between pages
Deﬁnes the structure
Deploys the reusable
components
Grid
Deﬁnes the relative position

● Multiple sites
● Liquid templates
● Controlled publishing
● Versioning
● Live Preview
● Code / Team Review
● Audit tools

● Ready for usage and modiﬁcation
● Micro Frontends
● Versionable templates
● Common components

● Modyo Platform acts as the container app
● Modyo Widget Manager acts as the framework orchestrator
● Modyo conﬁgures and brings context to the MFE
● Modyo “knows” where and when the MFE should be invoked
● MFEs compatible with Liquid

Organization A Organization B
Site 1 Site 2 Site 3
One single Modyo instance allows multiple apps.
Each site and organization can have their own domain.

● Modyo Cloud
○ Shared AWS Cloud Infrastructure
○ 24x7 monitoring, SLA 99.9%
● Modyo Enterprise Cloud
○ Dedicated AWS Cloud Infrastructure
○ 24x7 monitoring, SLA 99.95%
● Modyo Enterprise On Premise
○ Client premises
○ We oﬀer support services

● Frontend development complexity is going to increase over the years
● Micro frontends oﬀer a concrete solution to many current problems
● There is no standard for MFEs, but there are a lot of open frameworks
and techniques
● @ Modyo, we’re ready for this! 😉

We build Awesome Software with passion and discipline
to fundamentally improve the digital experience for
millions of people. We’ve created the Modyo Platform
so that our clients and partners can build amazing
customer journeys for web and mobile in one place
integrating our applications with theirs.
Learn more at .
Copyright © 2021, Modyo and/or its affiliates. All rights reserved.
This document is provided for information purposes only and the contents hereof are subject to change without notice. This document is not warranted to be error-free, nor subject
to any other warranties or conditions, whether expressed orally or implied in law, including implied warranties and conditions of merchantability or fitness for a particular purpose.
We specifically disclaim any liability with respect to this document and no contractual obligations are formed either directly or indirectly by this document. This document may not be
reproduced or transmitted in any form or by any means, electronic or mechanical, for any purpose, without our prior written permission.
ModyoTM
is a registered trademark of Modyo and/or its affiliates.

Better Digital Products with Micro Frontends and Modyo

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Better Digital Products with Micro Frontends and Modyo

Similar to Better Digital Products with Micro Frontends and Modyo (20)

Recently uploaded

Recently uploaded (20)

Better Digital Products with Micro Frontends and Modyo