Namespaces

[00:00:00]
>> Let's take a little side trip here and talk about namespaces just so you all understand how they work. Who here, or online, like who's used jQuery before? Awesome, every passing year I get a little bit afraid that people forget what jQuery is. Great, lots of people use jQuery.

[00:00:25]
It's still on 80% of websites globally. And aside from the highest traffic websites, it's incredibly likely that you'll find jQuery on things. The purpose of jQuery was, it helped us at a time where we did not have a standardized DOM API we could use. So if you use document.querySelector today, that was not a thing that we could rely on in the early 2010s and before.

[00:00:58]
We needed a library that sort of provided some abstractions that would do the right thing in like early versions of Internet Explorer. And worked on all the browsers, it's it's really a compatibility layer. So there are two kinds of things that we can do with jQuery, or two common kinds of things.

[00:01:18]
One is, so first off, we would distribute jQuery as a global. You'd import a script, add it to your website, right? You'd have a script tag, you'd paste that in your HTML. And then as a result of that script being evaluated, it would set up a global. You would include this script and then you'd be able to just hit dollar sign, and there's jQuery.

[00:01:39]
This was before we had proper packaging where you'd import things that you need. It would just be set up as a global. So hanging off of this global would be a bunch of functions like .ajax. If you've not used this, this is like the old equivalent to fetch.

[00:01:55]
This is making a HTTP request asynchronously. And here you can see, this is actually what's on the jQuery homepage right now. Ajax later began to return promises before promises were a standardized thing. But the earliest versions had you passing in a callback to handle the success case and a different callback to handle the failure case.

[00:02:17]
So this is a function hanging off of dollar sign. Also, you could invoke dollar sign as a function. And this is equivalent to document.querySelectorAll, where you're saying, here is an expression, find me the DOM nodes that meet this expression. And then I wanna operate on them. And today we would get like a node list back from QuerySelectorAll.

[00:02:47]
jQuery had its own little construct here, but it would give you a forEach. And this is how we used to do DOM manipulation in a way that would work across a wide range of browsers. Typing this is challenging. It's a function and it's got a bunch of stuff dangling off of it.

[00:03:04]
How do we type that? With a namespace. So this is an approximate type for jQuery. We could say that we have a function called dollar sign and it returns a node list of elements. And here we're probably failing or like implementing it by calling, effectively the API that replaced it.

[00:03:26]
And then we can have a namespace here that exposes functions which sort of end up dangling off of the dollar sign. That's the idea of a namespace. You can have a function and then you can merge on top of it things that should be kind of dangling off of this function.

[00:03:46]
If we take this ts-ignore comment away, We can see that there's a namespace dollar sign, function dollar sign. So we can see that we have declaration merging here, we see a namespace and a non namespace value. And we can invoke it and we can access .ajax off of it.

[00:04:11]
So this is a very good example of why we used to use namespaces for this kind of thing. NThis is sort of evidence that TypeScript, one of the problems it's trying to solve is that a very wide range of JavaScript things can be effectively typed. And without namespace we would have to get really interesting here.

[00:04:33]
We could type it other ways, but it's more clear when you can say, here's the callable thing and then here are the things that are dangling off of it. You could have one big mega interface with a call signature and a bunch of properties there. There are advantages to doing it this way where you could sort of break your type information up into a bunch of different files and sort of expose them all through the central namespace.

[00:05:01]
It's easier to manage when you do it this way.