QCon London - March 28th 2023
microfrontend.dev - @anfibiacreativa
Natalia Venditto
microfrontend.dev - @anfibiacreativa
© Joshua Earle | Unsplash.com
microfrontend.dev - @anfibiacreativa
microfrontend.dev - @anfibiacreativa
microfrontend.dev - @anfibiacreativa
Two potential directions to take...
microfrontend.dev - @anfibiacreativa
Monolithic Backend
Monolithic Frontend
Monolithic Frontend
Micro-service
Micro-service
Micro-service
(service, technology, data perspective)
API Gateway
microfrontend.dev - @anfibiacreativa
microfrontend.dev - @anfibiacreativa
Page types
Homepage
Landing page
Blog page
User page
Common Components Set: classic HTML multiple page application
+ JS and CSS loaded sync or async (Monolith)
Some user experiences are relatively static, while others are much more dynamic or frequently updated.
DYNAMIC Data Request
AT RUNTIME
MOST PAGES COME FROM SERVER CACHE
microfrontend.dev - @anfibiacreativa
E-commerce
New requirement
Page types
Homepage
Landing page
Blog page
User page
MORE STATIC
LESS AUTHORING
MORE DYNAMIC
LESS AUTHORING
LONG LIVED
SHORT LIVED
MORE STATIC
MORE AUTHORING
LONG LIVED
MORE DYNAMIC
MORE AUTHORING
LONG LIVED
E-commerce
...
MORE DYNAMIC
MORE AUTHORING
SHORT LIVED
Common Components Set: classic HTML multiple page application
+ JS and CSS loaded sync or async (Monolith)
DYNAMIC Data Request
AT RUNTIME
MOST PAGES COME FROM SERVER CACHE
microfrontend.dev - @anfibiacreativa
microfrontend.dev - @anfibiacreativa
Design independent and lean experiences that fit within tight performance budgets.
Use-case(s)
Architecture
Decision
Architecture
Decision
Tech-stack
Definition
Tech-stack
Definition
Development
Cycle
Development
Cycle
Deployment
Options
Deployment
Options
SPEC
microfrontend.dev - @anfibiacreativa
microfrontend.dev - @anfibiacreativa
microfrontend.dev - @anfibiacreativa
SPA + cached to CDN
SSG
SSR
Data Request
AT BUILDTIME
Data Request
ON THE FLY
each frontend becomes just another client of the API, and it doesn't matter what technology we build it with
Data Request
AT RUNTIME
(Containerized) Microservice App.
Serverless Func. (Origin)
Edge Computing/Composable
API Contract and Management, Cache Layer, Validation and Proxy
Homepage
Landing page
Blog page
User page
E-commerce
Hybrid
aka anfibiacreativa
Principal JavaScript DX Lead Microsoft Azure
Google Developer Expert for Angular and Web Technologies (Runtime Performance)
Author of https://microfrontend.dev
1x Microsoft Most Valuable Professional
Specialized team working on solving a concrete problem
Tech stack is chosen according to the team skills and the specific use-case
Processes are simplified to enable each team independently, based off of technology and requirements
microfrontend.dev - @anfibiacreativa
microfrontend.dev - @anfibiacreativa
The ultimate goal. Keep this with you.
microfrontend.dev - @anfibiacreativa
microfrontend.dev - @anfibiacreativa
They are applications -of all sizes- with an important frontend component. They are independently developed and managed and typically integrated in composition as part of a larger distributed system that was specifically designed for their integration.
microfrontend.dev - @anfibiacreativa
API (Functions)
Button
Database
Recommendations
API Gateway
Decoupled frontend application
~ packages/
|--- api/
|----GET
|----POST
|----...()
|--- frontend/
|----src/
|...index
Main Navigation
Button
Shopping Cart
Recommendations
Recommendations
Multi-framework horizontal
Single framework horizontal
Button
Shopping Cart
Recommendations
Recommendations
Single framework vertical
eg: https://shop.example.com
MPA with dynamic embeds
eg: https://www.example.com/homepage
microfrontend.dev - @anfibiacreativa
microfrontend.dev - @anfibiacreativa
microfrontend.dev - @anfibiacreativa
How?
Where to?
For whom?
To what?
Where in?
With what?
In which way?
DEV
OPS
ARCH
How?
Where to?
For Whom?
SPECIFICATION
ARCHITECTURE DECISIONS
API CONTRACT
To what?
Where in?
With What?
microfrontend.dev - @anfibiacreativa
DEV
OPS
ARCH
We start by designing the user interface and the user-experience and defining the desired representation of state in the frontend, and specify our API's from that reference.
microfrontend.dev - @anfibiacreativa
microfrontend.dev - @anfibiacreativa
How?
Where to?
For Whom?
SPECIFICATION
ARCHITECTURE DECISIONS
API CONTRACT
To what?
Where in?
With What?
microfrontend.dev - @anfibiacreativa
DEV
OPS
ARCH
microfrontend.dev - @anfibiacreativa
We need to understand them and where do they access from and what are the connectivity options, the average devices, how do they browse, and why do they visit our customer's applications.
© Hannah Busing | Unsplash.com
microfrontend.dev - @anfibiacreativa
© Hal Gatewood | Unsplash.com
microfrontend.dev - @anfibiacreativa
2007
2011
2015
2019
2022
250 M
750 M
1,250 M
microfrontend.dev - @anfibiacreativa
© Tyler Lastovich | Unsplash.com
microfrontend.dev - @anfibiacreativa
microfrontend.dev - @anfibiacreativa
© NASA | Unsplash.com
microfrontend.dev - @anfibiacreativa
https://www.emnify.com/blog/global-2g-3g-phase-out
microfrontend.dev - @anfibiacreativa
© Martin Sanchez | Unsplash.com
microfrontend.dev - @anfibiacreativa
microfrontend.dev - @anfibiacreativa
How?
Where to?
UX-UI
SPECIFICATION
ARCHITECTURE DECISIONS
API CONTRACT
DESIGN MOCKS
WIREFRAMES
To what?
Where in?
With What?
DEV
OPS
ARCH
microfrontend.dev - @anfibiacreativa
How?
Where to?
UX-UI
SPECIFICATION
ARCHITECTURE DECISIONS
API CONTRACT
DESIGN MOCKS
WIREFRAMES
To what?
Where in?
With What?
DEV
OPS
ARCH
microfrontend.dev - @anfibiacreativa
https://www.thinkwithgoogle.com/marketing-strategies/app-and-mobile/mobile-page-speed-new-industry-benchmarks/
microfrontend.dev - @anfibiacreativa
microfrontend.dev - @anfibiacreativa
Main Navigation
Button
Shopping Cart
Recommendations
Recommendations
Multi-framework horizontal
Single framework horizontal
Recommendations
Possible reactivity patterns
State management options
Preferred rendering strategy
Data fetching methods
Deployment origin
Available ecosystem
Community and docs
microfrontend.dev - @anfibiacreativa
Homepage
Userpage
© Jcob Nasyr | Unsplash.com
instead of a multi-framework horizontal split
microfrontend.dev - @anfibiacreativa
Frameworks featuring this from of progressive hydration don't need a shell.
Every region is hydrated independently and bootstrap is handled by the top-level object (document).
They feature state serialization.
microfrontend.dev - @anfibiacreativa
YOU MAY WANT TO CHECK
https://qwik.builder.io
As opposed to hydration (that replays all logic in the client), resumability picks up where the server left (state and handlers are serialized).
microfrontend.dev - @anfibiacreativa
YOU MAY WANT TO CHECK
Real HTML-First frameworks feature no compilation/transpiling steps.
In the case of enhance.dev, it promotes progressive enhancement as FWA (pure serverless functions)
https://enhance.dev
YOU MAY WANT TO CHECK
microfrontend.dev - @anfibiacreativa
microfrontend.dev - @anfibiacreativa
TECHNICAL STACK
How?
Where to?
UX-UI
SPECIFICATION
ARCHITECTURE DECISIONS
API CONTRACT
DESIGN MOCKS
WIREFRAMES
PROGRAMMING LANG.
FRAMEWORK
PATTERNS
To what?
Where in?
DEV
OPS
ARCH
microfrontend.dev - @anfibiacreativa
CODE STRUCTURE
TECHNICAL STACK
How?
Where to?
UX-UI
SPECIFICATION
DEPENDENCY
MGMNT.
ARCHITECTURE DECISIONS
API CONTRACT
DESIGN MOCKS
WIREFRAMES
PROGRAMMING LANG.
FRAMEWORK
PATTERNS
DEVELOPMENT
SETUP
To what?
DEV
OPS
ARCH
CODE STRUCTURE
TECHNICAL STACK
How?
Where to?
UX-UI
microfrontend.dev - @anfibiacreativa
SPECIFICATION
DEPENDENCY
MGMNT.
ARCHITECTURE DECISIONS
API CONTRACT
DESIGN MOCKS
WIREFRAMES
PROGRAMMING LANG.
FRAMEWORK
PATTERNS
DEVELOPMENT
SETUP
INTEGRATIONS
1P AND 3P SERVICES
DATA ACCESS
OBSERVABILITY
DEV
OPS
ARCH
microfrontend.dev - @anfibiacreativa
Remote
shareScope
Host Runtime
Container
provided modules
exposed modules
consumed modules
version check
version check
version def
Analyzing code at runtime can be challenging without a good governance strategy in place. Fate-sharing and version skew can be some of the problems.
microfrontend.dev - @anfibiacreativa
CODE STRUCTURE
TECHNICAL STACK
How?
microfrontend.dev - @anfibiacreativa
SPECIFICATION
DEPENDENCY
MGMNT.
ARCHITECTURE DECISIONS
API CONTRACT
DESIGN MOCKS
WIREFRAMES
DEVELOPMENT
SETUP
PROGRAMMING LANG.
FRAMEWORK
PATTERNS
1P AND 3P SERVICES
DATA ACCESS
OBSERVABILITY
Where to?
UX-UI
INTEGRATIONS
DEV
OPS
ARCH
microfrontend.dev - @anfibiacreativa
As frontend developers, knowing our cloud infrastructure, services and models is an extreme advantage to better design and architect for the user in a cost-efficient and performant way and be able to identify use-cases that can be shipped as composable app.
Including the integrations.
microfrontend.dev - @anfibiacreativa
Fully managed, auto-scalable infrastructure, from zero to provider pre-set limits.
Compute that needs to be executed closer to the user. Composability at the edge.
Cold start and latency may be acceptable for database querying for data analysis workflows.
microfrontend.dev - @anfibiacreativa
And how much we want them abstracted away, orchestrated and managed by the providers.
There is more to containers than Docker and K8s.
Containerization at the edge of the network. Alternative runtimes deliver with native-like performance.
Data streaming made possible by the Web Platform and cloud event and messaging streaming services, contribute to highly dynamic composition.
Consumer 1
Broker
Topic N
Data Processing
subscribed to Topic 2
Consumer N
Publisher 1
microfrontend.dev - @anfibiacreativa
Publisher 3
Topic 1
Publisher 2
Topic 2
Consumer 2
subscribed to Topic 1 and N
subscribed to Topic 1
Decoupled Frontend A
Pub/Sub
LocalStorage
input
event=`topic`
publish(event)
subscribe(event, callback)
subscribe(event, callback)
Decoupled Frontend B
Decoupled Frontend C
microfrontend.dev - @anfibiacreativa
Consumer 1
API Management
Service SDK
Consumer N
API 1 - RESTFul
microfrontend.dev - @anfibiacreativa
API N - tRPC
API 2 - GraphQL
Consumer 2
Containerized Node.js App
Querying via Serverless Function
Reverse Proxy, Cache
Total global data estimated in 2025
200 Zb
© Fabio | Unsplash.com
microfrontend.dev - @anfibiacreativa
Relational
Document Stores
Key-Value
Graph
Spatial
Search Engines
Wide Column
Vector
Time-series
MySQL, PostgreSQL, SQL Server, Azure NoSQL, Cassandra
Cosmos DB, MongoDB, Firebase, Firestore
Cloud BigTable
Cosmos DB, SpatiaLite, PostGIS
Redis, Memcached
Cosmos DB for Gremlin, Neo4js, Virtuoso
Elasticshearch, Solr, Algolia
MongoDB, Gremlin, Influx, Prometheus
Weaviate, Qdrant, Milvus, Elastic
microfrontend.dev - @anfibiacreativa
Relational
Document Stores
Key-Value
Graph
Spatial
Search Engines
Wide Column
Vector
Time-series
AI Model Training, Advanced Search
Content Management, Banking, CRM, Resource Planning
Content Management, Fintech, Customization, Personalization
Session Management, Product recommendations, Caching
Fraud Detection, Recommendation Engines, Social Networks, Network Mapping
IoT use-cases (collecting data from devices), Trends and forecasting, Monitorization
Full-text content search
Logging, Geographic information, Reporting systems
Geomarketing, Supply chain optimization, Environmental Management
microfrontend.dev - @anfibiacreativa
CODE STRUCTURE
TECHNICAL STACK
How?
microfrontend.dev - @anfibiacreativa
SPECIFICATION
DEPENDENCY
MGMNT.
ARCHITECTURE DECISIONS
API CONTRACT
DESIGN MOCKS
WIREFRAMES
DEVELOPMENT
SETUP
PROGRAMMING LANG.
FRAMEWORK
PATTERNS
1P AND 3P SERVICES
DATA ACCESS
OBSERVABILITY
UX-UI
INTEGRATIONS
INFFRASTRUCTURE
APPLICATION RUNTIME
COMPOSITION LAYER
API GATEWAY
DATA STORAGE AND ACCESS
CACHING AND PROXYING
microfrontend.dev - @anfibiacreativa
Make infrastructure decisions repeatable and incremental on iteration, in an automated way.
CODE STRUCTURE
TECHNICAL STACK
microfrontend.dev - @anfibiacreativa
SPECIFICATION
DEPENDENCY
MGMNT.
ARCHITECTURE DECISIONS
API CONTRACT
DESIGN MOCKS
WIREFRAMES
DEVELOPMENT
SETUP
PROGRAMMING LANG.
FRAMEWORK
PATTERNS
1P AND 3P SERVICES
DATA ACCESS
OBSERVABILITY
UX-UI
INTEGRATIONS
INFFRASTRUCTURE
APPLICATION RUNTIME
COMPOSITION LAYER
API GATEWAY
DATA STORAGE AND ACCESS
CACHING AND PROXYING
CI/CD PIPELINES
CODE HOSTING
PIPELINES/WORKFLOWS
INFRASTRUCTURE AS CODE
DEV
OPS
ARCH
MONITORIZATION
CODE STRUCTURE
TECHNICAL STACK
microfrontend.dev - @anfibiacreativa
SPECIFICATION
DEPENDENCY
MGMNT.
ARCHITECTURE DECISIONS
API CONTRACT
DESIGN MOCKS
WIREFRAMES
DEVELOPMENT
SETUP
PROGRAMMING LANG.
FRAMEWORK
PATTERNS
1P AND 3P SERVICES
DATA ACCESS
OBSERVABILITY
UX-UI
INTEGRATIONS
INFFRASTRUCTURE
APPLICATION RUNTIME
COMPOSITION LAYER
API GATEWAY
DATA STORAGE AND ACCESS
CACHING AND PROXYING
CI/CD PIPELINES
CODE HOSTING
PIPELINES/WORKFLOWS
INFRASTRUCTURE AS CODE
DEV
OPS
ARCH
MONITORIZATION
CODE STRUCTURE
TECHNICAL STACK
microfrontend.dev - @anfibiacreativa
SPECIFICATION
DEPENDENCY
MGMNT.
ARCHITECTURE DECISIONS
API CONTRACT
DESIGN MOCKS
WIREFRAMES
DEVELOPMENT
SETUP
PROGRAMMING LANG.
FRAMEWORK
PATTERNS
1P AND 3P SERVICES
DATA ACCESS
OBSERVABILITY
UX-UI
INTEGRATIONS
INFFRASTRUCTURE
APPLICATION RUNTIME
COMPOSITION LAYER
API GATEWAY
DATA STORAGE AND ACCESS
CACHING AND PROXYING
CI/CD PIPELINES
CODE HOSTING
PIPELINES/WORKFLOWS
INFRASTRUCTURE AS CODE
DEVELOPMENT
DESIGN
DEPLOYMENT
DEV
OPS
ARCH
MONITORIZATION
Development
microfrontend.dev - @anfibiacreativa
Specification
Setup
Design
Integration
Delivery
Operations
DEVELOPMENT
DESIGN
DEPLOYMENT
DEV
OPS
ARCH
@anfibiacreativa - https://www.microfrontend.dev