Skip to content

Professional Development: Back to basics with JavaScript

20/12/2021 5 minutes read By Solomon

At Substrakt, everyone is offered an annual allowance of £500 to spend on anything that helps us build skills to thrive in our role, and 6 days off per year for us to focus exclusively on our professional development.

So I recently spent some of my time going back to basics with JavaScript (JS) - mainly vanilla JS starting from ES6. Vanilla JS refers to ‘plain’ or ‘pure’ Javascript that runs natively in our browsers, with no extensions or additions of any kind.

The ‘ES’ of ES6 stands for ECMAScript, a widely used and supported JS standard. I chose version 6 of ECMAScript as my starting point because it marked a significant update to the language.

There are two main reasons I decided to focus on this area:

  1. When I started learning JS in my first role as a developer, it was done in bits and parts while I was trying to get a handle on new technologies and a comprehensive understanding of the coding landscape. So naturally, as I’ve gained more and more experience since that initial phase of learning, I’ve identified some gaps in my knowledge of JS. By going back through these things from the basics to the advanced features, I can fill in those gaps and improve my overall coding practice.
  2. Because I want to start learning VueJS - a JS framework used to build web interfaces and one-page applications. There are a few reasons I’ve chosen to focus on Vue:
  • We use the Vue framework at Substrakt for lots of our work, so having a better understanding of it will help me in my everyday role.
  • It’s one of the more mature frameworks currently out there and it’s not just the new kid on the block, so there’s plenty of resources and documentation around it.
  • Friendly learning curve - from my research into various frameworks, this seems to be a commonly shared opinion, and from my experience to date, it definitely feels true.
  • There’s a vibrant community full of resources - unlike other frameworks Vue isn’t backed by a large company, it’s grown by virtue of being community-driven. This might seem like a disadvantage to some, but to me it shows that Vue can be more freely catered to its end-users.
  • Modular and flexible nature - Vue is progressive by design. This means implementation can be done component by component and easily scaled to adapt to any future need/changes.
  • An extra in the tool in the box - learning Vue will also be helpful for both current and future projects I work on. It’s been used in bits and parts on a few of our projects, so adding this to my skill set will be a great plus for the team and our clients.

How did I go about it?

Because I already have a good foundation of JS knowledge, I chose to look for resources that would help identify the gaps in my knowledge, as opposed to re-learning everything. So I spent some time reviewing various guides, indexes or ‘cheat sheets’. Here are some of the helpful references I’ve been using:

Practical Application: reading documentation has only ever got me so far. It’s only when I’ve practically applied that knowledge that I truly understand it. I find that it helps the new concepts stick. So here are some resources that have helped me apply new and existing knowledge:

Key learnings:

  • Revisiting different concepts is really useful for improving the way you use them (e.g. I revisited the concept of asynchronous operations and ‘Promises’, which has been really insightful and equipped me with ways I can improve my code). For those who are also interested,
    • asynchronous operations are operations that are set up to run alongside each other or separate from one another. This technique is used to help limit/stop freezing or buffering caused by multiple operations happening at the same time due to code blocking.
    • promises are an additional technique introduced in ES6 for implementing asynchronous code.
  • Vue Components - one concept that I’ve taken some time to understand is components. A component represents a key reusable part of an interface or application. So for instance, if you created a to-do list using Vue, you would create a component to represent an item in the to-do list. Although I’ve only touched on the basics of this concept, I’ve really enjoyed learning how it demonstrates one of the ways that Vue, and by and large JS frameworks, can help streamline development - less is more!

So overall, I found my professional development time really helpful for improving the quality of the JS code I can write, which is something I’ll bring to my everyday role working on new and existing projects. And as I continue to get to grips with Vue, I’ll be able to provide different solutions when building complex user interfaces.

And as is always the case in the developer community, I’ll keep seeking ways to learn more, code more and apply these learnings in practical ways.

If you’d like to hear more about anything I’ve talked about here just get in touch, I’m always happy to have a chat: