Overview
-
Make the most of web components. Learn the fundamentals of how components work, as well as how to plan for and design portable and maintainable components of your own.
Syllabus
-
Introduction
- Components for the web
- What are components for the web?
- Web components: A special case
- Why components are so popular
- A mental model for components
- Starting with a visual mockup
- A DOM tree with branches and leaves
- Tip: Map your file tree to the DOM
- Challenge: Create a component map
- Solution: Create a component map
- Loose principles for tightly scoped components
- One-task principle
- Top-down principle
- Isolation principle
- Stand-alone principle
- Plan before you code
- Raw output
- Properties
- Input and output
- State
- Who owns state?
- Life cycle
- Challenge: Scope a complex component
- Solution: Scope a complex component
- Structuring components
- Reusability and when not to care
- Stand-alone component development
- Components everywhere
