Web Components and Modularization: Practical Approaches

1h 7mIntermediate2020-10-08

Authors

Morten Rand-Hendriksen

Senior Staff Instructor, Speaker, Web Designer, and Software Developer

Course details

Modern development practices have shifted from thinking about entire pages to thinking about components and how to combine them to create views. This course looks at practical approaches to componentization and modularization to help you identify when a component is needed, what it does, and how to plan for and design portable and maintainable components of your own. As code componentization is relevant to all developers, instructor Morten Rand-Hendriksen shifts the focus away from coding and into the conceptual work that goes into component design. Using practical examples, Morten details how to sketch out and organize components in projects large and small. Learn about the four core principles of component development. Get tips and best practices for component planning. Plus, learn how to organize components and structure their markup, determine when (and when not to) focus on reusability, and more.

Skills covered

C#PHPAPIsJavaScriptJavaOraclePythonOpen SourceMicrosoftSoftware DevelopmentOne-Off

Concepts

0. Introduction

01 - Components for the web

1. What Are Components for the Web

02 - What are components for the web
03 - Web components - A special case
04 - Why components are so popular

2. Components as a Mental Model

05 - A mental model for components
06 - Starting with a visual mockup
07 - A DOM tree with branches and leaves
08 - Tip - Map your file tree to the DOM
09 - Challenge - Create a component map
10 - Solution - Create a component map

3. Component Principles

11 - Loose principles for tightly scoped components
12 - One-task principle
13 - Top-down principle
14 - Isolation principle
15 - Stand-alone principle

4. Scoping Components

16 - Plan before you code
17 - Raw output
18 - Properties
19 - Input and output
20 - State
21 - Who owns state
22 - Life cycle
23 - Challenge - Scope a complex component
24 - Solution - Scope a complex component

5. Practical Components

25 - Structuring components
26 - Reusability and when not to care
27 - Stand-alone component development

Conclusion

28 - Components everywhere