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
   

   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
   dkundel@twilio.com
   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
    dkundel@twilio.com
    github/dkundel
    d-k.im/jsconf-us
    Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar
    

    View Slide