Video details

Jemima Abu - The Evolution of JavaScript

JavaScript
09.06.2022
English

Jemima Abu - The Evolution of JavaScript
In the beginning, there was the web and the web was a simple place. Then came along JavaScript and all that changed.
In this talk, we’ll take a look at the humble beginnings of JS and how it exploded into the chimaera of frameworks and libraries that we have today, leading to the vast complexity of web development as a whole.
https://www.jsworldconference.com
Powered by https://passionatepeople.io
#jsworld #jsworldconference #frontendlove #frontenddeveloperlove #javascript #reactjs #angular #react #vuejs #vue #vue3 #typescript #graphql #jamstack #amsterdam #conference #svelte #sveltejs #next #nextjs #staticsite #css #html #nuxt

Transcript

Give it a like thanks. That was a presentation. Thanks for coming. I'm joking, though. All right, let's get into it. Hi, I'm Jemima Jamie Mapu, and I am a selfselect system developer and school talk systems engineer from Lagus, Nigeria. And I currently work for a company called we Make Websites in London. Any guesses as to what my company does? That's right. We make websites. It's right there in the name. And you can find me online anywhere at Jumaimabu, so that's on Twitter, Medium, LinkedIn, GitHub, etc. So let's get into it. JavaScript. When I first started learning how to build websites, I started learning how to build websites with HTML and CSS. I thought it was really cool that you could write text on a page and it became this really fancy and fun designs. And then a year later, people were like, you can't get a job with just HTML and CSS. And I was like, you can't apparently you can't know, you have to learn this thing called JavaScript. And I got into JavaScript and I was like, what is this? And then I started learning more about how JavaScript came about. And I thought it was really fun because the JavaScript history, there's a lot of like, drama and back and forth. It's basically like a reality show. It's like the real housewives of software development. So, yeah, we're going to get into that and it's going to be really fun. And you all see what I mean. So in the beginning, there was the World Wide Web. Now the World Wide Web was created by Tim Berners Lee in I want to say and the Internet was built to be a simple place. It was something that people could use to do anything. It was meant to be like this. Think of it as having a giant shared laptop. So, you know, when you were growing up and you had that one computer in the computer room and everybody used the same computer, so if you had any special files on the computer, you had to delete them before you left because everybody could see it. That was pretty much the basis of the Internet. It was a giant shared folder that everyone could access the same information on. And the Web was a simple place, or a not so simple place. We had websites that looked like fever dreams, and that was fine. That was how people chose to express themselves. But then the problem with this was that the Web was, as we said, a simple place. All the websites that were on the Internet previously were static. What that meant was that you could just show text and images. They didn't do much and they weren't very I mean, they were crazy, but they didn't do much either way. The problem we had with this was in the case of wanting to let's say we want to have better user experience. If you had a website back then, let's say you had a form on your site, right? And you wanted to take user imputes and then get data based on that user interview. So think of something like a simple login form. The user fills in their email. But then if you wanted to validate your form, you had to collect the user email, the user imputes, send it to your server, and then your server would return the error and send it back to you. And then you had like really slow internet, like we didn't even have up to three GS back then. So you were working with, let's say it takes 1 minute to lose the server and 1 minute to return the error message. That's a lot of wasted time. And that was basically how things worked before JavaScript. So then there was a company called Netscape Navigator, and what they wanted was that they wanted a way to not bother their server with all these unimportant things like validating user email or checking if an impute field is empty or not. What they wanted was a client side validation email. What that meant was that all the verification and stuff would be done on the main web page without needing to browse out the server. And that is why JavaScript was invented. Netscape Navigator contracted a developer called Brendan H to build them a programming language that could handle clientside validation. That was the whole reason JavaScript was invented, pretty much because people wanted to handle forms on the front end without having to send it to the server. One thing I found very interesting about this was that JavaScript was for all intents and purposes, built in ten days. And when I heard that I was like, yeah, JavaScript of all languages would have been built in ten days. That seems very apt, but basically what was the underlying philosophy behind JavaScript? I will let Brendan explain it because he says it better than I would. That's two videos in one presentation. Aren't you all lucky? All right, which is a programming language for HTML, for web designers and programmers to use embedded directly in the web page. Not something that was like coming along at a time called Java, which was more of a professional language where you would write real code with type declarations and you'd have to write that code in a way that compiled I was writing something JavaScript that could be used by people who didn't know what a compiler was. They were just going to load it. It was like Basic and that was really the pitch that we did, which is a programming language force. So that was the general idea behind JavaScript. It was never intended to be like a major programming language or a serious programming language. It was for people back then who were building websites, people who did not have any programming knowledge at all. They wanted them to be able to take this language and without needing to set up any builds or any compilers, just be able to make the changes that they wanted. JavaScript was built to be an easy language to use, and then when it was going through its build, they had all these very different names. So when Brendan was first working on it, it was called Mocha. But then before it was released, Netscape Navigator 20, the name was changed to Live Scripts. And then right before I went to development, the name was changed to JavaScript. And now for people like me, we're getting into programming we're like, so JavaScript, is that related to Java? And the way people like to say it is that JavaScript is related to Java the same way a carpet resets to a car. They just have similar letters, they don't have anything in common. And the reason for that was because actually Java was the popular programming language that time. So before they released it, netscape decided to change name to JavaScript to capitalize on the popularity of Java. They were like, oh, you know, if we call it JavaScript, maybe people think it's related to Java, maybe they want to get into it. So it was all capitalism, really, the cause of everything. And also Netscape had this little license agreement with some microsystems where the owners of Java that would allow them to actually use the name and not get sued. And that's pretty much the history of JavaScript. It started out as this simple language for handling client side validation. But then how did it become such a popular language? Well, we had Microsoft. Right? So when Netscape released Netscape Navigator and they invented JavaScript in 1095, that same year, Microsoft released Internet Explorer. And what Microsoft did was that they took JavaScript and they basically reversed engineered it and they had their own client side language, and they called that JScript. So now you had JScript on Internet Explorer. And you had JavaScript on Netscape Navigator. For all intents and purposes, they were the same language, they just had different syntax. The problem with this was that now if you're writing JScript, it doesn't run on Netscape Navigator, but if you're writing JavaScript, it doesn't run on Internet Explorer. And that's what caused a lot of cross browser compatibility issues that we still have these days. Back then, a lot of web pages would display like, oh, this page is best viewed in Netscape Navigator. Or this page. I just want to say how cool it was that he had this option. Can you imagine viewing a website now like, this page is best viewed in Chrome. We don't have the Fire support. I've got fired so fast. So yeah, back then, crossmaler compatibility, you could just choose what web page you wanted your browser to work on. We don't have that luxury now. But the issue with that was, like we said, we're having all these different syntaxes and it was making the Web a very chaotic place. So what happened was that. They said, all right, we're going to netscape reached out to the European Computer Manufacturers Association, the ECMA, and they were like, let's create a standardized form of this language. We want to make sure that we don't have to write two separate languages for all the browsers. We want the web to be united. And that's how ECME scripts came about. It was intended to be a standardized form of the client scripting language. And that's why you hear JavaScript referred to as ECME script these days, because the Es script is JavaScript in a standardized form. But then this is when it became very dramatic. So what happened was that Netscape and Microsoft, they came together and they were like, all right, cool. We're going to work with ECME. So they had ECME One and ECME Two and ECME Three. And then with Escme Four, they were like, all right, you know what? Let's get real fancy. Let's make JavaScript like this really cool language. Let's put classes and let's put modules. And Microsoft was like, that sounds like it's doing too much and we don't like it. And Netscape was like, well, you kind of have to like it because that's how it's heading. And Microsoft was like, no we don't, we're out. So Microsoft was like, there are no way to continue with ECMA and Es Four. The version they were working at that time was never released, which is kind of sad. But then the next version, eZS Five, we had other browsers at this point, so at this point Netscape had been acquired by AOL, which was the creator of Mozilla Firefox, and we had Google. Google had just released a Chrome browser which had the V Eight engine, which was the fastest JavaScript compiler. So now these browsers, they were all using Es Five. And Es Five was working across all of these browsers apart from Internet Explorer because Microsoft was very petty and they did not want Es Five to work on their browser. So basically, we had this one language that works on all these other major browsers apart from Internet Explorer. When Internet Explorer first came out, it was the most popular browser in its time because unlike other browsers, it was free. And also it came preinstalled with Windows systems. But now you have all these other browsers that are doing all these other things and they all work with the same script. So it was I choked. Have fun. It was for this reason that Internet Explorer kind of took a deep dive in popularity because it just was not adapting with the times. It wasn't making any major I think, like in the years it was released, they had updated it maybe four times. By the time Google came out, they had updated it like 700 times. So Internet Square wasn't making any major changes or many major efforts to stay with the time. So that's kind of what led to its downfall today. So see like I said, very dramatic things were heating up in the Software Engineering Fundament. But let's take a look at the original state of JavaScript. So when JavaScript first came out, right, it was the first client side scripting language. So before JavaScript, there was no form of client side validation and it was used by all the major browsers. So now we have Google Chrome and we have Mozilla Firefox, we're all using these browsers. And it was standardized, meaning that you were sure that you could get the same language across all these browsers. So it was all of these kind of like factors that really led to JavaScript becoming such a major programming language in that day, just because it was such a powerhouse of functionality. And the reason JavaScript became really popular is because, like Brendan said, it was never intended to be used by serious programming or for compiling. So for most people, if you're starting out with if you don't have any programming knowledge, web development is a really easy way to get started because you don't need to know anything about virtual machines or the JVM or anything. As long as you have a browser, you can start with websites. So that was kind of the ease of JavaScript. It didn't require any builds, you could just run it directly in your browser. It also allowed user interaction with websites. As we've seen, people like to get really creative with your websites. So now you have this language that's letting you do all these fun things with your website, like change colors and detect when a user is scrolling and make elements appear on the page. So it was just a really fun thing to use back then and it had so many expansive possibilities. JavaScript came with the dawn of the web age and it kind of just like has supported it from where it was like this brand new thing and then it was like, if we can do this many things, what else can we do with JavaScript? So there's all these things that really kind of led there was really nothing else like JavaScript. By the time it came out. You had a lot of other programming languages, but JavaScript was in the league of its own. The other quote I saw on Medium that I thought was really cool, it says, software ate the world, the web ate software and JavaScript ate the web. When the web came about in the industrialization age, we went from the industrialization age to the technical age. So people were really excited by all the things they had. They had like Walkman's and they had radios, they had all these fancy gadgets they didn't have before. And then the Internet was introduced and it just blew everyone's freaking minds. And then we brought JavaScript into that and it kind of just like it was this huge fire that just kind of took off from there until for today, 97 6% of all websites use JavaScript in one form or another because we have a lot of websites that tend to be dependent on JavaScript. So it's very rare to encounter a website online today that doesn't use JavaScript. It's also the most popular language on GitHub in terms of the pull request. We can see I can't remember what year this is from, but basically there were 2.3 million projects using JavaScript. Comparing that to the second one, there just like 1 million projects that use Python. So JavaScript became a really popular language. There's really no other way to say it. And this is an example of a page without JavaScript. This is the Google Maps page. If you don't have JavaScript enabled, basically it's the point where websites just won't work without JavaScript anymore. So JavaScript kind of became its own antithesis when you think about this, because when it was invented, it was created to support HTML. We already had websites. JavaScript were just meant to like, support them and make them easier to use. But somehow it became this crazy thing that took over the web completely and now we can't even have the web without JavaScript. I think that's really cool of JavaScript, but then yeah, so once we had this framework becoming really popular and really taking off, much like with everything, there was need for improvement. So what we were dealing with previously was Web 10. Web 10 was the static website. That was when we were just having like, simple recipe blogs and static information on the page. It wasn't doing anything. JavaScript brought about the advent of Web 20. So now we're having like, creative websites, social media, blogs, everything that you can imagine the web is today. It all came about because of JavaScript. And as JavaScript's popularity grew, so did the need for improvement. It's like, all right, we have this cool thing that does all these cool stuff, but like we said, Brendan built it in ten days. We don't really want to base the entire website on something that's built in ten days, so let's see how we can make this better. And that's how Frameworks came about. Frameworks are people's attempts at creating like, better forms of JavaScript were like, oh, you know what, JavaScript has a lot of follies here and follies there. We don't want to make sure that our entire website is built using JavaScript. So we're going to use Angular or we're going to use React. And this is going to let us determine that the website is rendered in a way that we can control so we can look at a timeline of JavaScript frameworks and how it came about. So after JavaScript was invented, we were dealing with the web called dynamic HTML. This was the web that had interactive users on the page. So things like client side validation or like guessing user interaction on a page. But even with all this, we were still just dealing with static HTML pages. Even with this website, even if you did send something to a server, by the time you return the response, the server is just returning a new HTML page for you to display. And that's when, in 2005, we had the term Ajax, which stands for asynchronous JavaScript and XML. That's extensible Markup Language Ajax will let you communicate with the server directly. So now previously, if you're talking with the server, you had to get the HTML back from them. With Ajax you could send the request to the server and instead of getting a new page, you're just getting data from them so it would be returned as JSON data. And then you could display that data on the page without ever having to render a new page or reload the page. This really catapulted JavaScript in terms of the programming ecosystem because people started taking it more seriously at this point. So now it was less of a clientside scripting language for handling form validation. And it was like, oh wow, this thing actually lets you communicate directly with the server and display all this information. And then in 2006, Jquery was released and Jquery became the most popular JavaScript library to date. Jquery is so popular that it's synchronized with JavaScript. If you look up like, oh, how to remove all classes on an element or something, all the results, most of the top results will be in Jquery before you get to the actual JavaScript method. Like, so today I have to specify like vanilla JS, I do not want a Jquery method. That is how popular Jquery became. The reason for that was because it introduced a much simpler syntax than what JavaScript was. So JavaScript was simple in itself, but it was very worthy. If you want to do something, you have to document duplicate elements by ID. In Jquery, you just had like your dollar sign. You can just put like a hashtag or a full stop. Jquery made it a lot easier to write JavaScript, which was an already easy language. And the really cool thing about Jquery was that it was also its own form of standardization, in that it was a lot more crossbrowsocompatible than a lot of the languages they were dealing with back then. And then after Jquery, we had NodeJS, and NodeJS was what I would say, cemented JavaScript as a powerhouse of a programming language, because NodeJS had so many things that you could do with it. It could handle data streaming, big data connectivity, real time data. You could do all these things with no JS. And it was just kind of this insane you know, when you have that powerball, like in the movies when they go crazy with power because we have so much of it, that's exactly what NodeJS did. We went crazy with power when we got NodeJS. So let's take a look at episode four, the Revenge of the Modules. So now when we had NodeJS, right, we had this thing called NPM that was Node package manager. And it was basically an open source package manager online for NodeJS. And how that works is that it would let you upload your functions to the web. So let's say I'm on my laptop and I'm writing a function and I have like a ad function. All this function does is I add two numbers together. I could upload that to the NPM registry online and people could download my new function as a library. That's basically how libraries and modules work. And let's do a little pop quiz. How many published packages do you think there are on MPM currently? So let's just do a show of hands. 1000 packages. 10,000 packages. Okay, 100,000 packages. All right. We have like a few hands. 1 million packages. There it is. There are currently one 9 million packages on NPM at the moment. And that number increases by at least 10 packages every day. Now, we can compare this to other frame or other package managers like for. Net or PHP, NPM is almost 2 million and these ones don't even have up to 500,000. That means, combined, NPM has more packages than these other three package managers for a lot of major languages. The reason for this is because NPM is a lot more lax than a lot of the other package managers. It allows anybody to upload anything whenever they'd like. It's basically like a fancy social media. You can put all your trash on it and nobody tells you anything. So this is fun, right? But then the catch with that is that we have a lot of things. Like, for example, I could take somebody else's package, add one line, republish that package as a new package and I'll just call that person's package a dependency. This dependency is what led to something I like to call dependency. Gates in 2016, for a very brief period of time a lot of websites on the Internet were shut down because one programmer removed their package from NPM. It's a really fun story. Are you ready for this? So what happened was there was this programmer, right? His name was Azer. I can't pronounce his last name, but his name was Azer and he had this package on NPM called Leftpad. What Left Pad did was that it added string before. It added like a character before a string. So for example, I could put in, let's say, Left Pad bar. Comma five. And it would just return like five bar. That was what it did. It was eleven lines of code. It was a real basic function. But people use this code in there. People use this package as a dependency in their own packages. And now Azer also had another package on NPM called Kick that was Kik. And there was this messaging app at that time like Kick. I think you all use Kick. Was that a thing I used Kick on? If you all did it. It was a creepy place. I wouldn't recommend it. That's a weird one. Anyway, so Kick, the messaging app was like, oh hey Azar, you have this package that has the same name as our app. We need you to take it down. Azera was like, don't tell me what to do. I'm not going to take down my package. And Kick was like, bit. And Kick went to NPM. A Kick was like, NPM, we need Azura to take his package down. And NPM was like, Aazar, you got to take it down then. And Azure was like, okay then I'm taking everything down. So he removed all his packages on NPM. I think he had like 270 packages. He removed all of them including this tiny little inconsequential package called Left Pad. And the fun thing with Leftpad was that Left Pad was a dependency. Let's say left paddle dependency in a package and that package of dependency and that package and that package of dependency on and on until we got up to React a framework you guys might have heard about. Now React was a library that was using a library that was used something else that was dependent on Lebanon. And when Azer took it down for like two or 3 hours people could not run their React projects because every time they tried to run it it would return an error saying Left Pad was not found on the NPM registry. Now imagine trying to explain to your boss that the reason you haven't deployed yet is because Left Pad was not found on the NPM Registry. What the heck is left pad? That was clearly the feeling of a lot of people because now you're working with a package you are not even aware that you are working with. Because I'm sure nobody reads NPM install we just install it and let it happen. But because Azure took it down we couldn't access our actual packages. And there's people who have to go reach out to MPM and NPM to unpublish his package. And they also have to introduce this new rule where they were like, you can't delete a package you can only depreciate it. So that was kind of showing the mass reach of how crazy JavaScript has become. It was literally halting the actual web because one tiny package with eleven lines of code was deleted. It's really kind of creepy when you think about it because that is how dependent we have become on modules as an ecosystem. So yeah that's that was a fun story. So that's pretty much it with what JavaScript was and how it came about and how it became this great language. So what is next with JavaScript? There's this one little snippet online called Atwood's Law by Jeff Atwood. But this says any application that can be written in JavaScript will eventually be written in JavaScript. So JavaScript first came out and it was meant to be this client side scripting language for building websites. But now we have desktop applications built JavaScript that use Electron. We have machine learning applications that use TensorFlow. We have the Internet of things that's based on JavaScript, and we even have cryptocurrencies built with JavaScript. These are actual cryptocurrencies that were built using JavaScript. And I think when JavaScript was first invented, I don't think anybody planned for it to be this megatron of the language of the programming world. I don't think it was intended to be as massive as it became. But then we can kind of see how it came about, how it became so huge, and how there is so much room for growth. So, yeah, it's hard to say specific gift isn't working. It's better. To infinity and beyond. Sorry, you guys know about life here. You can't imagine what the gift is supposed to say. But yeah, JavaScript is basically exploded into this huge thing. And I just think it's really exciting to see what else we can do with it, especially with like, Web 30 and everything. So, yeah, that's about it. Thank you very much for listening to my quick presentation on the history of JavaScript. If you do want access to my slides, you can find them online. My website. Jamba.com talks javascriptevolution. And that's it. Wow, that was a great talk. I also love a Star Wars team talk. Like, I don't know if anybody noticed. Oh, come on, star wars fans. Thank you so much, EminemA. You're welcome.