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.

jsDay 2016 recap

531 views

Published on

An overview of what I saw at the 2016 edition of jsDay. Presentation held @ May 2016 RomaJS meetup

Published in: Technology
  • Be the first to comment

  • Be the first to like this

jsDay 2016 recap

  1. 1. RECAP!
  2. 2. Who
  3. 3. Who
  4. 4. GrUSP
  5. 5. jsDay buzzwords!
  6. 6. What we need from the Web, and what it needs from us
  7. 7. Progressive Web App (Wikipedia)
  8. 8. What we need from the Web, and what it needs from us
  9. 9. What we need from the Web, and what it needs from us
  10. 10. Service Workers (Mozilla Developer Network)
  11. 11. Service Workers (Mozilla Developer Network)
  12. 12. What we need from the Web, and what it needs from us
  13. 13. What we need from the Web, and what it needs from us
  14. 14. Microservices in practice with Seneca.js
  15. 15. Microservices in practice with Seneca.js
  16. 16. Microservices in practice with Seneca.js
  17. 17. 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) ! }! )
  18. 18. Microservices in practice with Seneca.js
  19. 19. Microservices in practice with Seneca.js
  20. 20. Blazing fast CSS3 Transitions
  21. 21. Blazing fast CSS3 Transitions
  22. 22. Blazing fast CSS3 Transitions transform: translate3d(5px,5px,5px);
  23. 23. Blazing fast CSS3 Transitions will-change: transform,opacity;
  24. 24. Blazing fast CSS3 Transitions
  25. 25. Forgotten funky functions
  26. 26. 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)); }; };
  27. 27. 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; }; });
  28. 28. Forgotten funky functions
  29. 29. Forgotten funky functions var renameArgs = function(__uniq , argNames) { var parts = [ "(function(", argNames.join(', ') ") { " "return __uniq.apply(this, arguments);" "});" ]; return eval(parts.join('')); };
  30. 30. Forgotten funky functions
  31. 31. Forgotten funky functions Object.create = function(x) { function F() {} F.prototype = x; return new F(); };
  32. 32. Reactive programming with Cycle.js
  33. 33. Reactive programming with Cycle.js
  34. 34. Reactive programming with Cycle.js
  35. 35. Reactive programming with Cycle.js
  36. 36. Reactive programming with Cycle.js
  37. 37. Reactive programming with Cycle.js function 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);
  38. 38. ph. @mbeccati
  39. 39. Shipping one of the largest Microsoft JavaScript applications
  40. 40. The evolution of Asynchronous Javascript
  41. 41. The evolution of Asynchronous Javascript
  42. 42. The evolution of Asynchronous Javascript
  43. 43. The evolution of Asynchronous Javascript
  44. 44. The evolution of Asynchronous Javascript function *foo() { let x = 1; yield; return x; } function *bar() { let x = 14; let y = (yield) * x; return y; }
  45. 45. The evolution of Asynchronous Javascript npm install co
  46. 46. The evolution of Asynchronous Javascript async/await
  47. 47. The evolution of Asynchronous Javascript async function getTotal() { let userInfo = await loadUserInfo(); let cartItems = await loadCartItems(); let total = await calculateTotal(userInfo, cartItems); return total; }
  48. 48. FFTT: A new concept of build tool.
  49. 49. FFTT: A new concept of build tool.
  50. 50. FFTT: A new concept of build tool.
  51. 51. FFTT: A new concept of build tool.
  52. 52. FFTT: A new concept of build tool.
  53. 53. FFTT: A new concept of build tool.
  54. 54. FFTT: A new concept of build tool.
  55. 55. Higher order components in React
  56. 56. Higher order components in React const Wrapped = () => <h1>Wrapped Comp</h1> const wrapper = (Comp) => () => { return <div><Comp /></div> } const FinalComponent = wrapper(Wrapped) const App = () => { return ( <div> <FinalComponent /> </div> ) }
  57. 57. Higher order components in React
  58. 58. See you next year?
  59. 59. Notes & Credits

×