FeOpsConf Notes, Day 2
25 Apr 2014 — 0 Comments
Delivering the Goods in Under 1000ms
Paul Irish, Google
Identify a metric to move the needle of a business need/goal.
Speed Index - Lower is better. Goal should be under 1000.
Total page size and Number of requests are equally important. Latency has a direct linear correlation to page load time. Latency in wireless is painful.
Video streaming is bandwidth limited. Web browsing is latency limited.
TCP Slow Start ramps up the amount of data transferred over time.
- Eliminate render blocking JavaScript
- Minimize render blocking CSS - separate critical css from non-critical
Tools
- WebPageTest - tool for measuring page load and request times with webpage thumbnails.
- PageSpeed Insights - best practices for desktop and mobile.
The Rise of Front End Tooling
Mikeal Rogers, Digital Ocean
About a third of the activity on npm is related to front end tooling. Mostly Grunt; Gulp had a big spike.
Development tools for front end are growing faster than back end and node development is growing faster than any other technology.
Tools
- Perspective - presentation tool for displaying charts
Reducing Complexity with a Component API
Ian Feather, Lonely Planet
- Shared Layer - High reuse, Strong caching, High risk
- App Layer - Low reuse, Weak caching, Low risk
- Component Layer - High reuse, Low risk
A Style Guide isn't the mechanism.
Benefits
- Happier developers
- Visual consistency
- Refactor easily
- Less tweaking at App layer (in theory)
Tools
- Rizzo - Lonely Planet's styleguide.
Automating a Maintainable Front End
Rachel Myers & Emily Nakashima, GitHub
Stages of Performance Optimization
- configuration for bottlenecks
- refactor bottlenecks
- performance-minded development
- repeat 3 for as long as you can before going back to 1 & 2
You could use Modernizr.load or Require.js to load individual polyfills, but it can delay load time and adds overhead.
Sunset Tests
Put browser support expiration into unit tests. That way the build fails on an agreed upon expiration date.
Know what browsers you support and enforce that thru code/tests.
Tools
- ucss
- uncss
- dom-prof - phantomjs crawler
- DOM Monster - bookmarklet
Continuous Translation
Burak Yigit Kaya, Disqus
Community sourced translators.
Translations are dependencies.
Additional considerations for RTL support and Date/Time formatting.
Tools
- Transifex - SaaS translation provider
- grunt-i18n-abide - Grunt task for build translations
- R2 - library to automatically switch styles from LTR to RTL
- moment.js - really good language support
The Dark Side
Martin Kleppe, Ubilabs
Apps that Talk Back
Rebecca Murphey, BazaarVoice
They keep you from doing bad things
- Git hooks - for enforcing style rules and running tests pre-push
- Grunt - for running jshint during development
Build assertions into error handling; provides sane error messages.
They tell when you do a bad thing
Logging errors with more detail, categorization, hashed stack traces.
Identify things before they are things
Use Istanbul to see what code is actually being executed.
Help fix the things
Production swallows errors, but a cookie can be set to enable verbose logging at any time.
Tools
Building a Large Scale Synthetic Performance Lab
Amiya Gupta, Microsoft
Lessons Learned
- Synthetic data is fundamentally different from real user data
- Focus on consistency
- Larger sample size isn't always the answer
Navigation Timing API is supported by most browsers (not Safari).
Benchamrking is instantaneous. Monitoring includes dimension of time and location. Synthetic measurements enable deeper analysis by eliminating variables; trade accuracy for consistency.
Minimum PLT - there's a hard lower limit to how quickly a page could possibly load; no upper limit.
Benchmark Page - Simple HTML page with a few images, no CSS or JS. Simulations against the Benchmark Page tell you what your Minimum PLT is.
Measure -> Analyze -> Improve -> Repeat
Benchmark page can also indicate problems with network and hardware (ie, Latency, Packet Loss, CDN Routing).
Synthetic environments can suffer from cold server cache and DNS timeout.
Tools
- Boomerang - measure webpage performance on client and report back to server.
Introducing RequireJS into a Large Codebase. Delicately.
Dan Lee & Chris Chen, Yammer
Shim require & define to avoid errors on non-RequireJS pages.
Target one controller at a time to progressively add AMD-ification.
Takeaways
- Isolation - find a small slice of your app to start
- Iteration - chart out the path from the small slice to the whole pie
- Minimize disruption - don't break the dev environment for other parts of the app
"Code in transition is OK."" Developers have a desire for consistency, but innovation necessitates transitional steps.
It's About People
Dustan Kasten, Skookum Digital Works
Time to first commit is critical.
Don't guess it, test it. If it moves, track it. Get charts in front of people.
Responsibilities of a Front End Operations Engineer
Rodney Rehm, Deutsche Telekom
Know your goals before entering negotiations. Start with something small that has big impact. With finite resources, you have to pick your battles.
Comments
comments powered by Disqus