Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
What the web platform can learn from Node.js
and what your web frontend can learn too!
Will Binns-Smith • Frontend Develop...
var request = new XMLHttpRequest();
request.addEventListener("load", function () {
console.log(JSON.parse(this.responseTex...
POST { my: ‘data’ }
to http://example.com/endpoint
$.ajax({
method: "POST",
url: "http://example.com/endpoint",
data: JSON.stringify({
my: "data"
}),
contentType: "applicati...
$.ajax({
method: "POST",
url: "http://example.com/endpoint",
data: JSON.stringify({
my: "data"
}),
contentType: "applicati...
POST { my: ‘data’ }
to http://example.com/endpoint
var request = require(‘request’);
request.post('http://localhost:3000/endpoint', {
json: true,
body: { foo: 'bar' }
}, (er...
too bad we can’t change XHR
without breaking the internet
this happens a lot
DOM Mutation Events -> DOM Mutation Observers
Object.observe() -> Proxies, setters
AppCache -> ServiceW...
we need a way to make mistakes and
improve upon them
solution:
focused modules. from userland.
(and lots of them)
array-union
array-uniq
camelcase
object-assign
is-blob
… and 761 others on npm
sindresorhus
negative-zero
'use strict';
module.exports = function (x) {
return x === 0 && 1 / x === -Infinity;
};
sindresorhus
it says what it does, not how to do it
(which in JavaScript often makes no sense anyway)
why?
var isNegativeZero = require...
sindresorhus
we need tooling for lots and
lots of modules. just like we
have in Node
so let’s bring npm to the browser
+
one script tag. (nearly) all of npm.
npm install the-future
Object.assign -> require(‘object-assign’)
Promise -> require(‘native-promise-only’)
Map -> require(...
npm install emojilib
{
"100": "💯",
"1234": "🔢",
"grinning": "😀",
"grin": "😁",
"joy": "😂",
"smiley": "😃",
"smile": "😄",
"sw...
npm install baboon-image-url
module.exports = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAIAA
don’t like a module’s API? just
npm install a different one
single responsibilities make
switching easy
write a module with a terrible
API? just fix it and bump the
major version
nobody’s apps break
it’s fearless iteration for your
app and your modules
more than
1,000modules in Bitbucket Cloud’s
frontend JavaScript alone.
the extensible web manifesto
low-level APIs from the browsers,
high-level abstractions from
developers
so why can’t I have request’s
API in the browser?
of course you can!
take your pick.
xhr
superagent*
axios*
hyperquest*
nets*
BUT!
the web has fetch now!
fetch(‘http://example.com/endpoint', {
method: ‘post’,
headers: {
'Accept': 'application/json',
'Content-Type': 'applicati...
fetch appears high-level and convenient
but also comes with Request, Response,
and WHATWG streams. let’s use these to
buil...
extend the web forward
one tiny, tiny piece at a time.
npm install thanks --save
Will Binns-Smith • Frontend Developer, Bitbucket • Atlassian • @wbinnssmith
What the web platform (and your app!) can learn from Node.js
What the web platform (and your app!) can learn from Node.js
Upcoming SlideShare
Loading in …5
×

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

425 views

Published on

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 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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

  1. 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. 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. 3. POST { my: ‘data’ } to http://example.com/endpoint
  4. 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. 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!!"); }); $.postJSON
  6. 6. POST { my: ‘data’ } to http://example.com/endpoint
  7. 7. 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); });
  8. 8. too bad we can’t change XHR without breaking the internet
  9. 9. this happens a lot DOM Mutation Events -> DOM Mutation Observers Object.observe() -> Proxies, setters AppCache -> ServiceWorkers showModalDialog() -> <dialog>, Web Components a lot of this is preventable.
  10. 10. we need a way to make mistakes and improve upon them
  11. 11. solution: focused modules. from userland. (and lots of them)
  12. 12. array-union array-uniq camelcase object-assign is-blob … and 761 others on npm sindresorhus
  13. 13. negative-zero 'use strict'; module.exports = function (x) { return x === 0 && 1 / x === -Infinity; }; sindresorhus
  14. 14. 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
  15. 15. sindresorhus
  16. 16. we need tooling for lots and lots of modules. just like we have in Node
  17. 17. so let’s bring npm to the browser +
  18. 18. one script tag. (nearly) all of npm.
  19. 19. npm install the-future Object.assign -> require(‘object-assign’) Promise -> require(‘native-promise-only’) Map -> require(‘es6-map’) -> require(‘babel-core’) require(‘core-js’)
  20. 20. npm install emojilib { "100": "💯", "1234": "🔢", "grinning": "😀", "grin": "😁", "joy": "😂", "smiley": "😃", "smile": "😄", "sweat_smile": "😅", "laughing": "😆",
  21. 21. npm install baboon-image-url module.exports = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAIAA
  22. 22. don’t like a module’s API? just npm install a different one single responsibilities make switching easy
  23. 23. write a module with a terrible API? just fix it and bump the major version nobody’s apps break
  24. 24. it’s fearless iteration for your app and your modules
  25. 25. more than 1,000modules in Bitbucket Cloud’s frontend JavaScript alone.
  26. 26. the extensible web manifesto low-level APIs from the browsers, high-level abstractions from developers
  27. 27. so why can’t I have request’s API in the browser?
  28. 28. of course you can! take your pick. xhr superagent* axios* hyperquest* nets*
  29. 29. BUT! the web has fetch now!
  30. 30. 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); });
  31. 31. fetch appears high-level and convenient but also comes with Request, Response, and WHATWG streams. let’s use these to build more things!
  32. 32. extend the web forward one tiny, tiny piece at a time.
  33. 33. npm install thanks --save Will Binns-Smith • Frontend Developer, Bitbucket • Atlassian • @wbinnssmith

×