jsday 2016 recap
TRANSCRIPT
![Page 1: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/1.jpg)
RECAP!
![Page 2: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/2.jpg)
Who
![Page 3: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/3.jpg)
Who
![Page 4: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/4.jpg)
GrUSP
![Page 5: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/5.jpg)
jsDay buzzwords!
![Page 6: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/6.jpg)
![Page 7: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/7.jpg)
What we need from the Web, and what it needs from us
![Page 8: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/8.jpg)
Progressive Web App (Wikipedia)
![Page 9: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/9.jpg)
![Page 10: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/10.jpg)
![Page 11: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/11.jpg)
![Page 12: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/12.jpg)
What we need from the Web, and what it needs from us
![Page 13: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/13.jpg)
What we need from the Web, and what it needs from us
![Page 14: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/14.jpg)
Service Workers (Mozilla Developer Network)
![Page 15: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/15.jpg)
Service Workers (Mozilla Developer Network)
![Page 16: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/16.jpg)
What we need from the Web, and what it needs from us
![Page 17: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/17.jpg)
What we need from the Web, and what it needs from us
![Page 19: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/19.jpg)
Microservices in practice with Seneca.js
![Page 20: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/20.jpg)
Microservices in practice with Seneca.js
![Page 21: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/21.jpg)
Microservices in practice with Seneca.js
![Page 22: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/22.jpg)
Microservices in practice with Seneca.js
seneca.add({ role: 'math', cmd: 'sum' },
function onMatch(msg, respond) {
var sum = msg.left + msg.right
respond(null, { answer: sum })
}
)
seneca.act({ role: 'math', cmd: 'sum', left: 1, right: 2 },
function onResponse(err, result) {
if (err) return console.error(err)
console.log(result) !
}!
)
![Page 23: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/23.jpg)
Microservices in practice with Seneca.js
![Page 24: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/24.jpg)
Microservices in practice with Seneca.js
![Page 26: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/26.jpg)
![Page 27: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/27.jpg)
Blazing fast CSS3 Transitions
![Page 28: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/28.jpg)
Blazing fast CSS3 Transitions
![Page 29: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/29.jpg)
![Page 30: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/30.jpg)
Blazing fast CSS3 Transitions
transform: translate3d(5px,5px,5px);
![Page 31: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/31.jpg)
Blazing fast CSS3 Transitions
will-change: transform,opacity;
![Page 32: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/32.jpg)
Blazing fast CSS3 Transitions
![Page 33: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/33.jpg)
![Page 35: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/35.jpg)
![Page 36: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/36.jpg)
Forgotten funky functions
![Page 37: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/37.jpg)
Forgotten funky functions
var stateful = function(f) {
var state = {};
return function() {
var slice = Array.prototype.slice;
var args = slice
.call(arguments, 0);
return f.apply(this, [state].concat(args));
};
};
![Page 38: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/38.jpg)
Forgotten funky functions
var once = stateful(function(state, f) {
return function() {
if (!state.called) {
state.result = f.apply(this, arguments);
state.called = true;
}
return state.result;
};
});
![Page 39: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/39.jpg)
Forgotten funky functions
![Page 40: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/40.jpg)
Forgotten funky functionsvar renameArgs = function(__uniq
, argNames) {
var parts = [
"(function(",
argNames.join(', ')
") { "
"return __uniq.apply(this, arguments);"
"});"
];
return eval(parts.join(''));
};
![Page 41: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/41.jpg)
Forgotten funky functions
![Page 42: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/42.jpg)
Forgotten funky functions
Object.create = function(x) {
function F() {}
F.prototype = x;
return new F();
};
![Page 44: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/44.jpg)
Reactive programming with Cycle.js
![Page 45: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/45.jpg)
Reactive programming with Cycle.js
![Page 46: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/46.jpg)
Reactive programming with Cycle.js
![Page 47: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/47.jpg)
Reactive programming with Cycle.js
![Page 48: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/48.jpg)
Reactive programming with Cycle.js
![Page 49: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/49.jpg)
![Page 50: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/50.jpg)
![Page 51: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/51.jpg)
Reactive programming with Cycle.jsfunction main(driverSources) {
const driverSinks = {
DOM: // transform driverSources.DOM
// through a series of RxJS operators
};
return driverSinks;
}
const drivers = {
DOM: makeDOMDriver('#app')
};
Cycle.run(main, drivers);
![Page 52: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/52.jpg)
ph. @mbeccati
![Page 54: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/54.jpg)
Shipping one of the largest Microsoft JavaScript applications
![Page 55: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/55.jpg)
![Page 57: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/57.jpg)
The evolution of Asynchronous Javascript
![Page 58: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/58.jpg)
The evolution of Asynchronous Javascript
![Page 59: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/59.jpg)
![Page 60: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/60.jpg)
The evolution of Asynchronous Javascript
![Page 61: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/61.jpg)
![Page 62: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/62.jpg)
The evolution of Asynchronous Javascript
![Page 63: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/63.jpg)
The evolution of Asynchronous Javascript
function *foo() {
let x = 1;
yield;
return x;
}
function *bar() {
let x = 14;
let y = (yield) * x;
return y;
}
![Page 64: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/64.jpg)
The evolution of Asynchronous Javascript
npm install co
![Page 65: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/65.jpg)
The evolution of Asynchronous Javascript
async/await
![Page 66: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/66.jpg)
The evolution of Asynchronous Javascript
async function getTotal() {
let userInfo = await loadUserInfo();
let cartItems = await loadCartItems();
let total = await calculateTotal(userInfo, cartItems);
return total;
}
![Page 68: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/68.jpg)
FFTT: A new concept of build tool.
![Page 69: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/69.jpg)
FFTT: A new concept of build tool.
![Page 70: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/70.jpg)
FFTT: A new concept of build tool.
![Page 71: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/71.jpg)
FFTT: A new concept of build tool.
![Page 72: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/72.jpg)
FFTT: A new concept of build tool.
![Page 73: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/73.jpg)
FFTT: A new concept of build tool.
![Page 74: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/74.jpg)
FFTT: A new concept of build tool.
![Page 76: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/76.jpg)
Higher order components in React
![Page 77: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/77.jpg)
Higher order components in Reactconst Wrapped = () => <h1>Wrapped Comp</h1>
const wrapper = (Comp) => () => {
return <div><Comp /></div>
}
const FinalComponent = wrapper(Wrapped)
const App = () => {
return (
<div>
<FinalComponent />
</div>
)
}
![Page 78: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/78.jpg)
Higher order components in React
![Page 80: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/80.jpg)
![Page 81: jsDay 2016 recap](https://reader031.vdocuments.mx/reader031/viewer/2022022411/58e891e81a28abf8658b67d7/html5/thumbnails/81.jpg)
See you next year?