lazui
The lazy UI framework. Get lazui ... do less ... deliver more.
lazui is pronounced "lazy", as in "Lazy loading ... ".
introduction
lazui is a JavaScript library that allows you to create interactive websites and single page apps with less work.
lazui extends the attribute space of typical HTML to provide a rich set of functionality. It provides the JavaScript, so
you don't have to.
lazui gives you access to the best ideas from htmx, lighterHTML, Knockout, Turbo and Stimulus and Vue
lazui has a small core (less than 8K) and incremental loading of just the parts you use. Or, you can create a custom bundle for one time loading.
motivation
There are great features in the above libraries, you should not have to choose just one approach.
features
Here is a short list of features, visit lazui.org for a graph of features and benefits.
without writing JavaScript
- attributes for state management
- attributes for event management
- attributes for content loading and targeting
- JavaScript ${templates in HTML}
- server sent events
- web sockets
- form processing
- client side routing
- charts and gauges
- remote data synchronization
with writing JavaScript
- html template function'
- render function
- custom attributes and controllers
- web components (custom elements)
- an exensible basic web server with support for MArkdown processing, server sent events, web sockets, and remote data synchronization
quick start
for HTML
<template id="goodbye">
Goodbye ${userName}
</template>
<div data-lz:src="#goodbye" data-lz:state='{userName:"John"}' data-lz:trigger="click dispatch:load" data-lz:target="outer">
Hello, ${userName}. The date and time is ${new Date().toLocaleTimeString()}. Click to leave.
</div><template data-lz:state="person">
{
name: "Mary",
age: 21,
married: false
}
</template>
<form data-lz:usestate="person" data-lz:controller="/controllers/lz/form.js">
<input data-lz:bind="name" type="text" placeholder="name">
<input data-lz:bind="age" type="number" placeholder="age">
<input data-lz:bind="married" type="checkbox"> Married
</form>
<div data-lz:usestate="person">${name}'s age is ${age}${married ? " and married" :""}.</div>for JavaScript
<script>
const {render,html} = lazui;
let count = 0;
const clicked = (event) => {
count++;
event.target.innerText = `Click count: ${count}`;
};
render(document.currentScript,
html`<div onclick=${clicked}>Click count: ${count}</div>`,
{where:"afterEnd"});
</script>Ok, now it's time to dive in!
Change History (Reverse Chronological Order)
2023-12-14 v0.0.67-a fixed issue with boolean attributes
2023-12-14 v0.0.66-a enabled support for variables in directive resolution so that they do not require serializing
2023-12-14 v0.0.65-a added lz:render attribute directive
2023-12-11 v0.0.64-a added specialized flexroute and flexrouter back for client side use
2023-12-09 v0.0.63-a fixed issue with delete property on state proxy not returning true
2023-12-09 v0.0.62-a fixed issue with setState not having default 3rd argument, fixed issue with state updating on nested objects when oldValue was undefined
2023-12-07 v0.0.61-a completed upgrade to separate flexrouter package
2023-11-16 v0.0.60a corrected flexrouter path in defaults.
2023-11-16 v0.0.59a final changes to support ws in place of websockets.
2023-11-16 v0.0.52-58a production router port and host management.
2023-11-16 v0.0.51a switched to using flexrouter. documentation forthcoming.
2023-11-04 v0.0.50a final attempt to fix websocket CSP issue before CSPs are removed
2023-11-04 v0.0.49a another attempt to fix websocket CSP issue
2023-11-04 v0.0.48a attempt to fix websocket CSP issue
2023-11-04 v0.0.47a added search capability to TOC
2023-11-02 v0.0.46a removed lz:showsource in favor of examplify, added reltive pathing to embedded routes, enhanced docs
2023-11-01 v0.0.45a added lz:usedefaults option, optimized initial load, enhanced docs
2023-11-01 v0.0.44a fixed issue with setting state properties that use dot notation, enhanced docs
2023-10-31 v0.0.43a removed remote data sync for now, changed remote state to use router, added state lifecycle events, enhanced docs
2023-10-31 v0.0.42a enhanced docs, fixed issue related to styles not being applied for documents loaded via lz:src
2023-10-31 v0.0.41a updated version of examplify, changed lz:on to `lz:trigger, fixed issues with multi-target updates, enhanced docs
2023-10-30 v0.0.40a updated version of examplify
2023-10-30 v0.0.39a fixed router issue dependency on examplify when deployed
2023-10-30 v0.0.38a fixed issue backtick substitution and highlightjs, documented examplify
2023-10-29 v0.0.37a fixed issue with handler loading for routes
2023-10-29 v0.0.36a added use of examplify
2023-10-29 v0.0.35a trying out lazui protocol idea
2023-10-29 v0.0.34a added client side markdown support
2023-10-29 v0.0.32a-33a performance optimizations
2023-10-28 v0.0.31a another index.md bug fix post speed improvements
2023-10-28 v0.0.30a fixed example bug on index.md
2023-10-28 v0.0.29a page load speed improvements
2023-10-28 v0.0.28a documentation updates, fixed issues that appeared when minification was turned on
2023-10-28 v0.0.27a documentation updates, fixed issue with sourcing state remotely, fixed issue with template hooks
2023-10-28 v0.0.26a documentation updates, client side routing refinements, fixed toc nesting issue, added custom element git-issue-ref.
2023-10-27 v0.0.25a documentation updates, client side routing refinements, form binding refinements
2023-10-26 v0.0.23a documentation updates, client side routing refinements, form binding refinements
2023-10-26 v0.0.22a documentation updates, form handling refinements, client side routing refinements
2023-10-25 v0.0.21a documentation updates, form handling refinements, rendering refinements
2023-10-25 v0.0.20a documentation updates, refinement to TOC handling
2023-10-25 v0.0.19a documentation updates, refinement to data sync
2023-10-24 v0.0.18a documentation updates, refinement to WordChart processing
2023-10-23 v0.0.17-a server data sync, content updates
2023-10-22 v0.0.16-a size optimizations
2023-10-21 v0.0.11-a thru v0.0.15-a Getting sse, pubsub, ws working with CDN load
2023-10-21 v0.0.10-a Added lz:usehighlighter directive.
2023-10-21 v0.0.5-9-a Enabling CDN loading
2023-10-21 v0.0.4-a Path correction for CDN loading
2023-10-21 v0.0.3-a Adding ability to load/run from CDN
2023-10-21 v0.0.2-a Documentation updates, optimizations, server bug fixes
2023-10-19 v0.0.1-a Initial Release.