What the web platform (and your app!) can learn from Node.js

The web platform has a ton of warts. They're the result of historical baggage, much of which could have been avoided.

As a frontend developer at Atlassian Bitbucket I've worked on apps big and small and have seen the benefits of composition and reuse of many small modules in the web browser. We compose together and compile over 1,000 JavaScript modules in Bitbucket's frontend and ship them to user's browsers many times a week.

Learn how small modules solve these problems and more, how the future of the web is bright, and how to bring modularization and composition to your web app.

Transcript

1. What the web platform can learn from Node.js and what your web frontend can learn too! Will Binns-Smith • Frontend Developer, Bitbucket • Atlassian • @wbinnssmith
2. 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' }));
3. POST { my: ‘data’ } to http://example.com/endpoint
4. $.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!!"); } });
5. $.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!!"); }); PQVňTGCNʼn2TQOKUGU# $.postJSON KUPQVCTGCNVJKPI
7. POST { my: ‘data’ } to http://example.com/endpoint
8. 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); });
10. too bad we can’t change XHR without breaking the internet
11. this happens a lot DOM Mutation Events -> DOM Mutation Observers Object.observe() -> Proxies, setters AppCache -> ServiceWorkers showModalDialog() -> <dialog>, Web Components QTQPGYC[FCVCHNQY 4GCEVHNWZUV[NG a lot of this is preventable.
12. we need a way to make mistakes and improve upon them
13. solution: focused modules. from userland. PQVHTQOVJGEQTGRNCVHQTO (and lots of them)
14. array-union array-uniq camelcase object-assign is-blob … and 761 others on npm sindresorhus
15. negative-zero 'use strict'; module.exports = function (x) { return x === 0 && 1 / x === -Infinity; }; DCUKECNN[QPGNKPGNQPI sindresorhus
16. 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
17. ň&Q[QWOCMG[QWTQYPUJQGU!0Q[QWDW[ VJGOKPCUVQTG/QUVFQP VECTGJQYVJG UJQGKUOCFG,WUVJQYIQQFKVHKVUʼn Ń5KPFTG5QTJWUň#/#ʼnJVVRUIQQINXP.2 sindresorhus
18. we need tooling for lots and lots of modules. just like we have in Node
19. so let’s bring npm to the browser +
20. GPVT[RQKPV VQ[QWTCRR UETKRVUTEňDWPFNGLUʼn UETKRV OQFWNGUHTQO OQFWNGUHTQO[QWTCRR one script tag. (nearly) all of npm.
21. npm install the-future Object.assign -> require(‘object-assign’) Promise -> require(‘native-promise-only’) Map -> require(‘es6-map’) -> require(‘babel-core’) require(‘core-js’) PQVCEVWCNN[VJCVUOCNNDWV[QWECPRKEMCPFEJQQUG
22. npm install emojilib { "100": "", "1234": "", "grinning": "", "grin": "", "joy": "", "smiley": "", "smile": "", "sweat_smile": "", "laughing": "",
23. npm install baboon-image-url module.exports = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAIAA CEVWCNN[CTGCNN[WUGHWNHKZVWTG HQTVGUVKPIECPXCUCPFKOCIG OCPKRWNCVKQPOQFWNGU
24. don’t like a module’s API? just npm install a different one single responsibilities make switching easy
25. write a module with a terrible API? just fix it and bump the major version nobody’s apps break
26. it’s fearless iteration for your app and your modules
27. more than 1,000 modules in Bitbucket Cloud’s frontend JavaScript alone.
28. the extensible web manifesto low-level APIs from the browsers, high-level abstractions from developers
29. so why can’t I have request’s API in the browser?
30. of course you can! take your pick. xhr superagent* axios* hyperquest* nets* CRKEQORCVKDNGYKVJTGSWGUV EJCKPCDNGCRK TGVWTPURTQOKUGU TGVWTPUUVTGCOUKPVJGDTQYUGT VJCPMUDTQYUGTKH[ WPKHKGUKPVGTHCEGHQTDTQYUGT CPFPQFG YQTMUKPDQVJPQFGCPFVJGDTQYUGTCUVJGUCOGOQFWNG
31. BUT! the web has fetch now!
32. 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); }); \QOITGCN2TQOKUGU
33. fetch appears high-level and convenient but also comes with Request, Response, and WHATWG streams. let’s use these to build more things!
34. extend the web forward one tiny, tiny piece at a time.
35. npm install thanks --save Will Binns-Smith • Frontend Developer, Bitbucket • Atlassian • @wbinnssmith