Martin will share with you a short history of the web

1. A short history
of the web

3. "This machine is a
server. DO NOT
POWER IT DOWN!!"

4. Brief history of the web
1991: HTML 1.0 launches

5. Brief history of the web
1991: HTML 1.0 launches
1995: HTML 2.0 brings forms

6. Brief history of the web
1991: HTML 1.0 launches
1995: HTML 2.0 brings forms
1996: CSS 1 is released

7. Brief history of the web
1991: HTML 1.0 launches
1995: HTML 2.0 brings forms
1996: CSS 1 is released
1997: ECMAScript is standardised

8. We had so many
fantastic ideas!

12. example.com

15. All of these wanted to
make the web richer

16. All of these worked
on the web

17. None of these worked
with the web

19. JavaScript?

20. Let’s look a little closer.

21. var ajaxRequest; // here be dragons...
try {
ajaxRequest = new XMLHttpRequest();
} catch (e) {
// to be continued
}

22. var ajaxRequest; // here be dragons...
try {
ajaxRequest = new XMLHttpRequest();
} catch (e) {
try {
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
// waaaaait for it...
}
}

23. var ajaxRequest; // here be dragons...
try {
ajaxRequest = new XMLHttpRequest();
} catch (e) {
try {
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("Your browser broke!");

24. jQuery <3

25. $.get('/something', function(result) {
// hurrah!
}).fail(function() {
// aww shucks :(
})

26. AJAX!

27. Stuff got messy
Button

28. Stuff got messy
Button List

29. Stuff got messy
Button List Form

30. Stuff got messy
Button List Form
Button

31. Stuff got messy
Button List Form
Button

32. Stuff got messy
Button ButtonList Form
Button
API
response

34. The rumours of my death
are grossly exaggerated.

36. Thanks to Boris Smus

37. 2010 onwards...

40. We are attention-driven.

41. What do we value?

43. We need to remember
what we are trying to accomplish

44. Start with the user.

45. Hybrid / Server-side rendered
Client-side rendered

46. whatdoesmysitecost.com

47. Keep looking for the simplest tool.

48. Favour resilience.

49. In the backend you can rely on...
● network conditions

50. In the backend you can rely on...
● network conditions
● server specs

51. In the backend you can rely on...
● network conditions
● server specs
● available packages & libraries

52. In the backend you can rely on...
● network conditions
● server specs
● available packages & libraries
● resources (files, databases, …)

53. In frontend land,
you need to be resilient!

54. The browser is your friend!

55. Free gifts from your browsers:
● Streaming HTML parsing

56. Free gifts from your browsers:
● Streaming HTML parsing
● Resource prioritization

57. Free gifts from your browsers:
● Streaming HTML parsing
● Resource prioritization
● Resilient CSS & HTML parsing

58. Free gifts from your browsers:
● Streaming HTML parsing
● Resource prioritization
● Resilient CSS & HTML parsing
● Built-in accessibility features

59. Free gifts from your browsers:
● Streaming HTML parsing
● Resource prioritization
● Resilient CSS & HTML parsing
● Built-in accessibility features
● Component system

60. Free gifts from your browsers:
● Streaming HTML parsing
● Resource prioritization
● Resilient CSS & HTML parsing
● Built-in accessibility features
● Component system
● Powerful, flexible layout engine

61. Experiments and tooling
improve the platform

62. The platform becomes
the foundation for
new experiments

63. Keep pushing,
but don’t leave users behind.

64. Thank you :)