Designing e2e fully distributed frontend systems with UX and DX in mind.

Natalia Venditto| anfibiacreativa

Principal JavaScript DX Lead Microsoft Azure

GDE for Angular and Web Technologies (Web Performance)

Oganizational Reasons

WHY DO WE DISTRIBUTE SYSTEMS?

@anfibiacreativa

Infrastructure

WHY DO WE DISTRIBUTE SYSTEMS?

@anfibiacreativa

HIGH-AVAILABILITY

REDUNDANCY/DR

GLOBAL DISTRIBUTION

SCALABILITY/ELASTICITY

WHY DO WE DECOUPLE THE APPLICATION LAYER?

KNOWLEDGE SILOS

SLOW TIME TO VALUE

TECHNICAL DEBT

INABILITY TO INNOVATE

INTERDEPENDENCIES

(RUNTIME) PERFORMANCE DEGRADATION

@anfibiacreativa

Including the frontend

@anfibiacreativa

Decoupling the Monolith

BUSINESS LOGIC (APP)

DATA LAYER

FRONTEND

SOLUTION

Independency

Team

Deployment

Can choose their stack, etc

Can be deployed and fails in isolation

Monolithic Backend

Monolithic Frontend

Micro-service

Typical monolith app decoupling process

(service, technology, data perspective)

API Gateway

A

APPLICATION

A

API-FIRST

Architect

@anfibiacreativa

Pushing the monolith split envelope even further, to very lean experiences that fit within performance budgets.

Use-case(s)

Architecture

Decision

Architecture

Decision

Tech-stack

Definition

Tech-stack

Definition

Development

Cycle

Development

Cycle

Deployment

Options

Deployment

Options

systems

user experiences

SPEC

We can't architect for USER experience, if we don't know the user.

@anfibiacreativa

HOT TAKE

frontend devs had NO

... influence

... decision-making power

... seat at the architecture table

@anfibiacreativa

- Cloud/PaaS/SaaS

- Serverless/Cloud-native

- Global distribution

- Micro-architectures

- Automated CI/CD pipelines

- Headless CMS

- API-First/BFF

- Multiple data models and dedicated storage (DBs)

@anfibiacreativa

- On Prem/Data Center - Fully managed

- Single Region

- Manual deployment pipelines

- Monolith Backends incl. content authoring

- SQL/Relational DBs

We can now build microservices but also micro-frontends!

Micro-frontends is a very misleading term.

@anfibiacreativa

HOT TAKE

D

DECOUPLED FRONTENDS

Type of Split

Homepage

Blogpage

@anfibiacreativa

Horizontal

Vertical

Independent Deployability

PEOPLE

TECHNOLOGY

PROCESSES

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

Organizational Performance

Setup

Implement

Integrate

Build

Deploy

Publish

Design

(Spec)

Development Cycle.

Know what you need to do (job to be done) and setup for it: first rule of good DX. Ask the right questions

For what?

Asking the right questions to design a great system.

Where in?

With what?

To what?

How?

Where

to?

For

whom?

For whom?

That is where?

And browses how?

For what reason?

Click here to start.

@anfibiacreativa

BUSINESS LOGIC

DATA ACCESS

FRONTEND

DATA STORAGE

INFRASTRUCTURE

All decisions are made by

non-frontend folks

@anfibiacreativa

HISTORICALLY

Architecture patterns

Data/API models

Infrastructure options

Full-stack apps patterns

Data/API models

Infrastructure options

All decisions (can be) made by

non-frontend folks

@anfibiacreativa

CLOUD OPTIONS LIKE PaaS, ARE MAKING IT POSSIBLE

If we want to build effective web distributed systems, we will need to change the perspective.

@anfibiacreativa

HOT TAKE

For what?

We are failing at asking and answering the most essential questions for DX and UX.

Where in?

For

whom?

Business Unit

Dev Team

End-user

The where in: where our team operates

@anfibiacreativa

https://hbr.org/2016/11/why-diverse-teams-are-smarter#:~:text=The%20researchers%20found%20that%20individuals,published%20in%20the%20journal%20PNAS.

Diverse teams are smarter.

@anfibiacreativa

HOT TAKE

@anfibiacreativa

https://www.statista.com/statistics/263437/global-smartphone-sales-to-end-users-since-2007/

2007

2011

2015

2019

2022

250 M

750 M

1,250 M

1000X

Growth

28%

iPhone*

*worldwide,

not necessarily the latest iPhone

@anfibiacreativa

14% in LATAM

16% in APAC

@anfibiacreativa

https://infrequently.org/2021/03/the-performance-inequality-gap/

Know your users and what they have at hand

Baseline price

EU

Critical path budget

200 Kbs

~150

@anfibiacreativa

https://www.thinkwithgoogle.com/marketing-strategies/app-and-mobile/mobile-page-speed-new-industry-benchmarks/

End-user bounce rate probability increase

< 1s > 3s

32%

< 1s > 5s

90%

*Financial institutions sites in the US average 2.2s

@anfibiacreativa

https://www.thinkwithgoogle.com/marketing-strategies/app-and-mobile/mobile-page-speed-new-industry-benchmarks/

Best practices for request and assets count

Max. on average

50

Total weight of assets

~3Mb

IT DEPENDS.

Jamstack sites can be an entire micro-fronted split

APIS

MARKDOWN

JAVASCRIPT

@anfibiacreativa

Page types || Views

Homepage

Landing page

Blog page

User page

SPA + cached to CDN

Micro-services + Micro frontends (vertical split)

SSG

SSR

