<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Aleksandr Buryakov</title>
    <description>The latest articles on DEV Community by Aleksandr Buryakov (@yadrorus).</description>
    <link>https://dev.to/yadrorus</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4075047%2F39d7c2e0-d4dc-4c50-83cc-36c87d9ed1b3.jpg</url>
      <title>DEV Community: Aleksandr Buryakov</title>
      <link>https://dev.to/yadrorus</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/yadrorus"/>
    <language>en</language>
    <item>
      <title>Less Framework, More Platform</title>
      <dc:creator>Aleksandr Buryakov</dc:creator>
      <pubDate>Tue, 25 Aug 2026 10:09:24 +0000</pubDate>
      <link>https://dev.to/aura-ui/maga-less-framework-more-platform-gfg</link>
      <guid>https://dev.to/aura-ui/maga-less-framework-more-platform-gfg</guid>
      <description>&lt;p&gt;When I started building Aura Router, I thought I was solving a routing problem.&lt;/p&gt;

&lt;p&gt;I wasn't.&lt;/p&gt;

&lt;p&gt;I had an HTML and Web Components application that needed client-side navigation. I didn't want to rewrite it in React just to get SPA routing, and I didn't want another component model.&lt;/p&gt;

&lt;p&gt;So I built a router around the platform I was already using:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;HTML. Web Components. DOM. URLs. Browser navigation. JavaScript.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;That became &lt;a href="https://github.com/aura-ui/router" rel="noopener noreferrer"&gt;Aura Router&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;I wrote about that journey in &lt;a href="https://dev.to/aura-ui/why-i-built-an-spa-router-for-html-and-web-components-25dm"&gt;Why I Built an SPA Router for HTML and Web Components&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;But building the router exposed a bigger question:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Why do we keep rebuilding parts of the Web Platform inside frameworks?&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;And then an even bigger one:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;What would frontend development look like if the browser remained the foundation instead of becoming an implementation detail?&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;That led to three ideas: &lt;strong&gt;MAGA&lt;/strong&gt; (Make the Web Great Again), &lt;strong&gt;Platform First&lt;/strong&gt;, and — most importantly — &lt;strong&gt;MANA&lt;/strong&gt; (Minimal. Aligned. Native. Additive.).&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;TL;DR — MANA in four questions:&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Minimal&lt;/strong&gt; — Does the platform already solve this?&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Aligned&lt;/strong&gt; — Does the API preserve native semantics?&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Native&lt;/strong&gt; — Is it built on browser primitives?&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Additive&lt;/strong&gt; — What still works if we remove it?&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;MAGA is the vision. Platform First is the architecture. MANA is the checklist you can apply tomorrow.&lt;/p&gt;

&lt;h2&gt;
  
  
  MAGA: Make the Web Great Again
&lt;/h2&gt;

&lt;p&gt;Yes, the acronym is deliberately provocative. And yes, it's a joke.&lt;/p&gt;

&lt;p&gt;The idea behind it isn't.&lt;/p&gt;

&lt;p&gt;Not by going back — by recognizing how capable the Web has become. Frameworks helped us build the modern Web. But the platform changed too: HTML, CSS, the DOM, Web Components, modules, and browser APIs have all grown substantially.&lt;/p&gt;

&lt;p&gt;So maybe it's time to ask:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;What if the browser is already good enough to be the platform?&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Not nostalgia. Not anti-framework ideology.&lt;/p&gt;

&lt;p&gt;Simply:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Less framework. More platform.&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  The Web is already a platform
&lt;/h2&gt;

&lt;p&gt;The browser is not a primitive runtime waiting for a framework to make it useful. &lt;strong&gt;It is already a platform.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;It gives us HTML, CSS, the DOM, Custom Elements and Shadow DOM, templates and slots, JavaScript modules, URLs and navigation, Fetch, and many other Web APIs — and it keeps evolving.&lt;/p&gt;

&lt;p&gt;So the question is no longer simply "Which framework should we use?"&lt;/p&gt;

