The Web. The broken workflow, and the way out

Øredev, Malmö, November 2015

Transcript

1. The Web. The broken workflow, and the way out Øredev, Malmö, November 2015 Kenneth Auchenberg
2. @auchenberg 2/71
3. @auchenberg 3/71
4. @auchenberg 4/71
5. @auchenberg 5/71
6. DevTools. DevTools. DevTools @auchenberg 6/71
7. Our industry have a DevTools dogma. @auchenberg 7/71
8. 2007: IE Developer Toolbar @auchenberg http://sixrevisions.com/tools/internet_explorer_extensions_addons_web_developers/ 8/71
9. 2015: Chrome DevTools @auchenberg 9/71
10. Moden DevTool's are collections of tools @auchenberg 10/71
11. Still a typical front-end workflow @auchenberg 11/71
12. Question Is this really the best we can do? @auchenberg 12/71
13. Thought experiment @auchenberg Why do I need to learn a new DevTools for each browser? Why do I have to use different tools for authoring and debugging? Why isn't my editor integrated with my browsers? Why can't I decide which DevTools to use with my browsers? Why can't I use DevTools to debug my mobile apps? Why can't I leverage the browser logic in my new fancy tool? Why are DevTools bundled with our browsers? · · · · · · · 13/71
14. Debugging context @auchenberg 14/71
15. A fraction of our screens @auchenberg 15/71
16. Authoring context @auchenberg 16/71
17. Our workflow is broken Authoring tools !== Debugging tools @auchenberg 17/71
18. Disconnect @auchenberg 18/71
19. What if... Authoring tools === Debugging tools @auchenberg 19/71
20. What if... @auchenberg 20/71
21. We have tried, and failed @auchenberg 21/71
22. Security model @auchenberg 22/71
23. There's a better way! @auchenberg 23/71
24. There's a better way! Remote debugging protocols @auchenberg 24/71
25. No common protocol @auchenberg 25/71
26. RemoteDebug was born @auchenberg 26/71
27. RemoteDebug vision @auchenberg 27/71
28. RemoteDebug vision An API to our browsers. @auchenberg 28/71
29. Isn't this WebDriver? It's a low-level API to our browsers. @auchenberg 29/71
30. RemoteDebug So how far are we? @auchenberg 30/71
31. @auchenberg Protocol adaptors 31/71
32. Protocol adaptors @auchenberg 32/71
33. Safari protocol adaptor @auchenberg 33/71
34. Firefox protocol adaptor @auchenberg 34/71
35. IE protocol adaptor (Edge?) @auchenberg 35/71
36. @auchenberg RemoteDebug Gateway 36/71
37. RemoteDebug Gateway @auchenberg 37/71
38. RemoteDebug Gateway Demo @auchenberg 38/71
39. RemoteDebug Gateway @auchenberg 39/71
40. @auchenberg Integrations 40/71
41. Pioneer: Adobe brackets @auchenberg 41/71
42. Many other editors @auchenberg 42/71
43. @auchenberg New tools 43/71
44. Calibre @auchenberg 44/71
45. @auchenberg Re-use across platforms 45/71
46. Node Inspector (Strongloop) @auchenberg 46/71
47. Node.js is adopting the Chrome protocol @auchenberg 47/71
48. PonyDebugger (Square) @auchenberg 48/71
49. Stetho (Facebook) @auchenberg 49/71
50. Stetho (Facebook) @auchenberg 50/71
51. @auchenberg Similar initiatives 51/71
52. Mozilla Valence @auchenberg 52/71
53. Mozilla Firefox Developer Edition @auchenberg 53/71
54. @auchenberg Perspective. 54/71
55. @auchenberg 55/71
56. Chrome DevTools App @auchenberg 56/71
57. Thought experiment revised @auchenberg Why do I need to learn a new DevTools for each browser? Why do I have to use different tools for authoring and debugging? Why isn't my editor integrated with my browsers? Why can't I decide which DevTools to use with my browsers? Why can't I use DevTools to debug my mobile apps? Why can't I leverage the browser logic in my new fancy tool? Why are DevTools bundled with our browsers? · · · · · · · 57/71
58. New experiment DevTools Remote @auchenberg 58/71
59. The idea @auchenberg 59/71
60. How does it work? @auchenberg 60/71
61. DevTools Remote Demo @auchenberg 61/71
62. GitHub @auchenberg 62/71
63. @auchenberg Going forward. 63/71
64. Let's stop reinventing our tools. @auchenberg 64/71
65. Let's reuse our tools. @auchenberg 65/71
66. Let's make it easier to build for the web. @auchenberg 66/71
67. We need a sane development workflow. @auchenberg 67/71
68. The open web follows standards. @auchenberg 68/71
69. Our tools should too. @auchenberg 69/71
70. @auchenberg 70/71
71. Thanks. twitter @auchenberg www kenneth.io