developers

Chrome Developer Summit 2017 Summary - Day 1

Check out our summary of the Chrome Developer Summit 2017, Day 1.

Prosper Otemuyiwa

Former Auth0 Employee

Oct 24, 2017 • 11 min read

The first day of the fifth Chrome Developer Summit 2017 consisted of an opening keynote, five talks, and a Leadership Panel. As expected, several developers came from around the world for the summit. A lot of the talks were centered around improving web performance and driving progressive web app experiences to the user.

According to Ben Galbraith (Product Lead for the Chrome Web Platform Team), and Dion Almer (Developer Relations Lead) who gave the keynote, the Webkit and Microsoft Edge teams have announced that they are working on adding service worker support to their browsers. Check out the keynote on Youtube.

Thao Tran and Chris Wilson presented the first talk of the summit. Their talk was titled A New bar for Web Experiences. Chris said something profound; "It's not just good enough to provide a service anymore, you have to prioritize your user experience". They emphasized about how Progressive Web Apps are just a higher bar for user experience. They announced that Magento is getting onboard with PWA for their mobile e-commerce platform. A case study about Ele.me which serves 260 million users was presented by Chris. Ele.me rolled out a progressive web app that allows users with flaky user connections to have an awesome user experience. Thao talked about websites using AMP to provide better user experiences. Websites such as Overstock and Tasty.co. Also, Thao mentioned that four billion AMP Pages now run on twenty-five million domains. Check out the session on Youtube.

“It's not just good enough to provide a service anymore, you have to prioritize your user experience.”

Tweet This

PWA Experiences across the Globe

“4 Billion AMP Pages now run on 25 million domains.”

Tweet This

Owen Campbell-Moore (Product Manager, Chrome) talked about how to make progressive web apps provide an immersive, integrated experience on all platforms and operating systems. He announced that the new Improved Add to HomeScreen functionality has been launched fully for Chrome for Android users. He also talked about the new Trusted Web Activities, which allows Android apps to include app-like content served from the web. It integrates PWAs deeply into Android. He also gave some other updates such as:

  • A new Image Upload UI for Progressive Web Apps on Mobile platforms. The new UI is rolling out this week.
  • Major improvements to the Image Capture API.
  • Improvements to the Background Sync and Media Session API.
  • Payment Request API, which provides users a seamless way to checkout with Android Pay or whatever credit card they have originally added to their Google accounts.
  • Identity - Google just launched a new identity platform called the One-tap Sign-in and One-tap sign-up that allows users sign up and sign in seamlessly.

Personally, I was blown away when he mentioned that Windows will be listing PWAs in the Windows store henceforth.

Check out his session.

Ewa Gasperowicz gave a talk titled Kickstart your PWA journey. She covered how to take a website and turn it into a Progressive Web App. She called it, The Process. The Process includes the following steps: Analyze, Prioritize, Choose tools, Implement, and Evaluate. Analyze involves auditing your website before you start making improvements using tools like Lighthouse, Chrome DevTools, WebPageTest, etc. Prioritize involves ensuring your website is PWA-ready. This means making sure that the website optimizes images, leverages browser caching, doesn't run on blocking JavaScript code, etc. Furthermore, it involves the following:

  • Users on 3G? Focus on offline.
  • User Acquisition? Focus on performance.
  • User retention? Focus on Add-to-Homescreen and notifications.

  • User conversion? Try payments.

    Choose tools involves choosing the right tools for turning your website into a PWA. One such tool is Workbox - JavaScript libraries for Offline Caching. Implement involves different patterns for different projects. Noteworthy are the following:

    • Don't block transitions on the network.
    • Use Skeleton screens to avoid blank screens while content is been loaded.
    • Prevent content jumping.
    • Cache the right things at the right time.
    • Avoid scrolling glitches.
    • Scroll fast with virtualized lists.
    • Don't ask for permissions on page load. Ask for permissions in context instead.

Ewa mentioned four selective Image strategies for PWA:

  • Inline
  • Precache
  • Cache at runtime
  • Fallback

Evaluate involves measuring performance at the end of the project. Comparing the audits from the initial report with the report at the end of the PWA implementation and providing business justifications for your new implementation. She emphasized that metrics are helpful, but they are only metrics. Nothing is better than actually checking user reactions to your product. Pay special attention to analytics and the voice of your users.

“Metrics are helpful, but they are only metrics.”

Tweet This

