RE:DOM is a tiny JavaScript library with a huge personality

As we have said before, good (and useful) things often come in small packages.

RE:DOM is a tiny JavaScript library that aims to add some useful helpers to create DOM elements and keeping them in sync with the data.

Let’s have a closer look.

A tiny library with a huge personality

Here are RE:DOM’s main features:

Elements – el (actually alias for html) is a helper for document.createElement with a couple of differences. The basic idea is to simply create elements with el and mount them with mount, almost like you would do with plain JavaScript.

Mount – You can mount elements/components with mount(parent, child, [before]). If you define the third parameter, it works like insertBefore and otherwise it’s like appendChild. Mount will trigger the onmount lifecycle event the first time you mount a child. If you mount the same child again to the same parent, onremountgets called. If you mount it to another place, onunmount and onmount get called. Find more information on mounting here.

Components – You can create components with RE:DOM easily by defining a class or function, which returns an object with at least an el property, and in case of list also the update property.

Lists – When you have dynamic data, it’s not that easy to manually keep the elements and the data in sync. That’s when the list(parent, View, key, initData) helper comes to rescue.

Place –place(View, initData) comes in handy when you need to create/destroy a component while reserving its place. Think of it as a single view router (without the need of a parent).

Router – router(parent, routes, initData) is a component router, which will create/update/remove components based on the current route.

For more information on what RE:DOM can do, check out the documentation or head over to the GitHub repo.

SEE ALSO: Vue.js is the absolute rockstar of the JavaScript ecosystem

Getting started

There are many ways to use RE:DOM. Head over to the ‘installation guide‘ for all the relevant information.

The post RE:DOM is a tiny JavaScript library with a huge personality appeared first on JAXenter.