Web development in the modern age

A talk from Internet and Mobile World, Bucharest 2013.

#imworld

How has our approach to developing for the web evolved? What can we do to raise our confidence in our development efforts and help projects run more smoothly?

Video of the talk can be found here: https://www.youtube.com/watch?v=n2LOCOQ-9OI

Transcript

1. IMWORLD
   #
   PHILHAWKSWORTH
   @
   WEB DEVELOPMENT
   IN THE MODERN AGE
   INTERNET & MOBILE WORLD, BUCHAREST, 2013
   

   View Slide

2. PHILHAWKSWORTH
   @
   IMWORLD
   #
   

   View Slide

3. @PHILHAWKSWORTH #IMWORLD
   

   View Slide

4. @PHILHAWKSWORTH #IMWORLD
   BIG AD
   AGENCY
   

   View Slide

5. @PHILHAWKSWORTH #IMWORLD
   PRODUCTS
   PLATFORMS
   SERVICES
   

   View Slide

6. @PHILHAWKSWORTH #IMWORLD
   WE MAKE STUFF
   FOR CLIENTS
   

   View Slide

7. @PHILHAWKSWORTH #IMWORLD
   LOTS OF IT IS
   FOR THE WEB
   

   View Slide

8. @PHILHAWKSWORTH #IMWORLD
   (!SALES)
   

   View Slide

9. @PHILHAWKSWORTH #IMWORLD
   AN APOLOGY
   

   View Slide

10. @PHILHAWKSWORTH #IMWORLD
    BAD TITLE
    

    View Slide

11. @PHILHAWKSWORTH #IMWORLD
    WEB DEVELOPMENT
    IN THE MODERN AGE
    

    View Slide

12. @PHILHAWKSWORTH #IMWORLD
    WEB DEVELOPMENT:
    WE CAN DO BETTER
    

    View Slide

13. @PHILHAWKSWORTH #IMWORLD
    WEB DEVELOPMENT:
    THIS SHIT IS HARDER
    THAN IT LOOKS
    

    View Slide

14. @PHILHAWKSWORTH #IMWORLD
    WEB DEVELOPMENT
    THIS TIME, WE’RE SERIOUS
    

    View Slide

15. @PHILHAWKSWORTH #IMWORLD
    WEB DEVELOPMENT
    TOOLBELT
    ADDY OSMANI / PAUL IRISH
    

    View Slide

16. @PHILHAWKSWORTH #IMWORLD
    CONFIDENCE
    IN THE PROJECT
    IN THE ENGINNEERING
    IN THE TEAM
    

    View Slide

17. @PHILHAWKSWORTH #IMWORLD
    CONTEXT
    

    View Slide

18. @PHILHAWKSWORTH #IMWORLD
    ~/htdocs
    

    View Slide

19. @PHILHAWKSWORTH #IMWORLD
    http://aston.ac.uk/~hawkswpn
    

    View Slide

20. @PHILHAWKSWORTH #IMWORLD
    http://aston.ac.uk/~hawkswpn
    404
    

    View Slide

21. @PHILHAWKSWORTH #IMWORLD
    WRITE TEXT
    SAVE
    REFRESH
    REPEAT
    REJOICE
    

    View Slide

22. View Slide

23. View Slide

24. View Slide

25. @PHILHAWKSWORTH #IMWORLD
    SOPHISTICATION
    BROWSERS / EXPERIENCES / USERS
    

    View Slide

26. @PHILHAWKSWORTH #IMWORLD
    THE TECHNIQUES
    DO NOT MATCH
    THE CHALLENGES
    PROBLEM
    

    View Slide

27. @PHILHAWKSWORTH #IMWORLD
    ENGINEERING
    

    View Slide

28. @PHILHAWKSWORTH #IMWORLD
    I’M A SOFTWARE
    ENGINEER
    WHAT LANGUAGE?
    JAVASCRIPT
    HA HA HA HA...!
    

    View Slide

29. @PHILHAWKSWORTH #IMWORLD
    F#@!!!
    

    View Slide

