DEV Community

Alessandra Valle
Alessandra Valle

Posted on

how to develop a UI Library in Javascript?

I would like (need) to develop a graphical user interface library that remains simple, clean and lightweight. I will then need it to modify a SPA on which I will work, that using the HTML5 canvas element. What I'm interested in adding will be items such as, canvas obviously, buttons, sliders, navbar / sidebar, menus etc. I don't know where to start, how to set up the work, how to structure the library. how should I proceed?

Top comments (4)

Collapse
 
bias profile image
Tobias Nickel

At some point, I made a simple class component class, it had a el property. and some methods to add and remove other components. some components used underscore templates to create compex internal structure. when creating components and removing components, you would register and remove event handler. It was an electron app, but for a single page application, I would love to use page.js for routing.

However, I think today, the js community want to build apps more in a declarative way as in todays modern frameworks like vue, react, angular.

I really enjoied studying cito.js. It is a virtual dom library and its source is short in a single file.

disclaimer: I am good with frontend, but mostly work on the backend and always keep my mind open for new ideas. Developing your own framework, is maybe not the most productive, but you will learn a lot and can have lots of fun.

Collapse
 
giorgosk profile image
Giorgos Kontopoulos 👀

Why don't you start from an existing ui library and see how they have it setup ? Is there a reason you are not using an existing one ?

Collapse
 
alevalle profile image
Alessandra Valle

good idea! I don't want to use an existing one because I need a small, functional and simple library that does those few things I need.. and I would like to try my hand at doing it

Collapse
 
tsamaya profile image
Arnaud Ferrand

Which SPA are you using ?

create-react-library can be a good starting point with React