WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
World Congress 2026 Europe - Virtual Stage • Jul 2, 2026 • Session details

Frontend Abstractions: Frameworks and Applications Architectural Patterns

Abdu Taviq

Tired of tangled frontend code? Discover a six-part architectural strategy to decouple your UI. Scale gracefully by strictly separating business logic from presentation.

Pause
Mute Enter Fullscreen
#1 about 2 min

Introduction to front-end architecture design patterns

How applying standardized abstractions prevents messy code inside complex front-end applications.

#2 about 2 min

Using components as the smallest units of UI

Isolating HTML and CSS into logic-free structural atoms simplifies the creation of scalable interfaces.

#3 about 4 min

Managing logic and data with container elements

Moving heavy JavaScript processing and API interactions out of components prevents UI elements from becoming overly complex.

#4 about 6 min

Reusing UI logic via higher-order components

Injecting shared behaviors like dialog popups into multiple containers eliminates redundant code implementations.

#5 about 5 min

Handling external dependencies through pure services

Centralizing third-party library calls into stateless JavaScript files prevents repetitive string definitions across containers.

#6 about 5 min

Decoupling network technologies using adapter layers

Abstracting underlying network implementations protects service logic from future changes to libraries like Fetch or GraphQL.

#7 about 4 min

Defining standard contracts with adapter interfaces

Using interface definitions guarantees that interchangeable adapter classes support the exact methods required by your services.

#8 about 3 min

Sharing cross-container state with a centralized store

Storing application states externally enables synchronized data access for multiple disconnected UI components.

#9 about 3 min

Implementing unidirectional data flow for state updates

Routing API responses through a state store rather than returning them directly to containers ensures consistency across the UI.

#10 about 3 min

Recapping the complete front-end architecture lifecycle

Combining these six distinct patterns creates a clean and maintainable architecture for modern web applications.

Matching moments

1:31 min

Recapping frontend scaling patterns and distributed UI techniques

Josh Goldberg · World Congress 2021

2:02 min

Evolving frontend application architectures from simple to enterprise scale

Michael Egger-Zikes Michael Egger-Zikes · World Congress 2025

2:30 min

Implementing application frontends with modular service architectures

Torben Schramme · World Congress 2021

2:36 min

Applying microfrontend patterns and data duplication bounds

David Leitner · World Congress 2022

2:39 min

Addressing developer questions on framework capabilities and architectural alternatives

Christian Liebel Christian Liebel · World Congress 2022

3:46 min

The rise of modern component-based frameworks and modular architecture

Sasha Shynkevich · LIVE

More from World Congress 2026 Europe - Virtual Stage

One Does Not Simply Make Architecture Decisions Alone thumbnail
36:15
about 2 months ago

One Does Not Simply Make Architecture Decisions Alone

Vladas Diržys

From Black Box to Glass Box : Bedrock AgentCore Observability thumbnail
21:15
about 2 months ago

From Black Box to Glass Box : Bedrock AgentCore Observability

Yasemin Aktürk

Leading in Rhythm: How Women Make Better Decisions with Biological Intelligence thumbnail
30:41
2 months ago

Leading in Rhythm: How Women Make Better Decisions with Biological Intelligence

Julia Grosse

Better Together: Leveraging Your Observability Tools as a SIEM thumbnail
39:06
2 months ago

Better Together: Leveraging Your Observability Tools as a SIEM

Mathias Palmersheim

ChatGPT Apps: From Chat to Checkout thumbnail
30:29
2 months ago

ChatGPT Apps: From Chat to Checkout

Aaron Koivunen

Interior Decorating (TypeScript Decorators) thumbnail
29:22
2 months ago

Interior Decorating (TypeScript Decorators)

Michael Dowden

Upcoming sessions on this topic

Open session

World Congress 2026 North America

September 24, 2026 · 12:50–13:20

Stage 7

Architecting AI in Angular: WebMCP, A2UI, and the Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood
Open session

World Congress 2026 North America

September 24, 2026 · 14:10–14:40

Stage 9

One Repo, One Strategy: Scalable Full-Stack Testing in a Monorepo World

Bartosz Leczycki, Paweł Matynia

Bartosz Leczycki
Paweł Matynia
Open session

World Congress 2026 North America

September 24, 2026 · 17:30–18:00

Stage 7

Full Stack with Flutter - are we there yet?

Nemanja Stošić

Senior Flutter Developer

Nemanja Stošić
Open session

World Congress 2026 North America

September 25, 2026 · 12:20–12:50

Stage 9

Designing APIs That Survive AI Agents at Scale

Phani Pendurthi

Mastercard, Principal Software Engineer

Phani Pendurthi
Open session

World Congress 2026 North America

September 25, 2026 · 10:20–10:50

Outdoor Stage

MicroAgents: The Microservices of the Agentic Era

Ashish Shubham

Runs the show bussiness at ThoughtSpot

Ashish Shubham
Open session

World Congress 2026 North America

September 25, 2026 · 11:00–11:30

Stage 7

Beyond Vibe Coding: An AI Builder’s Guide to Migrating 10k+ React Components

Shubham Chaurasia

Senior Software Engineer @ Meta

Shubham Chaurasia

Related videos

Micro-frontends anti-patterns thumbnail
40:17
World Congress 2022 • about 4 years ago

Micro-frontends anti-patterns

Luca Mezzalira

Microfrontends at Scale thumbnail
43:20
World Congress 2021 • about 5 years ago

Microfrontends at Scale

Josh Goldberg

Micro-frontends anti-patterns thumbnail
47:05
JS Congress • almost 5 years ago

Micro-frontends anti-patterns

Luca Mezzalira

Destructuring Frontend monoliths with MicroFrontends thumbnail
41:49
JS Congress • almost 5 years ago

Destructuring Frontend monoliths with MicroFrontends

Trishul Goel

Building a large, complex product from the ground up with typescript & Atomic Design:lessons learned thumbnail
28:13
World Congress 2022 • about 4 years ago

Building a large, complex product from the ground up with typescript & Atomic Design:lessons learned

Nathalia Rus

The Pragmatic Architect: Balancing Necessity vs. Sufficiency in React Systems thumbnail
20:49
Europe 2026 Virtual • 2 months ago

The Pragmatic Architect: Balancing Necessity vs. Sufficiency in React Systems

Ana Gil Amor

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.