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
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 today.
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
21. Remote debugging with Weinre
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
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
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?
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 supported
42. iOS WebKit Debug Proxy bit.ly/webkitdebug
43. jshyDebugger Debug mobile web applications and hybrid/WebView/PhoneGap apps on Android devices
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.
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
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
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
69. Sauce Labs Screenshots & Recordings
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
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
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
94. mockuphone.com
96. Lots of tooling options available.
97. Use tools. not rules.
98. @addyosmani +AddyOsmani ͋Γ͕ͱ͏͍͟͝·ͨ͠ͳͬ͠ʔ
99. Next up..