Check out a free preview of the full Vanilla JavaScript Projects course

The "Evolution of JS Tooling" Lesson is part of the full, Vanilla JavaScript Projects course featured in this preview video. Here's what you'd learn in this lesson:

Anjana discusses the history of JavaScript tooling and shares some advice for creating a balance between understanding the overwhelming amount of tools available today and choosing the right tools for your project.

Preview
Close

Transcript from the "Evolution of JS Tooling" Lesson

[00:00:00]
>> So now this brings us to, we're gonna zoom out even further. First we were zoomed in to, within a JavaScript file, what syntax and stuff can we use? And then we zoomed out to, okay, now imagine this file is a module in a more complex package where there's different modules, there's dependencies, they have dependencies, etc.

[00:00:24]
And now we're zooming out to, okay, now how does this all work out? Once we have this package and we have everything set up, we've declared the module type and everything, how do we exist in a world where there is so much going on related to the browser side, the server side with node.

[00:00:47]
The package management side, which sort of transcends both in many cases. But essentially what we've got here is we've got a blessing of the modern web, which is that it gives us phenomenal cosmic powers, if anybody remembers Aladdin, the animated version [LAUGH]. And also a little bit of a curse, because we don't want our web pages to be spending half an hour spinning up a website when I try to load it from a URL.

[00:01:21]
So we also want to keep our JavaScript very small and we have an itty-bitty living space. So we wanna pack all of the possibilities of what we can do with JavaScript on both sides of the Internet into as small of a thing as possible to protect both resources that we're using and how expensive running our JavaScript is.

[00:01:44]
And also make sure that, whether it's on the command line with node or in the backend or on the browser, that users are not feeling the pain of installing an entire Internet worth of random people's code. And every single bit and byte of that information having to come down over wires and whatnot before they can actually do anything.

[00:02:10]
So yeah, so going back to our whole historical evolution, we had, all right, back in the day we got one dude in a room at Netscape. [LAUGH] Webpages, just get a little JavaScript as a treat, a little script tag here and there, no big deal. Then, through the node years, and especially pre-ES modules, we get a whole ecosystem of tooling evolving to essentially take a whole bunch of code that's written for human software developers, like us.

[00:02:43]
Not that we're pretending to be humans, or actually extraterrestrials or anything, no. The idea that we want to take all of that stuff and bundle it and prune it and clip it and shake it and do all kinds of things to make sure that it is as tiny as possible, as optimized as possible.

[00:03:06]
This is where we get things like minification and dropping unused bits of the code base and all this stuff. So this whole ecosystem evolves of tooling in order to bundle and optimize these apps that we're building. And now we have massive JS progress, there could be hundreds or thousands, even, of modules in a codebase.

[00:03:32]
And we're also trying to run everything as responsively and as inexpensively, if we're running stuff on a server on some cloud provider somewhere where we're paying for every little tick that that processor does. [LAUGH] We want to be trying to manage this complexity that has really grown beyond the scope of, again, what JavaScript, little good old little script tag in the browser, intended to be all those years ago.

[00:04:03]
So we find ourselves, much like Homer Simpson, looking at a map of the [LAUGH] nuclear reactor where he works. Just kind of staring down this massive, infinite, in some cases, ecosystem of all these different tools and all these different things we need to do to just inject a little script into the page that we want to run the thing on.

[00:04:29]
And it's all good cuz the community came up with some tools to do that stuff for you, and frameworks to make your life easier, and test things, and bundle things up and all this stuff. But [LAUGH] I don't even know what half these logos are. And some of them didn't exist a few years ago, some of them probably won't exist in a few years.

[00:04:55]
This all starts to feel a little bit, at least if you're me, if you're anything like me, this starts to feel a little bit less than, I have a helpful tool for that. There's an app for that. Yeah, there's a bajillion different tools, what do I do? [LAUGH] So coming into, as a JavaScript developer, whether you're used to working in another language where there's one way to do things.

[00:05:19]
Or whether you're like me, coming in from another industry and switching careers and coming into this world of, my God, there's all of these flashing buttons and lights and things everywhere. And everybody's shouting frameworks on social media and blah, blah, blah, what do we do? And you start sobbing, sometimes.

[00:05:40]
Ideally not in the office, but it happens. [LAUGH] I speak from experience. So what what do we do? How do we battle this overwhelm that I think the entire community agrees is now a fact of life as [LAUGH] JavaScript developers? And there's no easy answer to that, right?

[00:06:02]
As there is no easy answer to, what do you do when a nuclear reactor is melting down? Hopefully, not be there, but [LAUGH] since we're gonna be in front of our computers trying to deal with our JavaScript hopefully not melting down. What I say, personally in my kind of way of trying to stay afloat in this massive ocean of developer ecosystem is, all right, there are a billion tools out there.

[00:06:29]
Well, maybe not literally, but one billion, okay. There's a lot of tools out there. And yeah, we can get cozy with them, but in general, let's try to prioritize the things like language features and the higher level concepts of, how do I wanna separate the concerns in my code base?

[00:06:51]
How do I wanna expose functionality to my users? Those higher level principles, let's keep those at the front of our mind and not get hung up on the tools and the tool battles. Because tools come and go, and the principles will kind of be generally useful. Even if, I don't know, next year a whole new language comes out that replaces JavaScript for once and for all and we go back and do a whole bunch of other classes.

[00:07:22]
So [LAUGH] I don't think that's gonna happen next year, but the idea being, I've found it very helpful in the face of all this overwhelm to stay focused on the higher level concepts and the principles behind all of it. Which can be transferred even to other languages and things, and not just a particular JavaScript framework, let's say.

[00:07:41]
Okay, that said, I also think, like all cats, [LAUGH] that if you have a tool that you're used to using, and it works, and it fits your use case, and it doesn't make you wanna rip your hair out all the time, great. There might be some other fancy thing that some very loud Twitter user is making you feel all this FOMO about, but if your needs are being met as a developer, if that cat fits in that box, it sits, it's good.

[00:08:12]
It's fine, just keep doing your thing. Just get on with our lives. If we spent as much time as we theoretically could with the amount of information on the Internet, trying to learn every new tool that comes out and evaluate whether it's better than our old tool and blah, blah blah, we would never get anything done, we would never write a line of code.

[00:08:32]
So let's just keep using whatever's working for us. However, if it is not working for us, let us not keep forcing ourselves, shoehorning ourselves into tools that are really painful for us or for our colleagues or whoever to use, or our users. Let's stay open to new things happening and us having to learn new things.

[00:08:54]
In web development, that is just a fact of our lives, we're gonna have to keep learning about new stuff coming out all the time. So that's what I say.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now