Web development in the modern age

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

465724d73fe3a92c0879fdfb43a3a6f3?s=128

Phil Hawksworth

October 09, 2013
Tweet

Transcript

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

    INTERNET & MOBILE WORLD, BUCHAREST, 2013
  2. PHILHAWKSWORTH @ IMWORLD #

  3. @PHILHAWKSWORTH #IMWORLD

  4. @PHILHAWKSWORTH #IMWORLD BIG AD AGENCY

  5. @PHILHAWKSWORTH #IMWORLD PRODUCTS PLATFORMS SERVICES

  6. @PHILHAWKSWORTH #IMWORLD WE MAKE STUFF FOR CLIENTS

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

  8. @PHILHAWKSWORTH #IMWORLD (!SALES)

  9. @PHILHAWKSWORTH #IMWORLD AN APOLOGY

  10. @PHILHAWKSWORTH #IMWORLD BAD TITLE

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

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

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

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

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

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

    THE TEAM
  17. @PHILHAWKSWORTH #IMWORLD CONTEXT

  18. @PHILHAWKSWORTH #IMWORLD ~/htdocs

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

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

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

  22. None
  23. None
  24. None
  25. @PHILHAWKSWORTH #IMWORLD SOPHISTICATION BROWSERS / EXPERIENCES / USERS

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

  27. @PHILHAWKSWORTH #IMWORLD ENGINEERING

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

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

  30. @PHILHAWKSWORTH #IMWORLD DEVICES

  31. @PHILHAWKSWORTH #IMWORLD FUTURE FRIENDLY

  32. @PHILHAWKSWORTH #IMWORLD PERFORMANCE MATTERS

  33. @PHILHAWKSWORTH #IMWORLD Greg Linden, Amazon 100ms OF EXTRA LOAD TIME

    CAUSED 1% DROP IN SALES
  34. @PHILHAWKSWORTH #IMWORLD SERIOUS BUSINESS

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

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

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

  38. @PHILHAWKSWORTH #IMWORLD WHERE TO FOCUS?

  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
  40. @PHILHAWKSWORTH #IMWORLD SMARTER DELIVERABLES TEAM DYNAMICS ENGINEERING APPROACH

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

  42. @PHILHAWKSWORTH #IMWORLD WIREFRAMES AS PICTURES

  43. @PHILHAWKSWORTH #IMWORLD DEVICES

  44. @PHILHAWKSWORTH #IMWORLD CONFIDENCE?

  45. @PHILHAWKSWORTH #IMWORLD THIS IS NOT WORKING ANYMORE

  46. @PHILHAWKSWORTH #IMWORLD SMARTER DELIVERABLES

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

  48. @PHILHAWKSWORTH #IMWORLD DEVICES

  49. @PHILHAWKSWORTH #IMWORLD

  50. @PHILHAWKSWORTH #IMWORLD DESIGN FOR CONTENT

  51. @PHILHAWKSWORTH #IMWORLD LOREM IPSUM

  52. @PHILHAWKSWORTH #IMWORLD EARLIER DESIGNERS DEVELOPERS CLIENT QA

  53. @PHILHAWKSWORTH #IMWORLD BIG BANG

  54. @PHILHAWKSWORTH #IMWORLD RESPONSIVE DESIGN WORKFLOW STEPHEN HAY

  55. @PHILHAWKSWORTH #IMWORLD SMARTER DEVELOPMENT WORKFLOW

  56. @PHILHAWKSWORTH #IMWORLD SURPRISE CONFIDENCE

  57. @PHILHAWKSWORTH #IMWORLD TEAMS

  58. @PHILHAWKSWORTH #IMWORLD TEAMS DISTRIBUTED

  59. @PHILHAWKSWORTH #IMWORLD OFFICES TIMEZONES LANGUAGES

  60. @PHILHAWKSWORTH #IMWORLD NEW YORK / CHICAGO / AUSTIN PORTLAND /

    SAN FRANCISCO LOS ANGELES / LONDON / STOCKHOLM BUCHAREST / SINGAPORE / SYDNEY SÃO PAULO / BUENOS AIRES
  61. @PHILHAWKSWORTH #IMWORLD COMMUNICATION IS CRITICAL

  62. @PHILHAWKSWORTH #IMWORLD SENSE OF TEAM IS CRITICAL

  63. @PHILHAWKSWORTH #IMWORLD UNITE DISTRIBUTED TEAMS

  64. @PHILHAWKSWORTH #IMWORLD DAILY STAND UP

  65. @PHILHAWKSWORTH #IMWORLD

  66. @PHILHAWKSWORTH #IMWORLD KANBAN -> trello

  67. @PHILHAWKSWORTH #IMWORLD TRELLO

  68. @PHILHAWKSWORTH #IMWORLD IRC / HIPCHAT / CAMPFIRE

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

  70. @PHILHAWKSWORTH #IMWORLD REGULAR DELIVERIES CELEBRATE

  71. @PHILHAWKSWORTH #IMWORLD RETROSPECTIVES CELEBRATE

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

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

  74. @PHILHAWKSWORTH #IMWORLD QUALITY ASSURANCE

  75. @PHILHAWKSWORTH #IMWORLD AGILE

  76. @PHILHAWKSWORTH #IMWORLD REDUCE THE COST OF CHANGE

  77. @PHILHAWKSWORTH #IMWORLD ENGINEERING APPROACH

  78. @PHILHAWKSWORTH #IMWORLD LOOK TO OPEN SOURCE PROJECTS

  79. @PHILHAWKSWORTH #IMWORLD BRACKETS

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

  81. TRELLO

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

    NOT CHUCK NORRIS
  83. @PHILHAWKSWORTH #IMWORLD YOU ARE NOT CHUCK NORRIS

  84. @PHILHAWKSWORTH #IMWORLD UNIT TESTING

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

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

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

    mocha, jasmine, casperjs...
  88. @PHILHAWKSWORTH #IMWORLD ADDING TESTS TO YOUR WORKFLOW

  89. @PHILHAWKSWORTH #IMWORLD AUTOMATE EVERYTHING

  90. @PHILHAWKSWORTH #IMWORLD MAKE / RAKE / FABRIC

  91. @PHILHAWKSWORTH #IMWORLD GRUNT / YEOMAN

  92. @PHILHAWKSWORTH #IMWORLD GRUNT

  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).
  94. @PHILHAWKSWORTH #IMWORLD YEOMAN

  95. @PHILHAWKSWORTH #IMWORLD INFRASTRUCTURE

  96. @PHILHAWKSWORTH #IMWORLD HOSTING AS A SERVICE

  97. @PHILHAWKSWORTH #IMWORLD AS A SERVICE VERSION CONTROL

  98. @PHILHAWKSWORTH #IMWORLD AS A SERVICE ISSUE TRACKING

  99. @PHILHAWKSWORTH #IMWORLD AS A SERVICE VIRTUALISATION

  100. @PHILHAWKSWORTH #IMWORLD AS A SERVICE DATABASE

  101. @PHILHAWKSWORTH #IMWORLD AAS

  102. @PHILHAWKSWORTH #IMWORLD SOURCE CODE CONTROL STATIC HOSTING VIRTUAL PRIVATE HOSTING

    CONTINUOUS INTEGRATION ISSUE TRACKING AUTOMATED DEPLOYMENT SOLVED
  103. @PHILHAWKSWORTH #IMWORLD WRITE TEXT SAVE REFRESH REPEAT REJOICE

  104. @PHILHAWKSWORTH #IMWORLD TO FINISH

  105. @PHILHAWKSWORTH #IMWORLD USE THE SOLUTIONS WHICH EXIST GET TO THE

    BROWSER! REMOVE SURPRISES RAISE VISIBILITY AUTOMATE EVERYTHING HANG OUT TOGETHER
  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
  107. @PHILHAWKSWORTH #IMWORLD http://bit.ly/modern-age THANKS