Abusing ECMAScript for fun and enlightenment
NB: you need a browser with
JavaScript enabled
to watch this presentation!
tripu
name: cover # Abusing ECMAScript<br />for fun and enlightenment <!-- .center[.important[👉] [`https://tripu.info/this`](https://tripu.info/this/) .important[👈]] --> .footnote[[_Stay At Home Conf_](https://stayathomeconf.com/) <br /> Copyright © 2020 [tripu](https://tripu.info/) <br /> <br /> .nb[(Press `→` or swipe left)]] --- name: agenda .footer[*Abusing ECMAScript for fun and enlightenment*] ## Agenda * [`$ whoami`](#me) * [What is ~~ECMA~~ Ecma?](#ecma) * [What is ~~EcmaScript~~ ECMAScript?](#ecmascript) * [MetaECMAScript](#meta) * [Onanistic projects](#onanistic) * [ES for ES](#esfores) * [Tiny ES](#tiny) * [Unsuspected ES](#unsuspected) * [Questions, comments, debate](#qa) --- name: me .footer[*Abusing ECMAScript for fun and enlightenment*] ## $ whoami .twoCols[ .column[ .center[ .portrait[] <br /> **tripu** <br /> *software engineer* <br /> [`https://tripu.info`](https://tripu.info/) ] ] .column[ .center[ 4+ years at the [.logo-w3c[]](https://www.w3.org/) <br /> <br /> <br /> <br /> currently at <br /> <br /> .center[.logo-devo[]] [`https://devo.com`](https://www.devo.com/careers/openings/) <br /> (we are hiring!) ] ] ] --- name: ecma .footer[*Abusing ECMAScript for fun and enlightenment*] ## What is ~~ECMA~~ Ecma? .center[**Overview**] -- * 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[*Abusing ECMAScript for fun and enlightenment*] ## What is ~~ECMA~~ Ecma? .center[**Members**] -- * _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[*Abusing ECMAScript for fun and enlightenment*] ## What is ~~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[*Abusing ECMAScript for fun and enlightenment*] ## What is ~~EcmaScript~~ ECMAScript? .center[**The standards**] -- * **[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[*Abusing ECMAScript for fun and enlightenment*] ## What is ~~EcmaScript~~ ECMAScript? .center[**_Old_ versions** (chaos)] -- .twoCols[ .column[ * 1 (1997) * 2 (1998) * 3 (1999) * * * * ~~4 (2003; abandoned)~~ * * * * * * 5 (2009) * * 5.1 (2011) * * * ] .column[ ] ] --- .footer[*Abusing ECMAScript for fun and enlightenment*] ## What is ~~EcmaScript~~ ECMAScript? .center[**_New_ versions** (yearly in June)] -- * [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_) -- * **[ES 2019](https://www.ecma-international.org/ecma-262/10.0/) (_ES10_, current)** -- * [ES 2020](https://tc39.es/ecma262/) (_next_, latest draft) -- ↓ 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[*Abusing ECMAScript for fun and enlightenment*] ## What is ~~EcmaScript~~ ECMAScript? .center[**Growing complexity**] .center[] --- .footer[*Abusing ECMAScript for fun and enlightenment*] ## What is ~~EcmaScript~~ ECMAScript? .center[**“Flattening the curve” 😷**] .center[] --- name: meta .footer[*Abusing ECMAScript for fun and enlightenment*] ## 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[*Abusing ECMAScript for fun and enlightenment*] ## MetaECMAScript .center[**A disturbing realisation…**] -- * 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("./simulated-universe.jpeg") background-size: cover --- .footer[*Abusing ECMAScript for fun and enlightenment*] ## MetaECMAScript .center[**We live inside a JS `eval()`: evidence**] -- .center[ .small-img[] “Adam and eval” → “Adam and Eve” ] --- .footer[*Abusing ECMAScript for fun and enlightenment*] ## MetaECMAScript .center[**We live inside a JS `eval()`: evidence**] .center[ .medium-img[.center[]] Stuff is crappy most of the time ] --- .footer[*Abusing ECMAScript for fun and enlightenment*] ## MetaECMAScript .center[**We live inside a JS `eval()`: evidence**] .center[ .medium2-img[.center[]] Definitely you are _not_ **strongly typed** ] --- .footer[*Abusing ECMAScript for fun and enlightenment*] ## MetaECMAScript .center[**We live inside a JS `eval()`: evidence**] .center[ .portrait[.center[]] You miss _lots_ of **call backs** ] --- .footer[*Abusing ECMAScript for fun and enlightenment*] ## MetaECMAScript .center[**We live inside a JS `eval()`: evidence**] .center[# <br /> _Q.E.D._] --- name: onanistic .footer[*Abusing ECMAScript for fun and enlightenment*] ## Onanistic projects .center[**JS interpreters/engines written in 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[*Abusing ECMAScript for fun and enlightenment*] ## Onanistic projects .center[**Variations on 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[*Abusing ECMAScript for fun and enlightenment*] ## ES for ES .center[**IDEs for JS written in JS**] -- * Electron-based: - VS Code - Atom -- * Brackets (CEF — _Chromium Embedded Framework_) --- .footer[*Abusing ECMAScript for fun and enlightenment*] ## ES for ES .center[**IDEs for JS running inside JS on a browser**] .center[Codeanywhere] --- class: img, empty background-image: url("./codeanywhere.jpeg") background-size: cover --- .footer[*Abusing ECMAScript for fun and enlightenment*] ## ES for ES .center[**IDEs for JS running inside JS on a browser**] .center[Cloud9 IDE (Amazon)] --- class: img, empty background-image: url("./cloud9.png") background-size: cover --- .footer[*Abusing ECMAScript for fun and enlightenment*] ## ES for 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) via YouTube, thanks to JS. Yes. That's it.**] .center[# [`worldwideweb.cern.ch/browser`](https://worldwideweb.cern.ch/browser/)] --- name: tiny .footer[*Abusing ECMAScript for fun and enlightenment*] ## Tiny ES .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("./duktape-debugger.png") background-size: cover --- .footer[*Abusing ECMAScript for fun and enlightenment*] ## Tiny ES .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("./espruino.png") background-size: cover --- .footer[*Abusing ECMAScript for fun and enlightenment*] ## Tiny ES .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[*Abusing ECMAScript for fun and enlightenment*] ## Unsuspected ES .center[Another 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[*Abusing ECMAScript for fun and enlightenment*] ## Credits * [“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[*Abusing ECMAScript for fun and enlightenment*] ## Questions, comments, debate <br /><br /><br /> .center[ We are hiring! <br /><br /> .logo-devo-small[] <br /><br /> [`https://www.devo.com/careers/openings`](https://www.devo.com/careers/openings/) ]