Why? because it has helped me further my understanding of frameworks like Reactjs, Vuejs, Preactjs, and others. And it’s a Friday night.
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:
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.
Next step, inside the es6 class Component —
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.
extendskeyword is used in class declarations or class expressions to create a class which is a child of another class. — moz
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
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 :)
- https://gomakethings.com/ ( Chris Ferdinandi ) <- great resource for VanillaJS, ( not es6 )