JavaScript (and front-end development in general) can feel intimidating because so many cool things are happening so fast. The language itself is evolving, and so is the ecosystem surrounding it. From frameworks like React, Vue, Angular, and even Hyperapp and their rapidly changing APIs to the bundling systems around them to the language itself, JavaScript is evolving rapidly and it can be tough to keep up. Very few of these tools even existed five years ago. Blog posts like this one outline how hard it is to learn modern JavaScript and stay up to date with everything that's happening.
I started working with JavaScript during perhaps the peak of the chaos in 2015 after working solely on data analysis scripts and computer science coursework previously, and since then, I've had the privilege of teaching hundreds of people the language. So I'm going to be telling a bunch of stories about my JavaScript journey -- and how I decide what to teach -- in hopes that you will make fewer mistakes than I did and that we can make the world of JavaScript a little less scary 😈!
How can we face our JavaScript Fears?
Focus on the fundamentals
The fundamentals of the language are never going to change that dramatically, so being super knowledgeable about the ins and outs of it can only help you.
In JavaScript, especially, knowing intermediate concepts like the call stack, context, scope, the prototype chain, higher order functions, asynchronous programming, and the event loop is invaluable and will help you with anything you do further with the language.
I also really appreciate this comment:
I agree about having more fundamental JS knowledge coming in handy. I see JS frameworks having a multiplier effect - the more JS you know beforehand, the more the benefits of a JS framework will be multiplied.
One recent example is my work with the Ember framework at work. The framework gives good patterns for managing component state and related data to this state in their "controllers." But foundational JS knowledge helped me better see the limits in these controllers. A coworker used a combination of import/export, JS classes, and object-oriented programming to better abstract and manage some data complexity in a way that split the code more and made it reusable. It was standard JS used to make even better use of that framework.
Knowing the fundamentals really well makes frameworks much more helpful and so much easier to learn! Underneath the hood, these frameworks and libraries are just JavaScript anyways -- they aren't magic!
In fact, your project may never need to use a framework -- GitHub runs on vanilla JavaScript and Hacker News runs on 150 lines of unminified JS total. Plus your site will be lighter weight!
I appreciate Dan Abramov's You May Not Need Redux -- I think more libraries and frameworks should have their co-founder be explicit that their tool isn't always the right tool for the job! It's the truth.
Shiny Object Syndrome
Shiny object syndrome is when you see a new thing and immediately want to drop everything and focus on that shiny object. In tech, that may mean that you re-write your applications every time a new library is on the horizon.
I am super guilty of this -- I used to write my blog posts themed around writing an app with a new library or framework each week. I've also worked with JQuery, Angular.js, Angular, Vue, Elm, and React at some level for work. But, that shouldn't be normal or encouraged.
I think my best shiny object syndrome story was when I worked on a team that was using a Chinese library whose documentation hadn't been fully translated to English yet. I remember running Google Translate to try and figure it out. It wasn't productive and Google Translate isn't great with technical docs in case anyone was wondering. Though the library looked cool, using one that was available in the language we spoke would have been a lot better.
So let's talk about how to overcome "shiny object syndrome."
You don't need to know everything
In large part due to imposter's syndrome, a lot of developers feel the need to know everything about everything -- but that's not even possible! There's way too much to know, and nobody knows everything! Keep reminding yourself about that, and don't feel the need to know everything -- even though it's hard.
To quote Dan Abramov about the new React Hooks API:
Hooks are an experimental proposal to React. You don’t need to learn about them right now.
The same is true about everything -- even though it might not feel like it.
Focus on depth over breadth
Once you know one framework or library, it is so much easier to move to the next one. If you understand the component architecture, you are already a quarter way through learning React, Angular, and Vue! You don't need to know all of them. Sure, they're all cool and have different features, but chances are you only need one.
Don't migrate to the newest thing immediately
Also, when you're picking a stack for your project, don't be the first adopter. Sure it may be cool, you may get a blog post out of it, and maybe it will make some pieces of your code easier. But -- then you get stuck on some bug in the library, and you can't progress until it's fixed. Or documentation for what you're trying to do doesn't exist, and it isn't realistic to bring anyone but expert level developers onto your team.
Let somebody else find the bugs first; then you can start using that cool new tool!
Also, it's important to keep progressing and creating modern interfaces for your apps, but if your stack is still working for you, there isn't a need to change or rewrite it from scratch. React just surpassed JQuery in Google searches (src) even though JQuery may feel like ancient history in the JavaScript world!
Choose Wisely
Since you can't learn or use every new framework or library that comes out, you have to also figure out how to choose your tech wisely. A couple of key questions when you are deciding what tool to use for a project or to learn:
- Is it well used? If it has a community behind it then it's more likely to have contributors and frequent iteration on features and bug solving. Also, it's more likely to have staying power.
- Who is the community behind the project? Is it a large company? Do they have a code of conduct? How do they treat new users?
- Is it frequently updated? You don't want to be stuck with bugs that aren't being fixed.
- Are there frequent breaking changes? You don't want to have to make major code updates to keep the tool up to date. Also, it may make researching the tool difficult. Looking at you Elm and Angular.
- What features make this tool better than the alternatives? Does it do something extra? Or solve some problem other tools don't?
- Does it fit your team? If your team is mostly junior developers, for example, does the framework have good learning resources and documentation? If you have mostly functional programmers does the tool fit that paradigm?
- Is the documentation good? This is so important for being able to use the technology easily.
- How does the code look? Does the codebase look well written and maintainable?
- Is the library performant?
There's no singular right answer here -- if the technology works well for your team, it’s the right solution no matter what some thought leader says on Twitter.
How to stay up to date in the JavaScript world
Okay -- so now that we've discussed shiny object syndrome -- how can you stay up to date on the latest updates in a reasonable way?
- Follow JavaScript people on Twitter -- like @dan_abramov, @addyosmani, @getify, @wesbos, and @sarah_edo -- this is normally the quickest way to learn about new tech.
- News Sources -- I follow dev.to, CSS Tricks, Smashing Mag, and JavaScript Weekly as my main resources!
It's not actually not that spooky!
A quick reality check before finishing up this post, JavaScript isn't actually moving at the speed of light. React, Vue, and Angular have all been around for over four years, and so has ES6 which will probably be the largest change at once to JavaScript ever. There isn't actually a new popular framework every week. And even if there was, you don't have to learn that framework. The excellent parts of technologies are usually integrated into their competitors eventually anyways -- just look at how React inherited from Angular.js and then Angular inherited from React in turn -- and Vue learned from both!
Also, I think great that JavaScript and front-end development in general is evolving -- it needs to in order to make development easier and user experience better.
Hopefully, this post made the world of JavaScript a little less spooky and a little more accessible!
Bonus: JavaScript stuff I'm really excited about right now
Keep in Touch
For future readers this was written for a Halloween talk, hence the spooky theming!
Top comments (16)
JavaScript remains one of the more confounding programming languages/environments. Very beginner friendly and simple in some ways, over-complicated and chaotic to all in other ways.
The culture around JavaScript is probably its fundamental differentiator. As with many things involving culture, detractors tend to be loud and proud.
Due to the confounding nature, getting oriented and being confident in your orientation is probably harder than the problem at hand most of the time.
Anyway, I think this advice is all spot on. Being confident with the basics will go a long way.
In web land, I think it also helps to get to know the DOM's various methods. I don't think you need a deep understanding of how the DOM tree is built (I don't), but having practice calling DOM methods like
document.getElementByIDgive you a good idea of more or less how your abstractions are operating.Totally -- JavaScript has to be everything for everybody since it has the monopoly on the front end. Which means that a lot more people have opinions on it. Also agree on DOM manipulation -- I hadn't included it because I thought of that as more beginner than intermediate, but that line is kind of arbitrary!
I so have the "shiny object syndrome"! It is even worse when you are a newbie who is trying to make something bigger than a tutorial-based project. The feelings of "I chose the wrong things!", "The architecture needs to be rewritten, this cannot work", "That tutorial was outdated and put me off-track", "Me-6-weeks-ago was so dumb" are severely amplified.
Totally -- just know that the learning process for those things makes the learning process for the next thing faster! Even though they may feel like roadblocks, they're super important learning experiences. In fact, I think learning from failure, especially with code, is crucial.
Hey Ali,
great work,
thanks.
Most annoying issues:
so, so true! so tough to deal with brand new libraries for that exact reason!
Nice article! Being a backend developer interested in frontend WebAssembly is a thing I'm quite excited about. It could help lessen JS monopoly on the frontend.
This is partly due to the hype factor. There's a lot of hype in every stack (frontend, backend, mobile, whatever), it's quite hard to be a beginner these days. Glad people like you are helping in making sense of it all.
I believe this is a double negative :P
I know this list is particularly suited for JavaScript (and how!) but really this is a list of best practices that anyone, regardless of skill or technology, can and should follow.
And that's not a bug, it's a feature!
Definitely agree! A lot of my blog posts are actually written versions of talks I give, and this was for a JS one today! But totally agree -- this is important for all languages and technologies!
Thanks for the post, some great info here. The "You don't need to know everything" part was a great reminder to me even having done JS work for 6+ years now.
One of the other things that comes to mind is focusing on one piece of the stack at a time, as you kind of mentioned in depth over breadth. I know I struggled when I was learning some of the JS frameworks because I didn't understand if my issue was with the JS itself, with the Angular code, the node.js back end, or the Mongoose/Mongo database commands, etc. Most apps don't need entire frameworks (or even front + back ends), so start with just some plain Javascript and HTML and then add to it from there.
Yeah totally -- I remember Googling things like "image upload React Django" back in the day, but really I needed to handle that processing separately on both ends! I'm so pro-API back-end w/ totally disconnected front-end at this point for beginners for similar reasoning. Test both separately!
I also use the JAM-stack for a lot of my personal apps, so no real back-ends, and I love it.
Hi Ali,
Thanks for the information. I'm trying to get into front end development on my free time and you're right. It's not possible to learn or know everything and it has to be a small piece at a time. It's funny as a person I know this, but when I read it or someone else says it, it somewhat brings me back down to earth.
Have a spooky one!
It's so hard to turn the blinders on sometimes, but it's so necessary!
Great article Ali. Knowing JavaScript fundamentals will definitely help a lot :)
As you said, once the fundamentals are known, any framework or library can be understood and used easily :)
I just started learning JS. Your article will certainly come in handy in my journey. Thanks a lot!