How JavaScript works

#javascript #http

We talk a lot about JavaScript these days. I've come across this collection of articles titled "How JavaScript works". They are well written and full of diagrams explaining what's going on and how things work.

The premise of the author, Alexander Zlatkov, is the following:

As it turns out, there are a lot of developers that are using JavaScript on a daily basis but don’t have the knowledge of what happens under the hood.

Here are the various articles:

An overview of the engine, the runtime, and the call stack
Inside the V8 engine + 5 tips on how to write optimized code: talks about V8, its compilation and optimization steps
Memory management + how to handle 4 common memory leaks: goes into depth on the topics of memory management and garbage collection (reference counting and mark and sweep). A lot of high level languages have similar garbage collection mechanism.
Event loop and the rise of Async programming + 5 ways to better coding with async/await: talks about the event loop, explains why timers cannot be precise, and gives an overview on promises and async/await.
Deep dive into WebSockets and HTTP/2 with SSE + how to pick the right path: this is more about HTTP/2, Websockets and Server Side Events and the strengths/weaknesses of each technology.
A comparison with WebAssembly + why in certain cases it’s better to use it over JavaScript: WebAssembly seems a little rough to me currently but if everything is going to be eventually written in JS ,it better have a WebAssembly core :P This demo made with the Unreal Engine is amazing: https://s3.amazonaws.com/mozilla-games/tmp/2017-02-21-SunTemple/SunTemple.html - I'm not sure we're going to see WebAssembly used in the average web app anytime soon though.
The building blocks of Web Workers + 5 cases when you should use them: what they do, how you can take advantage of them, their limitations and so on. Do you have use cases of "normal" web workers in any of your apps? Aside from Service Workers in PWAs I mean.
Service Workers, their lifecycle and use cases: this is all dedicated to Service Workers and PWAs. One day I'll get to PWAs too, I'm still in the "SPA are wow" phase :D). I hope that PWA support ramps up to 100% in each browser in 2018-2019 so that we can have a serious alternative to native apps and their methods of distribution. IIRC the first iPhone had a sort of PWAs, native apps arrived later. Offline caching and HTTP/2 can contribute on improving performance on the phones too.
The mechanics of Web Push Notifications: explains the Push API and the Notification API and their usage through Service Workers.
Tracking changes in the DOM using MutationObserver: definitely didn't know about this in detail. The web has made huge steps forward! With this you can actually track every single thing the user does on your page, creepy :D
The rendering engine and tips to optimize its performance: talks about DOM and CSSOM and the browser rendering engine and how to optimize JS and CSS for such engine.
Inside the Networking Layer + How to Optimize Its Performance and Security: how does networking in the browser actually work? This article is about that.
Under the hood of CSS and JS animations + how to optimize their performance: how CSS and JS animations work and how to use properly. I'm really behind on this, I don't think I've ever actually used animations in a web app.
Parsing, Abstract Syntax Trees (ASTs) + 5 tips on how to minimize parse time: how JS is transformed to an AST and how the various engines optimize bytecode loading.
The internals of classes and inheritance + transpiling in Babel and TypeScript: how the prototype chain works, how classes are implemented and transpiled.
Storage engines + how to choose the proper storage API: talks about the various browser storage options (from cookies to IndexedDB), their pros and cons.
The internals of Shadow DOM + how to build self-contained components: all about the shadow dom, components, slots and scoped CSS.
WebRTC and the mechanics of peer to peer networking: WebRTC, its concealed complexity and its use cases.
Under the hood of custom elements + Best practices on building reusable components: how to use custom elements properly with modern JavaScript and what browser support they have.