Node and How it Works With npm | CSS-Tricks

Here’s what you need to know about Node.js (or simply Node) and how it relates to npm right away:

  • Node is JavaScript, but as a server-side language.
  • This is possible due to V8, the Chromium JavaScript engine, which can run on its own, outside of browser boundaries.
  • Node and browser based JavaScript can be very different, and have different capabilities, even though both are JavaScript at their core.
  • You don’t need to know Node to use npm.

As you know by now, npm means node package manager (Even if the official npm site shows amusing alternate names in its head when each page loads, like “Ninja Pumpkin Mutants”).

The main thing to understand right away is: “Node” and “Package Manager” are the two distinct big pieces that combine to create npm.

We’ll cover what a package manager is and why you might consider using it when we move on to the next chapter in this npm guide. For now, let’s focus on understanding what Node is, as it is an essential part of understanding modern web development.

Guide chapters

  1. Who is this guide for?
  2. What the heck does “npm” mean?
  3. What the heck is the command line?
  4. What the heck is a knot? (you are here!)
  5. What the heck is a package manager?
  6. How the heck do you install npm?
  7. How do you install npm packages?
  8. What the heck are npm commands?
  9. How the heck do you install an existing npm project?

Node is JavaScript, but without all the browser

You probably know JavaScript primarily as a language that runs in a browser, similar to HTML and CSS. Yes, each of these languages ​​has abstract and supersets (like HAML for HTML, Sass for CSS, TypeScript for JavaScript, as examples), as well as compilers, compilers, and all kinds of things that turn them into this or that form. But in the end, what these tools generate is vanilla (i.e. pure) code in the correct syntax, as if abstractions were never used, to run in the browser and in the browser alone.

This is the thing that took me the longest to understand, which, frankly, might be a bigger wasted note than the whole npm idea. JavaScript you don’t need a browser anymore to work. So, you’ll sometimes see me refer to Node JavaScript when distinguishing between it and “browser-based” JavaScript.

Server side languages ​​vs client side languages

At this point, I feel it’s worth taking the time to explore the distinction between client side languages ​​(HTML, CSS, and JavaScript) and server languages ​​(essentially all the rest). I wouldn’t assume you have any experience with server side languages, such as PHP, Ruby or Python, but if Concept Of the languages ​​on the server that are completely new to you, it may be worth reading about what they are. (To summarize: they are programming languages ​​that only run on a server rather than a browser, and generally have broader and more powerful capabilities.)

This is important because several years ago, around 2009, there were some very smart people really I love javascript. In particular, they liked how Fast JavaScript (especially compared to the dominant server side languages ​​at the time, most notably PHP and Ruby), and they wanted to have JavaScript Everywhere, not only in the browser.

Ryan Dahl is the most prominent character among them, and is credited with inventing Node (and more recently, Deno, an anagram for Node). This is a fun thing to know, but other than that it’s not very relevant to this topic.

How does Node . work?

But what is appropriate is that Node is basically JavaScript as a server-side language that runs the outside From Browser.

how is that possible? Under the hood, each browser has its own JavaScript engine. This is actually part of the browser runs JavaScript. Yes, this seems to be a separate part of the browser and not part of the same bits that use HTML and CSS – which I think makes sense when you consider the fact that we have literal APIs between document and javascript. Heck, even the concept of DOM makes more sense when you consider the section that treats JavaScript as a temporary desk down the hall than the HTML section.

The JavaScript engine in Chromium-based browsers is called V8, and is supposed to be the name for a specific type of car engine (not a “vegetable drink” made mostly from tomato juice). V8 is the most popular JavaScript engine. Thanks to ECMAScript standardization efforts over the past 15 years or so, there aren’t any major differences between JavaScript engines anymore in terms of browsers. The engine used in Chrome is very similar to the one that runs in Firefox, which is very similar to Safari, etc. The popularity of V8 these days has nothing to do with highlights, it has more to do with the spread of self-sustaining Chrome.

(Side note: Firefox’s JavaScript engine is called SpiderMonkey. This isn’t particularly relevant, but it is is being Additional proof that Firefox is the coolest.)

Why is this important? Well, it turns out that you can use the JavaScript engine Outside From the browser, and with a few tweaks, turn it on on its own – kind of like if you decided to pull the stereo out of the car, mess around a bit, and turn it into your home stereo system instead. A V8 engine (and most likely a car stereo) could work just as well as a standalone unit in Which environment.

In other words: V8 allows JavaScript to run Anywhere. That’s why we have ‘node’ javascript and ‘browser based’ javascript.

Node is almost (but not exactly) JavaScript

To summarize: JavaScript is a server-side language now! It’s called Node, which is can I mean, you don’t even do that need to To learn anything about other languages ​​on the server side. We are front end developers, and we have superpowers now.

