Native Web Components - Best Practices for Framework-Free Application Development

Learn best practices for building applications using Native Web Components without frameworks or virtual DOM in this 55-minute tutorial. Explore real DOM manipulation techniques and discover how simple approaches can scale effectively for web development. Master state management concepts through comprehensive code walkthroughs and practical examples. Build interactive custom charts with animations using just 20 lines of code, combining Native Web Components with Canvas, TypeScript, and d3-shape. Create bouncing donut charts and implement sophisticated state management patterns without relying on external frameworks. Develop reusable dialog box components with advanced features including multi-touch drag functionality and composition patterns. Set up efficient development workflows with CSS hot reload capabilities and learn techniques for converting sketches to SVG. Gain hands-on experience with intermediate-level concepts while maintaining a framework-free approach to modern web component development.

Syllabus

Animating Custom Charts 2021 - #FrameworkLess - 20 lines code - Native Web Components
Bouncing Donut Chart with Native Web Components / Canvas / TypeScript / d3-shape (NO FRAMEWORK)
State Management with Native Web Components - Full Code Walkthrough - No Frameworks! [intermediate]
State Management concepts with Native Web Component in 200s
Native Web Components Dialog Box - Part 2 (bonus: multi-touch drag)
Dialog Box with Native Web Components - Part 1 - Composition (bonus: Draggable)
Quickstart a Native Web Components Project (bonus: Sketch to SVG & CSS Hot Reload)