F(RE:DOM) to all

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

Eirini-Eleni Papadopoulou
© Shutterstock / Hornfinger  

Adding some useful helpers to create DOM elements and keeping them in sync with the data, RE:DOM is a fast JavaScript library for creating UI you’ve been looking for! Let’s have a closer look at what makes this library special.

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.

Eirini-Eleni Papadopoulou
Eirini-Eleni Papadopoulou was the editor for Coming from an academic background in East Asian Studies, she decided that it was time to go back to her high-school hobby that was computer science and she dived into the development world. Other hobbies include esports and League of Legends, although she never managed to escape elo hell (yet), and she is a guest writer/analyst for competitive LoL at TGH.

Inline Feedbacks
View all comments