Native web components and web assembly (WASM) may be the two of the most influential trends that will shape the future of web design. Native web components, introduced in 2018, is currently positioned to replace JavaScript frameworks, such as View, React, or Angular, for many reasons. Native web components can now do nearly everything JavaScript frameworks can do. They are not bound to a framework, require a fraction of the code, and are far less difficult to maintain.
Why are JavaScript frameworks doomed?
Today’s JavaScript frameworks are certainly very powerful. However, they require a lot of code and are time-consuming to develop and maintain. They often develop security vulnerabilities or have changes to the framework which forces developers to rewrite code.
Native web components, in contrast, will continue to work far into the future. They have a much smaller payload and are more portable and reusable than components in JS frameworks. That means faster downloads and easier maintenance.
The following project is a working SPA application that uses native web components for the routing. It was written by Claude.ai under my direction and is available on my Github page for anyone to download and test.
Github Project:
https://github.com/ryankueter/NativeComponentRouterExample
In addition to index.html and styles.css, it includes three JavaScript files:
router.js
Includes the components necessary for the router, such as app-router (the router) and nav-link (the links that navigate to the different components). It also includes utilities, such as onclick="navigateTo('/')" for navigating between components, in addition to path routing and query routing.
Note: To view the routing in the address bar, it needs to be hosted by a web server.
components.js
Includes some simple custom web components that are included on the “Custom Components” page.
pages.js
Includes the pages that are routed.
The HTML code looks like the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SPA Router Demo</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="app-container">
<nav>
<div class="logo">SPA Router</div>
<nav-link href="/">Home</nav-link>
<nav-link href="/about">About</nav-link>
<nav-link href="/user/123">User 123</nav-link>
<nav-link href="/user/456">User 456</nav-link>
<nav-link href="/product/laptop/details">Product Details</nav-link>
<nav-link href="/search?q=laptop&category=electronics">Search Example</nav-link>
<nav-link href="/docs/api/users/create">API Docs</nav-link>
<nav-link href="/users">API Users</nav-link>
<nav-link href="/posts">API Posts</nav-link>
<nav-link href="/custom">Custom Components</nav-link>
</nav>
<app-router id="main-router"></app-router>
</div>
<script src="js/router.js"></script>
<script src="js/components.js"></script>
<script src="js/pages.js"></script>
</body>
</html>