Welcome to Software Deluxe’s news section! In this segment, we will keep you up to date with web design, software development, big data, and more. Each edition covers the latest news in software development, or hidden gems you must know.
In this article, we will talk about Enhance.js. Its creators describe it as a JavaScript workflow designed to progressively improve sites in a qualified way. Enhance performs a brief browser diagnostic to decide whether to enhance a basic (but already working) page by adding classes and requesting more scripts and stylesheets.
So how does Enhance.js work?
Enhance is an “HTML” framework with JavaScript involved. In simple terms, it provides a dependable foundation for your code. It allows you to write web components in a better syntax and to have a system for things such as API routes, utilizing what is essentially like state and props.
Key components
It is all HTML based— a file-based router that has plain HTML (not augmented HTML) files inside. It works like this: you write your components inside an elements folder. Then, you write your pages inside a pages folder (these pages are all HTML). Any time you need a custom element, you can name said element with its specific descriptor inside an elements folder. When you use that component in your HTML, the framework knows to look for it based on the naming convention, without having to import anything.
As such, it offers a modern way of working with web components while having a full-on routing structure without getting bogged down with many JavaScript features. It’s unlike other programs such as Svelt or React in its features— it’s all web components-based.
With Enhance, you are authoring HTML, using web components, and then you progressively enhance that HTML from there. In that sense, it’s an outstanding platform. Another feature is that when you work with web components inside of the system, you end up having all single-file components— one component per file.
If you want to write single-file components, you do so within a pure function. You export the default function (your component). Then, that component gets passed a couple of things.
Rounding off
Enhance is a useful HTML-first program. At its core, it is a helper function that outputs actual components and gives you things like SSR.
The component syntax for web components puts it into a pure function instead. You do that with an HTML tagged template literal and then write straight-up HTML inside. Instead of using any kind of syntax or templating language, you are using string interpolation. There is no templating language, no “features”. JavaScript is the templating language.
So, there you have it. Enhance is very simple: single-file components, HTML tagged template literal. And you can use slots like in web components and state. Let us know what you think!