After all this, however, The node and javascript which I used to run in the browser are very similar and different from each other.

With the risk of veering away from the weeds here: While both are JavaScript at their core, and while the language and syntax are similar, many of the core JavaScript elements in the browser (such as window or document, and even things that are often taken for granted alert) does not exist in a server-side node-only environment. over there is being There is no window, of course, when the language works by itself, and not in the browser. New Node JavaScript developers are often surprised to find out fetch It’s actually a browser API, not “pure” JavaScript.

But do not be afraid. console.log He’s still your best friend, and there are so many the new, and environment-specific features in Node JavaScript that differ from browser implementation of JavaScript, such as process The object, which contains all the details about any currently running processes.

Out of necessity, Node and its ecosystem have often grown in a very different direction from browser-based JavaScript over the years. (As an obvious example: the syntax for imports between the two has been different for years, and only now are they starting to blend together again. We’ll talk about that a little more in the last chapter.)

Node has long held the distinction of being able to move much faster than browsers when it comes to acquiring new features, and it has its own set of concerns to deal with as well. I started running server-side applications the same way Ruby and PHP have been running for years, even when browsers were still trying to integrate by standards. This has resulted in Node JavaScript and browser-based JavaScript becoming more like cousins ​​than clones.

Here’s what I think is a fair analogy to explain the differences between its JavaScript cousins: consider two similar musical instruments, for example, a vertical bass and a modern electric bass guitar. Both instruments are tuned in the same way, and play the same tones; If you know one of them, in many ways, you kind of know the other. But while you will find it much easier to learn one after you have learned the other, play The new one will be completely different from what you are used to.

Same, but different (Photos: Wikimedia Commons, Unplash)

Similarly, while one developer may write one type of JavaScript and a second developer write another type of JavaScript, their functionality is unlikely to look the same.

Node is JavaScript, with other server-side language capabilities mentioned earlier – things like reading from and writing to the file system, accessing system-wide APIs, email, being able to listen to and respond to requests, scheduled tasks… the list goes on… .

I won’t say more about that here, but just know that while both are JavaScript at the end of the day, they run in different environments and each is capable of doing some things that the other can’t. Even if you’ve written browser-based JavaScript before, Node will probably feel a bit foreign to you beyond the basic syntax, and is often used in very different ways.

Run node locally

As in general with server-side languages, you Act You need to install Node before you can use it.

Node is usually installed along with npm, together as one, since the package manager part needs Node, and the Node part is more useful with the package manager. (You could say they are Package Deal. No, I won’t apologize for that joke. I’m a father, after all).

I would like to emphasize at this point that You don’t need to know anything about Node to use npm. So, while I’m about to cover some Node examples here, please consider this entire section as something good to know, but not necessary to that end. I feel it’s still useful to get a slightly better idea of ​​how Node works, just in order to paint a more complete picture.

We’ll cover how to install Node and npm in an upcoming chapter of this guide. So if you don’t already have it installed, you can either take a look at this part, or come back here when it’s ready. Either way, it won’t be critical to follow this npm guide.

If you want to try it, you can create a file test.js file and put some generic javascript in it. Something innovative like the following code that registers some content in the console should do the trick:

console.log('Look, ma, Node hands!')

const oneThroughFive = [1, 2, 3, 4, 5]

oneThroughFive.forEach(number => {
  console.log(number)
})

Let’s say you save this code, then open a command line in a terminal window, and navigate to the location of the file (using cd, or “Change Directory”), and run node test.js To get the following output:

Look, ma, Node hands!
1
2
3
4
5

You can Also Enter node by itself (without a filename afterwards) to open an interactive terminal where you can run arbitrary Node JavaScript. If you have ever opened the DevTools console in your browser to write some code, this is exactly What is this, just on the command line using Node instead.

Try it out if you like, assuming you already have Node installed. But again, this is all for illustration only and is not required to use npm.

Screenshot of an open terminal window showing Node 17.0.1 version running and output from the previous example below.

What then

Everything we’ve covered in this chapter is neat and hopefully helps show you the way Node (but simply put) works. Remember, although we haven’t covered any specific example of this, Node is capable of doing just about anything a server-side language can do. Hopefully it isn’t too hard to imagine how having some JavaScript to do just about anything at the system level or even on a remote server would be very attractive and useful.

The concept of Node started as a way to run JavaScript outside the browser. As such, we have packages of Node-based scripts that are used to help us with front-end development. So how can we install these packages and make sure that they are not only up to date but uninstallable? This is in the last two letters of the npm acronym: group manager.

In other words, npm is a tool that manages packages written in Node JavaScript. What exactly is a package manager and how does npm qualify to be one? This is next in our npm guide.

Leave a Comment