Since January 2021
LinkDoars
Doars is an open-source front-end framework that introduces a fresh approach to web development by enabling developers to add instructions directly to HTML through attributes. These attributes are then read and translated into functional elements by the framework, eliminating the need for complex JavaScript code. This allows developers to quickly and effortlessly add functionality without directly editing the page from the outside. Additionally, Doars empowers developers to intuitively incorporate interactive elements into server-rendered websites.
One of the advantages of Doars is the direct integration of functionality into the markup. This makes it easy to understand and maintain the code, as developers can quickly identify where and how the document is manipulated. This promotes collaboration within the development team and simplifies the maintenance process.
<!-- Define component. -->
<div d-state="{ messages: [ 'Hello there!', 'General Kenobi.' ] }">
<div>List</div>
<!-- Create a list item for each message. -->
<ol>
<template d-for="message of messages">
<li d-text="message"></li>
</template>
</ol>
<!-- Store input as a reference. -->
<input type="text" d-reference="'input'">
<!-- On click add input value to the messages. -->
<button d-on:click="messages.push($references.input.value); $references.input.value = ''">
Add
</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/@doars/doars@3/dst/doars.iife.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const doars = new window.Doars()
doars.enable()
})
</script>
Doars offers a modular structure that facilitates easy integration of various plugins. A notable example is the navigation plugin, which improves loading times by prefetching pages as soon as their links come into the visitor's view. This enables seamless transitions between pages without complete reloading. This flexibility makes Doars suitable for various projects and needs.
LinkFurther reading
Visit the Doars project website for more information or checkout the Doars source code available on GitHub.
You can also learn more about other open source projects of mine as well: