What the web platform (and your app!) can learn from Node.js
-
Upload
wbinnssmith -
Category
Technology
-
view
307 -
download
0
Transcript of What the web platform (and your app!) can learn from Node.js
![Page 1: What the web platform (and your app!) can learn from Node.js](https://reader033.fdocuments.net/reader033/viewer/2022052915/58762c841a28ab8b7b8b6d0b/html5/thumbnails/1.jpg)
What the web platform can learn from Node.jsand what your web frontend can learn too!
Will Binns-Smith • Frontend Developer, Bitbucket • Atlassian • @wbinnssmith
![Page 2: What the web platform (and your app!) can learn from Node.js](https://reader033.fdocuments.net/reader033/viewer/2022052915/58762c841a28ab8b7b8b6d0b/html5/thumbnails/2.jpg)
var request = new XMLHttpRequest();
request.addEventListener("load", function () { console.log(JSON.parse(this.responseText)); }); request.addEventListener("error", function (e) { console.error("oh noes!!"); });
request.open("POST", "http://www.example.org/endpoint"); request.setRequestHeader("Accept", "application/json"); request.setRequestHeader("Content-Type", "application/json"); request.send(JSON.stringify({ my: 'data' }));
![Page 4: What the web platform (and your app!) can learn from Node.js](https://reader033.fdocuments.net/reader033/viewer/2022052915/58762c841a28ab8b7b8b6d0b/html5/thumbnails/4.jpg)
$.ajax({ method: "POST", url: "http://example.com/endpoint", data: JSON.stringify({ my: "data" }), contentType: "application/json", dataType: "json", success: () => { console.log(JSON.parse(this.responseText)); }, failure: () => { console.error("oh noes!!"); } });
![Page 5: What the web platform (and your app!) can learn from Node.js](https://reader033.fdocuments.net/reader033/viewer/2022052915/58762c841a28ab8b7b8b6d0b/html5/thumbnails/5.jpg)
$.ajax({ method: "POST", url: "http://example.com/endpoint", data: JSON.stringify({ my: "data" }), contentType: "application/json", dataType: "json" }).done(() => { console.log(JSON.parse(this.responseText)); }).fail(() => { console.error("oh noes!!"); });
$.postJSON
![Page 6: What the web platform (and your app!) can learn from Node.js](https://reader033.fdocuments.net/reader033/viewer/2022052915/58762c841a28ab8b7b8b6d0b/html5/thumbnails/6.jpg)
![Page 8: What the web platform (and your app!) can learn from Node.js](https://reader033.fdocuments.net/reader033/viewer/2022052915/58762c841a28ab8b7b8b6d0b/html5/thumbnails/8.jpg)
var request = require(‘request’);
request.post('http://localhost:3000/endpoint', { json: true, body: { foo: 'bar' } }, (err, resp) => { if (err) throw Error(err); console.log(resp); });
![Page 9: What the web platform (and your app!) can learn from Node.js](https://reader033.fdocuments.net/reader033/viewer/2022052915/58762c841a28ab8b7b8b6d0b/html5/thumbnails/9.jpg)
![Page 10: What the web platform (and your app!) can learn from Node.js](https://reader033.fdocuments.net/reader033/viewer/2022052915/58762c841a28ab8b7b8b6d0b/html5/thumbnails/10.jpg)
too bad we can’t change XHR without breaking the internet
![Page 11: What the web platform (and your app!) can learn from Node.js](https://reader033.fdocuments.net/reader033/viewer/2022052915/58762c841a28ab8b7b8b6d0b/html5/thumbnails/11.jpg)
this happens a lotDOM Mutation Events -> DOM Mutation Observers
Object.observe() -> Proxies, setters
AppCache -> ServiceWorkers
showModalDialog() -> <dialog>, Web Components
a lot of this is preventable.
![Page 12: What the web platform (and your app!) can learn from Node.js](https://reader033.fdocuments.net/reader033/viewer/2022052915/58762c841a28ab8b7b8b6d0b/html5/thumbnails/12.jpg)
we need a way to make mistakes and improve upon them
![Page 13: What the web platform (and your app!) can learn from Node.js](https://reader033.fdocuments.net/reader033/viewer/2022052915/58762c841a28ab8b7b8b6d0b/html5/thumbnails/13.jpg)
solution: focused modules. from userland.
(and lots of them)
![Page 14: What the web platform (and your app!) can learn from Node.js](https://reader033.fdocuments.net/reader033/viewer/2022052915/58762c841a28ab8b7b8b6d0b/html5/thumbnails/14.jpg)
array-union array-uniq camelcase object-assign is-blob … and 761 others on npm
sindresorhus
![Page 15: What the web platform (and your app!) can learn from Node.js](https://reader033.fdocuments.net/reader033/viewer/2022052915/58762c841a28ab8b7b8b6d0b/html5/thumbnails/15.jpg)
negative-zero
'use strict'; module.exports = function (x) { return x === 0 && 1 / x === -Infinity; };
sindresorhus
![Page 16: What the web platform (and your app!) can learn from Node.js](https://reader033.fdocuments.net/reader033/viewer/2022052915/58762c841a28ab8b7b8b6d0b/html5/thumbnails/16.jpg)
it says what it does, not how to do it (which in JavaScript often makes no sense anyway)
why?
var isNegativeZero = require(‘negative-zero’);
isNegativeZero(5); // false isNegativeZero(-0); // true isNegativeZero(0); // false
![Page 17: What the web platform (and your app!) can learn from Node.js](https://reader033.fdocuments.net/reader033/viewer/2022052915/58762c841a28ab8b7b8b6d0b/html5/thumbnails/17.jpg)
sindresorhus
![Page 18: What the web platform (and your app!) can learn from Node.js](https://reader033.fdocuments.net/reader033/viewer/2022052915/58762c841a28ab8b7b8b6d0b/html5/thumbnails/18.jpg)
we need tooling for lots and lots of modules. just like we
have in Node
![Page 19: What the web platform (and your app!) can learn from Node.js](https://reader033.fdocuments.net/reader033/viewer/2022052915/58762c841a28ab8b7b8b6d0b/html5/thumbnails/19.jpg)
so let’s bring npm to the browser
+
![Page 20: What the web platform (and your app!) can learn from Node.js](https://reader033.fdocuments.net/reader033/viewer/2022052915/58762c841a28ab8b7b8b6d0b/html5/thumbnails/20.jpg)
one script tag. (nearly) all of npm.
![Page 21: What the web platform (and your app!) can learn from Node.js](https://reader033.fdocuments.net/reader033/viewer/2022052915/58762c841a28ab8b7b8b6d0b/html5/thumbnails/21.jpg)
npm install the-futureObject.assign -> require(‘object-assign’) Promise -> require(‘native-promise-only’) Map -> require(‘es6-map’)
-> require(‘babel-core’) require(‘core-js’)
![Page 22: What the web platform (and your app!) can learn from Node.js](https://reader033.fdocuments.net/reader033/viewer/2022052915/58762c841a28ab8b7b8b6d0b/html5/thumbnails/22.jpg)
npm install emojilib{ "100": "💯", "1234": "🔢", "grinning": "😀", "grin": "😁", "joy": "😂", "smiley": "😃", "smile": "😄", "sweat_smile": "😅", "laughing": "😆", "innocent": "😇",
![Page 23: What the web platform (and your app!) can learn from Node.js](https://reader033.fdocuments.net/reader033/viewer/2022052915/58762c841a28ab8b7b8b6d0b/html5/thumbnails/23.jpg)
npm install baboon-image-urlmodule.exports = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAIAAABMXPacAAAACXBIWXMAAAsTAAALEwEAmpwYAAAL
![Page 24: What the web platform (and your app!) can learn from Node.js](https://reader033.fdocuments.net/reader033/viewer/2022052915/58762c841a28ab8b7b8b6d0b/html5/thumbnails/24.jpg)
don’t like a module’s API? just npm install a different one
single responsibilities make switching easy
![Page 25: What the web platform (and your app!) can learn from Node.js](https://reader033.fdocuments.net/reader033/viewer/2022052915/58762c841a28ab8b7b8b6d0b/html5/thumbnails/25.jpg)
write a module with a terrible API? just fix it and bump the
major version
nobody’s apps break
![Page 26: What the web platform (and your app!) can learn from Node.js](https://reader033.fdocuments.net/reader033/viewer/2022052915/58762c841a28ab8b7b8b6d0b/html5/thumbnails/26.jpg)
it’s fearless iteration for your app and your modules
![Page 27: What the web platform (and your app!) can learn from Node.js](https://reader033.fdocuments.net/reader033/viewer/2022052915/58762c841a28ab8b7b8b6d0b/html5/thumbnails/27.jpg)
more than
1,000modules in Bitbucket Cloud’s frontend JavaScript alone.
![Page 28: What the web platform (and your app!) can learn from Node.js](https://reader033.fdocuments.net/reader033/viewer/2022052915/58762c841a28ab8b7b8b6d0b/html5/thumbnails/28.jpg)
the extensible web manifesto
low-level APIs from the browsers, high-level abstractions from
developers
![Page 29: What the web platform (and your app!) can learn from Node.js](https://reader033.fdocuments.net/reader033/viewer/2022052915/58762c841a28ab8b7b8b6d0b/html5/thumbnails/29.jpg)
so why can’t I have request’s API in the browser?
![Page 30: What the web platform (and your app!) can learn from Node.js](https://reader033.fdocuments.net/reader033/viewer/2022052915/58762c841a28ab8b7b8b6d0b/html5/thumbnails/30.jpg)
of course you can!
take your pick.
xhr
superagent*
axios*
hyperquest*
nets*
![Page 31: What the web platform (and your app!) can learn from Node.js](https://reader033.fdocuments.net/reader033/viewer/2022052915/58762c841a28ab8b7b8b6d0b/html5/thumbnails/31.jpg)
BUT! the web has fetch now!
![Page 32: What the web platform (and your app!) can learn from Node.js](https://reader033.fdocuments.net/reader033/viewer/2022052915/58762c841a28ab8b7b8b6d0b/html5/thumbnails/32.jpg)
fetch(‘http://example.com/endpoint', { method: ‘post’, headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify({ my: 'data', }) }).then(response => { return response.json(); }).then(reponse => { console.log(response); });
![Page 33: What the web platform (and your app!) can learn from Node.js](https://reader033.fdocuments.net/reader033/viewer/2022052915/58762c841a28ab8b7b8b6d0b/html5/thumbnails/33.jpg)
fetch appears high-level and convenient
but also comes with Request, Response, and WHATWG streams. let’s use these to
build more things!
![Page 34: What the web platform (and your app!) can learn from Node.js](https://reader033.fdocuments.net/reader033/viewer/2022052915/58762c841a28ab8b7b8b6d0b/html5/thumbnails/34.jpg)
extend the web forward
one tiny, tiny piece at a time.
![Page 35: What the web platform (and your app!) can learn from Node.js](https://reader033.fdocuments.net/reader033/viewer/2022052915/58762c841a28ab8b7b8b6d0b/html5/thumbnails/35.jpg)
npm install thanks --save
Will Binns-Smith • Frontend Developer, Bitbucket • Atlassian • @wbinnssmith