&lt;p&gt;Sometimes the better question is:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;"Does the platform already solve this?"&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  The problem isn't frameworks
&lt;/h2&gt;

&lt;p&gt;I am not arguing against React, Vue, Svelte, or Angular. Frameworks solve real problems.&lt;/p&gt;

&lt;p&gt;The problem is not that abstractions exist. The problem is that abstractions have costs: another API, mental model, runtime layer, lifecycle, convention, and compatibility surface.&lt;/p&gt;

&lt;p&gt;Sometimes that cost is worth paying. Sometimes it isn't.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Do we need a second model?&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;That is where MANA begins.&lt;/p&gt;

&lt;h2&gt;
  
  
  Platform First
&lt;/h2&gt;

&lt;p&gt;Platform First is not "vanilla JavaScript," "no dependencies," or "never use a framework."&lt;/p&gt;

&lt;p&gt;It is an order of decisions.&lt;/p&gt;

&lt;p&gt;The traditional model often looks like:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Framework
    ↓
Framework abstractions
    ↓
Application
    ↓
Browser
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Platform First reverses the direction:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Web Platform
    ↓
Application
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And when the platform isn't enough:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Web Platform
    ↓
Thin abstraction
    ↓
Application
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;The platform is the default. The abstraction is the addition.&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  A simple example
&lt;/h2&gt;

&lt;p&gt;Suppose we want to enhance navigation.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Less aligned:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;aura-link&lt;/span&gt; &lt;span class="na"&gt;href=&lt;/span&gt;&lt;span class="s"&gt;"/settings"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Settings&lt;span class="nt"&gt;&amp;lt;/aura-link&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Another element. Another API. Another mental model.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;More aligned:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;a&lt;/span&gt; &lt;span class="na"&gt;href=&lt;/span&gt;&lt;span class="s"&gt;"/settings"&lt;/span&gt; &lt;span class="na"&gt;data-aura-link&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Settings&lt;span class="nt"&gt;&amp;lt;/a&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The router enhances an existing link. The URL stays a URL. The browser still understands it.&lt;/p&gt;

&lt;p&gt;That is the difference between replacing a platform primitive and adding capability around it.&lt;/p&gt;

&lt;h2&gt;
  
  
  MANA
&lt;/h2&gt;

&lt;p&gt;Platform First describes the architecture. MANA describes how we make decisions inside it.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;MANA doesn't tell you whether to use an abstraction. It tells you how to judge one.&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  M — Minimal
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;How much abstraction do we actually need?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Use the smallest abstraction that solves the problem. If the platform already solves this, don't create another system simply because a framework normally does. If not, an abstraction may be justified.&lt;/p&gt;

&lt;p&gt;Minimal does not mean the fewest lines of code. It means minimizing unnecessary machinery.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;The burden of proof is on the abstraction.&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  A — Aligned
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;What meaning does the abstraction preserve?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Preserve the platform's semantics and contracts. A router can enhance a normal &lt;code&gt;&amp;lt;a href&amp;gt;&lt;/code&gt;, but the URL should remain a URL, the link a link, and the browser, server, and user should still understand it — including opening it in a new tab.&lt;/p&gt;

&lt;p&gt;The abstraction improves the experience without changing the underlying meaning.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;A developer who understands the Web should be able to understand what the abstraction is doing.&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  N — Native
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;What does the abstraction build on?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Prefer native platform primitives as the substrate. Native does not mean "native is always better." It means:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Start with what the browser already understands.&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;HTML before a component abstraction when HTML is enough. CSS before a styling runtime when CSS is enough. DOM before another rendering model when the alternative provides no required capability. URLs before a framework-specific navigation model. Web APIs before recreating the same capability inside a framework.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Native is the default, not the religion.&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  A — Additive
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;What happens when you remove the abstraction?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Add capability without unnecessarily replacing the platform underneath it.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;If you remove the abstraction, what remains?&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;With a router, a link can become client-side navigation. Without it, it is still a valid link. The application gained an enhancement without losing the Web.&lt;/p&gt;

