Reasons Why JavaScript is Omnipresent in Modern Development
Look, I’m no developer.
A few years ago, I couldn’t tell the difference between server and client-side development.
Vue.js, React, Node.js… what the hell?
I couldn’t begin to understand why JavaScript was everywhere, why it was so important.
I know I’m not the only one with so many questions about these subjects. Whether you’re new to web development or you need to work closely with devs, it can all get pretty overwhelming.
Working with developers on a daily basis has been a reality of mine for a while now, and I’m starting to get a solid grasp on concepts that once puzzled me.
Therefore, I want to use this post to answer these questions:
Even for experienced developers, it’s nice to stop for a second and remember where the tools you’re using are coming from and why you’re using them.
So let’s do this!
What is JavaScript (in layman’s terms)
When you’re new to something, you usually search for definitions and end up in Wikipedia. In JavaScript case, you might end up with more questions than you came in with.
Yuuup, I’m lost. ¯\_(ツ)_/¯
You’ll hear and read a lot that it’s a client-side programming language, which is true. But is also kind of diminutive to what JavaScript actually is today. But we’ll come back to this later on.
For now, let’s simply say that JavaScript is a tool for developers to add interactivity to websites.
See, your browser needs three things for allowing you to consume this content:
HTML structures the content
CSS styles it
JavaScript makes it come to life!
This makes it all sound straightforward, but trust me, there’s so much more to it. So let’s start smoothly, by going back in time.
A bit of history
To understand where we’re at today and where we’re going, we first need to fully understand where we come from. For JavaScript, the story is a long and bumpy road.
1995 is where it starts. In the offices of Netscape where the first version of JavaScript was born. 1995… take a moment to think about how different the web landscaped was at that time. I was three-years-old; most readers were probably not even born. Netscape itself’s a very distant memory.
At that moment though, Netscape’s Navigator was one of the most popular web browsers. It’s to support it that JavaScript was created, as a companion language to Java. The fact that Netscape wanted a language that would “look like Java” ruled out many other existing languages that could have been used to run the browser (Python, Tcl, Scheme, etc.).
Back then, the web was fully-static, powered by simple HTML & CSS. JS brought dynamism.
Remember when the web looked like this? You can still visit SpaceJam’s official website.
The initial goal with that new programming language was to make the web a full-blown application platform, meaning that JavaScript would run on both client and server. It wasn’t a complete success though, as it took many years to be taken seriously as a backend language. But it rapidly thrived on the frontend, becoming the standard programming language of the web.
Even after the death of Navigator, it was eventually adopted by all succeeding web browsers, from Explorer to Firefox and Chrome.
JavaScript was born in a hurry though, and various quirks would harm the language adoption in its early years. Still, some of its powerful features were part of it since its inception. These would define JS and allow it to grow.
The next big step following the public release came with ECMA standardization, which became the “convention” behind JavaScript. It brought the language to a broader audience and allowed other potential implementors, like Microsoft, to have a say in its evolution.
Not enough history for you? Read the extended version here.
Why does the web need it?
Up to this point, one question that might stick is:
Why did Netscape need a whole new language for the web, wasn’t Java enough?
The perception at that time was that Java was not suited for an entire audience that could potentially adopt web development such as scripters, amateurs & designers. It was just too big for the role.
With the coming of JavaScript, it was possible to satisfy different audiences: 1) component writers and enterprise-level professionals with Java and 2) scripters & designers with JavaScript. That second bunch we could also call, in modern web dev terms, frontend developers.
The name JavaScript came from an attempt to ride the wave of Java’s popularity and speed up adoption. Today, you won’t find many similarities between both languages.
As I already mentioned, it also brought dynamic features to the web. What does it mean exactly? Here are a few things you see every time you spend two minutes on a web browser, that is the result of JavaScript:
Autocomplete
Loading new content or data onto the page without reloading the page
Rollover effects and dropdown menus
Animating page elements such as fading, resizing or relocating
Playing audio and video
Validating input from forms
… a LOT more
JavaScript is a scripting language that’s inserted directly in the HTML of a page. It’s the only programming language of this kind that can be understood by web browsers. Browsers can read Javascript, interpret it and then run the program, creating powerful client-side experiences.
Since 2017, WebAssembly is also supported by modern browsers. It’s a new type of language that is designed to run alongside JavaScript.
It achieved this status because it’s open, standardized, and, most importantly, whether you agree or not, a very good language. It’s well-suited to the web with its dynamic nature and tight integration with the DOM.
JavaScript also is compatible with other languages. This is super important as web servers run on different languages whether it’s PHP, Python, Ruby, Java or .NET. Because the JavaScript running in the browser is 100% decoupled from how HTML web pages are generated, users will always have the same rich experience as JS works, no matter the server-side language used.
You want to have a real feel of what is JavaScript doing for the web? Try turning it off in your web browsers and see the result!
Why is JavaScript so important?
What’s the fuss all about, mate?
Even if JavaScript has been the language of the browsers for a long time, it hasn’t been that long since it got (almost) universal recognition from the development community. I mean, even Brendan Eich, considered the father of JavaScript, had pretty harsh words about JS back in 2008:
“Many curse [JavaScript], including me. I still think of it as a quickie love-child of C and Self. Dr. Johnson‘s words come to mind: “the part that is good is not original, and the part that is original is not good.””
Yet, here we are, more than ten years later and JavaScript is more present than ever before. I mean, it’s everywhere.
It’s almost impossible to find your way around working with JavaScript in some way or another in you’re a developer.
Don’t take my words for it, it’s by far the most popular programming language (considering you can’t do much with HTML & CSS without JS)[Source]
Why is that?
For answers, we need to look at the amazing ecosystem that was built on it. We’ve got ourselves a good ol’ “chicken or the egg” paradox here.
We can also attribute the origin of this “JS revolution” to the release of ECMAScript 6 (or ECMAScript 2015). This update added new syntax for writing more complex applications and many other features that would define the next era of JavaScript.
Either way, this vibrant community and the rise of the web have taken JavaScript place it was never conceived to be.
Language of the now powerful frontend
For a long time, websites were mostly powered by PHP-based CMSs, such as WordPress. Server-side code was handling the major part of the logic. Things are changing though—you might have heard that “static” sites are making a comeback. However, they’re nothing like the ‘90s statically generated websites I mentioned earlier.
Modern browsers now have the capacity to make these interactive and fully-dynamic. A particularity they share with their ancestors, though, is the abstraction of backend development. Logic is handled client-side, directly in the browser, thanks to JavaScript.
Modern web trends were born from this new paradigm, like the JAMstack. I wrote a whole post on the subject that I invite you to read here.
Some of the most prominent web applications around today are built using JS. Think Facebook, Gmail, Twitter, and many more. If we use Facebook as an example, JavaScript enables status updates and most user interactivity. It wouldn’t have much appeal without it.
These tech giants actually built their own frameworks of JavaScript, and these now allow thousands of devs to build their own web apps. You might have heard of Angular, backed by Google, and React, backed by FB. I also have to mention Vue here that, even if not supported by a tech powerhouse, completes the triad of important JS frameworks.
Other than reducing the amount of time and efforts required for developing JS-based sites and apps, these frameworks helped shape new web experiences. Take Single-Page Applications (SPA), for instance. A SPA is a website that interacts with users by dynamically rewriting a page in the browser rather than loading entire new pages from a server, making them behave more like desktop applications.
Language of… many, many things
Yes, the primary use of JavaScript might still be for frontend web development. Truth is though, in 2019, it’s doing so much more than that.
→ Server-side code
There were unsuccessful attempts to make JavaScript run server-side from the very beginning. Many thought it would just never become a stable backend language, until the arrival of Node.js.
Today, this JS runtime is a popular tool to power web servers. This means that JS developers can use Node.js to write both client-side and server-side code in JavaScript, without relying on external web servers.
I dove deeper in Node.js and JavaScript as a server-side language in this blog post.
→ Mobile apps
In the past, you would need other languages to develop great mobile applications, like Objective-C for iOS or Java for Android. It’s now easier than before to use JavaScript to connect to mobile APIs though. This means that you can use mobile devices features, such as the camera or localization to build JS-powered apps.
Once again, this opened mobile app development to a more significant number of developers who no longer need to learn a new language.
Not only this, but the use of JavaScript in mobile apps even opened up new possibilities to make them even more performant. Take a look at Progressive Web Apps (PWA) for instance. Combining the best of the web and the best of apps, PWAs improve reliability, performance, and engagement. They enable impressive new functionalities such as offline navigation.
Aforementioned frameworks like Vue.js and React are increasingly used to craft PWAs. You should check it out!
→ API integrations
Developers can use JavaScript to fetch data from other sources and display it on their own site. One concept that is more promoted than ever in web development is modularity—using different tools to execute specific tasks. Well, it’s now easy to build these kinds of stack thanks to APIs, and JavaScript.
At Snipcart, for instance, our shopping cart is added to user’s websites using JavaScript.
Learn more about APIs and how they work in this piece.
So, why use JavaScript? (or JS benefits)
This is all pretty great. Viva JavaScript! Right?
But wait for a second here, this whole story doesn’t matter if it doesn’t bring benefits to developers and end-users.
JavaScript benefits
Client-side execution of the logic brings faster user experiences. With the code running directly in the browser, the need for server calls is abstracted, hence a cut in loading times. Even with the presence of a server, the fact that JS is asynchronous means that it’s able to communicate with the server in the background without interrupting the user interaction taking place in the frontend.
Since the very beginning, JavaScript has brought user interface interactivity to the web. It now does the same for applications of all kind, helping to develop the most engaging UX. Today, frameworks like Vue.js are bringing transitions & animations to the next level.
JavaScript is behind any good responsive web design. More and more, developers need to adapt their design across multiple browsers and devices. Combining HTML5, CSS3 & JavaScript, they can do so within a single codebase.
For developers, JS is easy to learn and fast to get into active development. Its syntax is easy and flexible for newcomers. It also simplifies the development of complex applications by enabling developers to simplify the app’s composition. The many frameworks & packages out there also ease the life of developers to some extent.
If you haven’t got this yet, JavaScript is insanely popular. If popularity doesn’t always equal quality in life in general, it at least mean one important thing: you’ll find the solution to any problem within the community. In web development, that’s not a negligible detail. If you’re someone that needs to hire developers, that’s also a big plus, as the pool of candidates is huge.
Does this mean that JS is perfect? Not at all, there are indeed disadvantages to be aware of.
JavaScript potential pitfalls
It’s not clear, even to this day, at which extent search engines can crawl JavaScript. Even though Google claims it mostly does, you shouldn’t take any chance if you don’t want to face crawlability/SEO issues. This problem isn’t without a solution as there are ways to handle JavaScript in a way that crawlers see it.
There’s something as too much JavaScript. Bloating your projects with JS will do you a disservice in the long term as it will eventually cause performance issues. The way to avoid this is to insert JavaScript only when necessary and not shoehorn it everywhere like we might tend to do.
The thousands of packages that constitute the JS ecosystem allow developers to work quickly without reinventing the wheel for each new task. However, they also cause what some have called “dependency hell.” You need to learn how to deal with these often necessary dependencies, so they don’t become a hassle for you and the people using your projects.
What’s coming for JS?
This makes for a comprehensive explanation of why is JavaScript so crucial in today’s development community—and why you should probably sharpen your JS knowledge.
Now, I want to leave you with a reflexion on what we should expect for near future of JavaScript. Because trust me, it’s not going anywhere, whether you like it or not. ;)
JavaScript is ever evolving, and so is its ecosystem. I personally think the future begins with less new tools being created and the big players getting more mature and gaining major adoption. We’re already observing this in the field of JS frameworks, where React and Vue.js are taking the edge.
Same at other levels where tools are built on these frameworks. Gatsby, Next.js & Nuxt are slowly becoming the leading static site & PWA generators.
TypeScript will probably play a big part in what’s to come as well. This superset of JavaScript is being adopted massively by the community because it allows JS to scale better.
The future holds many things in the tech world that will no doubt have an influence on frontend development, such as Artificial Intelligence or the Internet-of-Things. JavaScript will have to adapt to these new realities. How? Well, this question seriously exceeds my expertise for now and would deserve its own article. Regardless, it will be interesting to follow these changes as they come along.
One thing’s for sure, if you want to stay relevant in this field, you should never stop learning new stuff!
Want more?
We’ve got many high-level blog posts on the many facets of JavaScript other than these I’ve already linked to throughout this article.
Here’s some that might be of interest to you if you want to go further in the world of JS:
JavaScript Beginner? Start Learning Here (Exercises Included)
Picking the Best Static Site Generator for Your Next Project
I hope this will help you get a better grasp of what the hell is JavaScript and why it’s everywhere nowadays!
If you've enjoyed this post, please take a second to share it on Twitter. Got comments, questions? Hit the section below!
