JSConf US '19 - Make Web Not War

JSConf US '19 - Make Web Not War

In the early days of the web, building a new website would often largely involve HTML and CSS with the occasional sprinkling of JavaScript. Over the years the browsers became more powerful and the use-cases more complex. We found ourselves in a world in which we had outgrown jQuery and now faced a vast array of tools, libraries and frameworks to pick from. Sadly, with these choices also came opinions, endless debates and futile statements such as Angular is dead or "React is the best solution because of the vDOM".

I believe that in order to move the web forward we need to take a step back and acknowledge that every developer and project comes with a different background of varying levels of knowledge, use cases and preferences. Framework authors learn from each other, so why shouldn't we?

In this talk we'll take a look how different frameworks over the years have competed and inspired each other. We'll see how we can combine the lessons from the past and present to work together towards a future of peaceful coexistence.

0722ad084c65f6177d80cf793cfbd013?s=128

Dominik Kundel

August 14, 2019
Tweet

Transcript

  1. Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar Make Web

    Not War JSConf US 2019 - Dominik Kundel d-k.im/jsconf-us
  2. Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar A Public

    Service Announcement
  3. You are wasting your time learning frameworks! Dominik Kundel |

    @dkundel | #jsconfus | #makeWebNotWar
  4. Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar Web APIs

  5. Well Actually... Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar

  6. console.log(` Hi! I’m Dominik Kundel `); dkundel.com @dkundel dkundel@twilio.com github/dkundel

    Developer Evangelist !&& JavaScript Hacker Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar
  7. I'm a React Developer Dominik Kundel | @dkundel | #jsconfus

    | #makeWebNotWar
  8. I'm an Angular Developer Dominik Kundel | @dkundel | #jsconfus

    | #makeWebNotWar
  9. I'm a Web Components Developer Dominik Kundel | @dkundel |

    #jsconfus | #makeWebNotWar
  10. I'm a Front-End Developer Dominik Kundel | @dkundel | #jsconfus

    | #makeWebNotWar
  11. I'm a Back-End Developer Dominik Kundel | @dkundel | #jsconfus

    | #makeWebNotWar
  12. I'm a Hardware Developer Dominik Kundel | @dkundel | #jsconfus

    | #makeWebNotWar
  13. I'm a JavaScript Developer Dominik Kundel | @dkundel | #jsconfus

    | #makeWebNotWar
  14. Frameworks & Libraries === Tools Dominik Kundel | @dkundel |

    #jsconfus | #makeWebNotWar
  15. Tools Solve Problems Dominik Kundel | @dkundel | #jsconfus |

    #makeWebNotWar
  16. You are wasting your time learning frameworks! Dominik Kundel |

    @dkundel | #jsconfus | #makeWebNotWar
  17. You are wasting your time learning X because Y exists

    Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar
  18. You are wasting your time learning X because Y is

    faster Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar
  19. You are wasting your time learning X because Y is

    better Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar
  20. You are wasting your time learning X because Y is

    more popular Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar
  21. Why Do We Have Frameworks & Tools? Dominik Kundel |

    @dkundel | #jsconfus | #makeWebNotWar
  22. Tools Solve Problems Dominik Kundel | @dkundel | #jsconfus |

    #makeWebNotWar
  23. Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar

  24. Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar

  25. Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar

  26. Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar

  27. 2006 Browser Wars wired.com/2006/12/2006-the-year-in-browsers/ Dominik Kundel | @dkundel | #jsconfus

    | #makeWebNotWar
  28. Unified Access to the DOM and Web Requests Dominik Kundel

    | @dkundel | #jsconfus | #makeWebNotWar
  29. Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar Without jQuery

    if (el.addEventListener) { el.addEventListener('click', eventHandler, false); } else if (el.attachEvent) { el.attachEvent('onclick', eventHandler); } With jQuery $(el).on(eventHandler);
  30. Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar Without jQuery

    if (window.XMLHttpRequest) { !// code for most browsers xmlhttp = new XMLHttpRequest(); } else { !// code for IE 6 xmlhttp = new ActiveXObject('Microsoft.XMLHTTP'); } xmlhttp.onreadystatechange = function() { !// handle response }; xmlhttp.open('GET', 'https:!//dkundel.com', true); xmlhttp.send(); With jQuery $.ajax({ url: 'https:!//dkundel.com', success: function () { !// handle response } })
  31. UI Components Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar

  32. Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar

  33. Increasingly Complex Applications Dominik Kundel | @dkundel | #jsconfus |

    #makeWebNotWar
  34. Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar

  35. Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar

  36. From Declarative to Imperative Dominik Kundel | @dkundel | #jsconfus

    | #makeWebNotWar
  37. Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar

  38. Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar

  39. RequireJS & Bundlers Dominik Kundel | @dkundel | #jsconfus |

    #makeWebNotWar
  40. Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar

  41. Lifecycle of Frameworks & Tools Dominik Kundel | @dkundel |

    #jsconfus | #makeWebNotWar
  42. Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar From jQuery

    to Standards $('div') !=> document.querySelector('div'); $(el).on(fn) !=> el.addEventListener(fn); $.ajax(!!...) !=> fetch(!!...)
  43. Standardization Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar

  44. Your Way Is Not Necessarily the Right Way Dominik Kundel

    | @dkundel | #jsconfus | #makeWebNotWar
  45. Extensible Web Manifesto Dominik Kundel | @dkundel | #jsconfus |

    #makeWebNotWar
  46. tldr; Extensible Web Manifesto Dominik Kundel | @dkundel | #jsconfus

    | #makeWebNotWar
  47. Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar tldr; Extensible

    Web Manifesto • Focus on adding new low-level capabilities to the web platform that are secure and efficient.
 • Expose low-level capabilities that explain existing features, such as HTML and CSS, allowing authors to understand and replicate them.

  48. Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar tldr; Extensible

    Web Manifesto • Develop, describe and test new high-level features in JavaScript, and allow web developers to iterate on them before they become standardized. This creates a virtuous cycle between standards and developers.
 • Prioritize efforts that follow these recommendations and deprioritize and refocus those which do not.

  49. How the Web Sausage Gets Made Monica Dinculescu - ffconf

    2017 youtu.be/326SIMmRjc8 Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar
  50. Standards Might Not Necessarily Look the Same Way Dominik Kundel

    | @dkundel | #jsconfus | #makeWebNotWar
  51. Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar Standards Might

    Not Necessarily Look the Same Way $.ajax({!!...}) !=> fetch({!!...}) RequireJS !|| CommonJS !=> ES Modules
  52. Let's Standardize JSX Dominik Kundel | @dkundel | #jsconfus |

    #makeWebNotWar
  53. Tagged Templates Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar

    function scream(strings, !!...values) { return strings.reduce((output, currentString, idx) !=> { return ( output + currentString + (values[idx] !|| '').toString().toUpperCase() ); }, ''); } const eventName = 'jsconf us'; scream`Hello Everyone. Welcome to ${eventName}!` !// !!==> "Hello Everyone. Welcome to JSCONF US!"
  54. Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar

  55. Focus of Maintainers Changes Dominik Kundel | @dkundel | #jsconfus

    | #makeWebNotWar
  56. Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar !=>

  57. Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar !=>

  58. Angular is Dead Dominik Kundel | @dkundel | #jsconfus |

    #makeWebNotWar
  59. Angular is NOT Dead Dominik Kundel | @dkundel | #jsconfus

    | #makeWebNotWar
  60. Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar Angular Community

    21 Conferences in 2019 on angularconferences.com
  61. Frameworks Inspire and Learn From Each Other Dominik Kundel |

    @dkundel | #jsconfus | #makeWebNotWar
  62. The Origins of Vue Dominik Kundel | @dkundel | #jsconfus

    | #makeWebNotWar
  63. – Evan You (github.com/customer-stories/yyx990803) “[...] I wanted something that captured

    the declarative nature of Angular’s data binding, but with a simpler, more approachable API. That’s how Vue started.” Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar
  64. Toolkits Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar

  65. Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar Toolkits •

    Vue CLI • Angular CLI • create-react-app & react-scripts • Preact CLI • ...
  66. Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar

  67. Ahead-of-Time Compiling Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar

  68. rawact github.com/sokra/rawact Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar

  69. Not for Every Use Case Dominik Kundel | @dkundel |

    #jsconfus | #makeWebNotWar
  70. People Have Different Requirements Dominik Kundel | @dkundel | #jsconfus

    | #makeWebNotWar
  71. People Have Different Backgrounds Dominik Kundel | @dkundel | #jsconfus

    | #makeWebNotWar
  72. People Have Different Challenges Dominik Kundel | @dkundel | #jsconfus

    | #makeWebNotWar
  73. Frameworks Are All about HYPE Dominik Kundel | @dkundel |

    #jsconfus | #makeWebNotWar
  74. Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar twitter.com/mxstbr/status/864014835557781505

  75. Aurelia & Svelte Dominik Kundel | @dkundel | #jsconfus |

    #makeWebNotWar
  76. Hype Makes a Framework Dominik Kundel | @dkundel | #jsconfus

    | #makeWebNotWar
  77. Less Hype Doesn't Kill a Framework Dominik Kundel | @dkundel

    | #jsconfus | #makeWebNotWar
  78. Let's Not Call Frameworks Dead Dominik Kundel | @dkundel |

    #jsconfus | #makeWebNotWar
  79. ~70% of the Top 1 Million Websites Use jQuery libscore.com/#jQuery

    Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar
  80. Angular, Ember & Others Have Vibrant Communities Dominik Kundel |

    @dkundel | #jsconfus | #makeWebNotWar
  81. Unmaintained !== Dead Dominik Kundel | @dkundel | #jsconfus |

    #makeWebNotWar
  82. Tools Solve Problems Dominik Kundel | @dkundel | #jsconfus |

    #makeWebNotWar
  83. Frameworks Are like Hammers Dominik Kundel | @dkundel | #jsconfus

    | #makeWebNotWar
  84. Don't Tell Someone to Buy a New Hammer Dominik Kundel

    | @dkundel | #jsconfus | #makeWebNotWar
  85. Let's stop telling people they are wasting their time! Dominik

    Kundel | @dkundel | #jsconfus | #makeWebNotWar
  86. Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar

  87. Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar twitter.com/dan_abramov/status/683771840100196352

  88. Build a Project with a Framework/Tool You Don't Know Dominik

    Kundel | @dkundel | #jsconfus | #makeWebNotWar
  89. Approach It with an Open Mind Dominik Kundel | @dkundel

    | #jsconfus | #makeWebNotWar
  90. Don't Look down on Others Dominik Kundel | @dkundel |

    #jsconfus | #makeWebNotWar
  91. Talk to Each Other Dominik Kundel | @dkundel | #jsconfus

    | #makeWebNotWar
  92. Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar Talk to

    Each Other why they chose it what they like and dislike about it share your experiences help each other and learn from each other
  93. If frameworks can learn from each other and evolve, we

    can, too! Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar
  94. Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar d-k.im/jsconf-us

  95. console.log(` Thank You! `); dkundel.com @dkundel dkundel@twilio.com github/dkundel d-k.im/jsconf-us Dominik

    Kundel | @dkundel | #jsconfus | #makeWebNotWar