Writing a Front End Component With Vanilla JS

How hard is it to write UI components without a front end framework? Let’s find out by writing a simple one in Vanilla JS.

Alex Zito
The Startup
Published in
7 min readSep 7, 2020

--

There’s so much hype these days around front-end frameworks (React, Angular, Vue) that I thought I would stop and think about what the problem is that these frameworks are solving and what they are useful for.

As an experiment, I’m going to create a simple component-based feature using nothing but browser-supported Javacript (Sorry Internet Explorer). For the point of illustrating some topics I am going to do some things that I wouldn’t necessarily do in the scope of a small feature like this, so try not to be too harsh on the code itself but rather focus on the patterns and topics.

Back to the basics. Only HTML, CSS, and JS

The feature is going to be a collapsible list of items. It must take a parameter that specifies the number of items to show on initial load. When you click ‘show more’ it will reveal all the items in the list, when you click ‘show less’ it will hide all except the previously selected # of items. It must be extensible enough to add multiple collapsible lists on the same page.

--

--

Alex Zito
The Startup

Software Developer + Product Manager. Interested in Travel, Culture, Economics and the Internet. Join Medium: https://tinycode.medium.com/membership