Skip to content

Instantly share code, notes, and snippets.

@GlynnPhillips

GlynnPhillips/velocity.md

Last active May 19, 2016 08:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save GlynnPhillips/a458482384741d4c45ea to your computer and use it in GitHub Desktop.
Save GlynnPhillips/a458482384741d4c45ea to your computer and use it in GitHub Desktop.
Download ZIP
Velocity Notes
Raw
velocity.md

Velocity Conf CA 2015

Wednesday

Patrick Meenan - Service workers the practical bits

  • Service workers are still in the early days, but browsers are now shipping in stable versions so they can learn from real world usage.
    • Some of their capabilities currently have no restraints however in the future they might be added
    • Most stable version is actually in the nightly builds (canary)
  • Service workers are a middleman that sits between the resource fetcher and the net stack
  • Scope is at a domain level, however they can be limited to a path/directory navigator.serviceWorker.register('/worker.js', {scope: '/nature/'})
    • They are considering finer scoping.
  • Service workers intercept every request from your web page
    • This includes cross origin requests as long as you have CORS headers set
    • You also have access to the request headers
    • Any non CORS requests can be manipulated this includes changing headers
    • They do NOT have visibility of HTTP2 server pushes though
  • Service workers are only available on HTTPS
  • They are running in the background whenever the browser is open, this could be good to use with the new Push api
    • They do NOT have any control over the browser, for instance forcing new windows to open
  • They are registered on the first view so any functionality or performance gains are only seen on repeat views
  • They are not just for offline features, they can be used for many different reasons including performance
  • Service workers are registered to the document so iframes can have their own service workers
    • Will be interesting / scary to see what could third parties do with this
  • Async only, so can only use other async native web api's. So there is no support for things like localstorage
  • Checks for updates to the service worker will happen every 24hrs
    • This means that you could potentially break your site for 24hrs if not testing correctly
  • The service workers cache is separate to the browsers cache
    • This gives you the flexibility but also overhead of managing your own cache
    • Currently there is no size limit on the service workers cache, however as adoption grows browsers may have to start adding limits
    • The only time the service worker cache and browser cache will 'talk' is if the user is offline and the service worker makes a request. At this point if the request has a response then you can assume this came from the browser cache.
  • Resource requests within service workers use the ES6 fetch api
    • This also means they are promise based
    • Requests are streams which means they can only be read once, you will often need to clone responses
  • Debugging service workers in chrome is possible by going to chrome://serviceworker-internals/ in the browser and enabling pausing for service workers
  • They can be used to make sure you are sticking to performance budgets by controlling any third party timeouts
    • If a third party does not respond within a set time you could send an error response to stop blocking render
    • This could also be done in the less common scenario where one of the edge servers on a CDN is down. In this case if your edge server has not responded within your timeout period you can make a new direct call to the origin server for the resource. By not cancelling the edge request the service worker can now respond with whatever server responds first
  • Patrick suggests the best people to look for implementation examples is Alex Russell and Jake Archibald
    • Jake has actually just put out a new video with a good explaination of how service workers can be used to improve performance

Kurt Andersen - What you should know about email authentication

  • http://www.slideshare.net/kka7/what-you-need-to-know-about-email-authentication
  • Linkedin have what they consider to be three equal 'sites' (connections with users), their web site, mobile applications and email.
  • People should be more skeptical of emails on mobile clients as they have had to make some sacrifices to work on mobile, this includes some aspects of security
  • 84% of all email is spam/phishing attacks
    • Phishing attacks damage customers and brands
  • Domain auth helps receivers
    • They can verify where email is really coming from
    • Necessary to deal with the shift from IPv4 to IPv6
  • Domain auth helps senders
    • Helps keep your email out of trash / spam
    • Helps to distinguish for real mail from fraudulent uses of your domain
    • Consider it part of the domain equivalent of protecting your brand
  • Three key aspects of email auth are SPF, DKIM & DMARC
  • Make sure you are using tools to check your email auth, a high number of domains have incorrect SPF, DKIM or DMARC settings
  • Domains can use SPF to authorize third parties (mandrill. mailchimp, etc) with include
  • Domains can authorize third parties with DKIM in several ways
    • Providing private keys to a trusted third party
    • Publishing the private keys from trusted third parties
    • Delegate sub domains to trusted third parties
      • Either full delegation
      • Or via CNAME or DNAME assignment
    • Do NOT use the same keys across all your subdomains
  • DKIM keys should be a minimum of 1024 bits
  • At minimum rotate your keys every 6 months but its recommended to do this every quarter to fall in line with business process
  • Forwarding emails can break email auth

