Resilience

Web browsers have become so powerful that developers are now treating them as if they were a runtime environment as predictable as any other. But the truth is that we still need to deal with many unknown factors that torpedo our assumptions.

The web is where Postel’s Law meets Murphy’s Law, so we can’t treat web development as if it were just another flavor of software. Instead we must work with the grain of the web. There are tried and tested approaches to building for the web that will result in experiences that are robust, flexible, and resilient.

Transcript

1. RESILIENCE
   

   View Slide

2. View Slide

3. View Slide

4. lo
   

   View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. “Deliver the bits, stupid.”
   —David Isenberg
   “Rise of the Stupid Network”
   

   View Slide

10. email
    gopher
    ftp
    HTTP
    telnet
    TCP/IP
    

    View Slide

11. HTTP
    WWW
    URLs
    HTML
    

    View Slide

12. View Slide

13. View Slide

14. View Slide

15. View Slide

16. View Slide

17. The trick... is to make sure that each
    limited mechanical part of the web,
    each application, is within itself
    composed of simple parts that will
    never get too powerful.”
    “
    —Tim Berners-Lee
    

    View Slide

18. HTTP
    WWW
    URLs
    HTML
    

    View Slide

19. HTML
    

    View Slide

20. HTML tags
    21 elements
    

    View Slide

21. HTML 5
    121 elements
    

    View Slide

22. 
    show me
    
    

    View Slide

23. 
    show me
    
    

    View Slide

24. 
    show me
    
    

    View Slide

25. 
    hide me
    
    

    View Slide

26. 
    

    View Slide

27. 
    

    View Slide

28. 
    
    
    
    
    

    View Slide

29. CSS
    

    View Slide

30. selector {
    property: value;
    }
    OOCSS
    SMACSS
    BEM
    

    View Slide

31. HTML
    CSS
    

    View Slide

32. Be conservative in what you send,
    be liberal in what you accept.”
    “
    —Jon Postel
    

    View Slide

33. View Slide

34. HTML
    CSS
    JavaScript
    declarative
    imperative
    resilient
    fragile
    

    View Slide

35. XHTML 2
    fragile
    

    View Slide

36. fragile
    JavaScript
    

    View Slide

37. 
    Download Chrome
    
    

    View Slide

38. Anything that can possibly go wrong,
    will go wrong.”
    “
    —Edward Aloysius Murphy, Jr.
    

    View Slide

39. View Slide

40. View Slide

41. 1. Identify core functionality.
    2. Make that functionality
    available using the simplest
    technology.
    3. Enhance!
    

    View Slide

42. 1. Identify core functionality.
    2. Make that functionality
    available using the simplest
    technology.
    3. Enhance!
    

    View Slide

43. View Slide

44. 1. Identify core functionality.
    2. Make that functionality
    available using the simplest
    technology.
    3. Enhance!
    

    View Slide

45. 
    
    
    
    
    

    View Slide

46. 
    
    
    
    
    
    

    View Slide

47. 
    
    
    
    

    View Slide

48. 
    

    View Slide

49. 1. Identify core functionality.
    2. Make that functionality
    available using the simplest
    technology.
    3. Enhance!
    

    View Slide

50. layout
    @font-face
    

    View Slide

51. ajax
    websocket
    

    View Slide

52. CSS filters
    file API
    

    View Slide

53. local storage
    service
    worker
    

    View Slide

54. 1. Identify core functionality.
    2. Make that functionality
    available using the simplest
    technology.
    3. Enhance!
    

    View Slide

55. “This is too easy.”
    

    View Slide

56. “This is too hard.”
    

    View Slide

57. 1. Identify core functionality.
    2. Make that functionality
    available using the simplest
    technology.
    3. Enhance!
    

    View Slide

58. developer convenience
    user needs
    

    View Slide

59. 216 colours
    Times New Roman
    Arial
    Verdana
    Netscape 4
    IE 6
    Windows XP
    Android 2.x
    

    View Slide

60. View Slide

61. View Slide

62. HTTP
    WWW
    URLs
    HTML
    

    View Slide

63. URLs
    

    View Slide

64. RESILIENCE
    

    View Slide