Unleashing the Speed and Versatility of SolidJS

SolidJS is the fastest frontend framework available with a programming style similar to React. Signals, JSX, Reactivity and Server side rendering - Solid has it all – including a Universal Renderer. Get an intro to Solid and how learn how I used Solid as a framework for LightningJS (a webgl renderer).

A PWA Postmortem

Comcast took advantage of the new features in modern browsers to release one of the first commercial Progressive Web Apps for its xFi product site in 2015. The site was responsive, built with web components, and allowed users to control their home network from their phone. However, after a few years, the site was decommissioned in favor of native apps. Why? Come examine our PWA and its cause of death so yours can be a success.

Hands on Performance Tuning PWAs

Optimizing for the critical rendering path allows the browser to paint as quickly as possible, providing a better user experience and higher engagement. Understanding how a browser does this is important for developers building Progressive web apps as alternatives to Native Apps, because performance is your #1 feature. Using the Chrome dev tools, we’ll go through everything the browser is doing to get your site interactive. Let's review some public PWA’s and learn what we can do to keep our PWAs performing like Native.

Progressive Web App Workshop

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 IndexDB and Service Workers
Geolocation
QR code scanning
Payments
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.

Revolutionizing UI Development: A Deep Dive into AI-Powered Workflows

As a seasoned web developer with two decades of experience, my journey has been witness to a myriad of coding tools, each leaving its mark on the ever-evolving landscape. Amidst these, AI emerges as a paradigm-shifting force, beckoning us into an era where code generation takes center stage. In this engaging talk, I’ll unravel my exploration—from Figma design to a fully functional app—showcasing the transformative potential of Builder.IO Visual Copilot to output a SolidJS and Tailwind app from scratch. Then I’ll apply the final touches with VSCode and Github Copilot.
Together, we’ll explore the effectiveness of these tools, ponder the implications on our roles as developers, and evaluate the tangible benefits they bring to the table. Will AI render us obsolete, or will it become an indispensable ally in our coding endeavors? Find out if this is the future of UI development.

Performance Optimizations for Progressive Web Apps

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 Google Polymer. 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

##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

Intro to Web Components

Native browser support for Web Components is complete, providing web developers with powerful new APIs. Web Components allow developers to create reusable components without a framework. During this talk we’ll learn about the Custom Elements, Template, and Shadow Dom specifications with code examples and different tools like Angular Elements and StencilJS 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.

Intro to Progressive Web Apps

What’s a progressive web app (PWA)? Should you turn your site into a PWA? Does it replace the need for a Native Web App? Do PWAs work offline?

This session will provide answers to these questions and show you how to create a reliable, fast and engaging PWA. We’ll work through enabling a web app for ‘Add to Home Screen’ support by creating a web app manifest and service worker. Next, we’ll leverage the service worker to optimize loading of images for different devices and network speeds. We’ll wrap up with pushing a web notification to our new PWA.

Hands on with Jest

Jest is a JavaScript Testing Framework with a focus on simplicity designed to delight developers. Set up is easy, the API is great and well documented, yet we’ve all seen tests written for code coverage rather than functionality. Testing code correctly is just as challenging as writing the actual code and should be given the time and attention it deserves.

This talk will showcase some real life tests via a boilerplate application, showing how to test API calls, functions, UI components and async code. We’ll look at some real test cases I’ve encountered that while passing, were actually broken. You’ll come out of this talk with better patterns and tips for testing real web applications and maybe some motivation for writing tests.