Litedom

What is Litedom?

Litedom is an elegant Web Component library.

At ~3.5kb gzip, it allows you to create Web Component/Custom Element easily. Litedom can effortlessy be added into exitsing HTML page, without the need to bring in the bloat of big frameworks.

With Litedom, you can create your own custom tag element, to be reused throughout the application.

Components created with Litedom are reactive. Litedom provides an internal state manager, a simple progressive templating language by leveraging Javascript Template Literals, provides a one way data flow, has two-way data biding and events handling, lifecycle, directives, stylemaps. It has no dependecies, no virtual DOM, no JSX, No build tool.

Litedom follows the Web Component V1 specs, which allows you to have Shadow Dom Spec, Custom Element Spec, HTML Template Spec and ES Module Spec. It is compatible with all modern browsers that support ES2015 (ES6), ESM (ES Module), Proxy, etc.

Litedom is set to be easy, simple and straight forward.

Features: Web Components, Custom Element, Template Literals, Reactive, Data Binding, One Way Data Flow, Two-way data binding, Event Handling, Props, Lifecycle, State Management, Computed Properties, Directives and more.

Litedom turns the template into template string literal and doesn't have a virtual DOM, therefor it doesn't keep a DOM tree in memory. Instead it relies on the real DOM, and only mutates it in place whenever there is change. This tends to be memory efficient, and also reduces GC activities

How big is Litedom?

Litedom is very small. Gzip: ~3kb

Why yet another Javascript library?

I'm a lead UI tech engineer at Bank of America, NA, who deals with many static sites, and see how stuff can sometimes be frustrating for team members when it come to choices.

So, one week-end afternoon (4/20 weekend 2019 :), while working on a personal project using a static site generator, I thought it was way too much of an overhead to bring in something like Vuejs, React or Angular, just to make a small piece reactive on the personal static site.

So I decided to create Litedom, to just be a simple drop-in view library that can make any sections of the site reactive without the overhead. I wanted my HTML to stay as is. No React, No Vue, just me and my HTML.

(BTW, See how many days since the last javascript framework: https://dayssincelastjavascriptframework.com/)

Who and when would someone use it?

• People who want something simple but still follow the paradigm of the major libraries
• For people working on simple but dynamic static site
• For Blogs site
• When having React/Vuejs/Angular/(etc) is too much
• When you just want to progressively upgrade your site without changing too much.

Is it here to replace or does it compete with React, Vuejs etc?

Not at all. Litedom is targeting a different set of applications. Most of the time, specially when dealing with static site, you just want a little bit of stuff to be reactive, it could be something from or to an API, it could be something to manage application state or events.

Litedom wants to be your gateway to more advanced frameworks.

It follows the same paradigm as the big ones, just on a smaller scale.

Contribution

Every ideas, updates, fixes, changes, anything are welcome. Go to Github, fork it and send your pull request.

License

About Mardix

I'm Mardix, an inventor, a creator and a UI Tech Lead Application Engineer at Bank of America, in Charlotte, NC, USA.

I love to invent stuff. I love to make stuff. I love UI. I love Javascript. I love Python.

If you have any suggestions, questions or anything, please don't hesitate to reach out.