Check out her session on Youtube.

Addy Osmani talked about Fast By Default: Modern Loading Best Practices. If you know Addy, you'll agree with me that he's a performance beast. There are hundreds of talks all over the internet where Addy Osmani talks about JavaScript performance in web apps and mobile sites. This talk is a new addition to the list. Addy talked about the 2017 best practices for loading. Practices such as preresolving DNS for critical origins, lazy-loading non-critical resources, using service workers to cache effectively, tree-shaking with Webpack and Rollup, etc. He mentioned that loading is a journey and sites may use only forty percent of the JavaScript they load upfront.

Addy Osmani mentioned httparchive that is available for everyone today. It's a platform that provides all the data you need for performance comparison. He reiterated that everyone is responsible for performance.

“Loading is a journey - Addy Osmani.”

Tweet This

State of the Web on Mobile

During Addy's session, the Chrome User Experience Report was announced. This report is available as a public dataset on Google Big Query and it provides real-world performance user experience metrics. The initial release focuses on metrics that capture loading experience.

Addy mentioned that Pinterest and Tinder have joined the Progressive Web Apps family. These two popular platforms have rolled out progressive web apps and seen fantastic improvements in user conversions.

Tinder Performance Budget and Strategy

Check out his session on Youtube.

Jeff Posnick, gave a talk on Workbox: Flexible PWA Libraries. Workbox is a set of libraries that work together to power your progressive web app's service worker. He mentioned that a service worker, properly configured, makes your web app fast and reliable. With Workbox, all you need to focus on is configuration rather than writing tons of boilerplate code. Jeff stated that Pinterest already uses Workbox for pre-caching. Check out his session on Youtube.

Surma Surma gave a talk on Wordpress + PWA'S = 💖. Surma built a proof-of-concept PWA app with Wordpress. He discussed the challenges involved in the integration of progressive technologies with CMSes and WordPress and went through the process of turning an existing CMS into a progressive web site. Check out his session on Youtube.

Sam Dutton and Rowan Merewood gave a talk titled Progressively improving e-commerce. They mentioned that $123 billion was spent on mobile e-commerce in 2016 in the US alone. They also highlighted that most purchases on mobile are now on the web but conversion rates are lower than on desktop. They talked about how to build better landing and browsing pages, reduce login and checkout friction, and implement network-resilient, offline-enabled search. Their session can be found on Youtube.

John Pallet and Francois Beaufort talked about Building a Modern Media Experience. They highlighted best practices for building mobile web media. The best practices included how to pre-load your media assets, handle playback controls, autoplay and offline. Check out their session on Youtube.

In between talks, there was a Leadership Panel that consisted of Darin Fisher, Paris Tabriz, Grace Kloba, Thao Tran, Tal Oppenheimer, Matthew McNulty, Alex Komoroske, and Alex Russell. Several brilliant questions were asked by the audience. Check out the answers given by the panel to the audience.

Aside: Authenticating with Auth0

The Credential Management API and One-tap API are both great and will allow users get a better user experience while signing in to apps. Now, the cool thing about automatic sign-in across devices is that it works with multiple login providers. This shows how you can federate with any provider. With Auth0 Centralized Login, you also have access to multiple authentication sources such as Google, Facebook, Microsoft Account, LinkedIn, GitHub, Twitter, Box, Salesforce, amongst others, or enterprise identity systems like Windows Azure AD, Google Apps, Active Directory, ADFS or any SAML Identity Provider. Auth0 helps you to:

  • Add authentication through more traditional username/password databases.
  • Add support for linking different user accounts with the same user.
  • Support for generating signed JSON Web Tokens to call your APIs and flow the user identity securely.
  • Analytics of how, when and where users are logging in.
  • Pull data from other sources and add it to the user profile, through JavaScript rules.
  • Achieve SSO(Single Sign-On) seamlessly.
Sign up

for a free account today and enjoy fast, seamless, and hassle-free authentication in your apps.

Conclusion

Chrome Dev Summit, Day 1, was amazing. The talks were mind-blowing. It's exciting that Google, Microsoft, Mozilla, Firefox, and Samsung are coming together to make the web more accessible, faster and better for everyone. Thanks to Kosamari and Monica for entertaining developers throughout the event. Already looking forward to #Day2 and the fresh inspiring moments it will bring along with it!

If you were around for #ChromeDevsummit2017 - Day 1, let me know the talks you really loved in the comment section. 😃