&lt;p&gt;Not every system needs to be fully reversible. The useful distinction is:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;platform + capability
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;versus:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;platform replacement
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Platform First is not Platform Only
&lt;/h2&gt;

&lt;p&gt;Sometimes the platform is too low-level. Sometimes a library or thin wrapper is the better engineering choice. That's fine.&lt;/p&gt;

&lt;p&gt;The question is not "Can we avoid an abstraction?"&lt;/p&gt;

&lt;p&gt;The question is:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;"Does this abstraction add enough value to justify another model?"&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;MANA is a decision-making discipline, not a purity test.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Removal Test: Aura Router
&lt;/h2&gt;

&lt;p&gt;A conventional SPA router can become the owner of application navigation:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Router
 ├── route definitions
 ├── navigation state
 ├── URL handling
 ├── rendering lifecycle
 └── application navigation
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Aura Router takes a different approach. The browser still owns the primitives:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;URL
&amp;lt;a&amp;gt;
history
navigation
DOM
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Aura adds client-side behavior around them. A server-rendered HTML response can remain the foundation; a normal link remains a normal link; the router enhances navigation when JavaScript is available.&lt;/p&gt;

&lt;p&gt;What Aura does &lt;strong&gt;not&lt;/strong&gt; require:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;route configuration does not replace the URL&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;&amp;lt;a href&amp;gt;&lt;/code&gt; does not become &lt;code&gt;onClick&lt;/code&gt; or a framework-specific &lt;code&gt;to=&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;without JavaScript, navigation can still fall back to the server&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;You can verify this in the &lt;a href="https://aura-ui.github.io/router-preview/" rel="noopener noreferrer"&gt;live demo&lt;/a&gt;: disable JavaScript, reload, and use the same links. Navigation falls back to ordinary page loads. The links still work.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fs9923qglod07l4e0lkey.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fs9923qglod07l4e0lkey.png" alt="Aura Router navigation proof showing one full page load, a persistent Load ID, and client transitions" width="800" height="98"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Add capability without making the platform disappear.&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;That does not mean every router should work this way. It means the browser's navigation model is worth treating as an architectural asset rather than something a framework has to replace.&lt;/p&gt;

&lt;h2&gt;
  
  
  The platform is the continuity layer
&lt;/h2&gt;

&lt;p&gt;Web Components matter to Aura because they are already part of the Web Platform — Custom Elements, Shadow DOM, templates, and slots. They are not a framework between the application and the browser. But the principle is bigger than Web Components.&lt;/p&gt;

&lt;p&gt;Frameworks rise and fall. Rendering models, build tools, and component models change with them. The Web Platform evolves differently, with a strong compatibility model across decades.&lt;/p&gt;

&lt;p&gt;A URL is not a React primitive. HTTP is not a Vue primitive. CSS is not a Svelte primitive. The DOM is not an Angular primitive.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Frameworks are products. The Web is a platform.&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Platform First is not about choosing today's technology. It is about building on the layer most likely to still matter when today's technology is gone.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Use the platform that exists. Add what is missing. Don't unnecessarily replace what already works.&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  The experiment continues
&lt;/h2&gt;

&lt;p&gt;MANA needs to be tested against real applications — including cases where the platform genuinely isn't enough.&lt;/p&gt;

&lt;p&gt;Tell me where an abstraction is clearly justified.&lt;br&gt;
Tell me where Aura's APIs fight the browser instead of working with it.&lt;/p&gt;

&lt;p&gt;If you want to see the idea in code, try &lt;a href="https://github.com/aura-ui/router" rel="noopener noreferrer"&gt;Aura Router&lt;/a&gt;.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Build on the Web. Don't rebuild it.&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>webcomponents</category>
      <category>html</category>
    </item>
    <item>
      <title>Why I Built an SPA Router for HTML and Web Components</title>
      <dc:creator>Aleksandr Buryakov</dc:creator>
      <pubDate>Thu, 13 Aug 2026 15:47:51 +0000</pubDate>
      <link>https://dev.to/aura-ui/why-i-built-an-spa-router-for-html-and-web-components-25dm</link>
      <guid>https://dev.to/aura-ui/why-i-built-an-spa-router-for-html-and-web-components-25dm</guid>
      <description>&lt;p&gt;I didn't set out to build a router.&lt;/p&gt;

