How does a non-keyed implementation differ from keys in javascript frameworks?

Cample.js — Tue, 19 Sep 2023 07:24:06 +0000

Often, when developing websites using frameworks, little attention is paid to the details that are included in this framework. And this is normal, because the main task of the framework is to make it convenient to create a website and to make it fast and functional. But these details are interesting because, having learned some points, the view of JavaScript development is slightly supplemented.

One such detail is the keyed implementation. What it is?

Keyed implementation is first of all creating an association between the data and the DOM node. That is, when the data changes, thanks to this implementation, the DOM nodes themselves change. Non-keyed is thus not entirely related to the DOM node.

Most frameworks today have a special design that repeats DOM nodes depending on the data. Let’s say in a framework like Cample.js this construct (keyed) is the each:

const tableRows = each(
  "rows-component",
  ({ importedData }) => importedData.data,
  `<tr key={{index}}>
    <td>{{value}}</td>
   </tr>
  `,
  {
    import: {
      value: [],
      exportId: "mainExport",
    },
  }
);

For example, there will be such a construction:

<div><input type="text"/>val1</div>
<div><input type="text"/>val2</div>
<div><input type="text"/>val3</div>

So, what will happen if new data arrives in the non-keyed implementation, where there will be an array, but not with three elements, but with two? And also, if some data is entered into the input, what will happen there when two elements arrive in this loop construction?

<div><input value="1" type="text"/>val1</div>
<div><input value="2" type="text"/>val2</div>
<div><input value="3" type="text"/>

The result will be something like this if the data looks like this:

const data = ["val1", "val3"];

The HTML itself will look like this if you also enter some data into the input:

<div><input value="1" type="text"/>val1</div>
<div><input value="2" type="text"/>val3</div>

That is, it is clear that in a non-keyed implementation, information in DOM nodes is not stored in the same way as it would be in a keyed implementation, because there is no association due to the key.

Thus, two data arrays are compared, where there used to be 3 elements, but now there are 2, which means the data has decreased by 1 unit, and then the last block in the DOM must be deleted, because there is no association with the key. If there was an association, the code would look like this:

<div><input value="1" type="text"/>val1</div>
<div><input value="3" type="text"/>

This can be compared with id when creating a database, when, for example, there would be no id, then rows would be deleted not by id, but by the difference between old data and new data.

Of course, this is one of the small examples of what features javascript frameworks have, but it’s probably all the more interesting to work with them and create websites thanks to them.

I hope you found this article interesting. Thank you very much for reading!

Links:
https://camplejs.github.io/documentation/each.html
https://github.com/Camplejs/Cample.js

How to render components in javascript?

Cample.js — Mon, 05 Dec 2022 04:30:51 +0000

Hello everyone! Often, when creating components, the question of their rendering arises. This is a rather interesting question, the solution of which can be one of the methods described in this article.

If the component is made through a class, then a render function can be created for this component.
class Component{ constructor(selector,template,options){ this.selector=selector; this.template=template; this.options=options; } render(){ document.querySelectorAll(this.selector).forEach( (e) => {e.insertAdjacentHTML("afterbegin",this.template);}}} }

This function will find the selector of the corresponding tag of this component on the page, and add HTML markup to this selector.

Having created an instance of the class of this component, it can be passed to the class that calls the given render function on an instance of the component class.

class Cample { render(options = {component}){ Object.keys(options) .forEach((component) => {options[component].render(); }); }}

Using this method, components are rendered.

Thank you very much everyone for reading this article!

cample.js

DEV Community: Cample.js

How does a non-keyed implementation differ from keys in javascript frameworks?

How to render components in javascript?