DEV Community 👩‍💻👨‍💻

Cover image for I made a new web-components framework
Sam Zhang
Sam Zhang

Posted on

I made a new web-components framework

Recently I've made a frontend framework based on Web Components called Leafjs.

GitHub: https://github.com/samzhangjy/leafjs
Docs: https://leafjs.samzhangjy.com/

What is Leafjs?

Leafjs is a lightweight frontend framework built based on web components.

Using web components allows you to create components natively - supported by most modern browsers. Unlike React and Vue, Leafjs's component system is totally built on top of the web components system, meaning that you can even use your components through native tags inside a plain HTML file as long as importing your bundled code.

And for sure, Leafjs implements a simple reactivity system that allows two-way binding, just like most frameworks do.

Getting Started

Leafjs provides a out-of-the-box bundle tool for you to use. Run the following command in your shell to create a new Leafjs app:

$ npx create-leafjs-app my-app
Enter fullscreen mode Exit fullscreen mode

Then install the dependencies using either Yarn or NPM. After that, run:

$ npm run dev
Enter fullscreen mode Exit fullscreen mode

To start a hot-reloading development server.

Or if you want to play Leafjs online, here's a CodeSandbox:

For more information please refer to the documentation.


How do you think about Leafjs? Tell me and I'll keep improving it!

Top comments (3)

Collapse
 
dannyengelman profile image
Danny Engelman • Edited on

Congratulations, you are number 62 claiming the future,

and discouraging users to learn the Native way.

All 61 ways to make a Web Component

Collapse
 
hassanzohdy profile image
Hasan Zohdy

Thanks for the share,

But what extra features that this framework provides, also what features does not exist, compared to other frameworks like Angular and React.

Collapse
 
xinlongchen865 profile image
Laoce

厉害啊,老铁

This post blew up on DEV in 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!