Welcome to Software Deluxe\u2019s 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.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
So how does Enhance.js work?<\/strong><\/p>\n\n\n\n Enhance is an \u201cHTML\u201d 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.<\/p>\n\n\n\n It is all HTML based\u2014 a file-based router that has plain HTML (not augmented HTML) files inside. It works like this: you write your components inside an elements <\/em>folder. Then, you write your pages inside a pages<\/em> 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<\/em> 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.<\/p>\n\n\n\n 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\u2019s unlike other programs such as Svelt <\/em>or React<\/em> in its features\u2014 it\u2019s all web components-based.<\/p>\n\n\n\n Rounding off <\/strong> 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 \u201cfeatures\u201d. JavaScript is<\/em> the templating language.<\/p>\n\n\n\n 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!<\/p>\n","protected":false},"excerpt":{"rendered":" Welcome to Software Deluxe\u2019s news section! In this segment, we will keep you up to…<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-6424","post","type-post","status-publish","format-standard","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/softwaredeluxe.net\/index.php?rest_route=\/wp\/v2\/posts\/6424","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/softwaredeluxe.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/softwaredeluxe.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/softwaredeluxe.net\/index.php?rest_route=\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/softwaredeluxe.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6424"}],"version-history":[{"count":2,"href":"https:\/\/softwaredeluxe.net\/index.php?rest_route=\/wp\/v2\/posts\/6424\/revisions"}],"predecessor-version":[{"id":6429,"href":"https:\/\/softwaredeluxe.net\/index.php?rest_route=\/wp\/v2\/posts\/6424\/revisions\/6429"}],"wp:attachment":[{"href":"https:\/\/softwaredeluxe.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6424"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/softwaredeluxe.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=6424"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/softwaredeluxe.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=6424"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Key components<\/strong><\/p>\n\n\n\n
With Enhance, you are authoring HTML, using web components, and then you progressively enhance that HTML from there. In that sense, it\u2019s 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\u2014 one component per file.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n