Skip to main content

Front-end - Much More Than a Little Button

· 8 min read
Bruno Carneiro
Bruno Carneiro
Fundador da @TautornTech

Many people still associate the term frontend only with the visual appearance of a website or application — colors, buttons, layouts.

That famous phrase "it's just a button." But they don't understand what's behind that simple button that triggers multiple actions in the user interface and, in most cases, in other systems via API, for example.

Front-end development is frequently misunderstood. Many people still limit its definition to the purely visual layer — "just put a button there" or "just need to change that color." This misconception underestimates the complexity and impact that architectural decisions have on modern web development.

And with the rise of Vibe Coding, this view can be amplified. Frontend is just HTML and Backend is a bunch of CRUDs.

Those who work with development know that's not how it works. A simple system built in 1 hour that scales? Good luck.

What is Frontend, anyway?​

Well, Front-end development is distributed systems engineering with a focus on the user. It involves creating interactive, responsive, accessible, and scalable applications that not only delight visually, but also function consistently under variable and unpredictable conditions.

Creating something visually acceptable but poorly built under the hood is very easy, especially nowadays with AI.

That simple interface — a registration form, a button to buy something, an API call, local updates, etc. — none of that is complex but it does require knowledge.

A simple subscribe screen can carry several issues, such as sending personal data or plan data through the Front-end (a mistake I see many people making with Vibe Coding).

This article won't be extensive, but I want to bring some points that are important for Front-end development.

I have two more articles in parallel (still in draft) that relate to this one, in case you want to check them out:

info

Systems Thinking: The Foundation of Front-end Architecture​

Experienced Front-end developers think in interconnected systems. Every architectural decision ripples through the entire application and directly affects the user experience.

🔄 Data Flow​

Data flow is the nervous system of your application:

  • Data origin: REST APIs, GraphQL, WebSockets, localStorage, IndexedDB
  • Data transport: HTTP, WebSocket protocol, messaging
  • Data transformation: Normalization, serialization, mapping to domain models
  • Data storage: Caches, state stores, local persistence
  • Reactivity: How data changes automatically reflect in the UI

A well-designed data flow facilitates debugging, improves performance, and makes the codebase more maintainable.

🧠 State Models​

State management is one of the most complex challenges in modern Front-end:

  • Application states: Authentication, permissions, user preferences
  • Entity states: Normalized domain data (users, products, etc.)
  • UI states: Modal open/closed, form valid/invalid
  • Resource states: Loading, error, success, empty
  • Derived states: Data calculated from other states

A robust state architecture prevents UI bugs, race conditions, and synchronization issues.

🧩 Component Architecture​

Componentization is the foundation of modern Front-end:

  • Hierarchy and composition: Parent, child, and compound components
  • Communication between components: Props, events, contexts, dependency injection
  • Component lifecycle: Mounting, updating, unmounting
  • Design patterns: Presentational/Container, Compound Components, Render Props, Custom Hooks

Good component architecture enhances reusability and facilitates maintenance.

👤 User Experience Flow​

The user experience is a system of interactions:

  • Navigation: Routes, links, redirects, history
  • Feedback: Loading states, success/error messages, transition animations
  • Interactions: Clicks, gestures, forms, drag and drop
  • Accessibility: Screen reader support, keyboard navigation, ARIA roles

A well-designed experience flow makes the application intuitive and pleasant to use.

♿ Accessibility and Edge Cases​

Robust applications consider all users and scenarios:

  • Different devices: Desktop, mobile, tablets, TVs
  • Different connections: 3G, 4G, Wi-Fi, offline
  • Different abilities: Visual, motor, auditory impairments
  • Different contexts: Bright sunlight on the screen, one-handed use, etc.

Prioritizing accessibility and edge cases is not optional — it's a fundamental part of responsible development.

UI Is Static. Frontend Is Dynamic.​

It's crucial to understand the difference between interface design and Front-end engineering. Compare:

