Web Components and Modularization: Practical Approaches

Web Components and Modularization: Practical Approaches

1h 7mIntermediate2020-10-08

Authors

Morten Rand-Hendriksen

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

Introduction

  • Components for the web

What Are Components for the Web

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

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

Component Principles

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

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

Practical Components

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

Conclusion

  • Components everywhere
40,000 Toman