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

The Layers Of The Web

The Layers Of The Web

Do you ever get overwhelmed by the ever-changing nature of web design and development? Exhausting, isn't it? How are you supposed to know which technologies and tools you should invest your time in? Will they stick around or will you just have to relearn everything in another few months ? Join Jeremy as he takes a tour of the past, present, and future of working on the web. From the building blocks of HTML, CSS, and JavaScript through to frameworks and libraries right up to the latest and greatest Progressive Web Apps, this talk will examine our collective assumptions with a critical eye. By learning from the past, we can make sensible design decisions today to build the web of tomorrow

Jeremy Keith

August 11, 2018
Tweet

More Decks by Jeremy Keith

Other Decks in Technology

Transcript

  1. We march
    backwards into
    the future.
    —Marshall McLuhan
    We look at
    the present
    through a
    rear-view mirror.
    the present the future

    View Slide

  2. the future
    the present

    View Slide

  3. the present

    View Slide

  4. View Slide

  5. dystopia
    utopia

    View Slide

  6. apprehension
    excitement

    View Slide

  7. angular
    react
    vue
    webpack babel
    node
    npm
    yarn
    es2016
    es6
    js.nextwebAssembly
    parcel
    rollup
    typescript
    redux
    graphql
    parcel
    gulp
    grunt
    sass
    less
    rollup
    browserify
    brunch
    brocolli
    fusebox
    bower
    lodash
    underscore
    axios
    prettier
    elm
    aurelia
    ember
    polymer
    backbone
    stylus
    bootstrap
    foundation
    clojure
    apprehension
    flow
    angular
    react
    vue
    webpack babel
    node
    npm
    yarn
    es2016
    es6
    js.nextwebAssembly
    parcel
    rollup
    typescript
    redux
    graphql
    parcel
    gulp
    grunt
    sass
    less
    rollup
    browserify
    brunch
    brocolli
    fusebox
    bower
    lodash
    underscore
    axios
    prettier
    elm
    aurelia
    ember
    polymer
    backbone
    stylus
    bootstrap
    foundation
    clojure
    flow
    angular
    react
    vue
    webpack babel
    node
    npm
    yarn
    es2016
    es6
    js.nextwebAssembly
    parcel
    rollup
    typescript
    redux
    graphql
    parcel
    gulp
    grunt
    sass
    less
    rollup
    browserify
    brunch
    brocolli
    fusebox
    bower
    lodash
    underscore
    axios
    prettier
    elm
    aurelia
    ember
    polymer
    backbone
    stylus
    bootstrap
    foundation
    clojure
    flow

    View Slide

  8. 0
    100
    the future
    the present

    View Slide

  9. the future
    the present
    0
    200

    View Slide

  10. View Slide

  11. View Slide

  12. apprehension
    excitement

    View Slide

  13. tools
    materials

    View Slide

  14. git
    npm
    yarn
    sass
    gulp
    grunt
    babel
    webpack
    HTML
    CSS
    JavaScript

    View Slide

  15. vue
    react
    ember
    jquery
    angular
    bootstrap
    foundation
    HTML
    CSS
    JavaScript

    View Slide

  16. developers
    users

    View Slide

  17. TCP/IP
    HTTP
    URLs
    HTML
    CSS
    JS

    View Slide

  18. TCP/IP
    HTTP
    JS

    View Slide

  19. works great
    doesn’t work

    View Slide

  20. works great
    works well
    works fine
    just about works
    doesn’t work





    View Slide

  21. 0
    1
    works great
    doesn’t work

    View Slide

  22. 0
    100
    works great
    doesn’t work





    View Slide

  23. tools

    View Slide

  24. 0
    100
    high fidelity
    low fidelity

    View Slide

  25. JavaScript
    HTTP
    0
    1

    View Slide

  26. 0
    100
    JavaScript
    HTTP
    HTML
    CSS
    URLs

    View Slide

  27. 0
    100
    JavaScript
    HTTP
    HTML
    CSS
    URLs

    View Slide

  28. works great
    doesn’t work

    View Slide

  29. doesn’t work works great

    View Slide

  30. 0
    1
    complex
    simple

    View Slide

  31. complex
    simple

    View Slide

  32. simple complex

    View Slide

  33. 0
    100
    complex
    simple

    View Slide

  34. web app
    website

    View Slide

  35. website web app

    View Slide

  36. progressive web app
    HTTPS
    web app manifest
    service worker

    View Slide

  37. 0
    100
    progressive web app
    website
    HTTPS
    web app manifest
    service worker

    View Slide

  38. JS
    CSS
    HTML
    TCP/IP
    HTTP
    URLs

    View Slide

  39. huffduffer.com

    View Slide

  40. huffduffer.com

    View Slide

  41. trivago.com

    View Slide

  42. trivago.com

    View Slide

  43. resilient
    webdesign.com

    View Slide

  44. adactio.com

    View Slide

  45. adactio.com

    View Slide

  46. archive.
    dconstruct.org

    View Slide

  47. archive.
    dconstruct.org

    View Slide

  48. archive.
    dconstruct.org

    View Slide

  49. archive.
    dconstruct.org

    View Slide

  50. background sync
    push notifications
    add to home screen
    service worker
    caching
    offline

    View Slide

  51. 0
    100
    the future
    the present

    View Slide

  52. the future

    View Slide