$30 off During Our Annual Pro Sale. View Details »

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.

Dominik Kundel

August 14, 2019
Tweet

More Decks by Dominik Kundel

Other Decks in Programming

Transcript

  1. Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar
    Make Web Not War
    JSConf US 2019 - Dominik Kundel
    d-k.im/jsconf-us

    View Slide

  2. Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar
    A Public Service Announcement

    View Slide

  3. You are wasting your time
    learning frameworks!
    Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar

    View Slide

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

    View Slide

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

    View Slide

  6. console.log(`
    Hi! I’m Dominik Kundel
    `);
    dkundel.com
    @dkundel
    [email protected]
    github/dkundel
    Developer Evangelist
    !&& JavaScript Hacker
    Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar

    View Slide

  7. I'm a React Developer
    Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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);

    View Slide

  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
    }
    })

    View Slide

  31. UI Components
    Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  43. Standardization
    Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar

    View Slide

  44. Your Way Is Not
    Necessarily
    the Right Way
    Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar

    View Slide

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

    View Slide

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

    View Slide

  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.


    View Slide

  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.


    View Slide

  49. How the Web
    Sausage Gets Made
    Monica Dinculescu - ffconf 2017
    youtu.be/326SIMmRjc8
    Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar

    View Slide

  50. Standards Might Not
    Necessarily
    Look the Same Way
    Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar

    View Slide

  51. Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar
    Standards Might Not Necessarily
    Look the Same Way
    $.ajax({!!...}) !=> fetch({!!...})
    RequireJS !|| CommonJS !=> ES Modules

    View Slide

  52. Let's Standardize JSX
    Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar

    View Slide

  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!"

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  60. Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar
    Angular Community
    21 Conferences in 2019 on angularconferences.com

    View Slide

  61. Frameworks Inspire and Learn
    From Each Other
    Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar

    View Slide

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

    View Slide

  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

    View Slide

  64. Toolkits
    Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  88. Build a Project with a
    Framework/Tool
    You Don't Know
    Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  93. If frameworks can learn
    from each other and evolve,
    we can, too!
    Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar

    View Slide

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

    View Slide

  95. console.log(`
    Thank You!
    `);
    dkundel.com
    @dkundel
    [email protected]
    github/dkundel
    d-k.im/jsconf-us
    Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar

    View Slide