Skip to content

Latest commit

 

History

History
157 lines (115 loc) · 14.4 KB

day_10.md

File metadata and controls

157 lines (115 loc) · 14.4 KB
Raw

A walk in JavaScript

DAY 10

  • JavaScript, where does it live?
    • The ECMAScript Engine
    • What does the engine actually do?
      • Visual guide based on V8
    • How many of them are there?
    • Engines Differences
  • The ECMAScript runtime
    • Runtimes Differences
    • Similarities
  • Javascript and the web
    • HTML
    • CSS
  • TL;DR
  • Complementary readings

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.

  • ECMA International
  • ECMAScript
  • ECMA-262
  • JavaScript
  • JavaScript engine
  • JavaScript Runtime

Let's remember what are they.

ECMA International is an organization dedicated to defining and maintaining 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 the ECMAScript standard.

JavaScript is one of these 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 these 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)

  • Once your text file has been loaded, the engine will perform a lexical analysis by reading the sequences of characters and try to convert them into a sequence of meaningful strings (tokens) for the specific language (a.k.a. tokenization).
  • Once the lexer successfully identifies those meaningful pieces it's time to perform a syntactic analysis (parsing) to make sure the tokens can be related making valid expressions.
  • If there are no errors so far, it's time for a semantic analysis. Here a lot of things will happen, essentially to make sure the program can be accurately represented, and the resources of the program such as types, bindings and assignments are valid. Additionally it ensures that the Symbol Table was successfully created and the intermediate representation of the code was generated
  • Now what? It's time to convert that IR into something the machine can execute (e.g. machine code). In the modern JavaScript engines (originally introduced by V8) this happens in runtime (during execution) and is known as JIT
  • Then? Again, pretty much all modern ECMAScript engines, especially JavaScript engines implement some form of optimization (e.g V8's TurboFan)

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 and will persist 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 implementations but there might be more. Some of them compile to machine code using JIT, some don'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

  • Chrome
    • Web APIs (tons of them)
    • window predefined global object
    • location global object
    • document global object
    • import
    • ES6 modules
  • Node.js
    • headless
    • globalpredefined global object
    • require
    • process
    • CommonJs modules

Similarities

  • Timers
  • Event Loop
  • Callback Queue

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

  • JavaScript Engine: takes care of the analysis and execution of the code
  • JavaScript Runtime: takes care of running the JavaScript engine and provides mechanisms for communicating with other systems (e.g. timers, external resources) through specific APIs
  • HTML: takes care of presenting the information to the browser in a semantic way by delivering a structured document and informing the browser about external resources required for the presentation (e.g. js, css, fonts)
  • CSS: takes care of defining the structured document (HTML) to cover different presentational (rendering) needs such as visual aspect (e.g desktop vs mobile displays), specific devices (e.g. printers), accessibility (e.g. screen readers, Braille tactile devices)

Complementary readings

Go back to DAY 9 or Go next to DAY 11

Back to main page