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.

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