[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"verticals":3,"article-frontend-future-ai":32,"code:tsx:true:waw5g6":179},[4,20],{"id":5,"slug":6,"name":7,"tagline":8,"description":9,"accentFrom":10,"accentTo":11,"icon":12,"defaultLocale":13,"locales":14,"features":16,"position":19},"019fe637-3d33-714b-b57f-23e163ffca0c","dev","Web Development","Build. Learn. Ship.","Practical courses, engineering-grade articles and open-source tools for people who ship.","violet-500","cyan-400","◇","en",[13,15],"fa",{"courses":17,"paths":17,"articles":17,"exams":18,"flashcards":18,"packages":17,"community":17,"certificates":17,"teams":17,"commerce":17},true,false,0,{"id":21,"slug":22,"name":23,"tagline":24,"description":25,"accentFrom":26,"accentTo":10,"icon":27,"defaultLocale":13,"locales":28,"features":30,"position":31},"019fe637-3dc2-754c-8657-0f175bfee7c6","lang","Languages","Learn a language the way you learn a codebase.","Structured paths, listening drills and spaced repetition that actually sticks.","amber-400","⌘",[13,15,29],"es",{"courses":17,"paths":17,"articles":18,"exams":18,"flashcards":18,"packages":18,"community":17,"certificates":18,"teams":18,"commerce":17},2,{"id":33,"slug":34,"title":35,"subtitle":36,"excerpt":37,"coverUrl":38,"locale":13,"readingMinutes":39,"publishedAt":40,"viewCount":41,"likeCount":19,"commentCount":19,"author":42,"vertical":47,"topic":48,"tags":51,"_count":63,"playground":36,"body":64,"bodyMd":169,"seo":170,"translationGroupId":173,"thread":174,"assessments":176,"translations":177,"quiz":36},"019fe65f-9991-7098-a2e8-28d741366ffa","frontend-future-ai","The Frontend Is Becoming a Conversation: Where UI Engineering Goes Next",null,"Frontend stacks consolidated, the rendering wars cooled off, and AI quietly changed what a frontend engineer actually does all day. Here's where it's heading.","\u002Fmedia\u002Fcovers\u002Ffrontend-future-ai.png",4,"2026-06-25T12:27:00.662Z",5,{"id":43,"name":44,"username":45,"avatarUrl":36,"headline":46},"019fe637-3c25-7088-9034-39c9f15dc3c8","Parsa Jiravand","parsa","Frontend engineer · building bestpractic",{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":49,"name":50},"ai","AI",[52,55,58,60],{"slug":53,"name":54,"color":36},"webdev","Webdev",{"slug":56,"name":57,"color":36},"frontend","Frontend",{"slug":49,"name":59,"color":36},"Ai",{"slug":61,"name":62,"color":36},"javascript","Javascript",{"assessments":19},{"blocks":65,"version":168},[66,70,73,77,80,88,91,95,98,101,104,110,114,117,120,126,129,132,135,142,145,148,151,154,157,160],{"id":67,"html":68,"type":69},"b1","\u003Cp>For a decade, "what's your frontend stack?" was a loaded question. jQuery vs. Backbone. Angular vs. React. Webpack vs. everything. The churn was exhausting, and a non-trivial chunk of our job was just keeping up.\u003C\u002Fp>","paragraph",{"id":71,"html":72,"type":69},"b2","\u003Cp>That era is quietly ending — not because we won the framework wars, but because the questions moved up a layer. The interesting problems in frontend today aren't about which library renders a list. They're about how rendering, data, and increasingly \u003Cem>generation\u003C\u002Fem> fit together. And AI is sitting right in the middle of that shift.\u003C\u002Fp>",{"id":74,"html":75,"text":75,"type":76,"level":31},"b3","The stack consolidated more than we admit","heading",{"id":78,"html":79,"type":69},"b4","\u003Cp>Look at what most new production apps actually reach for in 2026:\u003C\u002Fp>",{"id":81,"type":82,"items":83,"ordered":18},"b5","list",[84,85,86,87],"\u003Cstrong>React or Svelte\u002FVue\u003C\u002Fstrong> for the component model, with the framework wars settling into "pick one, they're all fine."","\u003Cstrong>A meta-framework\u003C\u002Fstrong> — Next, Remix\u002FReact Router, SvelteKit, Nuxt — because nobody hand-rolls routing, data loading, and SSR anymore.","\u003Cstrong>TypeScript by default.\u003C\u002Fstrong> Not a debate. The plain-JS greenfield project is now the exception.","\u003Cstrong>Server-first rendering\u003C\u002Fstrong> (RSC, islands, streaming) as the baseline, with the client bundle treated as a cost to minimize rather than the center of the universe.",{"id":89,"html":90,"type":69},"b6","\u003Cp>The center of gravity moved back toward the server — but a \u003Cem>smarter\u003C\u002Fem> server that streams HTML, hydrates selectively, and treats the network boundary as a first-class design concern. The pendulum didn't swing back to 2010; it spiraled forward.\u003C\u002Fp>",{"id":92,"html":93,"text":94,"type":76,"level":31},"b7","What AI actually changed (and what it didn't)","What AI actually changed (and what it didn't)",{"id":96,"html":97,"type":69},"b8","\u003Cp>The hype says "AI writes the frontend now." The reality on the ground is more specific and more interesting.\u003C\u002Fp>",{"id":99,"html":100,"type":69},"b9","\u003Cp>\u003Cstrong>It collapsed the cost of the first 80%.\u003C\u002Fstrong> Scaffolding a component, wiring a form, translating a Figma frame into JSX, writing the Tailwind for a layout — these used to be hours of work and are now minutes. That's real, and it's already changed how teams estimate.\u003C\u002Fp>",{"id":102,"html":103,"type":69},"b10","\u003Cp>\u003Cstrong>It did \u003Cem>not\u003C\u002Fem> collapse the last 20%.\u003C\u002Fstrong> Accessibility edge cases, focus management, race conditions in async state, the weird Safari bug, the design-system invariant that isn't written down anywhere — this is still where senior engineers earn their keep. AI gets you a plausible draft; it doesn't get you a \u003Cem>correct\u003C\u002Fem> one. The skill that's appreciating in value is \u003Cstrong>judgment\u003C\u002Fstrong>: knowing what "done" means and being able to tell when the generated code is subtly wrong.\u003C\u002Fp>",{"id":105,"code":106,"type":107,"language":108,"highlight":109},"b11","\u002F\u002F AI will happily generate this.\nfunction Price({ cents }: { cents: number }) {\n  return \u003Cspan>${(cents \u002F 100).toFixed(2)}\u003C\u002Fspan>;\n}\n\n\u002F\u002F It will not, on its own, ask:\n\u002F\u002F  - What about currencies that aren't cents-based (JPY)?\n\u002F\u002F  - What locale formats this for the user?\n\u002F\u002F  - What happens when `cents` is a float from a bad API?\n\u002F\u002F That question-asking is the job now.","code","tsx",[],{"id":111,"html":112,"text":113,"type":76,"level":31},"b12","The shift that matters: UI as something you \u003Cem>generate\u003C\u002Fem>, not just \u003Cem>write\u003C\u002Fem>","The shift that matters: UI as something you generate, not just write",{"id":115,"html":116,"type":69},"b13","\u003Cp>Here's the genuinely new idea. For years, "server-driven UI" meant the backend sending a layout description that the client renders. AI pushes that further — toward interfaces that are \u003Cstrong>assembled on demand\u003C\u002Fstrong> from intent rather than authored ahead of time.\u003C\u002Fp>",{"id":118,"html":119,"type":69},"b14","\u003Cp>We're not fully there, and a lot of "generative UI" demos are toys. But the direction is clear:\u003C\u002Fp>",{"id":121,"type":82,"items":122,"ordered":17},"b15",[123,124,125],"\u003Cstrong>Static UI\u003C\u002Fstrong> — you write every screen by hand. (Where we've been.)","\u003Cstrong>Server-driven UI\u003C\u002Fstrong> — the backend describes screens; the client renders from a schema.","\u003Cstrong>Generative UI\u003C\u002Fstrong> — a model produces the component tree for a given user and context, constrained by your design system.",{"id":127,"html":128,"type":69},"b16","\u003Cp>The teams getting value from #3 today aren't letting a model freestyle pixels. They're giving it a \u003Cstrong>tightly constrained vocabulary\u003C\u002Fstrong> — a fixed set of audited components and tokens — and letting it compose \u003Cem>within\u003C\u002Fem> those rails. The design system stops being documentation and becomes the \u003Cem>guardrail an AI plans against.\u003C\u002Fem> That reframes a lot of frontend architecture work: your component API is now also a prompt surface.\u003C\u002Fp>",{"id":130,"html":131,"text":131,"type":76,"level":31},"b17","What this means for the next couple of years",{"id":133,"html":134,"type":69},"b18","\u003Cp>A few predictions I'd actually bet on:\u003C\u002Fp>",{"id":136,"type":82,"items":137,"ordered":18},"b19",[138,139,140,141],"\u003Cstrong>The component library becomes the most valuable asset on the team\u003C\u002Fstrong> — because it's what both humans and models build against. Investment in a clean, well-typed, accessible design system pays off twice.","\u003Cstrong>Types and contracts win.\u003C\u002Fstrong> The more machine-readable your boundaries (TS types, schemas, OpenAPI), the more reliably AI can operate inside them. Ambiguity is the enemy of generation.","\u003Cstrong>The job title blurs.\u003C\u002Fstrong> "Frontend engineer" increasingly means \u003Cem>product engineer who owns the experience end-to-end\u003C\u002Fem> — data fetching, the rendering strategy, the AI-assisted authoring loop, and the taste to know when it's wrong.","\u003Cstrong>Reviewing replaces typing.\u003C\u002Fstrong> The bottleneck shifts from producing code to \u003Cem>evaluating\u003C\u002Fem> it. If you can't read code critically and fast, you'll be slower in an AI world, not faster.",{"id":143,"html":144,"text":144,"type":76,"level":31},"b20","The takeaway",{"id":146,"html":147,"type":69},"b21","\u003Cp>The frontend isn't being automated away — it's being \u003Cem>re-leveraged\u003C\u002Fem>. The mechanical parts are getting cheap, and the parts that were always the actual hard work — architecture, correctness, accessibility, taste — are getting more valuable, not less.\u003C\u002Fp>",{"id":149,"html":150,"type":69},"b22","\u003Cp>The engineers who thrive won't be the ones who type the fastest or memorize the most APIs. They'll be the ones who can hold a clear picture of what \u003Cem>good\u003C\u002Fem> looks like, express it in constrained, machine-legible building blocks, and tell — instantly — when the draft in front of them is wrong.\u003C\u002Fp>",{"id":152,"html":153,"type":69},"b23","\u003Cp>The frontend is becoming a conversation. Worth getting good at the half of it that's still yours.\u003C\u002Fp>",{"id":155,"type":156},"b24","divider",{"id":158,"html":159,"type":69},"b25","\u003Cp>\u003Cem>Thanks for reading! Let's stay connected:\u003C\u002Fem>\u003C\u002Fp>",{"id":161,"type":82,"items":162,"ordered":18},"b26",[163,164,165,166,167],"⭐ \u003Cstrong>GitHub\u003C\u002Fstrong> — follow me and star the projects: \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fparsajiravand\">github.com\u002Fparsajiravand\u003C\u002Fa>","💬 \u003Cstrong>Discord\u003C\u002Fstrong> — join the frontend best-practices community: \u003Ca href=\"https:\u002F\u002Fdiscord.gg\u002Fd9KRhuAwQ\">discord.gg\u002Fd9KRhuAwQ\u003C\u002Fa>","📸 \u003Cstrong>Instagram\u003C\u002Fstrong> — frontend best practices, daily: \u003Ca href=\"https:\u002F\u002Fwww.instagram.com\u002Fbestpractice___\u002F\">@bestpractice___\u003C\u002Fa>","💼 \u003Cstrong>LinkedIn\u003C\u002Fstrong> — \u003Ca href=\"https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fparsa-jiravand\u002F\">linkedin.com\u002Fin\u002Fparsa-jiravand\u003C\u002Fa>","✉️ \u003Cstrong>Email\u003C\u002Fstrong> (work & contract inquiries): \u003Ca href=\"mailto:bestpractice2026@gmail.com\">bestpractice2026@gmail.com\u003C\u002Fa>",1,"For a decade, \"what's your frontend stack?\" was a loaded question. jQuery vs. Backbone. Angular vs. React. Webpack vs. everything. The churn was exhausting, and a non-trivial chunk of our job was just keeping up.\n\nThat era is quietly ending — not because we won the framework wars, but because the questions moved up a layer. The interesting problems in frontend today aren't about which library renders a list. They're about how rendering, data, and increasingly *generation* fit together. And AI is sitting right in the middle of that shift.\n\n## The stack consolidated more than we admit\n\nLook at what most new production apps actually reach for in 2026:\n\n- **React or Svelte\u002FVue** for the component model, with the framework wars settling into \"pick one, they're all fine.\"\n- **A meta-framework** — Next, Remix\u002FReact Router, SvelteKit, Nuxt — because nobody hand-rolls routing, data loading, and SSR anymore.\n- **TypeScript by default.** Not a debate. The plain-JS greenfield project is now the exception.\n- **Server-first rendering** (RSC, islands, streaming) as the baseline, with the client bundle treated as a cost to minimize rather than the center of the universe.\n\nThe center of gravity moved back toward the server — but a *smarter* server that streams HTML, hydrates selectively, and treats the network boundary as a first-class design concern. The pendulum didn't swing back to 2010; it spiraled forward.\n\n## What AI actually changed (and what it didn't)\n\nThe hype says \"AI writes the frontend now.\" The reality on the ground is more specific and more interesting.\n\n**It collapsed the cost of the first 80%.** Scaffolding a component, wiring a form, translating a Figma frame into JSX, writing the Tailwind for a layout — these used to be hours of work and are now minutes. That's real, and it's already changed how teams estimate.\n\n**It did *not* collapse the last 20%.** Accessibility edge cases, focus management, race conditions in async state, the weird Safari bug, the design-system invariant that isn't written down anywhere — this is still where senior engineers earn their keep. AI gets you a plausible draft; it doesn't get you a *correct* one. The skill that's appreciating in value is **judgment**: knowing what \"done\" means and being able to tell when the generated code is subtly wrong.\n\n```tsx\n\u002F\u002F AI will happily generate this.\nfunction Price({ cents }: { cents: number }) {\n  return \u003Cspan>${(cents \u002F 100).toFixed(2)}\u003C\u002Fspan>;\n}\n\n\u002F\u002F It will not, on its own, ask:\n\u002F\u002F  - What about currencies that aren't cents-based (JPY)?\n\u002F\u002F  - What locale formats this for the user?\n\u002F\u002F  - What happens when `cents` is a float from a bad API?\n\u002F\u002F That question-asking is the job now.\n```\n\n## The shift that matters: UI as something you *generate*, not just *write*\n\nHere's the genuinely new idea. For years, \"server-driven UI\" meant the backend sending a layout description that the client renders. AI pushes that further — toward interfaces that are **assembled on demand** from intent rather than authored ahead of time.\n\nWe're not fully there, and a lot of \"generative UI\" demos are toys. But the direction is clear:\n\n1. **Static UI** — you write every screen by hand. (Where we've been.)\n2. **Server-driven UI** — the backend describes screens; the client renders from a schema.\n3. **Generative UI** — a model produces the component tree for a given user and context, constrained by your design system.\n\nThe teams getting value from #3 today aren't letting a model freestyle pixels. They're giving it a **tightly constrained vocabulary** — a fixed set of audited components and tokens — and letting it compose *within* those rails. The design system stops being documentation and becomes the *guardrail an AI plans against.* That reframes a lot of frontend architecture work: your component API is now also a prompt surface.\n\n## What this means for the next couple of years\n\nA few predictions I'd actually bet on:\n\n- **The component library becomes the most valuable asset on the team** — because it's what both humans and models build against. Investment in a clean, well-typed, accessible design system pays off twice.\n- **Types and contracts win.** The more machine-readable your boundaries (TS types, schemas, OpenAPI), the more reliably AI can operate inside them. Ambiguity is the enemy of generation.\n- **The job title blurs.** \"Frontend engineer\" increasingly means *product engineer who owns the experience end-to-end* — data fetching, the rendering strategy, the AI-assisted authoring loop, and the taste to know when it's wrong.\n- **Reviewing replaces typing.** The bottleneck shifts from producing code to *evaluating* it. If you can't read code critically and fast, you'll be slower in an AI world, not faster.\n\n## The takeaway\n\nThe frontend isn't being automated away — it's being *re-leveraged*. The mechanical parts are getting cheap, and the parts that were always the actual hard work — architecture, correctness, accessibility, taste — are getting more valuable, not less.\n\nThe engineers who thrive won't be the ones who type the fastest or memorize the most APIs. They'll be the ones who can hold a clear picture of what *good* looks like, express it in constrained, machine-legible building blocks, and tell — instantly — when the draft in front of them is wrong.\n\nThe frontend is becoming a conversation. Worth getting good at the half of it that's still yours.\n\n---\n\n*Thanks for reading! Let's stay connected:*\n\n- ⭐ **GitHub** — follow me and star the projects: [github.com\u002Fparsajiravand](https:\u002F\u002Fgithub.com\u002Fparsajiravand)\n- 💬 **Discord** — join the frontend best-practices community: [discord.gg\u002Fd9KRhuAwQ](https:\u002F\u002Fdiscord.gg\u002Fd9KRhuAwQ)\n- 📸 **Instagram** — frontend best practices, daily: [@bestpractice___](https:\u002F\u002Fwww.instagram.com\u002Fbestpractice___\u002F)\n- 💼 **LinkedIn** — [linkedin.com\u002Fin\u002Fparsa-jiravand](https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fparsa-jiravand\u002F)\n- ✉️ **Email** (work & contract inquiries): [bestpractice2026@gmail.com](mailto:bestpractice2026@gmail.com)",{"title":171,"canonical":172,"description":37},"The Frontend Is Becoming a Conversation: Where UI Engineering Goes Nex","https:\u002F\u002Fbestpractic.org\u002Fblog\u002Ffrontend-future-ai","019fe65f-9991-7098-a2e8-2c50cb0dced1",{"id":175,"locked":18},"019fe65f-a181-7608-9bd2-a3413bf3fee5",[],[178],{"locale":13,"slug":34},"\u003Cdiv class=\"shj shj-lang-tsx shj-multiline\" data-lang=\"tsx\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003Cdiv>5\u003C\u002Fdiv>\u003Cdiv>6\u003C\u002Fdiv>\u003Cdiv>7\u003C\u002Fdiv>\u003Cdiv>8\u003C\u002Fdiv>\u003Cdiv>9\u003C\u002Fdiv>\u003Cdiv>10\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-cmnt\">\u002F\u002F AI will happily generate this.\n\u003C\u002Fspan>\u003Cspan class=\"shj-kwd\">function\u003C\u002Fspan> \u003Cspan class=\"shj-class\">Price\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan> cents \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">:\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan> cents\u003Cspan class=\"shj-type\">: number\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-kwd\">return\u003C\u002Fspan> \u003Cspan class=\"shj-var\">\u003C\u002Fspan>\u003Cspan class=\"shj-oper\"><\u003C\u002Fspan>\u003Cspan class=\"shj-var\">span\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">>\u003C\u002Fspan>$\u003Cspan class=\"shj-oper\">{\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>cents \u003Cspan class=\"shj-oper\">\u002F\u003C\u002Fspan> \u003Cspan class=\"shj-num\">100\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">toFixed\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-num\">2\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">}\u003C\u002Fspan>\u003Cspan class=\"shj-var\">\u003C\u002Fspan>\u003Cspan class=\"shj-oper\"><\u002F\u003C\u002Fspan>\u003Cspan class=\"shj-var\">span\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">>\u003C\u002Fspan>;\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n\n\u003Cspan class=\"shj-cmnt\">\u002F\u002F It will not, on its own, ask:\n\u003C\u002Fspan>\u003Cspan class=\"shj-cmnt\">\u002F\u002F  - What about currencies that aren't cents-based (JPY)?\n\u003C\u002Fspan>\u003Cspan class=\"shj-cmnt\">\u002F\u002F  - What locale formats this for the user?\n\u003C\u002Fspan>\u003Cspan class=\"shj-cmnt\">\u002F\u002F  - What happens when `cents` is a float from a bad API?\n\u003C\u002Fspan>\u003Cspan class=\"shj-cmnt\">\u002F\u002F That question-asking is the job now.\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>"]