&lt;p&gt;I had a project built with HTML and Web Components. It worked, and I was happy with that stack. Then a few sections needed client-side navigation.&lt;/p&gt;

&lt;p&gt;Most pages needed to remain HTML-first for SEO and the initial render, so rewriting the entire site in React didn't make sense.&lt;/p&gt;

&lt;p&gt;I added React only to those sections.&lt;/p&gt;

&lt;p&gt;It solved the routing problem, but now I had React and Web Components in the same project. Maintaining both stacks became the new problem.&lt;/p&gt;

&lt;p&gt;React wasn't the problem. The combination was.&lt;/p&gt;

&lt;p&gt;At some point I started asking a simpler question: if the browser already has a component model, why do I need a second one just to get SPA navigation?&lt;/p&gt;

&lt;p&gt;I wanted a router that treated HTML and Web Components as the application—not as legacy markup waiting to be replaced.&lt;/p&gt;

&lt;p&gt;I looked for one. I couldn't find anything that matched the model I had in mind, so I started building &lt;a href="https://github.com/aura-ui/router" rel="noopener noreferrer"&gt;Aura Router&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;That became the use case for Aura: adding SPA navigation to an existing HTML or Web Components project without introducing a second component model.&lt;/p&gt;

&lt;h2&gt;
  
  
  The part I did not want to throw away
&lt;/h2&gt;

&lt;p&gt;What I didn't want to throw away was the existing HTML and Web Components stack. The router had to fit that stack, not replace it. In practice, that meant:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;every public URL should still return complete, indexable HTML from the server or static host;&lt;/li&gt;
&lt;li&gt;routes should be declared in HTML as Custom Elements;&lt;/li&gt;
&lt;li&gt;navigation should use ordinary &lt;code&gt;&amp;lt;a href&amp;gt;&lt;/code&gt; links that still work without JavaScript;&lt;/li&gt;
&lt;li&gt;Web Components in shared layouts should stay mounted when only the child route changes;&lt;/li&gt;
&lt;li&gt;the router should be framework-independent and usable anywhere Custom Elements work.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Those requirements led to a simple model: the host keeps serving complete pages. Aura can reuse the HTML already on screen, then handle marked links without loading a new document. Unmarked links keep their normal browser behavior.&lt;/p&gt;

&lt;p&gt;That was the idea. But I still needed a way to prove that the browser was not reloading the page. So I made the demo show exactly what was happening.&lt;/p&gt;

&lt;h2&gt;
  
  
  A demo you can verify
&lt;/h2&gt;

&lt;p&gt;Open the &lt;a href="https://aura-ui.github.io/router-preview/" rel="noopener noreferrer"&gt;live demo&lt;/a&gt; and look at the strip labeled &lt;strong&gt;Live navigation proof&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fs9923qglod07l4e0lkey.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fs9923qglod07l4e0lkey.png" alt="Aura Router navigation proof showing one full page load, a persistent Load ID, and nine client transitions" width="800" height="98"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;It assigns a &lt;strong&gt;Load ID&lt;/strong&gt; to the current document and counts client transitions. Click &lt;strong&gt;How it works&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;The URL changes. The heading changes. The client transition counter goes up. The Load ID doesn't change.&lt;/p&gt;

&lt;p&gt;Now reload the page. The Load ID changes.&lt;/p&gt;

&lt;p&gt;That's the whole idea in one small experiment: Aura changed the page, but the browser did not load a new document.&lt;/p&gt;

&lt;p&gt;There is another test I care about just as much. Disable JavaScript, reload the demo, and use the same navigation. The transitions become ordinary page loads, but the pages and links still work.&lt;/p&gt;

