Front-End Operations

The Rich Web Experience - December, 2014

It used to be the only debugging tool at the disposal of a front-end developer was "view source" and every page had to be viewed manually to check for visual correctness. With our pages and applications growing in complexity, we now have an increasing need for better tools to help build, test, and monitor our code. Everything from linting and optimizing to monitoring and analytics are now important parts of the front-end developer's job.

In this session, we'll look at the current state of front-end focused tools to improve code quality, help identify performance bottlenecks and aid in application monitoring.

Transcript

1. The'Rich'Web'Experience' December,'2014 Mark'Meeker' @meeker FRONT END OPERATIONS
3. Improve the developer and the end-user experience.
4. Improve the developer and the end-user experience. Speed-up
5. Speed-up • Making it faster to develop • Making it easier to catch and troubleshoot issues • Reducing the overhead for testing • Reducing page load time and latency
6. http://www.smashingmagazine.com/2013/06/11/front-end-ops/
7. The metric by which a front-end operations engineer would be judged is speed. Alex Sexton
8. Develop Test Deploy Measure Debug
9. Engineer User Develop Test Deploy Measure Debug
10. some assembly required.
11. Develop
12. Develop • Use a Build System • Mirror production environment • Enable Source maps • Lint your code • Autoprefix • Solve for shift+reload
15. Develop • Use a Build System • Mirror production environment • Enable Source maps • Lint your code • Autoprefix • Solve for shift+reload
16. Run minified code Concat files Use Sprites HTTPS Use a distinct cookie space (domain) CMS content Mirror Production Environment
17. Develop • Use a Build System • Mirror production environment • Enable Source maps • Lint your code • Autoprefix • Solve for shift+reload
18. Develop • Use a Build System • Mirror production environment • Enable Source maps • Lint your code • Autoprefix • Solve for shift+reload
19. linters csslint jshint htmlhint
20. Disallow duplicate properties unless directly after and different Disallow syntax errors Enforce valid property names Limit number of selectors to <4095 which is the IE limit CSS Lint
21. linters csslint jshint htmlhint
22. always put curly braces around blocks in loops and conditionals sets a specific tab width for your code warns when you define and never use your variables prohibits the use of a variable before it was defined JS Hint
23. linters csslint jshint htmlhint
24. Attribute names must be lowercase Attribute names cannot be duplicated in a tag Leading whitespace cannot be mix of spaces and tabs Tags must be properly closed HTML Lint
25. Develop • Use a Build System • Mirror production environment • Enable Source maps • Lint your code • Autoprefix • Solve for shift+reload
26. Auto-prefixer
27. a { transition: transform 1s; } a { -webkit-transition: -webkit-transform 1s; transition: -ms-transform 1s; transition: transform 1s }
28. Develop • Use a Build System • Mirror production environment • Enable Source maps • Lint your code • Autoprefix • Solve for shift+reload
30. live reload
31. watch: { scripts: { files: '**/*.js', tasks: ['jshint'], options: { interrupt: true, }, }, },
32. Debug
33. Debug • Use Proxy Tools • Install all the browsers • Build a Device Lab • Remote Web Inspector
37. Debug • Use Proxy Tools • Install all the browsers • Build a Device Lab • Remote Web Inspector
41. Debug • Use Proxy Tools • Install all the browsers • Build a Device Lab • Remote Web Inspector
42. Focus on 20% of devices that are 80% of traffic Screen size, screen resolution, OS mix Buy from eBay, Gazelle and co-works who are upgrading Setup dedicated wifi network Device Lab
44. Debug • Use Proxy Tools • Install all the browsers • Build a Device Lab • Web Inspector Remote (weinre)
46. ghost etc
48. Test
49. Test • Automate in-browser unit testing • Visual Regression • Code coverage and complexity analysis
51. browserstack.com
55. Test • Automate in-browser unit testing • Visual Regression • Code coverage and complexity analysis
56. Wraith
58. Test • Automate in-browser unit testing • Visual Regression • Code coverage and complexity analysis
59. phantomAS
60. * requests: 29 * gzipRequests: 3 * postRequests: 0 * httpsRequests: 0 * redirects: 0 * notFound: 0 * timeToFirstByte: 807 * timeToLastByte: 833 * bodySize: 179021 * contentLength: 311187 * ajaxRequests: 0 * htmlCount: 1 * htmlSize: 1151 * cssCount: 2 * cssSize: 1630 * jsCount: 5 * jsSize: 41272 * jsonCount: 0 * jsonSize: 0 * imageCount: 21 * imageSize: 134968
62. Maintainability Score Lint errors Complexity Plato
63. Deploy
64. Deploy • Use Dependency Management • Add version banners • Test for SPOF
65. bower for 3rd party JS
66. Manage external libraries (jQuery, Bootstrap) Use to isolate and version third-party code Use for sharing front-end code between projects Dependency Management
67. Deploy • Use Dependency Management • Add version banners • Test for SPOF
68. Deploy • Use Dependency Management • Add version banners • Test for SPOF
69. blackhole.webpagetest.org 72.66.115.13 ajax.googleapis.com 72.66.115.13 apis.google.com 72.66.115.13 www.google-analytics.com 72.66.115.13 connect.facebook.net 72.66.115.13 platform.twitter.com SPOF
71. Measure
72. Measure • Collect leading performance indicators • Trend performance indicators • Synthetic Performance and RUM • Log JavaScript errors
73. File size Number of files Total image count Number of DOM elements Performance Indicators
74. sitespeed.io
76. webpagetest.org
80. Measure • Collect leading performance indicators • Trend performance indicators • Synthetic Performance and RUM • Log JavaScript errors
82. httparchive
83. sitespeed.io
84. speedcurve
86. Measure • Collect leading performance indicators • Trend performance indicators • Synthetic Performance and RUM • Log JavaScript errors
87. navAPI
89. Measure • Collect leading performance indicators • Trend performance indicators • Synthetic Performance and RUM • Log JavaScript errors
90. JS Error Logging
91. Recap • Faster for developers • Faster for end-users • Automate all the things!
92. Thank you. The$Rich$Web$Experience$ December,(2014 Mark$Meeker$ @meeker