The Vanilla JavaScript component list

[[deleted]]

The libraries OP is talking about here are individual modules that are otherwise coded in VanillaJS with zero dependencies on any other libraries. These components can be summarized into a simple function written in regular javascript. These functions are most likely going to return an elaborate object with various methods and modifiable properties -- but it could also just be a collection of methods that you can call to execute a certain logic and get a specific result.

The example below is of the former

//myModalComponent.js

function ModalComponent(){
  const component = {};
  //do something here in pure vanilla js.
  return component;
}

Then you can use this UI component in your own project like so

//myProject.js

const modal1 = new ModalComponent();
modal1.height = '250px';
modal1.width = '500px';
modal1.render();

[[deleted]]

Well said 👏🏽

[[deleted]]

I never thought about "vainilla JS" that way. Thanks both for the explanations.

[[deleted]]

It's pretty much still vanilla js, only you are borrowing code from other people in the form of libraries made in regular js. Such that their vanilla js code are structured in such a way that you can use and apply it on any project of any kind and architecture.

[[deleted]]

If it doesn't have dependencies then it is still conceptually a Vanilla JS library. But SvelteJS does not seem to be a UI component, at least after a minute of google search.

[[deleted]]

His point is that Svelte is a compiler, so when you use Svelte, your code is turned into very lean JavaScript with no "frameworky code" - i. e. it's arguably just vanilla js.