&lt;p&gt;You can also use &lt;strong&gt;View Page Source&lt;/strong&gt;. The content is already in the response; the demo is not an empty app shell waiting to be rendered.&lt;/p&gt;

&lt;h2&gt;
  
  
  What this looks like in code
&lt;/h2&gt;

&lt;p&gt;Existing links keep their &lt;code&gt;href&lt;/code&gt;. Add one attribute when a link should use client navigation:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;a&lt;/span&gt; &lt;span class="na"&gt;href=&lt;/span&gt;&lt;span class="s"&gt;"/about/"&lt;/span&gt; &lt;span class="na"&gt;data-aura-link&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;About&lt;span class="nt"&gt;&amp;lt;/a&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Routes are declared in HTML. &lt;code&gt;path&lt;/code&gt; defines which URL a route matches, while &lt;code&gt;view&lt;/code&gt; defines what that route should load. &lt;code&gt;&amp;lt;aura-outlet&amp;gt;&lt;/code&gt; provides the target for the active view:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;main&lt;/span&gt; &lt;span class="na"&gt;id=&lt;/span&gt;&lt;span class="s"&gt;"content"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;h1&amp;gt;&lt;/span&gt;Home&lt;span class="nt"&gt;&amp;lt;/h1&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/main&amp;gt;&lt;/span&gt;

&lt;span class="nt"&gt;&amp;lt;aura-outlet&amp;gt;&amp;lt;/aura-outlet&amp;gt;&lt;/span&gt;

&lt;span class="nt"&gt;&amp;lt;aura-router&lt;/span&gt; &lt;span class="na"&gt;extract=&lt;/span&gt;&lt;span class="s"&gt;"#content"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;aura-route&lt;/span&gt; &lt;span class="na"&gt;path=&lt;/span&gt;&lt;span class="s"&gt;"/"&lt;/span&gt; &lt;span class="na"&gt;view=&lt;/span&gt;&lt;span class="s"&gt;"/"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/aura-route&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;aura-route&lt;/span&gt; &lt;span class="na"&gt;path=&lt;/span&gt;&lt;span class="s"&gt;"/about/"&lt;/span&gt; &lt;span class="na"&gt;view=&lt;/span&gt;&lt;span class="s"&gt;"/about/"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/aura-route&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/aura-router&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Install the current release:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install&lt;/span&gt; &lt;span class="nt"&gt;--save-exact&lt;/span&gt; @auraui/router@0.3.0
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In JavaScript, one call registers Aura's Custom Elements:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;AuraRouter&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;@auraui/router&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nx"&gt;AuraRouter&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;install&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;When &lt;code&gt;view&lt;/code&gt; points to an HTML page, the optional &lt;code&gt;extract&lt;/code&gt; selector narrows the response to a single element.&lt;/p&gt;

&lt;p&gt;The same &lt;code&gt;extract&lt;/code&gt; selector is used on the initial page load: Aura adopts the matching &lt;code&gt;#content&lt;/code&gt; element already in the document instead of loading the current view again.&lt;/p&gt;

&lt;p&gt;The complete runnable example is available in &lt;a href="https://stackblitz.com/github/aura-ui/router-playground" rel="noopener noreferrer"&gt;StackBlitz&lt;/a&gt; and in the &lt;a href="https://github.com/aura-ui/router/blob/main/docs/tutorial.md" rel="noopener noreferrer"&gt;10-minute walkthrough&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Swapping a page was only the first test
&lt;/h2&gt;

&lt;p&gt;The flat example solves basic navigation. But I also wanted shared Web Components to survive child route changes.&lt;/p&gt;

&lt;p&gt;Suppose a workspace has a sidebar with local state, event listeners, or expensive setup. If only the child URL changes, remounting the sidebar would throw away its component instance and state.&lt;/p&gt;

