Create components with ES6 Vanilla Javascript.

Why? because it has helped me further my understanding of frameworks like Reactjs, Vuejs, Preactjs, and others. And it’s a Friday night.

William Pei Yuan
Jul 21, 2018 · 4 min read
Image for post
Image for post
Yum!

We’ve all been there when diving into the latest and greatest javascript framework. All these awesome frameworks aid in solving some high level and complex feature build. The drivers behind these frameworks often times are newer javascript (es6 and above ) techniques that allow tons of optimization and time saved when writing these complex libraries.


The code that I have written here helped me solve issues that deal with apps or sites where there are TOO many cooks (developers and stakeholders) in the same kitchen (usually a corporate or large company, with many teams). There’s nothing new really, just a combination of helpful techniques I ran into while working on these projects.


I’ve included the demo on my repl.it for us to play around and see it all in action, one note to consider, this is an es6 repl.it, so it will run all es6 code. Currently the demo app has a navbar, a timer and a footer component. If you don’t want to read on, just dive into the repl.it.


Ok so we’re going to go pretty high level, not too much into detail because it will take forever, First, lets start with the es6 IIFE:

Image for post
Image for post
es6 IIFE, I have reassigned global variables to shorten the DOM lookup and when referencing.

Why I did this? Who wants to write out setTimeout when you can shorten it to ‘sto’, and the rest of the crew of globals. The ‘undefined’ is set so that if you call a global in the IIFE and it doesn’t exist, it will throw an undefined, well it suppose to at least, I’ve never ran into that situation.

ES6 Classes formalize the common JavaScript pattern of simulating class-like inheritance hierarchies using functions and prototypes. They are effectively simple sugaring over prototype-based OO, offering a convenient declarative form for class patterns which encourage interoperability. — Reference

Next step, inside the es6 class Component —

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
This is a lot of information to take in, but don’t worry, just test it all in the repl.it :)

If you have dealt with React at all, you can see the “similarities”, minus all the other fancy hooks.

Now that we have our class Component, we willnow extend it to create a navbar component by using the extends keyword.

The extends keyword is used in class declarations or class expressions to create a class which is a child of another class. — moz

Now we have our navbar component, and we will execute the setup_navbar() upon page load.

Ok, now that you get the gist of whats going on, I will not dive into or bore you with the stopwatch code, you can do that on your own :) It applies the same principles of extending the class Component to create it.


If you want to check out the trans-piled / compiled version, you can find it here on my github: https://github.com/iamwill123/e6_vanilla_js

Image for post
Image for post
Reach into your mind and pull out some javascript.

Hey, thanks for sticking around and reading through this post, I hope you have found it useful, please leave some feedback, comments, or questions, and a few likes :)

Resources:

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store