Abusando de ECMAScript en abierto
NB: you need a browser with
JavaScript enabled
to watch this presentation!
name: cover .center[.important[👉] [`https://tripu.info/this`](https://tripu.info/this/) .important[👈]] # <br /> Abusando de ECMAScript en abierto .footnote[[_esLibre_](https://eslib.re/2021/)<br />**tripu**<br />25 de junio de 2021<br /><br /> .nb[(Pulsar `→`, hacer _scroll_, o arrastrar hacia la izquierda)]] --- name: agenda .footer[_Abusando de ECMAScript en abierto_] ## De qué vamos a hablar * [`$ whoami`](#me) * [¿Qué es ~~ECMA~~ Ecma?](#ecma) * [¿Qué es ~~EcmaScript~~ ECMAScript?](#ecmascript) * **[⭐ MetaECMAScript](#meta)** * **[⭐ Proyectos onanísticos](#onanistic)** * **[⭐ ES en ES](#esfores)** * **[⭐ ES diminuto](#tiny)** * **[⭐ ES insospechado](#unsuspected)** * [Ideas, preguntas, debate](#qa) --- name: me .footer[_Abusando de ECMAScript en abierto_] ## `$ whoami` .twoCols[ .column[ .center[ .portrait[] <br /> <br /> **tripu** <br /> *ingeniero de software* <br /> [`https://tripu.info`](https://tripu.info/) ] ] .column[ .center[ <span>></span> 4 años en el [.logo-w3c[]](https://www.w3.org/) <br /> <br /> <br /> <br /> actualmente en <br /> <br /> .center[.logo-devo[]] [`https://devo.com`](https://www.devo.com/company/working-at-devo/) <br /> (¡estamos contratando!) ] ] ] --- name: ecma .footer[_Abusando de ECMAScript en abierto_] ## ¿Qué es ~~ECMA~~ Ecma? .center[**Datos principales**] * 1961: ECMA (_European Computer Manufacturers Association_) * 1994: “ECMA” → “Ecma International” * Membership-based * HQ: Geneva (Switzerland) * 278 [_standards_](https://www.ecma-international.org/publications/standards/Standard.htm) * 54 [_technical reports_](https://www.ecma-international.org/publications/techreports/techrep.htm) * [`https://ecma-international.org`](https://www.ecma-international.org/) --- .footer[_Abusando de ECMAScript en abierto_] ## ¿Qué es ~~ECMA~~ Ecma? .center[**Miembros**] * _Ordinary_ (with vote at General Assembly; ~€66K/year): **Facebook**, **Google**, Hitachi, IBM, Intel, Konica Minolta, **Microsoft**, PayPal, Stripe. * _Associate_ (no vote at General Assembly; ~€33K/year): Airbnb, **Alibaba**, **Apple**, Bloomberg, Canon, Dell, F5 Networks, GoDaddy, HP, **Huawei**, **Neftlix**, Ricoh, Salesforce, **Sony**, 360 Technology. * _SME_ (small and medium; ~€16K/year). eg: [🇪🇸 Igalia](https://www.igalia.com/). * _SPC_ (tiny companies; ~€3K/year). * _Not-for-profits_ (€0): [**OpenJS Foundation**](https://openjsf.org/) (∈ Linux Foundation), **Mozilla Foundation**, Small Fan Workshop Association (about thermal cooling)… * _Related organisations_: **W3C**, ISO, IETF, ITU… --- .footer[_Abusando de ECMAScript en abierto_] ## ¿Qué es ~~ECMA~~ Ecma? .center[**Specs**] * C# (_ECMA-334_) * C++/CLI (_ECMA-372_) * Dart (_ECMA-408_) * Eiffel (_ECMA-367_) * Office Open XML File Formats (_ECMA-376_) * **EcmaScript** * **EcmaScript Internationalization API** * **JSON** --- name: ecmascript .footer[_Abusando de ECMAScript en abierto_] ## ¿Qué es ~~EcmaScript~~ ECMAScript? .center[**Los estándares**] * **[ECMAScript® Language (_ECMA-262_)](https://www.ecma-international.org/publications/standards/Ecma-262.htm)** * **[ECMAScript® Internationalization API (_ECMA-402_)](https://www.ecma-international.org/publications/standards/Ecma-402.htm)** * **[JSON Data Interchange Syntax (_ECMA-404_)](https://www.ecma-international.org/publications/standards/Ecma-404.htm)** → short; basic stuff * [ECMAScript® Specification Suite (_ECMA-414_)](https://www.ecma-international.org/publications/standards/Ecma-414.htm) → a pointer to the previous three * [ECMAScript® Test Suite (_E-TR-104_)](https://www.ecma-international.org/publications/techreports/E-TR-104.htm) → a pointer to [`github.com/tc39/test262`](https://github.com/tc39/test262) * [ECMAScript® Components (_ECMA-290_)](https://www.ecma-international.org/publications/standards/Ecma-290.htm) → superseded by [ES6 modules](https://www.ecma-international.org/ecma-262/6.0/#sec-modules), [web components](https://en.wikipedia.org/wiki/Web_Components), etc * ~~[ECMAScript® 3<sup>rd</sup> Edition Compact Profile (_ECMA-327_)](https://www.ecma-international.org/publications/files/ECMA-ST-WITHDRAWN/Ecma-327.pdf)~~ → withdrawn; for “resource-constrained devices” * ~~[ECMAScript® for XML (E4X) (_ECMA-357_)](https://www.ecma-international.org/publications/files/ECMA-ST-WITHDRAWN/Ecma-357.pdf)~~ → withdrawn; a precursor of [JSX](https://reactjs.org/docs/introducing-jsx.html) --- .footer[_Abusando de ECMAScript en abierto_] ## ¿Qué es ~~EcmaScript~~ ECMAScript? .center[**Las versiones _viejas_** (¡el caos!)] .twoCols[ .column[ * **1** (1997) * **2** (1998) * **3** (1999) * .dim[∅] * .dim[∅] * .dim[∅] * ~~4 (2003; abandoned)~~ * .dim[∅] * .dim[∅] ] .column[ * .dim[∅] * .dim[∅] * .dim[∅] * **5** (2009) * .dim[∅] * **5.1** (2011) * .dim[∅] * .dim[∅] * .dim[∅] ] ] --- .footer[_Abusando de ECMAScript en abierto_] ## ¿Qué es ~~EcmaScript~~ ECMAScript? .center[**Las versiones _nuevas_** (anualmente, en junio)] .twoCols[ .column[ * [ES 2015](https://www.ecma-international.org/ecma-262/6.0/) (_ES6_, still in PDF) * [ES 2016](https://www.ecma-international.org/ecma-262/7.0/) (_ES7_, first in HTML) * [ES 2017](https://www.ecma-international.org/ecma-262/8.0/) (_ES8_) * [ES 2018](https://www.ecma-international.org/ecma-262/9.0/) (_ES9_) ] .column[ * [ES 2019](https://www.ecma-international.org/ecma-262/10.0/) (_ES10_) * [ES 2020](https://www.ecma-international.org/ecma-262/11.0/) * **[ES 2021](https://www.ecma-international.org/ecma-262/12.0/) (_current_)** * **[ES 2022](https://tc39.es/ecma262/) (_next_, latest draft)** ] ] <hr /> Tests: [`github.com/tc39/test262`](https://github.com/tc39/test262) Spec: [`github.com/tc39/ecma262`](https://github.com/tc39/ecma262) …written in [Ecmarkup](https://github.com/bterlson/ecmarkup), of course 🙄 --- .footer[_Abusando de ECMAScript en abierto_] ## ¿Qué es ~~EcmaScript~~ ECMAScript? .center[**Complejidad creciente**] .center[] --- .footer[_Abusando de ECMAScript en abierto_] ## ¿Qué es ~~EcmaScript~~ ECMAScript? .center[**«Aplanando la curva» 😷**] .center[] --- name: meta .footer[_Abusando de ECMAScript en abierto_] ## MetaECMAScript .center[**~~`eval()`~~ `Function()`**] * `eval()` lets you run ~~ES~~ JS code programmatically, inside a JS program * …but it's _**very bad**_ * So use `Function()` instead .twoCols[ .column[ ```js const snippet = 'Math.pow(2, 10)'; console.log(eval(snippet)); ``` ```js 1024 ``` _Bad boy!_ ] .column[ ```js console.log( Function( `"use strict"; return (${snippet});` )() ); ``` ```js 1024 ``` ] ] --- .footer[_Abusando de ECMAScript en abierto_] ## MetaECMAScript .center[**Un pensamiento inquietante…**] * Turing-complete scripting, (almost) perfect embedding of JS within JS * …at the cost of performance and beauty, of course * How to tell if we're running inside a `Function()`? In principle, we can't. * The theory of [simulated multiverses](https://en.wikipedia.org/wiki/Simulated_reality) is growing traction… * And stuff in life is slow and ugly most of the time!! .center[.small-img[]] --- class: img, empty background-image: url("assets/simulated-universe.jpeg") background-size: cover --- .footer[_Abusando de ECMAScript en abierto_] ## MetaECMAScript .center[**Vivimos dentro de un `eval()` de JS: evidencias a favor**] .center[ .small-img[] “Adam and eval” → “Adam and Eve” ] --- .footer[_Abusando de ECMAScript en abierto_] ## MetaECMAScript .center[**Vivimos dentro de un `eval()` de JS: evidencias a favor**] .center[ .medium-img[.center[]] Stuff is crappy most of the time ] --- .footer[_Abusando de ECMAScript en abierto_] ## MetaECMAScript .center[**Vivimos dentro de un `eval()` de JS: evidencias a favor**] .center[ .medium2-img[.center[]] Definitely you are _not_ **strongly typed** ] --- .footer[_Abusando de ECMAScript en abierto_] ## MetaECMAScript .center[**Vivimos dentro de un `eval()` de JS: evidencias a favor**] .center[ .portrait[.center[]] You miss _lots_ of **call backs** ] --- .footer[_Abusando de ECMAScript en abierto_] ## MetaECMAScript .center[**Vivimos dentro de un `eval()` de JS: evidencias a favor**] .center[# <br /> _Q.E.D._] --- name: onanistic .footer[_Abusando de ECMAScript en abierto_] ## Proyectos onanísticos .center[**Motores/intérpretes de JS escritos en JS**] * [Narcissus](https://github.com/mozilla/narcissus/) (Brendan Eich, Mozilla) * [Sval](https://github.com/Siubaak/sval) ▶️ [online demo](https://jsbin.com/kehahiqono/edit?js,console) * [JS-Interpreter](https://github.com/NeilFraser/JS-Interpreter) ▶️ [online demo](https://neil.fraser.name/software/JS-Interpreter/) * [engine262](https://github.com/engine262/engine262) ▶️ [online demo](https://engine262.js.org/) * [MetaES](http://metaes.org/) ▶️ [online demo](http://metaes.org/playground.html) --- .footer[_Abusando de ECMAScript en abierto_] ## Proyectos onanísticos .center[**Variaciones sobre JS**] * [CoffeeScript](https://coffeescript.org/) * [TypeScript](https://www.typescriptlang.org/) * [JSX](https://reactjs.org/docs/introducing-jsx.html) * [EJS](https://ejs.co/) (eg: `<h2><%= user.name %></h2>`) .center[ _“One transpiler to bring them all<br />and in the darkness bind them”_ [.small-img[]](https://babeljs.io/) ] --- name: esfores .footer[_Abusando de ECMAScript en abierto_] ## ES en ES .center[**IDEs para JS escritos en JS**] * Electron-based: - VS Code - Atom * Brackets (CEF — _Chromium Embedded Framework_) --- .footer[_Abusando de ECMAScript en abierto_] ## ES en ES .center[**IDEs para JS ejecutándose con JS en un navegador**] .center[Codeanywhere] --- class: img, empty background-image: url("assets/codeanywhere.jpeg") background-size: contain --- .footer[_Abusando de ECMAScript en abierto_] ## ES en ES .center[**IDEs para JS ejecutándose con JS en un navegador**] .center[Cloud9 IDE (Amazon)] --- class: img, empty background-image: url("assets/cloud9.png") background-size: contain --- .footer[_Abusando de ECMAScript en abierto_] ## ES en ES .center[**IDEs para JS ejecutándose con JS en un navegador**] .center[[github1s](https://github1s.com/) ([source](https://github.com/conwnet/github1s)), based on [VS Code](https://github.com/microsoft/vscode)] <br /> <br /> .center[**Node.js ejecutándose en un navegador**] .center[[StackBlitz' WebContainers](https://blog.stackblitz.com/posts/introducing-webcontainers/#today-we're-excited-to-announce-webcontainers)] --- .footer[_Abusando de ECMAScript en abierto_] ## ES en ES .center[**The oldest browser, complete with all its behaviour and features, being emulated in real time inside a modern browser (mine) — thanks to JS, the programming language of browsers… a demo served in real time directly to yet another browser (yours) thanks to JS. Yes. That's it.**] .center[# [`worldwideweb.cern.ch/browser`](https://worldwideweb.cern.ch/browser/)] --- name: tiny .footer[_Abusando de ECMAScript en abierto_] ## ES diminuto .center[**Duktape**] * Embeddable JS engine * ~160 KB flash memory, ~64 KB RAM * [`https://duktape.org`](https://duktape.org/) * ▶️ [online demo](https://duktape.org/dukweb.html) * Has a debugger --- class: img, empty background-image: url("assets/duktape-debugger.png") background-size: contain --- .footer[_Abusando de ECMAScript en abierto_] ## ES diminuto .center[**Espruino**] * For [low power microcontrollers](https://www.espruino.com/) * ~128 KB flash memory, ~8 KB RAM * [`https://github.com/espruino/Espruino`](https://github.com/espruino/Espruino) * Has [a web IDE](https://chrome.google.com/webstore/detail/espruino-web-ide/bleoifhkdalbjfbobjackfdifdneehpo) --- class: img, empty background-image: url("assets/espruino.png") background-size: contain --- .footer[_Abusando de ECMAScript en abierto_] ## ES diminuto .center[**mJS**] * Embedded JS engine for C/C++ * A very aggressive subset of ES * On 32-bit ARM, the engine takes ~50 KB flash memory, <1 KB RAM (!) * [`https://github.com/cesanta/mjs`](https://github.com/cesanta/mjs) * More restrictions than features 😝 --- name: unsuspected .footer[_Abusando de ECMAScript en abierto_] ## ES insospechado .center[Another (**privative**) implementation of ECMAScript that you _may_ have used a lot is…] * Flash! * ActionScript3 (AS3), used in Adobe Flash & Adobe AIR * A superset of ECMAScript (ie, an implementation) * eg: got hardware-accelerated 3D [in Jul 2011](https://web.archive.org/web/20110714222550/http://download.macromedia.com/pub/labs/flashplatformruntimes/shared/flashplayer11_air3_b1_releasenotes_071311.pdf) (years before [WebGL became popular and fully supported](https://caniuse.com/#feat=webgl) on browsers) * But 5 years ago, Flash was already dying ([exhibit #1](https://esdiscuss.org/notes/2015-03-24#what-to-do-with-compact-profile-ecma-327-and-e4x-ecma-357), [exhibit #2](https://esdiscuss.org/notes/2015-03-24#compact-profile)) --- name: credits .footer[_Abusando de ECMAScript en abierto_] ## Créditos * [“Adam and Eve”](https://commons.wikimedia.org/wiki/File:Cranach,_adamo_ed_eva,_uffizi.jpg) by Lucas Cranach the Elder (public domain) * [Clipart](https://www.freepik.com/premium-vector/educated-student-thinking-with-think-bubble-head-education-vector-concept_5250217.htm) by Freepik * [Universe visualisation](https://www.nbcnews.com/mach/science/cosmic-hotspots-may-be-evidence-universe-existed-ours-ncna909646) by Mark Garlick / Science Photo Library / Getty Images * [Horrified woman](https://www.videoblocks.com/video/horrified-mature-woman-on-green-screen-caucasian-middle-aged-woman-looking-frightened-and-shocked-on-chroma-key-background-human-negative-expressions-rfumrgrazjhdrh0v1) from Storyblocks * [JS logo](https://commons.wikimedia.org/wiki/File:JavaScript-logo.png) on Wikipedia (public domain) --- name: qa class: middle .footer[_Abusando de ECMAScript en abierto_] ## Ideas,<br /><br />preguntas,<br /><br />debate