Contents
In brief
Most courses teach you to build a React button but not why the browser paints it, what happens on 3G on a budget phone, or how rendering strategy hits business metrics. A Dev.to post surveys the “invisible” side of frontend that code generators cannot replace.
What happened
The author pushes back on the idea that frontend is the “easy” side of software. Your code runs on thousands of device models and browser versions; every millisecond of latency is felt by a human, not just a Grafana chart.
The article maps topics rarely covered in intro tutorials. Component architecture: composition beats inheritance; React, Vue, and Angular imply different mental models—not just syntax. Rendering strategies: client-side rendering (CSR), server-side rendering (SSR), static site generation (SSG), and hybrids—choice depends on SEO, interactivity, and TTFB, not hype.
State: local, lifted, context, server, and external stores—dumping everything into Redux without need is expensive. Performance: bundle size, main-thread blocking, Core Web Vitals (LCP, INP, CLS) affect UX and search. Testing on real networks and devices matters, not only DevTools on a MacBook.
Why it matters
AI assistants speed up JSX and styling but do not replace understanding the browser pipeline: HTML parse, tree build, layout, paint, network, cache, hydration. Picking CSR for a content site or overusing context breaks products as reliably as a SQL bug—just later, on mobile traffic.
Career-wise, this separates “component assemblers” from engineers who can justify choices to backend and product: why SSR here, why code-splitting, where UI state ends and server data begins.
In practice
- For each screen, pick a rendering model (CSR / SSR / SSG / islands) and document why in an ADR or README.
- Keep local state local; lift or use context only when necessary.
- Measure LCP, INP, CLS on production-like builds, not localhost only.
- Test with network throttling (Slow 3G) and weak devices—emulators are not enough.
- Watch chunk sizes and lazy-loaded routes; one heavy import undoes optimizations.
- Read platform docs (MDN, web.dev), not only framework API references.
Takeaway
The Dev.to piece reminds us frontend is not the “simple” full-stack side—it is where UX, network, platform, and architecture meet. AI helps you type faster; it does not fill foundational gaps. The full breakdown is in the original post.