Component

As explained in Think Like a CTO

A component is a distinct major part of a software system that contributes a defined capability or function.

A component is a distinct major part of a software system. Components can be reused to accelerate development, assessed for business-criticality and support needs, and shown as connected parts of an enterprise architecture. section 8.7 section 10.4 section 11.2.7

When reviewing an enterprise system:

• Identify components critical to customer service and continuity, then ask who can help if each fails. section 10.4
• Match support coverage to gaps in team experience or availability; avoid paying for coverage the team does not need. section 10.4
• Map major components and their connections at a high level; leave implementation details for separate, more detailed maps. section 11.2.7

Mapping a profile service

A top-level diagram can show a File Microservice connected to the user-profile module for profile photos without specifying whether they communicate through an API, queue, or shared directory. section 11.2.7

Figure 11.2 Architectural diagram

Use the architectural diagram as a visual example of major components and their connections. section 11.2.7

How Think Like a CTO covers it

How deep it goes

Defines components through business criticality and shows how to map and assess support needs, while leaving implementation logistics out of high-level diagrams.

Examples

Uses Linux, MySQL, Postgres, Firefox, Open Office, JQuery, Gson, and a File Microservice for profile photos.

What you can do after

Evaluate component risks and support gaps, and communicate system boundaries with a high-level architectural diagram.

How it connects

Connects components to open-source software, software licensing, support contracts, architectural diagrams, microservices, and APIs.

liveBookmanning.com

Read Think Like a CTO on liveBook Get the book at manning.com

Also explained in

• 

  liveBookmanning.com
  React Quickly, Second EditionA functional component is a React component defined as a JavaScript function that receives properties as its argument and returns user-interface output.
• 

  liveBookmanning.com
  Build a Frontend Web Framework (From Scratch)A modular application unit that can load data, execute lifecycle logic, and produce part of a user interface.
• 

  liveBookmanning.com
  Pro Angular 16A component is a modular application building block that encapsulates a portion of user-interface structure and behavior.
• 

  liveBookmanning.com
  Architecture Modernization: Socio-technical alignment of software, strategy, and structureA software component is a part of a software system that may range from a function or class to a service or entire system.
• 

  liveBookmanning.com
  React in DepthA component is a self-contained software building block that provides a specific part of a user interface or application behavior.
• 

  liveBookmanning.com
  Web Components in ActionA component is a reusable, standalone unit of interface code that combines structure, styling, behavior, and optionally a customization API.
• 

  liveBookmanning.com
  Refactoring to RustA component is an isolated, reusable software unit that encapsulates a related portion of functionality, data, or user interface.
• 

  liveBookmanning.com
  Design for DevelopersA user interface component is a reusable, self-contained visual and interactive unit of a user interface.
• 

  liveBookmanning.com
  D3.js in Action, Third EditionA component is a modular, reusable user-interface unit that encapsulates part of an application's structure or behavior.

Compare how 10 books explain component →

Related concepts

• controllerincludes · A controller is a software component or architectural role that receives inputs or requests and coordinates their handling by other parts of an application.
• serviceincludes · A service is a capability or activity provided by an entity to meet the needs of users or other components.
• pluginincludes · A plugin is an optional software component that extends or modifies a host application’s capabilities through an extension or integration mechanism.
• directivekind of · A directive is a framework-specific instruction attached to markup that controls processing, rendering, or the behavior of an element or template.
• component templateuses · An Angular component template is declarative, HTML-based markup containing expressions and bindings that define a component’s rendered view.
• useStateuses · useState is a React Hook that provides a function component with a state value and a function for updating it.

This explainer was generated by Manning's knowledge graph from the text of Think Like a CTO. The section links point to the parts of the book it draws on.