Thomas Portelange
LeKoala Dev Blog

LeKoala Dev Blog

Self-initializing elements with super powers

Self-initializing elements with super powers

Thomas Portelange's photo
Thomas Portelange
·Jul 1, 2022·

3 min read

Table of contents

  • For vanilla js lovers
  • What do you do when you don't know the content of your pages ?
  • Ok, but this is basic stuff
  • You talked about super powers?
  • Demo

I've just finished a major update of my library Modular Behaviour. Let me walk through what it could bring to you.

For vanilla js lovers

If you are using big frameworks like react, vue, etc... this will not apply to you. But if you are working with simple html and js classes, I have good news for you: your life could be much simpler.

One of the common things I have to do: bind js behaviour to my html node. It could be for custom form inputs (a file upload, a date picker...) or some other UI parts (a slider, ...).

This means I need to use libraries that take care of themselves (eg: bootstrap, most of it... except when you add stuff dynamically, for example when injecting ajax content) or have a little bit of JS here and there.

What do you do when you don't know the content of your pages ?

This is all well and good, until you don't know in advance what will be available in your pages. Very often, you find yourself having if clauses everywhere to check for presence of such and such library.

var slider = $('.slider');
if(slider.length) {
  slider.mySliderPlugin(opts);
}

Looks familiar?

What if instead we could do...

<modular-behaviour name="$.mySliderPlugin"><div></div></modular-behaviour>

Isn't that much better?

Ok, but this is basic stuff

You are going to tell me that creating a custom element just to save a little bit of init code is overkill, and you would be right. But let's consider some more advanced usages.

What if you don't know when mySliderPlugin is loaded? For example, you have an ajax call, that injects some html and trigger the loading of your plugin in js. Your html might very well be injected before the js is loaded. This means you have to wait until all js is loaded and then initialize again, basically forcing you to move your init code in a dedicated space, outside of your regular domReady callback.

Modular Behaviour provides you a central, code-free way, to manage your init code, regardless of how your html nodes are injected or when your js libraries are loaded.

You talked about super powers?

Indeed! By using a custom element, you can leverage a few other things to apply advanced features to all your libraries.

For example: lazy loading. In many cases, there is no need to run the init code until the html node is visible on the page (example, why would you init some complex uploader if it's buried inside a modal or a tab?). While some libraries support lazy loading, it seems like a waste that each of them needs to implement that feature, leading to duplicated code and many IntersectionObservers being created.

With Modular Behaviour, this is not the case anymore! It takes care of lazy loading your elements for you!

But wait! There is more! You can even lazily import the js source itself for simple use cases. Everything is loaded and displayed as needed, based on your user interactions, for free!

Demo

Here is an example of a self-initializing bootstrap tags input using this method.

 
Share this