John Riviello

Sharing Components Across Frameworks

9:00 AM MDT

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

Performance Optimizations for Progressive Web Apps

8:30 AM MDT

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

Web Components: The Future of Web Development is Here

10:30 AM MDT

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.