&lt;p&gt;To avoid that remount, Aura keeps the shared UI in a parent layout and renders child routes into its outlet:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;template&lt;/span&gt; &lt;span class="na"&gt;id=&lt;/span&gt;&lt;span class="s"&gt;"workspace-shell"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;workspace-sidebar&amp;gt;&amp;lt;/workspace-sidebar&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;aura-outlet&amp;gt;&amp;lt;/aura-outlet&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/template&amp;gt;&lt;/span&gt;

&lt;span class="nt"&gt;&amp;lt;aura-route&lt;/span&gt; &lt;span class="na"&gt;path=&lt;/span&gt;&lt;span class="s"&gt;"/workspace/"&lt;/span&gt; &lt;span class="na"&gt;layout=&lt;/span&gt;&lt;span class="s"&gt;"workspace-shell"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;aura-route&lt;/span&gt; &lt;span class="na"&gt;path=&lt;/span&gt;&lt;span class="s"&gt;"."&lt;/span&gt; &lt;span class="na"&gt;view=&lt;/span&gt;&lt;span class="s"&gt;"/workspace/"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/aura-route&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;aura-route&lt;/span&gt; &lt;span class="na"&gt;path=&lt;/span&gt;&lt;span class="s"&gt;"settings"&lt;/span&gt; &lt;span class="na"&gt;view=&lt;/span&gt;&lt;span class="s"&gt;"/workspace/settings/"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/aura-route&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/aura-route&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;When navigation stays inside &lt;code&gt;/workspace/&lt;/code&gt;, Aura keeps the matched parent layout mounted and changes only the nested outlet.&lt;/p&gt;

&lt;p&gt;I made that visible in the &lt;a href="https://aura-ui.github.io/router-preview/workspace/" rel="noopener noreferrer"&gt;nested demo&lt;/a&gt;. Open it, note the &lt;strong&gt;Layout ID&lt;/strong&gt;, and then click &lt;strong&gt;Settings&lt;/strong&gt;. The child content changes, but the Layout ID does not.&lt;/p&gt;

&lt;p&gt;This is the part that mattered for Web Components: their instances can stay alive while navigation changes only the child view.&lt;/p&gt;

&lt;p&gt;One current boundary is worth calling out: the server or static host still owns the initial response. Today, a direct nested URL must return the parent layout, nested outlet, and child content; Aura does not generate that backend markup.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why publish at 0.3?
&lt;/h2&gt;

&lt;p&gt;Aura Router is currently at &lt;code&gt;0.3.0&lt;/code&gt;. Core navigation, first-paint adoption, and nested layouts are implemented and tested, but the public API may still change before &lt;code&gt;1.0&lt;/code&gt;. I recommend pinning the exact version.&lt;/p&gt;

&lt;p&gt;I've tested the cases I know. The gaps I care about now are the ones that show up in projects I didn't build: awkward server setups, integration edge cases, and places where the HTML-first model does not fit. Publishing now gives that feedback a chance to shape the API before &lt;code&gt;1.0&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;This post focuses on why Aura exists and how its core model works. The guide documents the API available today; I plan to publish a deeper API walkthrough as it stabilizes toward &lt;code&gt;1.0&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Try Aura Router:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://aura-ui.github.io/router-preview/" rel="noopener noreferrer"&gt;Live demo&lt;/a&gt; — verify the navigation behavior&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://stackblitz.com/github/aura-ui/router-playground" rel="noopener noreferrer"&gt;StackBlitz&lt;/a&gt; — explore the runnable project&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://github.com/aura-ui/router" rel="noopener noreferrer"&gt;GitHub&lt;/a&gt; — source, documentation, and issues&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://www.npmjs.com/package/@auraui/router" rel="noopener noreferrer"&gt;npm&lt;/a&gt; — install &lt;code&gt;@auraui/router&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If you try Aura in an existing HTML or Web Components project, I'd like to know what worked and what got in your way. Share your experience in the comments or in &lt;a href="https://github.com/aura-ui/router/discussions" rel="noopener noreferrer"&gt;GitHub Discussions&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>webcomponents</category>
      <category>html</category>
    </item>
  </channel>
</rss>