UI (Visual Layer)Frontend Engineering
Design System and TokensMicro-frontends architecture
Layout and Grid SystemsGlobal state management (Redux, Zustand, Jotai)
Typography and Visual HierarchyCache and data fetching strategies
Color Palettes and ThemesPerformance optimization (Code splitting, bundle size)
Visual ComponentsTesting (unit, integration, e2e)
Animations and TransitionsSecurity (XSS, CSRF, validation)
Iconography and IllustrationsObservability and monitoring
Microcopy and UX WritingCI/CD and DevOps for Front-end

Modern Front-end development transcends visual presentation to encompass complex systems architecture.

Architectural Patterns in Front-end​

Frontend architecture has evolved to meet the demands of increasingly sophisticated applications:

🏛️ Component-Based Architectures​

Most modern frameworks (React, Vue, Angular, Svelte) adopt this model:

  • Atomic Design: Organization of components into atoms, molecules, organisms, templates, and pages
  • Design System: Unified system of components, tokens, and patterns
  • Component Libraries: Collections of reusable and consistent components

🔄 Data Flow Architectures​

  • Flux/Redux: Centralized store, actions, and reducers
  • MVC/MVVM: Separation between model, view, and controller/view-model
  • Clean Architecture: Separation by responsibility layers
  • Hexagonal/Ports & Adapters: Isolation of the application core

🏢 Scale Architectures​

  • Micro-frontends: Splitting the front-end into independent applications
  • Module Federation: Code sharing at runtime
  • Monorepos: Organization of multiple packages in a single repository

Choosing the appropriate architecture depends on the size, complexity, and requirements of your application.

Perspective:
Modern Frontend is a complete engineering discipline that combines UX principles, systems architecture, performance, and accessibility.
Developers who master not just the tools but the architectural concepts are able to build applications that stand the test of time.

Modern Tools and Practices​

The Front-end ecosystem evolves rapidly. Here are some tools that can help you:

📚 Frameworks and Libraries​

  • React - Declarative library for user interfaces
  • Next.js - React framework with hybrid rendering and advanced routing
  • Vue.js - Progressive framework with a powerful reactivity system
  • Svelte - Compiler that eliminates the need for a virtual DOM
  • Qwik - Framework with instant loading through resumability

⚙️ State Management​

  • Redux Toolkit - Simplified version of Redux with built-in tools
  • Zustand - Minimalist hooks-based solution
  • Jotai - Atomic state management inspired by Recoil
  • TanStack Query - Server state management and caching
  • XState - Finite state machines for complex logic

🎨 Modern Styling​

📦 Bundlers and Build Tools​

  • Vite - Build tool with ultra-fast HMR and efficient optimization
  • Turbopack - Webpack successor focused on speed
  • Bun - JavaScript runtime with integrated bundler and package manager
  • esbuild - Extremely fast bundler written in Go

🚀 Advanced Best Practices​

  • Performance

    • Code Splitting and Dynamic Imports
    • Server Components and Streaming SSR
    • Core Web Vitals optimization (LCP, FID, CLS)
    • Strategic Preloading and Prefetching
    • WorkerDOM and Web Workers for heavy computation

  • Code Quality

    • Strong typing with TypeScript
    • Automated testing (Jest, Testing Library, Playwright)
    • Linting and formatting (ESLint, Prettier)
    • Conventional Commits and changelog automation

  • DevOps for Frontend

    • CI/CD specific to Web applications
    • Deployment with zero-downtime strategies
    • Feature Flags and A/B Testing
    • Real-time error monitoring (DataDog, Sentry, LogRocket)
    • Production performance analysis (Web Vitals, RUM)

📖 Further Reading​

If you enjoyed this content, share it with other developers and let's build together a stronger and more technically prepared front-end community!

Want to go even deeper? Check out my book:
📘 React Beyond – Taking Your Frontend to the Next Level

Connect with me on LinkedIn to discuss more about Front-end Architecture and Scalable Systems!

📚 References​