Started From the Backend Now We Here

It's confession time. I am the CTO of a company in the jamstack space and I am not a frontend developer. I have been a backend developer for the past 12 years and have only ventured into Javascript when absolutely necessary. The truth is, I find it scary. The last time I wrote any "serious" Javascript was in 2014. I was working at a startup and building a Cordova application in coffeescript. Even then I was mostly working on the backend in ruby. And all my experience before then was with jQuery.

Javascript has changed a lot in the six years since I've used it. For reference, here are some of the things that didn't exist in Javascript in 2014:

• classes
• promises
• arrow functions
• destructuring
• let and const
• modules
• fetch
• Angular

And the list goes on. HTML5 was released at the end of 2014. React was barely a thing and wasn't really on anyones radar. I tried to find npm download stats for 2014 but it just says 0.

The point is, I'm out of the loop. So I decided that my holiday project would be to start the journey of getting up to speed on the Javascript ecosystem. I picked up Epic React by Kent C. Dodds and figured why not write about what I learn. So this is the first in a (hopefully) long series of posts about my journey into Javascript.

Starting at the Beginning

So far I've learned that <script type="module"> is a thing. I am used to using <script type="application/javascript">. This lead me down the path of discovering what Javascript modules are in the first place. It turns out Javascript modules are effectively the same as packages in Go, or... wait for it... modules in ruby 🤯. I honestly didn't know this. I think the reason I didn't know this is until recently there was no standard for modules. In September 2017 ES modules were officially supported in Chrome and then in Firefox in May 2018. This meant that there were now four ways to do modules in Javascript. CommonJS (CJS), Asynchronous Module Definition (AMD), Universal Module Definition (UMD), and ES modules (ESM). Thankfully, frontend developers everywhere are consolidating on ESM.

ESM brings many advantages over "the old way".

1. this no longer refers to the window. It is simply undefined.
2. Each module has its own scope. We don't have to worry about polluting the global namespace anymore.
3. Modules are executed in strict mode by default. This enforces better coding practices like declaring variables before using them.
4. Modules can import other modules.
5. Modules are deferred by default. We no longer have to worry about blocking the page load.

Conclusion

So far I'm liking new Javascript. Stay tuned.