Quicker, Smarter, More Robust: Audible’s Web Team Shares Best Practices for your Web App

On the evening of Thursday June 8, 2017, the Audible Web Team hosted a Tech Talk on Web Application Development Best Practices. There were around 25 developers in attendance from diverse fields, some even interviewing for Audible, eager to learn new tips and tools to be better web developers.

The talk consisted of six speakers: SVP of Business Technology, Tim Martin; Senior Director of Software Development for the Web team and MC, Ian Moraes; Web Development Engineer, Alex Guo; Software Development Engineers, James Montagne and Kyle Studd; and Software Development Manager, Andrew Froehlich. The last five gave brief presentations on various topics related to web application development.

After everyone had a chance to get their beer, wine, and hors d’oeuvres, we sat down to start. Tim came onto the stage to introduce Audible, its role in Newark, and the Tech Talk. He highlighted the talk as light, fun, and informative. He then gave the stage to Ian, who outlined the overall theme of the talk: quick tips and tools to improve web page performance.

Ian Moraes giving his tech talk Ian demonstrated new features in Chrome DevTools, emphasizing one in particular to aid in developing for mobile, an emulator for different network speeds. The tool works by throttling the connection to test page performance under different networks. He also showcased a tool to detect unused code, which can be used to optimize code and reduce code load, and how to enable verbose logging to pinpoint issues. Ian ended his talk by plugging the new Safari resource hints to transition into Alex’s talk.

Alex Guo giving his tech talk Alex gave a brief overview of different resource hints—preload, prefetch, and preconnect—available not only on Safari, but also on the newest versions of the other major browsers. Developers can specify the hints via HTML or Javascript, which tells the browser to start loading resources; fetch, and store future resources; or setup connections while the web page is still loading, saving time. Alex went into detail, specifically about preconnect, which indicates a known browser endpoint that will be used to start DNS lookup and setting up a TCP connection ahead of time. He also showcased the tool WebPagetest (https://www.webpagetest.org/), which tests the speed of page loads to show how a test page with preconnect is faster than the same test page without it. Finally, he showed the Can I use… (https://caniuse.com/) tool for checking browser support of different web features.

Alex Guo giving his tech talk After Alex finished his presentation, Ian reclaimed the stage to introduce James to demonstrate the Lighthouse open source site analyzer tool by Google. Lighthouse has various audits to analyze web application performance, particularly audits for mobile. It is available as a Chrome extension or a standalone app. James demoed various audits and the reports they generated on the Audible website.

Alex Guo giving his tech talk The talk then shifted to Kyle for tips on improving page SEO performance. He presented the MOZ tool to better understand the SEO elements of a webpage and the Google Structured Data Testing tool to show how Google robots see pages and uses the information from those pages for Google search results and knowledge graph, which can help developers improve their pages’ rankings on Google.

Alex Guo giving his tech talk Finally, Andrew talked briefly about the software development process and how to launch shippable web solutions. He emphasized not getting bogged down by pushing features and to keep in mind different aspects such as accessibility and unit test coverage. He advised a proactive approach, planning from the beginning, and suggested synergy with other parts of the organization, including product, UX and platform, from beginning to end.

Afterwards, there was a Q&A touching on browser hints and concurrency limits; pipeline deployment processes, when to deploy, and how automation, regression, and load testing come into play; how to be #1 on Google in terms of SEO; developing and testing on multiple devices; how usability factors into performance; and information security with the tools discussed. Tim finished up by pitching the Audible experience, rather than the expected recruiting pitch.

Many of the attendees walked away expressing how much they learned about web development in the short talk. It was an informative session for all.