Tammy Everts and Cliff Crocker - Metrics metrics everywhere

  • http://www.slideshare.net/CloudTest/metrics-metrics-everywhere-but-where-the-heck-do-you-start?ref=http://www.soasta.com/blog/metrics-metrics-everywhere-but-where-the-heck-do-you-start/
  • Metrics should be painful, they should be things which makes you change what you are doing and move forward
  • There is no silver bullet single metric
  • Metrics are all about context, different teams / job roles want different metrics
  • Measuring single page apps and traditional websites requires different techniques
  • Always use RUM and synthetic measuring techniques together and not one instead of the other
  • RUM can also be used to answer questions about the users like What’s their environment or how do they navigate my site
  • Focus on your higher percentiles
  • First paint is not a very useful metrics due to inconsistency
  • Set your performance budget and create SLA's even with internal vendors / stakeholders
  • Check out Steve Sounders article on hero image delay
  • They had a slide showing the typical conversion rate vs. average load time histogram. Some one from the audience questioned if this could actually / also show that people with more money have faster internet connections

Sam Newman - The principles of microservices

  • http://www.slideshare.net/spnewman/principles-of-microservices-velocity
  • Microservices are 'Small autonomous services that work together'
  • When considering constraints and technical implementation make sure you are considering your context
    • Have a checklist for your deployment environment to help you consider these constraints
    • Good example is the Heroku twelve factors
  • Be wary of DRY (Don’t Repeat Yourself)
  • Microservices can help to decentralize
    • You build, ship and own it
  • You must be able to deploy independently and if you can you are probably doing most other things right
  • You should have one service per host, then if one service takes down a host it does not take down all the services
  • Use consumer driven contracts over end-to-end test
  • Make sure you have high visibility
    • Simple stats page
    • Easy access to logs
  • Further reading

Thursday

Dana Quinn - Lessons learned for large-scale apps running in a hybrid cloud environment (keynote)

Astrid Atkinson - Engineering for the long game: Managing complexity in distributed systems (keynote)

  • https://youtu.be/p0jGmgIrf_M?list=PL055Epbe6d5Y86GSg3nhUH3o_v62FGpCI
  • We cant predict the future so plan and build as if you have to live with the consequences
  • Scale systems not teams
    • Good teams are harder to find and grow
    • Scaling systems should be manageable so bigger systems do not have to mean be bigger teams
  • Manage software and not machines
    • Automate as much as possible to help your system grow
  • Standardization helps to enable growth and debugging
    • This might be as basic as just making sure config's live in the same place across systems or they all have a basic health reporting page all at the same url
  • Google’s biggest DDoS attacks come from their own services
    • Systems should protect themselves against misuse even if only used by other internal systems
  • Read Dan McKinleys article Choose boring technology

Zach Leatherman - The performance and usability of font loading

  • FOIT = Flash Of Invisible Text, FOUT = Flash Of Unstyled Text
  • state of web type is a great resource for checking compatibility
  • Stop using SVG fonts
  • Use WOFF2 when possible as its on average 30% smaller
  • Fonts wont be downloaded until there’s an element on the page which uses it (true for most browsers)
  • You can use only certain parts of a font by using the css unicode-range property. Again many browsers here will not download the font unless the characters specified in the range are used in the markup.
  • Most browsers are now hiding the content until the font has download
    • Blink and Firefox have a 3 second timeout on font downloads, after which time the fallback wont will be used. So you get FOIT
    • IE on the other had does things right (IMHO) and displays the fallback font and then switches to the web font once its downloaded. SO you get FOUT
    • The problem with FOIT is it can completely change the meaning on your content if a font doesn't load. Here Slate were using a different font for the word 'not' https://twitter.com/jmuspratt/status/561239961924403200

Ritesh Maheshwari - How LinkedIn used RUM to drive optimizations and make the site faster

  • http://www.slideshare.net/rmaheshw/velocity-2015-pops-and-rum
  • They started to use PoP (Point of Presence) servers in order to speed up TCP connections.
    • These are small, cheap and scalable data centers owned by Linkedin
  • Because they are owned by Linkedin the TCP connection is no longer new so they can send more data
  • They used RUM to figure out which PoP server geographical locations a geographic location should connect to
    • They found some interesting metrics, one example is that India and Pakistan do not have the same optimal PoP locations
    • India was best going to Singapore and Pakistan was best going to Dublin
  • They used the PoP servers to set headers on each request so they could use RUM to identify which PoP servers which request
    • They found that PoP assignment was far from optimal
    • This was due to DNS assignment was based on the Resolver IP and not the Client IP
  • They switched to using Anycast
    • Anycast routes by closest server based on the number of hops
    • They found that some results were improved with ~90% correct assignment
    • They also found though that some were made much worse with ~30% correct assignment, which was a drop compared to DNS assignment
  • Less hops does not mean lower latency
    • Inter-continental links could have viewer hops but would be much further away
  • They created a 'regional' Anycast to route requests by fewest hops but also with the closest geographical location

Andy David and Simon Hearne - What are third-party components doing to your site?

