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

Mobile Workflow

Mobile Workflow

Tools and tips for improving your mobile web development workflow.

With thanks to LukeW and Brad Frost for their device imagery.

Addy Osmani

November 17, 2013
Tweet

More Decks by Addy Osmani

Other Decks in Programming

Transcript

  1. MOBILE WORKFLOW
    IMPROVING YOUR MOBILE WEB DEVELOPMENT PRODUCTIVITY
    @addyosmani

    View Slide

  2. This is the web today.

    View Slide

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

    View Slide

  4. "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

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

    View Slide

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

    View Slide

  7. Let’s change that.

    View Slide

  8. Developing mobile-first
    should now be assumed.

    View Slide

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

    View Slide

  10. How do you test across
    multiple devices?

    View Slide

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

    View Slide

  12. Luckily tools can help us test more efficiently

    View Slide

  13. Navigate all devices to the
    same URL

    View Slide

  14. Remote Preview

    View Slide

  15. A lo-fi, free option
    Remote Preview

    View Slide

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

  17. Synchronize navigation &
    get screenshots.

    View Slide

  18. Adobe Edge Inspect CC

    View Slide

  19. View Slide

  20. Remote debugging with Weinre

    View Slide

  21. View Slide

  22. Get device screenshots

    View Slide

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

  24. Refresh all devices on edit

    View Slide

  25. Grunt + LiveReload

    View Slide

  26. View Slide

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

  28. Synchronize cross-device
    edits without saving

    View Slide

  29. Emmet LiveStyle

    View Slide

  30. View Slide

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

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

    View Slide

  33. GhostLab

    View Slide

  34. Sync desktop & mobile navigation

    View Slide

  35. Sync everything?

    View Slide

  36. View Slide

  37. Even syncs forms, scroll, clicks
    and supports LiveReload.

    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
    Many improvements over the past year

    View Slide

  42. RAW USB Debugging!
    USB debugging without a plugin

    View Slide

  43. Firefox for Android + ADB

    View Slide

  44. Remote debugging Safari

    View Slide

  45. Debug iOS WebView

    View Slide

  46. iOS WebKit Debug Proxy
    bit.ly/webkitdebug

    View Slide

  47. Debug WebView/PhoneGap
    on Android

    View Slide

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

    View Slide

  49. jshyDebugger Live Editing

    View Slide

  50. jshyDebugger Timeline

    View Slide

  51. jshyDebugger ADB plugin support

    View Slide

  52. Debug directly on iOS

    View Slide

  53. MIHTool
    bit.ly/mihtool

    View Slide

  54. MIHTool

    View Slide

  55. Remote JavaScript consoles

    View Slide

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

    View Slide

  57. View Slide

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

    View Slide

  59. Simulate real-network
    conditions

    View Slide

  60. charlesproxy.com

    View Slide

  61. View Slide

  62. Network Link Conditioner

    View Slide

  63. slowyapp.com

    View Slide

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

    View Slide

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

    View Slide

  66. Captures all traffic
    Playback recorded
    traffic sessions

    View Slide

  67. Visual regression testing

    View Slide

  68. Wraith
    bit.ly/wraithapp

    View Slide

  69. View Slide

  70. Huxley
    bit.ly/huxleyapp

    View Slide

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

    View Slide

  72. Device Testing

    View Slide

  73. It’s tough.

    View Slide

  74. Get real devices.

    View Slide

  75. Screenshots or live testing?

    View Slide

  76. BrowserStack + local tunneling

    View Slide

  77. View Slide

  78. grunt-browserstack
    Useful BrowserStack task for Grunt
    launchpad
    You can launch browsers! From NodeJS! Local ones!
    Remote ones! Browserstack ones!

    View Slide

  79. Sauce Labs
    Screenshots & Recordings

    View Slide

  80. View Slide

  81. grunt-saucelabs
    Grunt task running tests using Sauce Labs.
    Supports Qunit and Jasmine tests
    node-saucelabs
    Node wrapper around BrowserStack API

    View Slide

  82. Device Anywhere

    View Slide

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

    View Slide

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

    View Slide

  85. Emulate Viewport
    Chrome DevTools Emulation

    View Slide

  86. Emulate Touch Events
    Chrome DevTools Emulation

    View Slide

  87. Emulate Orientation
    Chrome DevTools Emulation

    View Slide

  88. Emulate User Agent
    Chrome DevTools Emulation

    View Slide

  89. Emulate Geolocation
    Chrome DevTools Emulation

    View Slide

  90. Build tooling

    View Slide

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

    View Slide

  92. Grunt
    PageSpeed

    View Slide

  93. View Slide

  94. Yeoman + Mobile

    View Slide

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

  96. View Slide

  97. Performance Insights

    View Slide

  98. Remote debugging + DevTools Timeline

    View Slide

  99. Rendering Performance Tooling

    View Slide

  100. PageSpeed Insights For Mobile

    View Slide

  101. PageSpeed Insights
    bit.ly/pagespeedi

    View Slide

  102. mod_pagespeed
    bit.ly/modpagespeed

    View Slide

  103. bit.ly/mobitest
    Returns total page load times, individual request headers and timings from WebPageTest
    using default browsers in iOS/Android/BB
    MobiTest

    View Slide

  104. View Slide

  105. Phantomas Metrics Collector

    View Slide

  106. Is that really the logo?

    View Slide

  107. View Slide

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

    View Slide

  109. Need more insights? Chrome
    Graphics team have you covered.

    View Slide

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

    View Slide

  111. Generate Device Art

    View Slide

  112. Android Device
    Art Generator

    View Slide

  113. bit.ly/deviceart

    View Slide

  114. Pro-tip: Grab a screenshot from
    Android
    adb shell screencap -p | perl -pe 's/\x0D\x0A/\x0A/g' > screen.png
    Using ADB:

    View Slide

  115. placeit.net

    View Slide

  116. View Slide

  117. mockuphone.com

    View Slide

  118. View Slide

  119. Lots of tooling options available.

    View Slide

  120. Use tools. not rules.

    View Slide

  121. @addyosmani
    +AddyOsmani
    Thanks!

    View Slide

  122. Next up..

    View Slide

  123. View Slide

  124. View Slide