John Riviello

Performance is the number one feature for Progressive web apps to compete with Native Apps. To remove jank from the experience, the Chrome dev tools provide some excellent insight into the root cause.

Let's explore how to find issues in your app and keep your PWAs feeling Native.

Web Components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags which can be shared across frameworks.

This talk provides a deep introduction into how to author Web Components with LitElement, the most popular library for building fast, lightweight web components.

We’ll cover how LitElement reduces the code you have to write to build your own Custom Elements complete with scoped styles that Shadow DOM provides, and reactive properties that you expect from standard browser components. You’ll learn how lit-html, the rendering library for LitElement, makes writing your components easy while at the same time only re-rendering the specific content needed, not entire DOM subtrees (or virtual DOM) that other frameworks rely on.

You'll walk away with a solid understanding of how you could leverage Lit to build shareable components, design systems, and/or a full Progressive Web App.

Struggling to get your website to load in less than 5 seconds on a mobile phone? Switching pages are a little sluggish? You’re not alone! Most web developers can build a responsive site, but fail to meet performance requirements for mobile. Using the latest PRPL pattern and Progressive Web API’s, you can provide a compelling alternative to native apps, as long as performance remains your top feature.

This talk will cover the architecture for Xfinity xFi, an enterprise PWA for Comcast, built with Web Components. We’ll then dive into the Chrome performance tools to optimize xFi loading time down by more than half. You’ll walk away knowing what it takes to create a successful PWA and how to find slow downs in your app startup.

Outline

• Intro + Sites developed
• Why Performance Matters
  • Past Desktop Era
  • Current Mobile Era
  • The need for Speed
• PWA Intro + Goals
  • PWA vs Native
  • PWA Features
  • Service Workers Overview
• Performance Optimizations
  • Measuring Performance
  • Javascript Startup Performance
  • Why Frameworks slow down app startup
  • Future of Frameworks with Web Components
• Architecture of Xfinity xFi site
  • Understanding the PRPL Pattern
  • Understanding Critical Path for App Startup
  • Code Splitting
• Performance Testing + Optimizations for xFi

One of the most powerful features of Web Components is using Shadow DOM & CSS Custom properties to achieve actual code sharing among your style guides & pattern libraries with your website and web application code. No more developing design systems in isolation and struggling to have design updates applied to the actual development code. The code you write in your Web Components is both the living pattern library and the code your components use!

In this talk you'll learn the specifics of working with Polymer and LitElement, the latest Web Components library from the Polymer team, to build your design system in a way that can be used across any web-enabled device. We'll cover best practices for working with CSS in Polymer & LitElement to ensure design and accessibility needs are met. We'll also demonstrate the best ways to deal with the limitations of the Shadow DOM & CSS Custom Property shims to support older browsers.

Let’s connect with PWAs! Progressive Web Apps seek to bridge the gap between native Android & iOS apps and the Web. Learn about the APIs available in today’s mobile devices that enable you to leverage web technologies to deliver app-like experiences without having to write a line of Kotlin or Swift.

We’ll cover many of the APis that make Progressive Web Apps possible while building a dating web app for cats. Topics include:

• Installable PWAs
• Offline mode with Service Workers
• Geolocation
• Capturing photos from the camera
• Photo uploading
• Voice recordings
• Push Notifications

You’ll leave this full-day workshop armed with the hands-on experience to deliver a PWA that starts fast and stays fast.

Have you been asked to take a component from one project and “just” put it into another project built with an entirely different JavaScript framework? Do you work at a diverse company with teams using Angular, React and Vue and are wondering how you can stop duplicating effort? Do you have framework fatigue and want to skip the cycle of learning yet another framework? If so, then Web Components are what you have been searching for!

Web Components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags which can be shared across frameworks. With libraries like Lit built by Google to extend Web Components, it is now possible to easily create fully featured components that work with Angular, React and Vue.

This workshop deep dives into Web Components and the latest updates from Lit, which provides lit-html & LitElement. You'll learn how to build your own components with both vanilla JavaScript and LitElement. We’ll create a library of shared components and integrate them into an existing React application.

Specific topics covered during the workshop are:

• High-level Web Components Overview
• Codelab: Build a Toast Web Component
• The building blocks of Lit: Tagged Template Literals, lit-html & LitElement
• Codelab: lit-html
• Codelab: LitElement Basics
• Codelab: LitElement Intermediate
• Codelab: Sharing Components
• Using WCs in production, using WCs with React, general WC usage

Making large, important technical decisions is a critical aspect of a software engineer's role. With the wide impact these decisions can have, it is essential to make the correct decision. Even more vital is ensuring the decision is made and communicated in a way that the team members impacted by it trust and buy-in to the decision. Otherwise, even the best decisions will never realize their full potential when executed.

This case study examines how Comcast has employed the Analytic Hierarchy Process (AHP), a decision-making framework developed in the 1970s, and adapted it for making technical and non-technical decisions both large and small. We will cover the key aspects that have made it successful for engineering teams, what we learned from our early mistakes, signs that the decision-making process you use is working effectively, and how you can easily leverage the AHP for your decisions.

Web Components allow developers to create reusable components without a framework.

During this talk we’ll learn about Custom Elements, Template, and Shadow Dom specifications with code examples and different tools like Angular to help you utilize these new APIs. We’ll also cover an example custom element that Comcast is using across all of its sites for millions of users. We’ll also demo off component libraries and show how easy they are to integrate into existing sites.

If you haven’t explored Web Components yet, you’re missing out on a powerful tool that can greatly enhance reusability of common web elements throughout your websites and web applications. As Comcast has been updating our web properties to unify under a single UX, using Web Components with Lit has helped make that process much more efficient.

This session will introduce you to what exactly Web Components are and how to use them. We’ll also cover building Web Components with Lit, the most popular Web Component library. You’ll get to hear how Comcast is using the web platform to build its next generation single page apps & websites using the latest browser APIs.

You’ll also learn about how easy it is to onboard a team to using Lit, tips for sharing components with other websites & across teams, and best practices Comcast has established for efficient development of Web Components.