30. @PHILHAWKSWORTH #IMWORLD
    DEVICES
    

    View Slide

31. @PHILHAWKSWORTH #IMWORLD
    FUTURE FRIENDLY
    

    View Slide

32. @PHILHAWKSWORTH #IMWORLD
    PERFORMANCE
    MATTERS
    

    View Slide

33. @PHILHAWKSWORTH #IMWORLD
    Greg Linden, Amazon
    100ms OF EXTRA
    LOAD TIME CAUSED
    1% DROP IN SALES
    

    View Slide

34. @PHILHAWKSWORTH #IMWORLD
    SERIOUS
    BUSINESS
    

    View Slide

35. @PHILHAWKSWORTH #IMWORLD
    THE TECHNIQUES
    DO NOT MATCH
    THE CHALLENGES
    

    View Slide

36. @PHILHAWKSWORTH #IMWORLD
    THE TECHNIQUES
    MUST MATCH
    THE CHALLENGES
    

    View Slide

37. @PHILHAWKSWORTH #IMWORLD
    TIME TO EVOLVE
    TOOLS / APPROACH / EXPECTATIONS
    

    View Slide

38. @PHILHAWKSWORTH #IMWORLD
    WHERE TO FOCUS?
    

    View Slide

39. @PHILHAWKSWORTH #IMWORLD
    PAYMENT
    INFRASTRUCTURE
    FRONT END
    WIREFRAMES
    SPECIFICATION
    BACK END
    QA
    ITERATION
    REGRESSION
    DESIGN
    CI
    SIGN OFF
    LOGO BIGGER
    SIGN OFF
    DEPLOYMENT
    UAT
    PAYMENT?
    ANALYTICS
    MEASUREMENT
    ITERATION
    

    View Slide

40. @PHILHAWKSWORTH #IMWORLD
    SMARTER DELIVERABLES
    TEAM DYNAMICS
    ENGINEERING APPROACH
    

    View Slide

41. @PHILHAWKSWORTH #IMWORLD
    WIREFRAMES
    THINKING / DOCUMENTATION / APPROVAL
    

    View Slide

42. @PHILHAWKSWORTH #IMWORLD
    WIREFRAMES
    AS PICTURES
    

    View Slide

43. @PHILHAWKSWORTH #IMWORLD
    DEVICES
    

    View Slide

44. @PHILHAWKSWORTH #IMWORLD
    CONFIDENCE?
    

    View Slide

45. @PHILHAWKSWORTH #IMWORLD
    THIS IS NOT
    WORKING
    ANYMORE
    

    View Slide

46. @PHILHAWKSWORTH #IMWORLD
    SMARTER
    DELIVERABLES
    

    View Slide

47. @PHILHAWKSWORTH #IMWORLD
    GET TO THE
    BROWSER
    MORE QUICKLY
    

    View Slide

48. @PHILHAWKSWORTH #IMWORLD
    DEVICES
    

    View Slide

49. @PHILHAWKSWORTH #IMWORLD
    

    View Slide

50. @PHILHAWKSWORTH #IMWORLD
    DESIGN FOR
    CONTENT
    

    View Slide

51. @PHILHAWKSWORTH #IMWORLD
    LOREM IPSUM
    

    View Slide

52. @PHILHAWKSWORTH #IMWORLD
    EARLIER
    DESIGNERS
    DEVELOPERS
    CLIENT
    QA
    

    View Slide

53. @PHILHAWKSWORTH #IMWORLD
    BIG BANG
    

    View Slide

54. @PHILHAWKSWORTH #IMWORLD
    RESPONSIVE
    DESIGN
    WORKFLOW
    STEPHEN HAY
    

    View Slide

55. @PHILHAWKSWORTH #IMWORLD
    SMARTER
    DEVELOPMENT
    WORKFLOW
    

    View Slide

56. @PHILHAWKSWORTH #IMWORLD
    SURPRISE
    CONFIDENCE
    

    View Slide

57. @PHILHAWKSWORTH #IMWORLD
    TEAMS
    

    View Slide

