Module 01

Modern Frontend Engineering Foundations

We start by defining the shift from "web development" to "frontend engineering." This module sets the architectural and mental groundwork for the advanced concepts that follow.

01.

Engineering vs. Development

The term "Frontend Engineer" isn't just a title inflate; it represents a fundamental shift in responsibility. While a Developer focuses on implementation (writing code to match a design), an Engineer focuses on the system's lifecycle.

The UI Mindset

"Does it look like the Figma file? Does it click?" Focus is on visual output and immediate functionality.

The Engineering Mindset

"How does this scale to 100 features? How do we handle 500ms latency? Is this component reusable?" Focus is on architecture, performance, and maintainability.

As we move through this course, stop asking "How do I build this?" and start asking "How do I architect this so it doesn't break in 6 months?"

02.

The Modern Ecosystem

The ecosystem is vast, but it categorizes into clear layers. Understanding these layers prevents "tool fatigue."

  • Runtime: Where your code executes (Browser Engines like V8, SpiderMonkey).
  • Build Tools: Converting dev code to production assets (Vite, Webpack, Turbopack).
  • Static Analysis: Preventing errors before runtime (TypeScript, ESLint).
$ npm run build
> vite build
βœ“ 42 modules transformed.
βœ“ dist/index.html 0.45 kB
βœ“ dist/assets/index.js 143.22 kB

In this course, we treat tooling not as a black box, but as a configurable part of our engineering stack.

03.

Component-Based Architecture

Components are the primitives of modern frontend engineering. They allow us to apply the Separation of Concerns principle not just by technology (HTML/CSS/JS), but by functionality.

However, a common anti-pattern is the "God Component"β€”one component that handles too much logic. We aim for:

  • Presentational Components: Pure UI, receives data via props. Predictable.
  • Container Components: Handles logic, fetching data, and state. Complex.
04.

Core Principles

Maintainability

Code is read 10x more than it is written. Optimize for the "next developer" (which might be you in 6 months).

Scalability

Architecture that supports linear growth in complexity, rather than exponential growth in bugs.

05.

Reference Material

Review these materials before the next module: