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.

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:

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 —

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

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: