jsday 2016 recap
TRANSCRIPT
RECAP!
Who
Who
GrUSP
jsDay buzzwords!
What we need from the Web, and what it needs from us
Progressive Web App (Wikipedia)
What we need from the Web, and what it needs from us
What we need from the Web, and what it needs from us
Service Workers (Mozilla Developer Network)
Service Workers (Mozilla Developer Network)
What we need from the Web, and what it needs from us
What we need from the Web, and what it needs from us
Microservices in practice with Seneca.js
Microservices in practice with Seneca.js
Microservices in practice with Seneca.js
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) !
}!
)
Microservices in practice with Seneca.js
Microservices in practice with Seneca.js
Blazing fast CSS3 Transitions
Blazing fast CSS3 Transitions
Blazing fast CSS3 Transitions
transform: translate3d(5px,5px,5px);
Blazing fast CSS3 Transitions
will-change: transform,opacity;
Blazing fast CSS3 Transitions
Forgotten funky functions
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));
};
};
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;
};
});
Forgotten funky functions
Forgotten funky functionsvar renameArgs = function(__uniq
, argNames) {
var parts = [
"(function(",
argNames.join(', ')
") { "
"return __uniq.apply(this, arguments);"
"});"
];
return eval(parts.join(''));
};
Forgotten funky functions
Forgotten funky functions
Object.create = function(x) {
function F() {}
F.prototype = x;
return new F();
};
Reactive programming with Cycle.js
Reactive programming with Cycle.js
Reactive programming with Cycle.js
Reactive programming with Cycle.js
Reactive programming with Cycle.js
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);
ph. @mbeccati
Shipping one of the largest Microsoft JavaScript applications
The evolution of Asynchronous Javascript
The evolution of Asynchronous Javascript
The evolution of Asynchronous Javascript
The evolution of Asynchronous Javascript
The evolution of Asynchronous Javascript
function *foo() {
let x = 1;
yield;
return x;
}
function *bar() {
let x = 14;
let y = (yield) * x;
return y;
}
The evolution of Asynchronous Javascript
npm install co
The evolution of Asynchronous Javascript
async/await
The evolution of Asynchronous Javascript
async function getTotal() {
let userInfo = await loadUserInfo();
let cartItems = await loadCartItems();
let total = await calculateTotal(userInfo, cartItems);
return total;
}
FFTT: A new concept of build tool.
FFTT: A new concept of build tool.
FFTT: A new concept of build tool.
FFTT: A new concept of build tool.
FFTT: A new concept of build tool.
FFTT: A new concept of build tool.
FFTT: A new concept of build tool.
Higher order components in React
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>
)
}
Higher order components in React
See you next year?
