As we have said before, good (and useful) things often come in small packages.
Let’s have a closer look.
A tiny library with a huge personality
Here are RE:DOM’s main features:
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 – 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,
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
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(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(parent, routes, initData) is a component router, which will create/update/remove components based on the current route.
There are many ways to use RE:DOM. Head over to the ‘installation guide‘ for all the relevant information.