Web Components and Modularization: Practical Approaches

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.

Introduction

• Components for the web

1. What Are Components for the Web?

• What are components for the web?
• Web components: A special case
• Why components are so popular

2. Components as a Mental Model

• 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

3. Component Principles

• Loose principles for tightly scoped components
• One-task principle
• Top-down principle
• Isolation principle
• Stand-alone principle

4. Scoping Components

• 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

5. Practical Components

• Structuring components
• Reusability and when not to care
• Stand-alone component development

Conclusion

• Components everywhere