Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Don't Panic @ Fronteers Conference 2017

Don't Panic @ Fronteers Conference 2017

10 years is a long time. You can change the world in less. So what have we done over the last decade? And more importantly, what lessons have we learned?

Niels Leenheer

October 05, 2017
Tweet

More Decks by Niels Leenheer

Other Decks in Technology

Transcript

  1. don't panic
    don't panic

    View Slide

  2. don't panic
    don't panic

    View Slide

  3. don't panic
    don't panic

    View Slide

  4. don't panic
    don't panic

    View Slide

  5. don't panic
    don't panic

    View Slide

  6. chriet titulaer

    1943 — 2017

    View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. wubbo ockels

    1946 — 2014

    View Slide

  11. View Slide

  12. View Slide

  13. View Slide

  14. View Slide

  15. 110 meters tall

    View Slide

  16. 2.58 km/s
    top speed

    View Slide

  17. 384,400 km from home

    View Slide

  18. 384,400

    View Slide

  19. 384,400 almost identical websites
    B

    View Slide

  20. View Slide

  21. BREAK THE INTERNET

    View Slide

  22. View Slide

  23. View Slide

  24. View Slide

  25. View Slide

  26. View Slide

  27. View Slide

  28. View Slide

  29. View Slide

  30. View Slide

  31. View Slide

  32. View Slide

  33. View Slide

  34. View Slide

  35. View Slide

  36. View Slide

  37. View Slide

  38. always bet 

    on the web

    View Slide

  39. the golden age 

    of frontend 

    development

    View Slide

  40. platforms

    View Slide

  41. platforms

    View Slide

  42. platforms

    View Slide

  43. platforms

    View Slide

  44. platforms

    View Slide

  45. compatiblity

    View Slide

  46. View Slide

  47. View Slide

  48. developer tools

    View Slide

  49. frameworks

    View Slide

  50. frameworks
    dhtml

    View Slide

  51. frameworks
    prototype

    View Slide

  52. frameworks
    mootools

    View Slide

  53. frameworks
    jquery

    View Slide

  54. frameworks
    yui

    View Slide

  55. frameworks
    dojo

    View Slide

  56. frameworks
    ext

    View Slide

  57. frameworks
    flex

    View Slide

  58. frameworks
    flex?

    View Slide

  59. frameworks
    flex

    View Slide

  60. frameworks
    unified

    View Slide

  61. frameworks
    amber.js

    View Slide

  62. frameworks
    bootstrap

    View Slide

  63. frameworks
    backbone.js

    View Slide

  64. frameworks
    nuclear.js

    View Slide

  65. frameworks
    knockout.js

    View Slide

  66. frameworks
    angular-js

    View Slide

  67. frameworks
    angular 2

    View Slide

  68. frameworks
    sencha touch

    View Slide

  69. frameworks
    vanilla js

    View Slide

  70. frameworks
    polymer

    View Slide

  71. frameworks
    react

    View Slide

  72. frameworks
    preact

    View Slide

  73. frameworks
    vue

    View Slide

  74. frameworks
    hyperhtml

    View Slide

  75. frameworks

    View Slide

  76. View Slide

  77. features

    View Slide

  78. features

    View Slide

  79. features
    dom
    html tokeniser and tree builder, svg without
    plugins and inline in html5, custom elements,
    shadow dom and templates

    View Slide

  80. features
    elements
    new semantic elements like section, nav, article,
    aside, header, footer and more, new form fields
    types for search, telephone numbers, urls, email,
    dates, month, week, time, number, range and
    color

    View Slide

  81. features
    video
    the video element, subtitles, track selection, 

    video streaming and drm plugins

    View Slide

  82. features
    audio
    the audio element, generating audio using 

    web audio, speech recognition and 

    speech synthesis

    View Slide

  83. features
    graphics
    responsive images, improvements to canvas,
    web animation, requestanimationframe, webgl
    and webvr

    View Slide

  84. features
    storage
    web sql database and indexeddb

    View Slide

  85. features
    network
    server send event, beacon, fetch, web sockets,
    streams, webrtc, peer to peer messaging, csp
    and sub resource integrity

    View Slide

  86. features
    devices
    gamepad control, pointer lock, access to the
    webcam, device motion, device orientation,
    sensor api, web bluetooth and web usb

    View Slide

  87. features
    offline support
    service workers, cache api, push messages

    View Slide

  88. features
    scripting
    mutations observer, url api, encoding api,
    modules, classes, arrow functions, promises,
    template strings, typed arrays,
    internationalisation, async and await

    View Slide

  89. features
    css
    gradients, transforms, transition, animations,
    shadow, fonts, media queries, selectors, flex
    box, grid

    View Slide

  90. features

    View Slide

  91. View Slide

  92. View Slide

  93. View Slide

  94. View Slide

  95. goodbye

    internet 

    explorer

    View Slide

  96. internet explorer

    is a good browser

    View Slide

  97. internet explorer 6

    is a good browser

    View Slide

  98. internet explorer 6

    is a great browser

    View Slide

  99. internet explorer 6

    is a great browser
    (15 years ago)

    View Slide

  100. View Slide

  101. View Slide

  102. View Slide

  103. View Slide

  104. it's okay to build 

    a website that 

    doesn't work without

    javascript

    View Slide

  105. View Slide

  106. View Slide

  107. the tinfoil hat

    approach to

    javascript

    View Slide

  108. the tinfoil hat

    approach to

    javascript
    developers, 

    developers,

    developers

    View Slide

  109. progressive 

    enhancement

    View Slide

  110. View Slide

  111. View Slide

  112. a bad 

    user experience 

    is just bad

    View Slide

  113. it's okay to build 

    a websiteapp that 

    doesn't work without

    javascript

    View Slide

  114. the web consists of 

    three pillars and

    javascript 

    is one of them

    View Slide

  115. users over authors 

    over implementors 

    over specifiers over
    theoretical purity
    – w3c html5 design principles

    View Slide

  116. View Slide

  117. browser

    diversity

    View Slide

  118. View Slide

  119. View Slide

  120. View Slide

  121. View Slide

  122. View Slide

  123. best viewed with

    View Slide

  124. we don't develop

    for browsers...


    we develop for

    the web

    View Slide

  125. ten good 

    things about 

    bootstrap

    View Slide

  126. #1
    consistency

    View Slide

  127. cheap
    #2

    View Slide

  128. free
    #2

    View Slide

  129. cheap
    #3

    View Slide

  130. easy
    #4

    View Slide

  131. #5

    View Slide

  132. View Slide

  133. delight your 

    users

    View Slide

  134. make things 

    a little bit 

    better

    View Slide

  135. experiment

    View Slide

  136. be happy

    View Slide

  137. View Slide