Allison McKnight - Crafting performance alerting tools

  • https://speakerdeck.com/aemcknig/crafting-performance-alerting-tools
  • Dashboard were not effective because there was too many of them and developers did not always see regressions after pushing
  • With dashboards it can be easier to miss slow / creeping regressions
  • They started to use Nagios to notify them of performance regressions
  • They created Perfnag to help them create thresholds for all pages they wanted to monitor
    • This gave a graph showing the 95th percentile for page load
    • It also gave a suggested warning and critical threshold, which could be manually altered if needed
    • Let hope this gets open sourced
  • They created Nagios Herald
    • Which allows you to customize your nagios emails so they are more user friendly
    • This includes adding a graphite graph showing the spikes so you can quickly decide if any action is needed
  • They have created scripts for their chat room robots to quickly see graphite graphs
    • This has since been forked by other teams so they all have visibility of each others services
  • They still have dashboard but they have improved them so its easier to see problems
    • Any graph with an issue is raised to the top
    • They are also given a red background

Friday

Bruce Lawson - Ensuring a performant web for the next billion people (keynote)

  • https://youtu.be/BHO70H9tvqo?list=PL055Epbe6d5Y86GSg3nhUH3o_v62FGpCI

  • There are more people in Asia than there are outside

  • Cheaper tech is enabling growth

    • 5 Years ago a sim card in Myanmar could cost $2,000 now you can get one for $1.50 with a 3G connection
    • Shared taxis per day with Uber is 1 million, Didi (Chinese app) 5 million

  • People across the world all want the same / similar type of content

    • Search
    • Social media
    • News

  • The difference if is the tech used to access content

    • In the US top devices are Apple and Android devices
    • In Asia its Feature phones
    • Indonesia has 75% of users on 2G networks

  • The web standards community is working on installable web apps

    • The average smart phone user has 36 apps installed
      • 1 in 4 are used daily and 1 in 4 are never used
      • These take up lots of space on the device
    • New manifest file (JSON)
      • Includes light weight meta data
      • Path to icon
    • When a browser detects this manifest it will provide a banner asking the user if they want to add this website to their home screen
      • This is a native banner created by the browser so is standardized
      • Also it requires users have shown previous engagement with this feature, so if a user never adds to their home screen they will stop seeing the banner.
    • When user saves to home screen the icon is added to their home screen
      • When they click on this the browser opens up without any chrome

  • Stop sending large images to all devices

    • Sending larger images to all devices means the lower devices waste CPU and battery resizing the images
    • Start using <picture> and srcset where possible

  • Proxy browsers such as Opera mini still have huge usage

    • Opera Mini servers compress 23PB last month
    • In comparison the hadron collider at CERN accumulated 30PB last year

  • Operas proxy servers are not in the geographical locations you might expect (close to the user)

    • That’s because the poor connections in those areas
    • Its better for their servers to be in countries with reliable connection so they can handle the multiple requests to your servers

  • Design for these countries and consider their constraints

    • Do not force required fields on first and last names, as many people in Asia might only have one name

  • Design constraints of proxy browsers

    • JavaScript is only run on load for 5 seconds and then stopped
    • CSS rounded corners and gradients are not rendered because that would need to be converted to a bitmap
    • No web font support as this is purely aesthetic and has a large download
      • As a result do not use icon fonts as this is not what they are designed for, use svg instead
    • If you use JS frameworks such as Angular you could be locking out hundreds millions of users
    • This is all just part of progressive enhancement and this is nothing new, its just how the web was designed to work

  • Airbnb moved their mobile website from using backbone on the client side to using it server side with Nodejs

  • Opera are working hard on a new browsers which will be aimed are smart phones

    • Because even smart phones can be on poor connections so users still want compression
    • By being on a smartphone though they can compress more and rely on the device to do more work during unpacking

John Feminella - Picking the right metrics

  • Good Metrics should be

    • Simple - they should be easy to explain
    • Actionable - They should inform response
    • Credible - They should measure what they claim to
    • Reproducible

  • It can be very easy to manipulate data to say what you want it to say even if you don’t mean too

  • Make displaying comparisons simple

    • We should be using small series sizes as we can easily distinguish how many there are without needing to count (Subitize)
    • Make sure they are in order
    • Use straight lines only
    • Use labels
    • Start at 0
    • Also compare based on length, area comparisons are bad
    • Avoid using 3D visuals as they can cause confusion and mis-represent your data
    • Circular area charts are bad as the volumes do not scale correctly.
      • A circle with the value one 1 will actually fit into a circle with the value of 4 16 times

  • Its not easy to automate decisions based on metrics

Ariya Hidayat - Supersonic JavaScript

  • Let the engine optimize for you
    • Using short functions
    • The JS engine will rearrange yours JS for you in certain cases to move small functions into most effective place they are called from
    • Modern JS engines will defer parsing, so if a function is not called it will not parse it.
  • Define all properties of an object up front else the engine will create multiple shapes it needs to check rather than the one
    • Tracking only one shape var shape = {size: 40, colour: null} shape.colour = 'red'
    • Tracking two shapes var shape = {size: 40} shape.colour = 'blue'
  • Date.now() is much more efferent than new Date() (how there’s less support)
    • It only needs to parse and integer and not an object
    • Not supported everywhere though
  • Check cheap properties first
    • For instance check on length before checking against the string if you know a set of expected results will have certain lengths
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment