A walk in JavaScript

DAY 10

JavaScript, where does it live?

During this walk we mentioned several times a set of concepts related to JavaScript (but not only) that we’ll explore a little deeper today.

Let’s remember what are they.

ECMA International is an organization dedicate to define and maintain technology standards, one of the standards is ECMAScript identified as ECMA-262 which specifies the rules, details and guidelines so you can create a programming language in compliance to ECMAScript standard. JavaScript is one of this languages (one of many) and even though historically it was created before the standard, today it follows it. In order to be interpreted and executed, a programming language might need an engine, JavaScript is one of this cases but all ECMAScript compliant languages will need an engine; and this statement will generally apply to the ECMAScript engine itself, which will require a Host Environment as well. This Host environment (a.k.a ECMAScript Runtime) will provide to the engine the necessary elements to interact with other systems.

The ECMAScript Engine

What does the engine actually do?

So what does the engine actually do? (briefly)

Visual guide based on V8

HEAP (memory allocation) EXECUTION CONTEXT STACK (call stack)
Here the engine stores the memory addresses for compound data ( e.g. objects and object subtypes like functions, arrays). This memory doesn’t depend on the execution context, will be persisted until the Garbage Collector can claim it. - Garbage Collector (Orinoco) The ECS is tied to the function execution. When a function is called, it’ll be added to the stack in a LIFO order. It runs synchronously and when its execution has been completed it’ll be popped off the stack and the engine will take the next item on the stack. Javascript has only ONE ECS, therefore one thing at a time can be executed. Interpreters (TurboFan) - Optimizers (Ignition)

How many of them are there?

More than 30

Yup, at least that’s the list of known implementation but there might be more. Some of them compile to machine code using JIT, some doesn’t, some are new, or old, designed for web browsers or to be embedded.

You can check a quite long List of ECMAScript engines in Wikipedia

Engines Differences

Comparison between different JavaScript engines.

The ECMAScript runtime

We said “This Host environment (a.k.a ECMAScript Runtime) will provide to the engine the necessary elements to interact with other systems.”, can we have a concrete example?

Let’s try to be simple: We know two runtimes that share the same engine: V8 is the JavaScript engine for both Chrome and Node.js, the overlapping surface between both runtimes is huge but there are also big differences. See the table below.

Runtimes Differences

Similarities

Why should I care? because even though we’re writing JavaScript, depending on the runtime for the same engine, our program might shamefully fail or it could be extremely hard to test.

Here some more cases of mixed environments differences from YDKJS: Types & Grammar - Mixed Environment JavaScript by Kyle Simpson.

Javascript and the web

Despite the fact that JavaScript, today, is much more than a language for the web; it’s still one of the heaviest usage of the language, particularly webb applications delivered as “web pages”. Therefore is extremely important that you know not only JavaScript but also HTML and CSS (.there’s an interesting Roadmap to becoming a web developer in 2019 written by Kamran Ahmed if you want to read more)

We won’t get deep into them as that’s not the scope of this course, but at least we’ll review their definitions and some basic features.

HTML

Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.

HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects such as interactive forms may be embedded into the rendered page. HTML provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets. Tags such as <img /> and <input /> directly introduce content into the page. Other tags such as <p> surround and provide information about document text and may include other tags as sub-elements. Browsers do not display the HTML tags, but use them to interpret the content of the page.

HTML can embed programs written in a scripting language such as JavaScript, which affects the behavior and content of web pages. Inclusion of CSS defines the look and layout of content.

The World Wide Web Consortium (W3C), former maintainer of the HTML and current maintainer of the CSS standards, has encouraged the use of CSS over explicit presentational HTML since 1997.

Source: Wikipedia

CSS

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content.

Separation of formatting and content also makes it feasible to present the same markup page in different styles for different rendering methods, such as on-screen, in print, by voice (via speech-based browser or screen reader), and on Braille-based tactile devices. CSS also has rules for alternate formatting if the content is accessed on a mobile device.

The name cascading comes from the specified priority scheme to determine which style rule applies if more than one rule matches a particular element. This cascading priority scheme is predictable.

The CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet media type (MIME type) text/css is registered for use with CSS by RFC 2318 (March 1998). The W3C operates a free CSS validation service for CSS documents.

Source: Wikipedia

TL;DR

Complementary readings