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.

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!!");
});
$.postJSON

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
a lot of this is preventable.

12. we need a way to make mistakes and
improve upon them

13. solution:
focused modules. from userland.
(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;
};
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. 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. 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’)

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

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,000modules 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*

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);
});

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