Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mobile Web Development Workflow

Addy Osmani
October 29, 2013

Mobile Web Development Workflow

Tools for keeping you productive during mobile web development. Given at #Frontrend in Tokyo.

Addy Osmani

October 29, 2013
Tweet

More Decks by Addy Osmani

Other Decks in Programming

Transcript

  1. @addyosmani
    +AddyOsmani
    Frontrend, Tokyo.
    Mobile Web Development Workflow
    Improving your happiness and productivity during development

    View Slide

  2. Έͳ͞Μ͜Μʹͪ͸
    ࢲ͸ΞσΟʔΦζϚχͳͬ͠ʔ
    ΑΖ͘͠ͳͬ͠ʔ

    View Slide

  3. This is the web today.

    View Slide

  4. "More people have access
    to mobile than to running
    water and toothbrushes"
    http://blogs.worldbank.org/africacan/more-cell-phones-than-toilets

    View Slide

  5. "87% of mobile users expect
    sites to load at least as fast, or
    faster than on their desktop."
    http://www.strangeloopnetworks.com/web-performance-infographics/

    View Slide

  6. "57% will abandon a site
    after waiting 3 seconds for
    a page to load"
    http://www.strangeloopnetworks.com/web-performance-infographics/

    View Slide

  7. This is most of us today.
    This is most developers today.

    View Slide

  8. Let’s change that.

    View Slide

  9. Developing mobile-first
    should now be assumed.

    View Slide

  10. Tools can help us find and fix
    mobile regressions earlier.

    View Slide

  11. How do you test across
    multiple devices?

    View Slide

  12. Re-checking your site on mobile is a pain

    View Slide

  13. Luckily tools can help us test more efficiently

    View Slide

  14. Navigate all devices to the
    same URL

    View Slide

  15. Remote Preview

    View Slide

  16. A lo-fi, free option
    Remote Preview

    View Slide

  17. Remote Preview
    [+] Free!
    [-] Loads page into iframe
    [-] Requires user to type url in page
    [+] Central place to change url to load into iframe after initial
    set-up
    bit.ly/remotepreview

    View Slide

  18. Synchronize navigation &
    get screenshots.

    View Slide

  19. Adobe Edge Inspect CC

    View Slide

  20. View Slide

  21. Remote debugging with Weinre

    View Slide

  22. View Slide

  23. Get device screenshots

    View Slide

  24. Adobe Edge Inspect
    [-] Displays site in a WebView
    [+] Supports live reload
    [+] Extension to load any page you view in Chrome
    [-] Can’t account for localhost (i.e. switch to ip addr. of machine
    on local network)
    [+] Remote Inspect via Weinre
    bit.ly/edgeinspect

    View Slide

  25. Refresh all devices on edit

    View Slide

  26. Grunt + LiveReload

    View Slide

  27. View Slide

  28. Grunt + LiveReload
    [+] Free!
    [+] Easily see how each change you save looks across devices
    [+] Works with any modern mobile browser
    [-] Requires you to use Grunt for your build process
    bit.ly/gruntsync

    View Slide

  29. Synchronize cross-device
    edits without saving

    View Slide

  30. Emmet LiveStyle

    View Slide

  31. View Slide

  32. Emmet LiveStyle
    [+] Free!
    [+] Works with Chrome, Safari and Sublime Text
    [+] Cross-platform
    [-] Requires you to install a package or extension
    livestyle.emmet.io

    View Slide

  33. Synchronize scrolls, clicks,
    interactions as well as navigation

    View Slide

  34. GhostLab

    View Slide

  35. Sync desktop & mobile navigation

    View Slide

  36. Sync everything?

    View Slide

  37. View Slide

  38. Remote debugging
    Also done through Weinre

    View Slide

  39. Ghostlab
    [+] Creates server to folder contents
    [+] Syncs scrolls, clicks and reloads
    [-] Needs typing into browser on each device
    [+] Allows to match up scrolling and input
    [-] OS X Only
    [+] Debugging via Weinre
    bit.ly/ghostapp

    View Slide

  40. Mobile Debugging

    View Slide

  41. DevTools Remote Debugging
    RAW USB debugging and Port Forwarding now supported

    View Slide

  42. iOS WebKit Debug Proxy
    bit.ly/webkitdebug

    View Slide

  43. jshyDebugger
    Debug mobile web applications and hybrid/WebView/PhoneGap apps on Android devices

    View Slide

  44. jshyDebugger Live Editing

    View Slide

  45. jshyDebugger Timeline

    View Slide

  46. jshyDebugger ADB plugin support

    View Slide

  47. MIHTool
    bit.ly/mihtool

    View Slide

  48. MIHTool

    View Slide

  49. jsConsole
    bit.ly/jsconsole
    Remotely inject code into and debug any browser window or device.

    View Slide

  50. View Slide

  51. Aardwolf
    Remote JavaScript debugger for Android / iOS / Windows Phone 7 / BlackBerry OS 6
    bit.ly/aardwolfapp

    View Slide

  52. Visual regression testing

    View Slide

  53. Wraith
    bit.ly/wraithapp

    View Slide

  54. View Slide

  55. Huxley
    bit.ly/huxleyapp

    View Slide

  56. PhantomCSS
    bit.ly/phantomcss
    A CasperJS module for visual regression testing

    View Slide

  57. Simulate real-network
    conditions

    View Slide

  58. charlesproxy.com

    View Slide

  59. View Slide

  60. Network Link Conditioner

    View Slide

  61. slowyapp.com

    View Slide

  62. Netem, WANEm (Linux)
    bit.ly/linuxnetem

    View Slide

  63. Fiddler (Win/Mac/Linux)
    fiddler2.com

    View Slide

  64. Captures all traffic
    Playback recorded
    traffic sessions

    View Slide

  65. Devices, Simulators &
    Emulators

    View Slide

  66. Screenshots or live testing?

    View Slide

  67. BrowserStack + local tunneling

    View Slide

  68. View Slide

  69. Sauce Labs
    Screenshots & Recordings

    View Slide

  70. View Slide

  71. Simulators & Emulators
    bit.ly/simulatorlist
    Massive, well-maintained list of options available

    View Slide

  72. Do I even need an emulator?
    Chrome DevTools Emulation

    View Slide

  73. Build tools

    View Slide

  74. grunt-responsive-images
    grunt-contrib-imagemin
    grunt-autoshot

    View Slide

  75. Grunt
    PageSpeed

    View Slide

  76. Yeoman + Mobile

    View Slide

  77. generator-mobile
    • Scaffold support for Bootstrap 3, TopCoat, Zurb Foundation and Pure
    • Generates responsive images for srcset
    • Generates screenshots of your site at different viewport sizes
    • Uses BrowserStack for cloud device testing
    • Includes FastClick to avoid iOS touch delays
    • Includes boilerplate for FullScreen API
    • Includes only the Modernizr feature detects your projects uses
    • Converts images to WebP
    • Includes a polyfill for async. localStorage

    View Slide

  78. View Slide

  79. Performance Insights

    View Slide

  80. Remote debugging + DevTools Timeline

    View Slide

  81. Rendering Performance Tooling

    View Slide

  82. PageSpeed Insights For Mobile

    View Slide

  83. PageSpeed Insights
    bit.ly/pagespeedi

    View Slide

  84. mod_pagespeed
    bit.ly/modpagespeed

    View Slide

  85. Phantomas Metrics Collector

    View Slide

  86. View Slide

  87. 92 predefined metrics
    Export to JSON
    bit.ly/phantoma

    View Slide

  88. Telemetry
    Python wrapper around RDB.
    bit.ly/telemetrych

    View Slide

  89. Generate Device Art

    View Slide

  90. Android Device
    Art Generator

    View Slide

  91. bit.ly/deviceart

    View Slide

  92. placeit.net

    View Slide

  93. View Slide

  94. mockuphone.com

    View Slide

  95. View Slide

  96. Lots of tooling options available.

    View Slide

  97. Use tools. not rules.

    View Slide

  98. @addyosmani
    +AddyOsmani
    ͋Γ͕ͱ͏͍͟͝·ͨ͠ͳͬ͠ʔ

    View Slide

  99. Next up..

    View Slide

  100. View Slide

  101. View Slide