Build Components in JavaScript Without a Framework

Build Components in JavaScript Without a Framework

Build a JavaScript component with plain, vanilla JavaScript.

Benjamin Finkel

This is great!

Question - what purpose is the http server…serving? Isn’t this all client side and could be loaded just by opening index.html in your browser?

Valentine Bondar

This is super! Getting me interested in coming back into Vanilla Javascript… I like the freedom from the direction of the framework

Urs Meili

this approach will lead to duplicated html code over and over, which will be a nightmare to maintain. In your example, you have two duplicated “<div id=”…" class=“star-rater” data-rating=“2” role=“rater”>" blocks. Do you also have an idea how to overcome this problem without a framework? If this is solved, I could well go on without any framework for my next project.


Sure! You could have the component “draw” itself so that all you need is the root element. Also, when you list these, for instance in a list of beers or albums to rate, you’d most likely be doing so in another component that got data from an API, so that component would be creating the HTML elements.

Hope that helps.


Yes you could, but the http-server just allows you to go to localhost:8080 to get to it (like a normal website) instead of file:////home/documents/…


For sure. I still enjoy working in React or Angular or Vue or ANyOthErFramework.js, but when I want to be free from it (or if I CAN’T bring in a framework) this works well.

Paulo Rogério da Silva

How’d you do if you need several components? Place them in a separate html and fetch? Or in separate files? What about component css specific? This is not clear to me yet…