Simple Front End Reactivity

May 29, 2018 0 Comments

Simple Front End Reactivity

 

 

What if building a searchable reactive front end that associated e-mail addresses with names was as simple as this?

<!DOCTYPE html>
<html>
<body>
<div id="app">
<p>
Search By Email: <input onchange="search(this.value)">
</p>
<p>
Email:<input value="${email}" disabled="${email.length>0}" onchange="linkState('email','#app')(event)"><br>
First Name:<input value="${name.first}" onchange="linkState('name.first','#app')(event)"><br>
Last Name: <input value="${name.last}" onchange="linkState('name.last','#app')(event)">
</p>
<p t-if="${email.length>0}">
<button onclick="save()">Save</button>
<button onclick="remove()">Delete</button>
</p>
</div>
</body>

It can be with Tlx v2, the less opinionated, multi-paradigm front end library. Although Tlx has many of the features of Vue, React, Riot and Hyperapp; in this article, we will just wet your appetite for the the simple power of HTML template literals and tlx.linkState combined with localStorage.

HTML Template literals are similar to the mustache templates, {{ }}, popularized by Handlebars and Ractive. Except that they don’t support conditional branching within HTML, they can be use pretty much anywhere a mustache can be used. They cause the evaluation of embedded JavaScript expressions and are particularly useful for substituting run-time data values into HTML.

Like Ractive, the processing of HTML template literals also makes boolean HTML attributes disappear when they are set to false. See the above code, disabled="${email.length>0}, for an example.

Like Vue, Tlx supports attribute directives. The directives t-if, t-for, t-foreach and t-on are built-in. But you can additional ones in as little as one or two lines of code. See the above code, <p t-if="${email.length>0}">, for an example use.

This is where Tlx originally got its name, Template Literal Extensions. Although Tlx v2 is far more powerful, we saw no point in changing the name since most people don’t now what Tlx stands for anyway.

The linkState concept is borrowed from Preact and is simply a way to bind data from a form to the model state associated with a target HTML element. It takes a key path to update and a target element on which to update the model. If no model exists on the first update, one is created.

It takes just a little JavaScript after the closing body tag to make the fields defined above do their work. We need to load tlx.js, get a bound model, and add a search function, a save function, and a delete function.

<script src="../dist/tlx.js"></script>
<script>
const model = tlx.bind(),
search = key => {
let object,
i = 0;
while(!object && i<localStorage.length) {
// look through all the keys until one matches
if(localStorage.key(i)=key) {
object = JSON.parse(localStorage.getItem(key));
}
i++;
}
if(object) {
// assign values from object to the model
Object.assign(model,object)
} else {
// "undefine" the properties on the model
// Tlx actually has three approaches to removing data
// model. This is just one used when no bind start-up
// options are provided.
Object.keys(model).forEach(key => {
if(typeof(model[key])!
"function") {
model[key] = undefined;
}})
}
},
remove = () => {
if(model.email) {
localStorage.removeItem(model.email);
// search for nothing, which will blank out the model
search();
}
},
save = () => {
if(model.email) {
localStorage.setItem(model.email,JSON.stringify(model));
}
};
</script>

There is a working example at JSFiddle.net.

Because Tlx started out as an HTML focused replacement for JSX, it was frequently the case that entire pages needed to be rendered. So, a set of useful defaults were defined:

  1. The default model is just an empty Object.
  2. The default HTML element into which to render content is the first element child of document.body.
  3. The default template is the original contents of the default HTML element.
  4. The default behavior when linkState is called after tlx.bind is invoked with no arguments is to be reactive and automatically re-render impacted page components.

The above being said, Tlx has evolved a create deal since v1 and there are now many options for creating apps, components, and custom HTML tags. Below are just a few of the many choices available:

1) One way or two way data binding

2) Immutable state or mutable state in controllers/actions

3) Distinct model and controller/action objects or single objects providing both model and controller

4) POJOs or class instances in arbitrary depth heirarchies as models and controllers/actions

5) h function vDOM creation, string template vDOM creation, or HTML template vDom creation

6) Pseudo-compatibility options that can make it familiar to developers accustomed to other libraries or allow the overaly of architectural concerns, e.g. @ handler shorthand like Vue, style and functional code clustering ala Riot templates, similar function names (tlx.directive vs Vue.directive or tlx.linkState vs preact.linkState).

If you like the simplicity of Tlx, give us a clap!

You are invited to visit the Github site for full details or watch for subsequent articles to explore the power and simplicty of Tlx.


Tag cloud