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 · WWC 2021

2:02 min

Evolving frontend application architectures from simple to enterprise scale

Michael Egger-Zikes Michael Egger-Zikes · WWC 2025

2:30 min

Implementing application frontends with modular service architectures

Torben Schramme · WWC 2021

2:36 min

Applying microfrontend patterns and data duplication bounds

David Leitner · WWC 2022

2:39 min

Addressing developer questions on framework capabilities and architectural alternatives

Christian Liebel Christian Liebel · WWC 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
29 days 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 1 month 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
about 1 month 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
about 1 month ago

Better Together: Leveraging Your Observability Tools as a SIEM

Mathias Palmersheim

ChatGPT Apps: From Chat to Checkout thumbnail
30:29
about 1 month ago

ChatGPT Apps: From Chat to Checkout

Aaron Koivunen

Interior Decorating (TypeScript Decorators) thumbnail
29:22
about 1 month ago

Interior Decorating (TypeScript Decorators)

Michael Dowden

Upcoming sessions on this topic

Open session

World Congress 2026 North America

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

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

Paweł Matynia, Bartosz Leczycki

Paweł Matynia
Bartosz Leczycki
Open session

World Congress 2026 North America

Full Stack with Flutter - are we there yet?

Nemanja Stošić

Senior Flutter Developer

Nemanja Stošić
Open session

World Congress 2026 North America

Designing APIs That Survive AI Agents at Scale

Phani Pendurthi

Mastercard, Principal Software Engineer

Phani Pendurthi
Open session

World Congress 2026 North America

MicroAgents: The Microservices of the Agentic Era

Ashish Shubham

Runs the show bussiness at ThoughtSpot

Ashish Shubham
Open session

World Congress 2026 North America

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
WWC 2022 • about 4 years ago

Micro-frontends anti-patterns

Luca Mezzalira

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

Microfrontends at Scale

Josh Goldberg

Micro-frontends anti-patterns thumbnail
47:05
JS Congress • over 4 years ago

Micro-frontends anti-patterns

Luca Mezzalira

Destructuring Frontend monoliths with MicroFrontends thumbnail
41:49
JS Congress • over 4 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
WWC 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 • about 1 month 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.