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

Transcript

1. We march backwards into the future. —Marshall McLuhan We look at the present through a rear-view mirror. the present the future
2. the future the present
3. the present
5. dystopia utopia
6. apprehension excitement
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
8. 0 100 the future the present
9. the future the present 0 200
12. apprehension excitement
13. tools materials
14. git npm yarn sass gulp grunt babel webpack HTML CSS JavaScript
15. vue react ember jquery angular bootstrap foundation HTML CSS JavaScript
16. developers users
17. TCP/IP HTTP URLs HTML CSS JS
18. TCP/IP HTTP JS
19. works great doesn’t work
20. works great works well works fine just about works doesn’t work ☺
21. 0 1 works great doesn’t work
22. 0 100 works great doesn’t work ☺
23. tools
24. 0 100 high fidelity low fidelity
25. JavaScript HTTP 0 1
26. 0 100 JavaScript HTTP HTML CSS URLs
27. 0 100 JavaScript HTTP HTML CSS URLs
28. works great doesn’t work
29. doesn’t work works great
30. 0 1 complex simple
31. complex simple
32. simple complex
33. 0 100 complex simple
34. web app website
35. website web app
36. progressive web app HTTPS web app manifest service worker
37. 0 100 progressive web app website HTTPS web app manifest service worker
38. JS CSS HTML TCP/IP HTTP URLs
39. huffduffer.com
40. huffduffer.com
41. trivago.com
42. trivago.com
43. resilient webdesign.com
44. adactio.com
45. adactio.com
46. archive. dconstruct.org
47. archive. dconstruct.org
48. archive. dconstruct.org
49. archive. dconstruct.org
50. background sync push notifications add to home screen service worker caching offline
51. 0 100 the future the present
52. the future