Data Request

AT BUILDTIME

Data Request

ON THE FLY

pattern, tech stack, DB & APIs per page/view type mapping to use-case

Data Request

AT RUNTIME

@anfibiacreativa

(Containerized) Microservice Node App.

Serverless Func. (Origin)

Edge Computing/Composable

API Management and Cache Layer

The horizontal split obsession

Homepage

Userpage

Challenges of horizontal split (dealt by indep. teams)

KNOWLEDGE RAMP

STATE MANAGEMENT

DATA ARCHITECTURE

GOVERNANCE/ENFORCEMENT

VERSION SKEW

ORCHESTRATION

@anfibiacreativa

UX CONSISTENCY

ROUTING

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

    module.exports = {
      output: {
        uniqueName: "host_name"
      },
      plugins: [
        new ModuleFederationPlugin({
          name: "host",
          remotes: {
            'remote1': "remote1" 
          },
          library: { type: "var", name: "host_name" },
          filename: "remoteEntry.js",
          shared: [
          // other advanced options include requiredVersion, shareScope, etc
          	"@anfibiacreativa/styles/styles.css",
          	{"@angular/core": { singleton: true, strictVersion: true }},
            {"@angular/common": { singleton: true, strictVersion: true }},
            {"@angular/router": { singleton: true, strictVersion: true }}
          ]       
        })
      ],
    };

@anfibiacreativa

Remote

shareScope

Host Runtime

Container

provided modules

exposed modules

consumed modules

version check

version def

- Fate-sharing

- Version-skew

- No e2e testing in consolidation

- Challenging state

management

Independent deployability (horizontal split) without governance, introduces more problems than it solves.

@anfibiacreativa

HOT TAKE

I'm not saying JavaScript is bad, but...

- Too much JavaScript, is bad

- No-coverage JavaScript, is bad

- Using JavaScript where you can use HTML or CSS, is bad

@anfibiacreativa

Recommendations.

@anfibiacreativa

When possible...

Use new generation frontend frameworks.

Stick to web platform APIs and web standards.

Async or defer load, consider the critical path.

Tree-shake, bundle consciously and eliminate dead code.

Always!

Define and respect your performance budget.

What are the new generation of full-stack frameworks?

Hybrid >SSR

Island Architecture

Homepage

Userpage

@anfibiacreativa

instead of a multi-framework horizontal split

Partial Hydration

Frameworks that support it

Homepage

- No need for a shell

- Every region is hydrated independently

- Consolidated state management

@anfibiacreativa

Web-standards based HTML framework

- No compilation steps.

- HTML-first

- Progressive enhancement as FWA (pure serverless functions)

Resumability instead of hydration

As opposed to hydration (that replays all logic in the client), resumability picks up where the server left.

Implementing these patterns correctly, requires a mindshift.

@anfibiacreativa

HOT TAKE

Move all possible compute and composition to the cloud.

Edge Functions

Origin Functions

Compute that needs to be executed closer to the user.

Cold start + Latency

Acceptable for DB and data processing WF.

Not all of your apps workloads require execution at the edge (of the network).

@anfibiacreativa

HOT TAKE

@anfibiacreativa

https://www.emnify.com/blog/global-2g-3g-phase-out

While some countries in the world have sunset 2G and even 3G, most countries in Latin America and Europe plan to continue to service devices until late 2025 and even late 2026.

4G coverage 2021

85%

5G coverage 2021

25%

Preserve state with

cloud native options like Pub/Sub

Decoupled Frontend A

Pub/Sub

LocalStorage

input

event=`topic`

publish(event)

subscribe(event, callback)

Decoupled Frontend B

Decoupled Frontend C

https://hbr.org/2016/11/why-diverse-teams-are-smarter#:~:text=The%20researchers%20found%20that%20individuals,published%20in%20the%20journal%20PNAS.

Frontends will be short-lived in the near future.

@anfibiacreativa

HOT TAKE

Faster iterations and development cycles.

Ever changing,

dynamic tooling and infra support.

Will be the long-lived core of all distributed systems, connecting cloud-native and serverless apps to decoupled frontends.

APIs

APIs can and will degrade runtime performance

- Specify before executing

- Reduce payload to a min

- Implement e2e testing

- Use headers and caching to reduce roundtrips

- Learn to benefit from infra

- Choose your API pattern wisely

@anfibiacreativa

Particularly clientside!

Data-modeling skills are underrated.

@anfibiacreativa

HOT TAKE

Total global data estimated in 2025

200 Zb

Relational

Document Stores

Key-Value

Graph

Spatial

Search Engines

Wide Column

Vector

Time-series

MySQL, PostgreSQL, SQL Server

Cosmos DB, MongoDB, Firebase, Firestore

Cloud BigTable

SpatiaLite, PostGIS

Redis, Memcached

Neo4js, Virtuoso

Elasticshearch, Solr, Algolia

MongoDB, Gremlin, Influx, Prometheus

Weaviate

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

MACH

API-FIRST

CLOUD NATIVE BASED

MICRO-*(Services)

@anfibiacreativa

HEADLESS SaaS

https://machalliance.org/

If you wanna know more...

If we're building composable architectures, we know that APIs are the core of our system, and users are the number one priority.

We are enabled to write specs based on user stories and determine what and how our users will be able to accomplish while interacting with our decoupled system, regardless of who will implement and integrate the system, what's their setup and how they build, deploy or publish their distributed components.

You're worried about making it all work together (at dev time/env).

@anfibiacreativa

HOT TAKE

https://github.com/features/codespaces