JSConf US '19 - Make Web Not War

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar

Slide 24

Slide 24 text

Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar

Slide 25

Slide 25 text

Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar

Slide 26

Slide 26 text

Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Uniﬁed Access to the DOM and Web Requests Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar

Slide 35

Slide 35 text

Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar

Slide 38

Slide 38 text

Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar tldr; Extensible Web Manifesto • Focus on adding new low-level capabilities to the web platform that are secure and eﬃcient.  • Expose low-level capabilities that explain existing features, such as HTML and CSS, allowing authors to understand and replicate them. 

Slide 48

Slide 48 text

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 eﬀorts that follow these recommendations and deprioritize and refocus those which do not. 

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

– 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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

People Have Diﬀerent Requirements Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar

Slide 71

Slide 71 text

People Have Diﬀerent Backgrounds Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar

Slide 72

Slide 72 text

People Have Diﬀerent Challenges Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

Dominik Kundel | @dkundel | #jsconfus | #makeWebNotWar

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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