Over a million developers have joined DZone.

Secrets of the JavaScript Ninja—The JavaScript Ecosystem

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

Applications based on the ideas originating from the web are becoming ubiquitous – the technologies we once exclusively used to develop client-side web applications, executed in the browser, have spread to other domains, as shown in the figure below.

The JavaScript ecosystem

Figure 1 The JavaScript eco-system: JavaScript applications can nowadays be executed on different devices (desktop computers, mobile devices, servers, and even on embedded devices). Our focus is on developing client-side web apps executed in the browser.

Now, we can use similar or even the same ideas and techniques to develop standard desktop applications (for example, code editors like Atom.io), hybrid mobile applications (for example Netflix), server-side applications (by using Node.js), and even applications for embedded devices (with Espruino or Tessel). It is very rare that a particular skill set is so easily transferable and useful across this many different domains.

In this article, I will explore the core principles of JavaScript and take a look at some of the most-popular JavaScript libraries.

Understanding the JavaScript language

Many JavaScript coders, as they advance through their careers, get to the point where they’re actively using the vast number of elements comprising the language. In many cases, however, those skills may not be taken beyond fundamental levels. Our guess is that this might often be because JavaScript, being a C-like language, on the surface level looks pretty similar to other wide-spread C-like languages (such as C# or Java), and thus leaves the impression of familiarity – people often feel that knowing C# or Java, they already have a pretty solid understanding of JavaScript. However, at the core of JavaScript, there are some fundamentally different concepts, such as:

  • Functions as first-class objects
  • Function closures, and
  • Prototype-based object orientation

When compared to other main-stream languages, like Java, C#, or C++; JavaScript is much more functionally oriented, to the degree that it treats functions as first-class objects and uses function closures. Function closures are a concept that is generally poorly understood, but at the same time it fundamentally and irrevocably exemplifies the importance of functions to JavaScript. For now, it’s enough to know that a function is a closure when it keeps alive (“closes over”) the external variables used in its body.

JavaScript is also an object-oriented language, but as with many other language features, the object-orientation comes with a twist. Unlike other main-stream languages (such as C#, Java, or Ruby) which use class-based object orientation, JavaScript is the only “popular” language that uses prototypes. In prototype-based object orientation, an object is merely a collection of properties with some values, and every object can have a prototype to which a search for a particular property can be delegated to, if the object itself does not have that property. Prototype-based object orientation in particular is the source of woes for many developers. Often, when developers come to JavaScript from class-based languages, for example Java, they try to use JavaScript as it were Java, essentially writing Java’s class-based code using the syntax of JavaScript. Then, for some reason, developers often get surprised when the results differ from what they expect. This is why we’ll go deep into prototypes, how prototype-based object-orientation works, and how it is implemented in JavaScript.

JavaScript actually consists of a close relationship between objects and prototypes, and functions and closures, which is shown in the figure below.

Figure 2 JavaScript consists of a close relationship between objects and prototypes, and functions and closures.

Understanding the strong relationship between these concepts can vastly improve our JavaScript programming ability, giving us a strong foundation for any type of application development, regardless of whether our JavaScript code will be executed within a web page, a desktop app, a mobile app, or on the server.

In addition to these fundamental concepts, there are also other JavaScript features that can help us write better and more efficient code. In particular, we are going to focus on regular expressions, which allow us to simplify what would otherwise be quite complicated pieces of code; and promises, that give us better control over asynchronous code.

Having a deep understanding of the fundamentals and learning how to use advanced language features to their best advantage can certainly elevate our code to higher levels, and honing our skills to tie these concepts and features together will give us a level of understanding that puts the creation of any type of JavaScript application within our reach.

Understanding the browser

These days, JavaScript applications can be executed in different environments, but the environment from which it all began, the environment from which all other environments have taken a lot of ideas, and the environment on which we’ll especially focus is the browser.

The browser provides a number of concepts and APIs that we’ll thoroughly explore; see the following figure.

Figure 3 Client-side web applications rely on the infrastructure provided by the browser, out of which we will particularly focus on events, timers, web workers and the DOM.

All JavaScript applications are event-driven applications, meaning the majority of code is executed as a responses to some event (for example, network events, timers, or user generated events such as clicks, mouse moves, keyboard presses, and so on). For this reason, we’ll thoroughly explore the mechanisms behind events. We’ll pay special attention to timers, which are all too frequently a mystery, but which give us the ability to tackle complex coding tasks such as long-running computations and smooth animations.

By its nature, JavaScript is heavily based on the single-threaded execution model – only one piece of code can be executed at a time. This means that long-running computations should be avoided (or handled with timers), because they would lead to unresponsive user interfaces (UIs). We’ll show you how to offload these long-running computations to Web Workers that, while having some limitations, enable us to write multi-threaded JavaScript code.

 Client-side web applications are UI applications, and their UI is represented by the Document Object Model (DOM), which is, at least initially, built from the HTML code of a web application.

Perfecting our JavaScript programming skills and achieving deep understanding of APIs offered by the browser will take us far. But sooner, rather than later, we’re going to run face first into The Browsers and their various issues and inconsistencies.

Cross-browser considerations

In a perfect world, all browsers would be bug-free and would support web standards in a consistent fashion, but unfortunately we don’t live in that world.

The quality of browsers has improved greatly as of late, but they all still have some bugs, missing APIs, and browser-specific quirks that we’ll need to deal with. Developing a comprehensive strategy for tackling these browser issues, and becoming intimately familiar with their differences and quirks, is almost as important as proficiency in JavaScript itself.

When writing browser applications or JavaScript libraries to be used in them, picking and choosing which browsers to support is an important consideration. We’d probably like to support them all, but limitations on development and testing resources dictate otherwise.

Skill transferability

As we have already mentioned, the ideas, tools, and techniques that have originated in client-side web development have permeated other application domains also. Let’s take a look at figure 4 that shows how combing a deep understanding of fundamental JavaScript principles with the knowledge of core APIs can make you a more versatile developer.

Figure 4 Understanding the core principles behind client-side web applications will make you a better developer in different domains.

By using the browsers and Node.js (an environment derived from the browser), we can develop almost any type of application imaginable. It doesn’t matter if your target application is a standard desktop application, a mobile application, a server-side application, or even an embedded application – all these different types of applications can be developed with the same underlying principles that are behind standard client-side web applications that we will put a special focus on. By understanding how the core mechanics of JavaScript work (notice how JavaScript mechanics are shared between browsers and node.js in Figure 4), and by understanding the core APIs provided by the browsers, such as events, timers, and web workers (which also share a lot in common with mechanisms provided by Node.js) you can boost your development skills across the board, in the process becoming a more versatile developer that has the knowledge and the tools to tackle a wide variety of problems.

In order to take full advantage of the emerging application landscape, you need a deep understanding of the fundamental principles standing behind client-side web development. In my book, Secrets of the Javascript Ninja, 2nd edition, we focus on these principles. More specifically, we are going to focus on:

  • Deep understanding of the core mechanics of JavaScript
  • Understanding the browser: the engine in which our JavaScript applications are executed
  • Writing effective and cross-browser JavaScript code

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.


The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}