Frontend Mayhem

Embracing the front end mayhem

June 20, 2016

The problem

If you’ve been paying attention to the Javascript world, then you’re already aware that new libraries & frameworks are being churned out at an unsustainable rate. Most of these frameworks are also constantly evolving at a rapid pace as well. This makes it extremely difficult for the average front end developer to keep up with things.

Longevity, or the lack thereof, is also becoming a major problem. A significant time investment is required for a developer to get to grips with a new framework. When I started development, Backbone, Require.js, Grunt were the go-to tools. However, they were quickly upstaged by the MEAN stack. I dedicated my last winter break learning Meteor.js with Blaze as the rendering system, only to find out a month later that the future of Blaze is up in the air due to the emergence of React. This idea of getting into bed with a technology only to discover that something new is coming over the horizon is worrying.

How can we get anything done if we spend most of our time learning the new cool thing?

How to cope with this Mayhem?

It is extremely important that new developers approach the front end development the right way. At the start, things will get intimidating quickly. You’ll see all the other cool developers talking about React, Angular, Ember, Elm, Vue, Webpack, Gulp and much more. I am sure I forgot a few.

Every day you will see an article or video telling you to “make sure” you use a specific tool or framework. If you don’t, then you’re not a good developer. Don’t listen to these people.

I’m not saying ignore the good advice you find online. The internet is a gold mine full of incredible resources to make learning easier for those starting out. But don’t doubt yourself just because you don’t know a particular framework.

Setting a strong foundation

Step back and think about what is common among all the frameworks/tools out there? JAVASCRIPT!

It is imperative to have a solid understanding of the JavaScript language before you start learning any of the frameworks. If you don’t understand JavaScript, you’ll never unlock the full potential of any framework you use. You might even struggle to a point where you’ll consider quitting front end development.

How do I know this? I made this mistake.

At my first job, the team was using Backbone.js. I had to try to get up to speed quickly as a Backbone.js developer but I didn’t have a solid understanding of JavaScript. I dedicated countless hours to wrap my head around Backbone but I struggled. I was producing sub-optimal code, and HATED Backbone.

Eventually, I found some great resources about JavaScript and all of a sudden Backbone didn’t seem as intimidating. Learning JavaScript helped me learn Backbone. I will be sharing the resources I used to level up my JavaScript development in a future blog post, so stay tuned for that.

You can’t learn it all

After you’re confident that you’ve a solid understanding of JavaScript, it is now time to pick a framework. The key here is acknowledging that you can’t master them all. You might be able to get the basic understanding of each one but you won’t know the intricacies to build anything complex. Here is the pattern that has worked very well for me:

  1. Research

    • Explore all the options. Do the research and get a good understanding of the strengths and weaknesses of each framework.

    • When working with a team, present your ideas to them and get feedback.

  2. Decision

    • Pick the one that you think best suites your project or programming style.

    • Before you go “all-in” write a small application with it, if you haven’t already done so during the research stage.

    • This is very critical. Once I thought Angular was the best framework for me to develop a new application. All of my research pointed to it but when I starting writing my first mini app with it something felt off. Angular & I never really jived. If this happens to you, go back to research.

  3. Mastery

    • Dedicate time to master this tool or framework. Write applications that are a bit more complex than the proverbial “todo” app. The reason behind this is that you need to go-to tool in your toolkit. This tool is the one you turn to when you have to hack something quickly.

    • Believe it or not but for me that tool is Backbone.js. “OH GOD! BACKBONE?” is most likely what some of you are thinking. Yes I know there are frameworks out there that are much more powerful and concise. However, I know every little nook and cranny of writing complex applications with Backbone. It is the tool I learned in-depth & can usually ship the fastest with it. My point is master the tool you like, don’t go after the newest shiniest one.

  4. Explore - After you are confident with the tool you’ve mastered, it is now time to explore.

    • Start learning other tools that seem appealing to you.

    • Work on small side projects so you can build confidence. The last thing you want in the world of JavaScript mayhem is to be a one trick pony. Personally, I’m focusing on React + Redux now and hope to one day turn that into my tool of choice.

Leave a comment about how you approach the constantly changing front end world.

Watandeep Sekhon

Written by Watandeep Sekhon.
Website / Twitter / LinkedIn / Instagram