|
| 1 | +# [A walk in JavaScript](/README.md) |
| 2 | + |
| 3 | +## DAY 1 |
| 4 | + |
| 5 | +- Introduction to JavaScript |
| 6 | + - What is JS anyway? |
| 7 | + - What's ECMAScript? |
| 8 | + - Language features quick overview |
| 9 | + - Myths busted |
| 10 | +- ES5 vs ES6 |
| 11 | + - Relevant differences |
| 12 | + - Relevant improvements |
| 13 | + - Why are we using ES6 in this course? |
| 14 | + - After ES6? |
| 15 | +- Initial workspace Setup |
| 16 | + - Basic Runtime ( Node ) |
| 17 | + - IDE ( Visual Studio Code ) |
| 18 | + - Run Code extension |
| 19 | + - Introduction to NPM |
| 20 | + |
| 21 | +## Introduction to JavaScript |
| 22 | + |
| 23 | +A great overview regarding ECMAScript and JavaScript. |
| 24 | +[Article by Michael Aranda](https://www.freecodecamp.org/news/whats-the-difference-between-javascript-and-ecmascript-cba48c73a2b5/) |
| 25 | + |
| 26 | +> JavaScript began as and primarily still is a language for scripting inside web browsers; however, the standardization of the language as ECMAScript has made it popular as a general-purpose language. In particular, the Mozilla implementation SpiderMonkey is embedded in several environments such as the Yahoo! Widget Engine. Other applications embedding ECMAScript implementations include the Adobe products Adobe Flash (ActionScript) and Adobe Acrobat (for scripting PDF files). [Scripting Language - Wikipedia](https://en.wikipedia.org/wiki/Scripting_language) |
| 27 | +
|
| 28 | +### But what is ECMA? |
| 29 | + |
| 30 | +Let's start with some facts |
| 31 | + |
| 32 | +- In 1995 [Brendan Eich](https://en.wikipedia.org/wiki/Brendan_Eich) was recruited by [Netscape](https://en.wikipedia.org/wiki/Netscape_Navigator) to embed [Scheme](https://en.wikipedia.org/wiki/Scheme_(programming_language)) programming language into netscape Navigator. Due to different company level decisions the original idea mutated, and it ends up with Brendan writing a new language prototype written in 10 days, |
| 33 | +- In 1996 Netscape submitted JavaScript to [ECMA Internacional](https://www.ecma-international.org/memento/index.html), an industry association dedicated to standardization of Information and Communication Technology (ICT) and Consumer Electronics (CE), the task of defining a Standard specification so that other vendors could implement the language as well. |
| 34 | +- In 1997 the first release of the ECMA-262 standard was published and JavaScript gradually became the most popular implementation. Other ECMAScript languages derived from that standard too, e.g [ActionScript](https://en.wikipedia.org/wiki/ActionScript) and [JSscript](https://en.wikipedia.org/wiki/JScript). |
| 35 | + |
| 36 | +> Source [Standardization](https://en.wikipedia.org/wiki/JavaScript#Standardization) on wikipedia |
| 37 | +
|
| 38 | +### Languages features quick overview |
| 39 | + |
| 40 | +- [Dynamic typed](https://en.wikipedia.org/wiki/Dynamic_typing) |
| 41 | +- Functions as [first-class citizens](https://en.wikipedia.org/wiki/First-class_citizen) |
| 42 | + |
| 43 | +- **Multi-paradigm language** |
| 44 | + - [Structured](https://en.wikipedia.org/wiki/Structured_programming) |
| 45 | + - [Imperative](https://en.wikipedia.org/wiki/Imperative_programming) in which the programmer instructs the machine how to change its state, |
| 46 | + - [Procedural](https://en.wikipedia.org/wiki/Procedural_programming) which groups instructions into procedures, |
| 47 | + - [Object-oriented](https://en.wikipedia.org/wiki/Object-oriented_programming) which groups instructions together with the part of the state they operate on, |
| 48 | + - [Prototype-based](https://en.wikipedia.org/wiki/Prototype-based_programming) |
| 49 | + - [Declarative](https://en.wikipedia.org/wiki/Declarative_programming) in which the programmer merely declares properties of the desired result, but not how to compute it ( e.g regex ) |
| 50 | + - [Functional](https://en.wikipedia.org/wiki/Functional_programming) in which the desired result is declared as the value of a series of function applications, |
| 51 | + |
| 52 | + - [Event-driven](https://en.wikipedia.org/wiki/Event-driven_programming) |
| 53 | +- [Client-side](https://en.wikipedia.org/wiki/Client-side) |
| 54 | + - Web Browsers |
| 55 | +- [Server-side](https://en.wikipedia.org/wiki/Server-side) |
| 56 | + - Node.js |
| 57 | + |
| 58 | +[See more](https://en.wikipedia.org/wiki/JavaScript#Features) |
| 59 | + |
| 60 | +### Myths busted |
| 61 | + |
| 62 | +> **[MYTH]** JavaScript === Client-Side |
| 63 | +
|
| 64 | +Well that's easy to prove ... lets say ... starting with Node.js |
| 65 | + |
| 66 | +> **[MYTH]** JavaScript === Front-End |
| 67 | +
|
| 68 | +Humm, see above? and ... what's FE anyway? is it the visual aspect? the user interaction handling? the data process occurring when an API is consumed to store a denormalized version of the schema in a local database? |
| 69 | + |
| 70 | +> **[MYTH]** JavaScript === "interpreted" language. |
| 71 | +
|
| 72 | +JavaScript is not an "interpreted" language anymore!!! or at least is not ONLY interpreted. Since V8 introduced [JIT compilation](https://en.wikipedia.org/wiki/Just-in-time_compilation) in 2008, all modern browsers started overhauling their engines to be able to compete. |
| 73 | +Several improvements were based on pre-compiling optimizations, including (but not only) the generation of an intermediate Bytecode and a post optimization to produce machine code. Also several optimization initiatives were disregarded along the way like V8's Full-codegen and [Crankshaft](https://blog.chromium.org/2010/12/new-crankshaft-for-v8.html). |
| 74 | + |
| 75 | +Here some interesting articles |
| 76 | + |
| 77 | +- [V8 Background compilation](https://v8.dev/blog/background-compilation) |
| 78 | +- [V8 Ignition + TurboFan](https://v8.dev/blog/launching-ignition-and-turbofan) |
| 79 | +- [Understanding V8's ByteCode](https://medium.com/dailyjs/understanding-v8s-bytecode-317d46c94775) |
| 80 | +- [SpiderMonkey ByteCodes](https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey/Internals/Bytecodes) |
| 81 | + |
| 82 | +## ES5 vs ES6 |
| 83 | + |
| 84 | +To be fair we should go back to the evolution of ES. |
| 85 | + |
| 86 | +> The JavaScript standard is referred to officially as "ECMAScript" (abbreviated "ES"), and up until just recently has been versioned entirely by ordinal number (i.e., "5" for "5th edition"). |
| 87 | +> |
| 88 | +> The earliest versions, ES1 and ES2, were not widely known or implemented. ES3 was the first widespread baseline for JavaScript, and constitutes the JavaScript standard for browsers like IE6-8 and older Android 2.x mobile browsers. For political reasons beyond what we'll cover here, the ill-fated ES4 never came about. |
| 89 | +> |
| 90 | +> In 2009, ES5 was officially finalized (later ES5.1 in 2011), and settled as the widespread standard for JS for the modern revolution and explosion of browsers, such as Firefox, Chrome, Opera, Safari, and many others. |
| 91 | +> |
| 92 | +> Leading up to the expected next version of JS (slipped from 2013 to 2014 and then 2015), the obvious and common label in discourse has been ES6. |
| 93 | +> |
| 94 | +> Extract from [YDKJS - ES6 & Beyond](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/es%3Anext%20%26%20beyond/ch1.md#versioning) by Kyle Simpson |
| 95 | +
|
| 96 | +What is important to understand is that **until ES6** all versions were **ordinal versioned** and the release pace was **freaking slow** mostly because the browsers weren't decoupled from the OS and therefore any change should be integrated at OS releasing scale. |
| 97 | + |
| 98 | +Since ES6 - AKA ES2015, a year-based schema was introduced to reflect and support the fast development pace of JavaScript particularly impulsed by the decoupling of the Web Browsers from OS first but also due to the expansive adoption of the language and the growth of its use beyond "just swapping a button img on rollover" (A very interesting article about that was written by **Matthew MacDonald**, [read it here](https://medium.com/young-coder/how-javascript-grew-up-and-became-a-real-language-17a0b948b77f)). |
| 99 | + |
| 100 | +From ES2015 the standardization process started behaving as a **living standard** hence not tied to structured cuts but by an release based on continuous consensus and progressive adoption. |
| 101 | +In order to keep the pace, several improvements were required under the hood to keep it stable and scalable. Browsers will then adopt the new features based at their own pace, which left on the engineering side the responsibility for maintaining the backward compatibility, what led to an extensive growth of techniques such as [polyfilling](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/es%3Anext%20%26%20beyond/ch1.md#shimspolyfills) and [transpiling](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/es%3Anext%20%26%20beyond/ch1.md#transpiling) |
| 102 | + |
| 103 | +Tons of publications can be found online comparing both standards; you can read them online. I'd suggest to start with clean unbiased documents such as the [ecma-262 5.1](https://www.ecma-international.org/ecma-262/5.1) and [ecma-262 6.0](https://www.ecma-international.org/ecma-262/6.0/) ... but some find that too tedious :D ... you can check also this [ECMAScript 6 — New Features: Overview & Comparison](http://es6-features.org/) by Ralf S. Engelschall which I find very interesting, or jump into the excellent [You Don't Know JS book series](https://github.com/getify/You-Dont-Know-JS/) by Kyle Simpson, especially on the dedicated book [ES6 & Beyond](https://github.com/getify/You-Dont-Know-JS/tree/2nd-ed/es:next%20%26%20beyond) by Kyle Simpson |
| 104 | + |
| 105 | +My summary is: |
| 106 | + |
| 107 | +- Several improvements made under the hood to support scalability |
| 108 | +- Several "syntactic sugar" added to improve the coding experience, some of the to avoid repetitive patterns and reducing human error vectors, some other to emulate coding styles from other languages, some of them really misleading ( like the use of "class" emulation when there's no "class" at all in JS World) |
| 109 | +- Several ( and continuously increasing ) new features to support the wide spread of the language usage. |
| 110 | +- Several new restrictions adopted as default when previously they were optional ( e.g. strict mode ) |
| 111 | + |
| 112 | +### Why are we using ES6 in this course? |
| 113 | + |
| 114 | +Essentially because even though you will still work with legacy pre-ES6 code, hopefully you will grow as engineers on a post-ES6 world. Secondly because it's easier to understand and work with JavaScript as a general purpose language using ES6 rather than ES5 and most of the examples you'll find online will be presented that way. |
| 115 | + |
| 116 | +### After ES6? |
| 117 | + |
| 118 | +Well, by the time being we're on the [ES2019 version](https://www.ecma-international.org/ecma-262/10.0/) ... though funny they still use a their URI with the ordinal version ( see the link ) instead of the year-based ... ¯\\_(ツ)_/¯ ... and the features included are following a 4-stages revision flow described on the [Technical Committee 39 (aka TC39) web site](https://tc39.es/process-document/) |
| 119 | + |
| 120 | +## Initial workspace setup |
| 121 | + |
| 122 | +1. [Install Node.js](https://nodejs.org/en/) |
| 123 | +2. [Install VS Code](https://code.visualstudio.com/) |
| 124 | +3. Add the following extensions to VS Code |
| 125 | + 1. CodeRunner |
| 126 | + 2. EsLint |
| 127 | + 3. Debugger for Chrome |
| 128 | +4. [Introduction to NPM](https://docs.npmjs.com/about-npm/) |
0 commit comments