58. @PHILHAWKSWORTH #IMWORLD
    TEAMS
    DISTRIBUTED
    

    View Slide

59. @PHILHAWKSWORTH #IMWORLD
    OFFICES
    TIMEZONES
    LANGUAGES
    

    View Slide

60. @PHILHAWKSWORTH #IMWORLD
    NEW YORK / CHICAGO / AUSTIN
    PORTLAND / SAN FRANCISCO
    LOS ANGELES / LONDON / STOCKHOLM
    BUCHAREST / SINGAPORE / SYDNEY
    SÃO PAULO / BUENOS AIRES
    

    View Slide

61. @PHILHAWKSWORTH #IMWORLD
    COMMUNICATION
    IS CRITICAL
    

    View Slide

62. @PHILHAWKSWORTH #IMWORLD
    SENSE OF TEAM
    IS CRITICAL
    

    View Slide

63. @PHILHAWKSWORTH #IMWORLD
    UNITE
    DISTRIBUTED
    TEAMS
    

    View Slide

64. @PHILHAWKSWORTH #IMWORLD
    DAILY STAND UP
    

    View Slide

65. @PHILHAWKSWORTH #IMWORLD
    

    View Slide

66. @PHILHAWKSWORTH #IMWORLD
    KANBAN -> trello
    

    View Slide

67. @PHILHAWKSWORTH #IMWORLD
    TRELLO
    

    View Slide

68. @PHILHAWKSWORTH #IMWORLD
    IRC / HIPCHAT / CAMPFIRE
    

    View Slide

69. @PHILHAWKSWORTH #IMWORLD
    AUTOMATION
    HUBOT / IFTTT
    INFORMATION
    of
    

    View Slide

70. @PHILHAWKSWORTH #IMWORLD
    REGULAR
    DELIVERIES
    CELEBRATE
    

    View Slide

71. @PHILHAWKSWORTH #IMWORLD
    RETROSPECTIVES
    CELEBRATE
    

    View Slide

72. @PHILHAWKSWORTH #IMWORLD
    NEVER UNDERESTIMATE
    THE POWER
    ANIMATED GIF
    of an
    

    View Slide

73. @PHILHAWKSWORTH #IMWORLD
    NEVER UNDERESTIMATE
    THE POWER
    ANIMATED GIF
    of an
    

    View Slide

74. @PHILHAWKSWORTH #IMWORLD
    QUALITY
    ASSURANCE
    

    View Slide

75. @PHILHAWKSWORTH #IMWORLD
    AGILE
    

    View Slide

76. @PHILHAWKSWORTH #IMWORLD
    REDUCE THE COST
    OF CHANGE
    

    View Slide

77. @PHILHAWKSWORTH #IMWORLD
    ENGINEERING
    APPROACH
    

    View Slide

78. @PHILHAWKSWORTH #IMWORLD
    LOOK TO
    OPEN SOURCE
    PROJECTS
    

    View Slide

79. @PHILHAWKSWORTH #IMWORLD
    BRACKETS
    

    View Slide

80. @PHILHAWKSWORTH #IMWORLD
    DEVELOPED
    BY ADOBE
    IN THE OPEN
    

    View Slide

81. TRELLO
    

    View Slide

82. @PHILHAWKSWORTH #IMWORLD
    IF AT FIRST YOU
    DON’T SUCCEED
    ...YOU ARE NOT
    CHUCK NORRIS
    

    View Slide

83. @PHILHAWKSWORTH #IMWORLD
    YOU ARE NOT
    CHUCK NORRIS
    

    View Slide

84. @PHILHAWKSWORTH #IMWORLD
    UNIT TESTING
    

    View Slide

85. @PHILHAWKSWORTH #IMWORLD
    I’M A SOFTWARE
    ENGINEER
    WHAT LANGUAGE?
    JAVASCRIPT
    HA HA HA HA...!
    

    View Slide

86. @PHILHAWKSWORTH #IMWORLD
    pyunit, runit, junit, csunit ...
    UNIT TESTING
    

    View Slide

