js sucks 20+ years of work in progress · 2019-08-13 · introduction js sucks. introduction js...
TRANSCRIPT
![Page 1: JS Sucks 20+ Years of Work in Progress · 2019-08-13 · Introduction JS Sucks. Introduction JS Sucks. ... Dates. Date give me an existential crisis new Date(0); new](https://reader036.vdocument.in/reader036/viewer/2022062602/5ee118c2ad6a402d666c1a00/html5/thumbnails/1.jpg)
JavaScript Sucks20+ years of work in progress
![Page 2: JS Sucks 20+ Years of Work in Progress · 2019-08-13 · Introduction JS Sucks. Introduction JS Sucks. ... Dates. Date give me an existential crisis new Date(0); new](https://reader036.vdocument.in/reader036/viewer/2022062602/5ee118c2ad6a402d666c1a00/html5/thumbnails/2.jpg)
Who am I watching?
Andrei Băltuță
Tobiás Előd – Zoltán
Senior developers @ Pentalog
![Page 3: JS Sucks 20+ Years of Work in Progress · 2019-08-13 · Introduction JS Sucks. Introduction JS Sucks. ... Dates. Date give me an existential crisis new Date(0); new](https://reader036.vdocument.in/reader036/viewer/2022062602/5ee118c2ad6a402d666c1a00/html5/thumbnails/3.jpg)
Introduction
JS Sucks
![Page 4: JS Sucks 20+ Years of Work in Progress · 2019-08-13 · Introduction JS Sucks. Introduction JS Sucks. ... Dates. Date give me an existential crisis new Date(0); new](https://reader036.vdocument.in/reader036/viewer/2022062602/5ee118c2ad6a402d666c1a00/html5/thumbnails/4.jpg)
Introduction
![Page 5: JS Sucks 20+ Years of Work in Progress · 2019-08-13 · Introduction JS Sucks. Introduction JS Sucks. ... Dates. Date give me an existential crisis new Date(0); new](https://reader036.vdocument.in/reader036/viewer/2022062602/5ee118c2ad6a402d666c1a00/html5/thumbnails/5.jpg)
<Rant>
JS Sucks
![Page 6: JS Sucks 20+ Years of Work in Progress · 2019-08-13 · Introduction JS Sucks. Introduction JS Sucks. ... Dates. Date give me an existential crisis new Date(0); new](https://reader036.vdocument.in/reader036/viewer/2022062602/5ee118c2ad6a402d666c1a00/html5/thumbnails/6.jpg)
Date give me an existential crisis
Dates
![Page 7: JS Sucks 20+ Years of Work in Progress · 2019-08-13 · Introduction JS Sucks. Introduction JS Sucks. ... Dates. Date give me an existential crisis new Date(0); new](https://reader036.vdocument.in/reader036/viewer/2022062602/5ee118c2ad6a402d666c1a00/html5/thumbnails/7.jpg)
Date give me an existential crisis
new Date(0);
new Date(0, 0);
new Date(0, 0, 0);
![Page 8: JS Sucks 20+ Years of Work in Progress · 2019-08-13 · Introduction JS Sucks. Introduction JS Sucks. ... Dates. Date give me an existential crisis new Date(0); new](https://reader036.vdocument.in/reader036/viewer/2022062602/5ee118c2ad6a402d666c1a00/html5/thumbnails/8.jpg)
Date give me an existential crisis
new Date(0);
// Thu Jan 01 1970 02:00:00 GMT+0200 (Eastern European Standard Time)
new Date(0, 0);
// Mon Jan 01 1900 00:00:00 GMT+0144 (Eastern European Standard Time)
new Date(0, 0, 0);
// Sun Dec 31 1899 00:00:00 GMT+0144 (Eastern European Standard Time)
![Page 9: JS Sucks 20+ Years of Work in Progress · 2019-08-13 · Introduction JS Sucks. Introduction JS Sucks. ... Dates. Date give me an existential crisis new Date(0); new](https://reader036.vdocument.in/reader036/viewer/2022062602/5ee118c2ad6a402d666c1a00/html5/thumbnails/9.jpg)
Date give me an existential crisis
new Date("0");
new Date("1");
new Date("2");
![Page 10: JS Sucks 20+ Years of Work in Progress · 2019-08-13 · Introduction JS Sucks. Introduction JS Sucks. ... Dates. Date give me an existential crisis new Date(0); new](https://reader036.vdocument.in/reader036/viewer/2022062602/5ee118c2ad6a402d666c1a00/html5/thumbnails/10.jpg)
Date give me an existential crisis
new Date("0");
// Sat Jan 01 2000 00:00:00 GMT+0200 (Eastern European Standard Time)
new Date("1");
// Mon Jan 01 2001 00:00:00 GMT+0200 (Eastern European Standard Time)
new Date("2");
// Thu Feb 01 2001 00:00:00 GMT+0200 (Eastern European Standard Time)
![Page 11: JS Sucks 20+ Years of Work in Progress · 2019-08-13 · Introduction JS Sucks. Introduction JS Sucks. ... Dates. Date give me an existential crisis new Date(0); new](https://reader036.vdocument.in/reader036/viewer/2022062602/5ee118c2ad6a402d666c1a00/html5/thumbnails/11.jpg)
Duck Hunt - typecast edition
Type coercion
![Page 12: JS Sucks 20+ Years of Work in Progress · 2019-08-13 · Introduction JS Sucks. Introduction JS Sucks. ... Dates. Date give me an existential crisis new Date(0); new](https://reader036.vdocument.in/reader036/viewer/2022062602/5ee118c2ad6a402d666c1a00/html5/thumbnails/12.jpg)
Duck Hunt - typecast edition
{} + []
[] + {}
{} + {}
[] == ![]
![Page 13: JS Sucks 20+ Years of Work in Progress · 2019-08-13 · Introduction JS Sucks. Introduction JS Sucks. ... Dates. Date give me an existential crisis new Date(0); new](https://reader036.vdocument.in/reader036/viewer/2022062602/5ee118c2ad6a402d666c1a00/html5/thumbnails/13.jpg)
Duck Hunt - typecast edition
{} + []
// 0
[] + {}
// "[object Object]"
{} + {}
// "[object Object][object Object]"
[] == ![]
// true
![Page 14: JS Sucks 20+ Years of Work in Progress · 2019-08-13 · Introduction JS Sucks. Introduction JS Sucks. ... Dates. Date give me an existential crisis new Date(0); new](https://reader036.vdocument.in/reader036/viewer/2022062602/5ee118c2ad6a402d666c1a00/html5/thumbnails/14.jpg)
ASI sucks
Automatic
SemicolonInsertion
![Page 15: JS Sucks 20+ Years of Work in Progress · 2019-08-13 · Introduction JS Sucks. Introduction JS Sucks. ... Dates. Date give me an existential crisis new Date(0); new](https://reader036.vdocument.in/reader036/viewer/2022062602/5ee118c2ad6a402d666c1a00/html5/thumbnails/15.jpg)
ASI sucks
Automatic Semicolon insertion
● Empty statement● let, const, variable statement● import, export, module declaration● Expression statement● debugger● continue, break, throw● return
![Page 16: JS Sucks 20+ Years of Work in Progress · 2019-08-13 · Introduction JS Sucks. Introduction JS Sucks. ... Dates. Date give me an existential crisis new Date(0); new](https://reader036.vdocument.in/reader036/viewer/2022062602/5ee118c2ad6a402d666c1a00/html5/thumbnails/16.jpg)
Browsers suck
Browsers
![Page 17: JS Sucks 20+ Years of Work in Progress · 2019-08-13 · Introduction JS Sucks. Introduction JS Sucks. ... Dates. Date give me an existential crisis new Date(0); new](https://reader036.vdocument.in/reader036/viewer/2022062602/5ee118c2ad6a402d666c1a00/html5/thumbnails/17.jpg)
Browsers suck
![Page 18: JS Sucks 20+ Years of Work in Progress · 2019-08-13 · Introduction JS Sucks. Introduction JS Sucks. ... Dates. Date give me an existential crisis new Date(0); new](https://reader036.vdocument.in/reader036/viewer/2022062602/5ee118c2ad6a402d666c1a00/html5/thumbnails/18.jpg)
Browsers suck
IE 11
Old Safari’s lack of INTL
New features need polyfilling
Performance differs between browsers
![Page 19: JS Sucks 20+ Years of Work in Progress · 2019-08-13 · Introduction JS Sucks. Introduction JS Sucks. ... Dates. Date give me an existential crisis new Date(0); new](https://reader036.vdocument.in/reader036/viewer/2022062602/5ee118c2ad6a402d666c1a00/html5/thumbnails/19.jpg)
Async gives me nightmares
Async
![Page 20: JS Sucks 20+ Years of Work in Progress · 2019-08-13 · Introduction JS Sucks. Introduction JS Sucks. ... Dates. Date give me an existential crisis new Date(0); new](https://reader036.vdocument.in/reader036/viewer/2022062602/5ee118c2ad6a402d666c1a00/html5/thumbnails/20.jpg)
Async gives me nightmares
![Page 21: JS Sucks 20+ Years of Work in Progress · 2019-08-13 · Introduction JS Sucks. Introduction JS Sucks. ... Dates. Date give me an existential crisis new Date(0); new](https://reader036.vdocument.in/reader036/viewer/2022062602/5ee118c2ad6a402d666c1a00/html5/thumbnails/21.jpg)
Async gives me nightmares
![Page 22: JS Sucks 20+ Years of Work in Progress · 2019-08-13 · Introduction JS Sucks. Introduction JS Sucks. ... Dates. Date give me an existential crisis new Date(0); new](https://reader036.vdocument.in/reader036/viewer/2022062602/5ee118c2ad6a402d666c1a00/html5/thumbnails/22.jpg)
Transpilers cause cavities
Transpilers
![Page 23: JS Sucks 20+ Years of Work in Progress · 2019-08-13 · Introduction JS Sucks. Introduction JS Sucks. ... Dates. Date give me an existential crisis new Date(0); new](https://reader036.vdocument.in/reader036/viewer/2022062602/5ee118c2ad6a402d666c1a00/html5/thumbnails/23.jpg)
Transpilers cause cavities
BabelTypescript
Dart
CoffeeScript
PureScript
Closure Compiler
TraceurElm
Reason
Haxe
![Page 24: JS Sucks 20+ Years of Work in Progress · 2019-08-13 · Introduction JS Sucks. Introduction JS Sucks. ... Dates. Date give me an existential crisis new Date(0); new](https://reader036.vdocument.in/reader036/viewer/2022062602/5ee118c2ad6a402d666c1a00/html5/thumbnails/24.jpg)
Transpilers cause cavities
async function x() {
await 1;
}
![Page 25: JS Sucks 20+ Years of Work in Progress · 2019-08-13 · Introduction JS Sucks. Introduction JS Sucks. ... Dates. Date give me an existential crisis new Date(0); new](https://reader036.vdocument.in/reader036/viewer/2022062602/5ee118c2ad6a402d666c1a00/html5/thumbnails/25.jpg)
Transpilers cause cavities
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function
(resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
function x() {return _x.apply(this, arguments);}
function _x() {_x = _asyncToGenerator(function* () {yield 1;
});return _x.apply(this, arguments);}
![Page 26: JS Sucks 20+ Years of Work in Progress · 2019-08-13 · Introduction JS Sucks. Introduction JS Sucks. ... Dates. Date give me an existential crisis new Date(0); new](https://reader036.vdocument.in/reader036/viewer/2022062602/5ee118c2ad6a402d666c1a00/html5/thumbnails/26.jpg)
Transpilers cause cavities
"use strict";
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else
{ Promise.resolve(value).then(_next, _throw); } }
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen,
resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
function x() {return _x.apply(this, arguments);
}
function _x() {
_x = _asyncToGenerator(/*#__PURE__*/
regeneratorRuntime.mark(function _callee() {
return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {case 0:
_context.next = 2;
return 1;
case 2:case "end":
return _context.stop();
}
}}, _callee);
}));
return _x.apply(this, arguments);
}
![Page 27: JS Sucks 20+ Years of Work in Progress · 2019-08-13 · Introduction JS Sucks. Introduction JS Sucks. ... Dates. Date give me an existential crisis new Date(0); new](https://reader036.vdocument.in/reader036/viewer/2022062602/5ee118c2ad6a402d666c1a00/html5/thumbnails/27.jpg)
Bundlers are black magic
Bundlers
![Page 28: JS Sucks 20+ Years of Work in Progress · 2019-08-13 · Introduction JS Sucks. Introduction JS Sucks. ... Dates. Date give me an existential crisis new Date(0); new](https://reader036.vdocument.in/reader036/viewer/2022062602/5ee118c2ad6a402d666c1a00/html5/thumbnails/28.jpg)
Bundlers are black magic
![Page 29: JS Sucks 20+ Years of Work in Progress · 2019-08-13 · Introduction JS Sucks. Introduction JS Sucks. ... Dates. Date give me an existential crisis new Date(0); new](https://reader036.vdocument.in/reader036/viewer/2022062602/5ee118c2ad6a402d666c1a00/html5/thumbnails/29.jpg)
Bundlers are black magic
Webpack Rollup
FuseboxParcel
![Page 30: JS Sucks 20+ Years of Work in Progress · 2019-08-13 · Introduction JS Sucks. Introduction JS Sucks. ... Dates. Date give me an existential crisis new Date(0); new](https://reader036.vdocument.in/reader036/viewer/2022062602/5ee118c2ad6a402d666c1a00/html5/thumbnails/30.jpg)
Eslint-disable all the things
Linters
![Page 31: JS Sucks 20+ Years of Work in Progress · 2019-08-13 · Introduction JS Sucks. Introduction JS Sucks. ... Dates. Date give me an existential crisis new Date(0); new](https://reader036.vdocument.in/reader036/viewer/2022062602/5ee118c2ad6a402d666c1a00/html5/thumbnails/31.jpg)
Eslint-disable all the things
return products ? products : [];
if (products == null) {
return [];
}
return products;
![Page 32: JS Sucks 20+ Years of Work in Progress · 2019-08-13 · Introduction JS Sucks. Introduction JS Sucks. ... Dates. Date give me an existential crisis new Date(0); new](https://reader036.vdocument.in/reader036/viewer/2022062602/5ee118c2ad6a402d666c1a00/html5/thumbnails/32.jpg)
Eslint-disable all the things
![Page 33: JS Sucks 20+ Years of Work in Progress · 2019-08-13 · Introduction JS Sucks. Introduction JS Sucks. ... Dates. Date give me an existential crisis new Date(0); new](https://reader036.vdocument.in/reader036/viewer/2022062602/5ee118c2ad6a402d666c1a00/html5/thumbnails/33.jpg)
NPM sucks
NPM
![Page 34: JS Sucks 20+ Years of Work in Progress · 2019-08-13 · Introduction JS Sucks. Introduction JS Sucks. ... Dates. Date give me an existential crisis new Date(0); new](https://reader036.vdocument.in/reader036/viewer/2022062602/5ee118c2ad6a402d666c1a00/html5/thumbnails/34.jpg)
NPM sucks
![Page 35: JS Sucks 20+ Years of Work in Progress · 2019-08-13 · Introduction JS Sucks. Introduction JS Sucks. ... Dates. Date give me an existential crisis new Date(0); new](https://reader036.vdocument.in/reader036/viewer/2022062602/5ee118c2ad6a402d666c1a00/html5/thumbnails/35.jpg)
NPM sucks
Npm is slower
Yarn is an alternative
pnpm
JSPM
Courtesy of: https://github.com/pnpm/benchmarks-of-javascript-package-managers
![Page 36: JS Sucks 20+ Years of Work in Progress · 2019-08-13 · Introduction JS Sucks. Introduction JS Sucks. ... Dates. Date give me an existential crisis new Date(0); new](https://reader036.vdocument.in/reader036/viewer/2022062602/5ee118c2ad6a402d666c1a00/html5/thumbnails/36.jpg)
NPM sucks
● left-pad● event-stream● isArray● thanos-js
![Page 37: JS Sucks 20+ Years of Work in Progress · 2019-08-13 · Introduction JS Sucks. Introduction JS Sucks. ... Dates. Date give me an existential crisis new Date(0); new](https://reader036.vdocument.in/reader036/viewer/2022062602/5ee118c2ad6a402d666c1a00/html5/thumbnails/37.jpg)
Frameworks suck
Frameworks
(and that one library)
![Page 38: JS Sucks 20+ Years of Work in Progress · 2019-08-13 · Introduction JS Sucks. Introduction JS Sucks. ... Dates. Date give me an existential crisis new Date(0); new](https://reader036.vdocument.in/reader036/viewer/2022062602/5ee118c2ad6a402d666c1a00/html5/thumbnails/38.jpg)
Frameworks suck
Angular Vue
Preact InfernoReact
Aurelia Hyperapp
Svelte
![Page 39: JS Sucks 20+ Years of Work in Progress · 2019-08-13 · Introduction JS Sucks. Introduction JS Sucks. ... Dates. Date give me an existential crisis new Date(0); new](https://reader036.vdocument.in/reader036/viewer/2022062602/5ee118c2ad6a402d666c1a00/html5/thumbnails/39.jpg)
Frameworks suck
![Page 40: JS Sucks 20+ Years of Work in Progress · 2019-08-13 · Introduction JS Sucks. Introduction JS Sucks. ... Dates. Date give me an existential crisis new Date(0); new](https://reader036.vdocument.in/reader036/viewer/2022062602/5ee118c2ad6a402d666c1a00/html5/thumbnails/40.jpg)
Frameworks suck - lines of code
Courtesy of: https://medium.freecodecamp.org/a-realworld-comparison-of-front-end-frameworks-with-benchmarks-2019-update-4be0d3c78075
![Page 41: JS Sucks 20+ Years of Work in Progress · 2019-08-13 · Introduction JS Sucks. Introduction JS Sucks. ... Dates. Date give me an existential crisis new Date(0); new](https://reader036.vdocument.in/reader036/viewer/2022062602/5ee118c2ad6a402d666c1a00/html5/thumbnails/41.jpg)
Frameworks suck - Performance
![Page 42: JS Sucks 20+ Years of Work in Progress · 2019-08-13 · Introduction JS Sucks. Introduction JS Sucks. ... Dates. Date give me an existential crisis new Date(0); new](https://reader036.vdocument.in/reader036/viewer/2022062602/5ee118c2ad6a402d666c1a00/html5/thumbnails/42.jpg)
Frameworks suck - Output size (kb)
![Page 43: JS Sucks 20+ Years of Work in Progress · 2019-08-13 · Introduction JS Sucks. Introduction JS Sucks. ... Dates. Date give me an existential crisis new Date(0); new](https://reader036.vdocument.in/reader036/viewer/2022062602/5ee118c2ad6a402d666c1a00/html5/thumbnails/43.jpg)
Frameworks suck
None of it means anything
![Page 44: JS Sucks 20+ Years of Work in Progress · 2019-08-13 · Introduction JS Sucks. Introduction JS Sucks. ... Dates. Date give me an existential crisis new Date(0); new](https://reader036.vdocument.in/reader036/viewer/2022062602/5ee118c2ad6a402d666c1a00/html5/thumbnails/44.jpg)
</Rant>
There is hope!
![Page 45: JS Sucks 20+ Years of Work in Progress · 2019-08-13 · Introduction JS Sucks. Introduction JS Sucks. ... Dates. Date give me an existential crisis new Date(0); new](https://reader036.vdocument.in/reader036/viewer/2022062602/5ee118c2ad6a402d666c1a00/html5/thumbnails/45.jpg)
Temporal Proposal
Is it perfect? No
Is it better? Yes!
https://github.com/tc39/proposal-temporal
![Page 46: JS Sucks 20+ Years of Work in Progress · 2019-08-13 · Introduction JS Sucks. Introduction JS Sucks. ... Dates. Date give me an existential crisis new Date(0); new](https://reader036.vdocument.in/reader036/viewer/2022062602/5ee118c2ad6a402d666c1a00/html5/thumbnails/46.jpg)
Soon - Proposals
Top-level await
Promise.allSettled
Decorators
Optional Chaining
Pipeline operatorAnd many more at https://github.com/tc39/proposals
![Page 47: JS Sucks 20+ Years of Work in Progress · 2019-08-13 · Introduction JS Sucks. Introduction JS Sucks. ... Dates. Date give me an existential crisis new Date(0); new](https://reader036.vdocument.in/reader036/viewer/2022062602/5ee118c2ad6a402d666c1a00/html5/thumbnails/47.jpg)
Tooling
Tooling:
Bundlers
Linters
Type checkers
![Page 48: JS Sucks 20+ Years of Work in Progress · 2019-08-13 · Introduction JS Sucks. Introduction JS Sucks. ... Dates. Date give me an existential crisis new Date(0); new](https://reader036.vdocument.in/reader036/viewer/2022062602/5ee118c2ad6a402d666c1a00/html5/thumbnails/48.jpg)
Up in the air
Open-Registry
Package Managers
Opinions
![Page 49: JS Sucks 20+ Years of Work in Progress · 2019-08-13 · Introduction JS Sucks. Introduction JS Sucks. ... Dates. Date give me an existential crisis new Date(0); new](https://reader036.vdocument.in/reader036/viewer/2022062602/5ee118c2ad6a402d666c1a00/html5/thumbnails/49.jpg)
Closing arguments
Promise
we are almost done