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

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

More Decks by Addy Osmani

Other Decks in Programming


  1. @addyosmani +AddyOsmani Frontrend, Tokyo. Mobile Web Development Workflow Improving your

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

  3. This is the web today.

  4. "More people have access to mobile than to running water

    and toothbrushes" http://blogs.worldbank.org/africacan/more-cell-phones-than-toilets
  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/
  6. "57% will abandon a site after waiting 3 seconds for

    a page to load" http://www.strangeloopnetworks.com/web-performance-infographics/
  7. This is most of us today. This is most developers

  8. Let’s change that.

  9. Developing mobile-first should now be assumed.

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

  11. How do you test across multiple devices?

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

  13. Luckily tools can help us test more efficiently

  14. Navigate all devices to the same URL

  15. Remote Preview

  16. A lo-fi, free option Remote Preview

  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
  18. Synchronize navigation & get screenshots.

  19. Adobe Edge Inspect CC

  20. None
  21. Remote debugging with Weinre

  22. None
  23. Get device screenshots

  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
  25. Refresh all devices on edit

  26. Grunt + LiveReload

  27. None
  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
  29. Synchronize cross-device edits without saving

  30. Emmet LiveStyle

  31. None
  32. Emmet LiveStyle [+] Free! [+] Works with Chrome, Safari and

    Sublime Text [+] Cross-platform [-] Requires you to install a package or extension livestyle.emmet.io
  33. Synchronize scrolls, clicks, interactions as well as navigation

  34. GhostLab

  35. Sync desktop & mobile navigation

  36. Sync everything?

  37. None
  38. Remote debugging Also done through Weinre

  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
  40. Mobile Debugging

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

  42. iOS WebKit Debug Proxy bit.ly/webkitdebug

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

  44. jshyDebugger Live Editing

  45. jshyDebugger Timeline

  46. jshyDebugger ADB plugin support

  47. MIHTool bit.ly/mihtool

  48. MIHTool

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

    window or device.
  50. None
  51. Aardwolf Remote JavaScript debugger for Android / iOS / Windows

    Phone 7 / BlackBerry OS 6 bit.ly/aardwolfapp
  52. Visual regression testing

  53. Wraith bit.ly/wraithapp

  54. None
  55. Huxley bit.ly/huxleyapp

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

  57. Simulate real-network conditions

  58. charlesproxy.com

  59. None
  60. Network Link Conditioner

  61. slowyapp.com

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

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

  64. Captures all traffic Playback recorded traffic sessions

  65. Devices, Simulators & Emulators

  66. Screenshots or live testing?

  67. BrowserStack + local tunneling

  68. None
  69. Sauce Labs Screenshots & Recordings

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

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

  73. Build tools

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

  75. Grunt PageSpeed

  76. Yeoman + Mobile

  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
  78. None
  79. Performance Insights

  80. Remote debugging + DevTools Timeline

  81. Rendering Performance Tooling

  82. PageSpeed Insights For Mobile

  83. PageSpeed Insights bit.ly/pagespeedi

  84. mod_pagespeed bit.ly/modpagespeed

  85. Phantomas Metrics Collector

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

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

  89. Generate Device Art

  90. Android Device Art Generator

  91. bit.ly/deviceart

  92. placeit.net

  93. None
  94. mockuphone.com

  95. None
  96. Lots of tooling options available.

  97. Use tools. not rules.

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

  99. Next up..

  100. None
  101. None