Mobile Web Development Workflow

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

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