HTML5 - The road to multi-platform serenity

Justin Lee's talk for GeekcampSG 2012. For all the talks for the year 2012, check out http://geekcamp.sg/schedule/view_schedule/2012

Transcript

1. HTML5 - The road to
   multi-platform serenity
   Justin Lee
   

   View Slide

2. discussion
   

   View Slide

3. paulirish.com
   

   View Slide

4. 10 points
   

   View Slide

5. 10) server vs. client
   

   View Slide

6. fat server, thin client
   

   View Slide

7. data server, rich client
   

   View Slide

8. rest
   

   View Slide

9. luracast.com/products/
   restler
   

   View Slide

10. web services
    

    View Slide

11. html5, css3, javascript
    

    View Slide

12. 9) offline vs. online
    

    View Slide

13. build with
    disconnectivity in mind
    

    View Slide

14. offline caching
    

    View Slide

15. local storage
    

    View Slide

16. database
    

    View Slide

17. network connectivity
    

    View Slide

18. 8) responsive design
    

    View Slide

19. css3 media queries
    

    View Slide

20. getskeleton.com
    

    View Slide

21. lessframework.com
    

    View Slide

22. yaml.de
    

    View Slide

23. 7) platform frameworks
    vs. hand-code
    

    View Slide

24. jquery.com + jquery-
    mobile.com
    

    View Slide

25. sencha.com
    

    View Slide

26. twitter.github.com/
    bootstrap
    

    View Slide

27. sass-lang.com & compass
    less css
    stylus
    

    View Slide

28. alicejs
    

    View Slide

29. 6) mvvm, mvc
    

    View Slide

30. angularjs.org
    

    View Slide

31. backbonejs.org
    

    View Slide

32. knockoutjs.com
    

    View Slide

33. emberjs.com
    

    View Slide

34. 5) performance
    optimizations
    

    View Slide

35. yslow.org
    

    View Slide

36. jslint.com
    

    View Slide

37. csslint.net
    

    View Slide

38. 1 css, 1 javascript,
    minified
    

    View Slide

39. requirejs.org
    

    View Slide

40. 4) debugging
    

    View Slide

41. alert(“ping”)
    

    View Slide

42. web inspector
    

    View Slide

43. breakpoints
    js console
    

    View Slide

44. remote web inspector
    

    View Slide

45. adobe shadow
    

    View Slide

46. log4js
    

    View Slide

47. 3) testing
    

    View Slide

48. multi-screen,
    multi-resolution
    

    View Slide

49. multi-device
    

    View Slide

50. multi-browser
    

    View Slide

51. user-agent simulation
    

    View Slide

52. ietester
    

    View Slide

53. unit testing
    

    View Slide

54. pivotal.github.com/
    jasmine
    

    View Slide

55. 2) deployment
    

    View Slide

56. continuous integration
    

    View Slide

57. jenkins-ci.org
    

    View Slide

58. travis-ci.org
    

    View Slide

59. heroku.com
    

    View Slide

60. nodejitsu.com
    

    View Slide

61. 1) sit back and enjoy
    

    View Slide

62. semantic
    ubiquitous
    connected devices
    

    View Slide

63. the end
    

    View Slide