Podcast Summary
Discussing web components and Lit with Justin Fagnani from Google: Google's Justin Fagnani highlights developer productivity and tooling as reasons for web components and Lit's growing popularity, while Sentry integrates with Codecov to help developers identify and fix untested code, offering promotional pricing for the first 5 Pro seats.
The Syntax Supper Club podcast, hosted by Scott Talinsky and Wes Boss, had a long-awaited discussion on web components and Lit, featuring guest Justin Fagnani from Google. They discussed the popularity of React and why some developers choose to use it despite web components and Lit being viable alternatives. Fagnani, who has worked on web components and related specs and libraries at Google for several years, emphasized the importance of developer productivity and tooling. They also mentioned Sentry, a sponsor, and its new integration with Codecov, a code coverage tool. Sentry users can now see their code coverage directly in their stack traces, helping them identify and fix untested code. Additionally, Sentry is offering a promotional pricing for the first 5 Pro Codecov seats for $29 a month.
Create custom HTML elements with Web Components: Web Components enable developers to create encapsulated, self-contained components with their own internal DOM (shadow DOM), offering benefits like style and DOM scoping, and interoperable composition across frameworks.
Web components are a game-changer for developers, allowing them to create their own custom HTML elements and use the browser's component model. This opens up new possibilities for creating encapsulated, self-contained components with their own internal DOM (shadow DOM), which offers benefits such as style and DOM scoping, and interoperable composition. This means that developers can create components that work seamlessly with different frameworks, without having to worry about conflicting selectors or DOM manipulation. Web components have been around for a while, with some browsers implementing their own internal versions before the external API was available. Overall, web components offer a powerful toolset for developers to build more efficient, reusable, and interoperable components for the web.
Web components: building from the bottom up: Web components aim to provide low-level APIs for building up to native features, with the eventual goal of standard JavaScript offering the same developer experience as libraries.
Web components have given developers access to APIs for creating custom elements, but the intention behind their use and the authoring experience have been debated. Some believed web components should be the authoring experience themselves, while others saw them as the foundation for higher-level concepts. The extensible web manifesto influenced this perspective, suggesting the need for low-level APIs to build upon. The vision was to start from the bottom and build up, eventually aiming for native APIs to offer the same developer experience as libraries. Lit, an unopinionated library, tries to implement this vision as a speculative polyfill. The future goal is for the browser to provide these features, but the exact implementation remains to be seen. The use of query selectors and reactive templating in the browser is a complex issue with political undertones, but the goal is to make these features as accessible and straightforward as possible with standard JavaScript.
Lit: A library for creating reactive web components: Lit is a library for creating reactive, declarative web components using the template instantiation proposal. It provides minimal DOM updates and a reactive, custom element base class.
Lit is a library for creating reactive, declarative templates and custom elements for web components. It was designed with the template instantiation proposal in mind and aims to provide minimal DOM updates and a reactive, custom element base class. By extending the LitElement base class, developers can add rendering and state functionality to regular JavaScript classes using decorators or a metadata object. Getters and setters can be defined to hook into property changes, allowing for custom functionality. The use of a library like Lit for web components is a matter of preference, with benefits including a smaller footprint and the ability to leverage a larger ecosystem and community. While web components can be used without a library, libraries like Lit can provide additional functionality and ease of use.
Web Components offer interoperability and incremental changes: Web Components enable reuse of UI components across projects and frameworks, saving time and effort, and are ideal for UI components such as video players and toggles.
Web components offer interoperability and enable incremental changes between projects and frameworks. This can save time and effort by allowing developers to reuse components across different versions and frameworks. Web components provide encapsulation for both style and DOM, making them smaller and faster than some libraries. However, some libraries have shown to be comparable in size. Web components are ideal for UI components, such as video players and toggles, which can be taken from project to project without worrying about the underlying software version. While there are limitations to using web components in other frameworks, the benefits of interoperability and incremental changes make them a valuable choice for software development.
Understanding compatibility issues between web components and frameworks: Web components and frameworks can coexist but may have compatibility issues due to assumptions about the DOM. Solutions include using life cycle events and Shadow DOM in web components for fine-grained control and handling global styles carefully.
While web components and frameworks like React can coexist, there can be impedance mismatches leading to compatibility issues. These issues often stem from the framework making assumptions about the DOM and not being able to set properties or add event handlers on custom elements directly. Web components like LitElement offer solutions with their life cycle events and Shadow DOM for encapsulated CSS, making them a viable alternative for developers looking for fine-grained control over their components. However, global styles can be tricky to implement as inherited CSS properties are the only ones that cascade across the shadow DOM boundary. Overall, understanding the strengths and limitations of both web components and frameworks is essential for making informed decisions when building web applications.
Approaches to styling components across shadow roots: MDM, CSS custom variables, CSS shadow parts, constructible stylesheets help ensure visual consistency and ease styling of components across shadow roots, while Lit offers a simple interface for working within the scoped web component style CSS.
When it comes to styling components across shadow roots in web development, there are a few key approaches. First, MDM (Material Design Manifest) can help ensure visual consistency by indicating if properties are inheritable across shadow roots. CSS custom variables also flow through all shadow roots, making them a popular choice for cross-shadow root styling. However, selectors don't cross the shadow DOM boundary, making it more complicated to determine the developer's intent. CSS shadow parts, a pseudo class, allows components in a shadow root to be styled from the outside. Additionally, constructible stylesheets, a browser feature, enable creating a stylesheet in JavaScript, allowing for single-file components with CSS included in the JavaScript file. This approach offers benefits such as tree shaking and automatic bundling, making it a popular choice for web component users. On the other hand, component library users, like React, face challenges with importing components and then separately managing their styles. Lit, a web component library, offers a simple interface for working within the scoped web component style CSS, but it doesn't perform any special CSS handling. Instead, it allows expressions in CSS templates and interpolates the string for you using JavaScript. This focus on compatibility with various tools and easy integration sets Lit apart from other libraries.
LitElement's approach to constructible style sheets: LitElement uses a polyfill for constructible style sheets, allowing for sharing styles among components and compatibility with every bundler. It also offers a faster performance due to string parsing and is unopinionated regarding state management.
LitElement, a Google-created library for building web components, offers a polyfill for constructible style sheets through detecting browser support and injecting a style tag into the shadow root. This approach allows for sharing styles among components and compatibility with every bundler. The performance of parsing strings in JavaScript is also faster than arbitrary expressions, making the overhead of using strings minimal. Although LitElement doesn't currently offer a comprehensive framework like Next.js, it does have a router in development and encourages the use of any state management solution, including MobX and Redux. The library's unopinionated nature regarding state management allows users to choose their preferred solution. Additionally, LitElement leverages Google's knowledge in building scalable apps, with some ideas for making it an application framework in the future.
Signals: A new approach to state management: Signals offer improved performance and developer experience through direct DOM manipulation, making them ideal for managing shared state in complex applications. However, interoperability remains a challenge and server-side rendering is important for better SEO.
Signals are a state management solution that offers performance benefits and improved developer experience. They allow direct manipulation of the DOM when a signal changes, avoiding unnecessary VDOM diffs. Signals can be thought of as a subset of components, and they're particularly useful for managing shared state in complex applications. However, interoperability between different signal libraries remains a challenge. Server-side rendering of web components is also possible and important, as it allows for improved performance and better SEO. Web components can be easily integrated into traditional server-side frameworks, making them a versatile choice for modern web development. Signals, along with hooks and other concepts, demonstrate the need for flexible component features, allowing developers to choose the specific functionality they require. Overall, signals represent an exciting development in the world of state management, offering both performance gains and improved developer productivity.
Web components in SSR environment: Web components can be used in server-side rendering (SSR) but require DOM APIs which can slow down rendering and increase costs. Projects like libssr minimize the DOM shim to stream strings directly to the HTTP server.
Web components are ideal for a server-side rendered (SSR) environment when it comes to bootstrapping. However, they have a disadvantage. Deep SSR of components requires some DOM APIs to run on the server, which can slow down the rendering pipeline and increase costs. To address this, projects like libssr have been developed to minimize the DOM shim, allowing lit templates to stream strings directly to the HTTP server without requiring DOM APIs. Notable examples of websites using lit and web components include Adobe Photoshop's web version, which is primarily built using lit and web components, and Google's Chrome DevTools, which is built with lit. Chrome and Chrome OS have significant parts built using lit, while Firefox uses web components but not a common library. Notable Google projects built on lit include Google Colab for ML work.
Web components' evolution and future: Web components have evolved with libraries like Polymer and Lit, moving from HTML imports to JavaScript files. Future advancements include declarative shadow DOM, server-side rendering, and addressing accessibility issues.
Web components have evolved significantly over the years, with libraries like Polymer and Lit helping developers build these components. Polymer, which emerged during the era of HTML imports, influenced the idea of building components inside HTML files, while Lit, a more recent evolution, moved to having components inside JavaScript files. The future of web components includes continued standards work, such as declarative shadow DOM, server-side rendering, and addressing accessibility issues. These advancements will make web components a more universal and usable system for developers. Regarding personal preferences, the guest mentioned using a MacBook Pro 16 inch for work and a Dell Enterprise keyboard and mouse setup at home, but preferring to use just the laptop most of the time. In terms of text editor themes, they use the standard dark theme in Visual Studio Code.
Staying updated with latest tech requires dedication and time: Dedicate time to browsing GitHub, use efficient tools like VS Code and Z Shell, adjust settings for ease of use, and stay curious to stay competitive in web development.
Staying updated with the latest technologies and tools in web development requires dedication and time. The speaker, who is known for his deep knowledge of niche proposals and trends, spends a significant amount of time browsing GitHub issues and repos to keep informed. He also mentioned his preference for tools like Visual Studio Code and Z Shell, which make his work more efficient. Another key point is the importance of adjusting settings and preferences as we age, such as font size and line spacing, to ensure ease of use. The speaker also shared his positive experience working with Safari, despite the occasional drama surrounding browser updates and support for new features. Overall, the conversation highlighted the importance of staying curious, being resourceful, and continuously learning to stay competitive in the ever-evolving field of web development.
Inspired by Reddit's performance, Lit library improves: Lit library, inspired by Reddit's aggressive marketing, offers improved performance and evolvability for developers
The team behind Lit, a new web component library, was inspired by the aggressive marketing tactics of certain websites, like Reddit, to improve their platform and make it more performant. The team at Apple may have taken notice of the online chatter about Safari being compared to older browsers like IE, leading them to hire more developers to work on the project. Reddit, in particular, is in the process of transitioning from React to Lit, and the team there has reported significant improvements in performance and evolvability. The Lit community is actively working on the project and encourages developers to try it out and join their Discord community for support. The team behind the show, Syntax, expressed their excitement about the potential of Lit and encouraged listeners to check it out. Outside of technical topics, the hosts discussed their enjoyment of the latest season of The Last of Us and encouraged listeners to subscribe to HBO and binge the show once it ends.
