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
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
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