87. @PHILHAWKSWORTH #IMWORLD
    pyunit, runit, junit, csunit ...
    UNIT TESTING
    qunit, mocha, jasmine, casperjs...
    

    View Slide

88. @PHILHAWKSWORTH #IMWORLD
    ADDING TESTS
    TO YOUR
    WORKFLOW
    

    View Slide

89. @PHILHAWKSWORTH #IMWORLD
    AUTOMATE
    EVERYTHING
    

    View Slide

90. @PHILHAWKSWORTH #IMWORLD
    MAKE / RAKE / FABRIC
    

    View Slide

91. @PHILHAWKSWORTH #IMWORLD
    GRUNT / YEOMAN
    

    View Slide

92. @PHILHAWKSWORTH #IMWORLD
    GRUNT
    

    View Slide

93. @PHILHAWKSWORTH #IMWORLD
    GRUNT
    $ grunt
    Running "jshint:src" (jshint) task
    >> 1 file lint free.
    Running "qunit:files" (qunit) task
    Testing test/tiny-pubsub.html....OK
    >> 4 assertions passed (23ms)
    Running "concat:dist" (concat) task
    File "dist/ba-tiny-pubsub.js" created.
    Running "uglify:dist" (uglify) task
    File "dist/ba-tiny-pubsub.min.js" created.
    Uncompressed size: 389 bytes.
    Compressed size: 119 bytes gzipped (185 bytes min).
    

    View Slide

94. @PHILHAWKSWORTH #IMWORLD
    YEOMAN
    

    View Slide

95. @PHILHAWKSWORTH #IMWORLD
    INFRASTRUCTURE
    

    View Slide

96. @PHILHAWKSWORTH #IMWORLD
    HOSTING
    AS A SERVICE
    

    View Slide

97. @PHILHAWKSWORTH #IMWORLD
    AS A SERVICE
    VERSION
    CONTROL
    

    View Slide

98. @PHILHAWKSWORTH #IMWORLD
    AS A SERVICE
    ISSUE TRACKING
    

    View Slide

99. @PHILHAWKSWORTH #IMWORLD
    AS A SERVICE
    VIRTUALISATION
    

    View Slide

100. @PHILHAWKSWORTH #IMWORLD
     AS A SERVICE
     DATABASE
     

     View Slide

101. @PHILHAWKSWORTH #IMWORLD
     AAS
     

     View Slide

102. @PHILHAWKSWORTH #IMWORLD
     SOURCE CODE CONTROL
     STATIC HOSTING
     VIRTUAL PRIVATE HOSTING
     CONTINUOUS INTEGRATION
     ISSUE TRACKING
     AUTOMATED DEPLOYMENT
     SOLVED
     

     View Slide

103. @PHILHAWKSWORTH #IMWORLD
     WRITE TEXT
     SAVE
     REFRESH
     REPEAT
     REJOICE
     

     View Slide

104. @PHILHAWKSWORTH #IMWORLD
     TO FINISH
     

     View Slide

105. @PHILHAWKSWORTH #IMWORLD
     USE THE SOLUTIONS WHICH EXIST
     GET TO THE BROWSER!
     REMOVE SURPRISES
     RAISE VISIBILITY
     AUTOMATE EVERYTHING
     HANG OUT TOGETHER
     

     View Slide

106. THANKS
     LINKS
     http://www.flickr.com/photos/brad_frost/7387759388
     http://www.flickr.com/photos/otacke/10034579444/
     http://hawksworx.com
     http://www.paulirish.com/2012/talk-tooling-the-webapp-development-stack
     http://addyosmani.com/blog/improved-developer-tooling-and-yeoman
     http://yeoman.io
     http://gruntjs.com
     http://trello.com
     http://bradfrostweb.com/blog/post/development-is-design
     http://hubot.github.com
     http://mongohq.com
     

     View Slide

107. @PHILHAWKSWORTH
     #IMWORLD
     http://bit.ly/modern-age
     THANKS
     

     View Slide