$30 off During Our Annual Pro Sale. View Details »

Web development in the modern age

Phil Hawksworth
October 09, 2013
Technology
201
9.9k

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

Phil Hawksworth

October 09, 2013
Tweet

More Decks by Phil Hawksworth

See All by Phil Hawksworth
Next wave infrastructure – and how to use it for an easier life
philhawksworth
2
180
Netlify Show and Tell
philhawksworth
2
230
Serving for the win - deployments and infrastructure for the rest of us
philhawksworth
0
780
Stealthy git - solving CMS woes with git, on the quiet
philhawksworth
2
300
Next Wave Infrastructure
philhawksworth
4
1.1k
Easy Isomorphic Rendering on the JAMStack
philhawksworth
2
430
Tightropes and Springboards
philhawksworth
0
240
Dynamic Static Site Strategies from Smashing Conf NY
philhawksworth
5
1.1k
Static sites go all Hollywood
philhawksworth
17
3.7k

Other Decks in Technology

See All in Technology
「極意本」サンプルコードをクラウド上で動かそう
upura
1
750
uGUI の自動操作の考え方と操作方法
orgachem
PRO
0
560
DMMオンラインサロン エンジニア採用資料/ for-software-engineers
onlinesalon
0
3.6k
継続的なコツコツ技術広報とブランディング磨き込みの過程と課題/engineering-brand
nishiuma
0
110
ココナラでエンジニアマネージャーをやってみた！
coconala_engineer
1
120
EventStormingとRDRA2.0で大規模レガシーシステムのフルリニューアルPJに挑む
leveragestech
0
1.3k
極力楽してKubernetes環境を構築したいwith AWS, terraform, EKS, Argo-CD
bigwheel
0
140
CI/CDプロセスの拡充からはじめる技術的負債の解消/Eliminate technical debt, starting with expanding CI/CD processes
onecareer_tech
0
280
朝起こしてくれるメイドさんが欲しい (LT) - NIFTY Tech Day 2023
niftycorp
1
100
⾃律的な開発チームを⽀えるためのSLO運⽤
sansantech
PRO
5
870
ミチビク株式会社エンジニアカンパニーデック
knsg16
0
2.2k
device mapperによるディスクI/O障害のエミュレーション
sat
PRO
7
2.1k

Featured

See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
26
45k
Writing Fast Ruby
sferik
615
59k
Three Pipe Problems
jasonvnalue
89
9.3k
Intergalactic Javascript Robots from Outer Space
tanoku
264
26k
Documentation Writing (for coders)
carmenintech
55
3.5k
Making Projects Easy
brettharned
105
5.2k
The Art of Programming - Codeland 2020
erikaheidi
39
12k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
656
120k
Statistics for Hackers
jakevdp
788
220k
Atom: Resistance is Futile
akmur
257
24k
We Have a Design System, Now What?
morganepeng
41
6.5k

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