Component-driven development is transforming the web

Component-driven development is transforming the web

March 23, 2022·Nick Gracilla
Nick Gracilla

The web is undergoing a transformation: it was once page-based but is increasingly interactive and component-based. What, exactly, are components?

Is an image, or a title a component? No: these are elements on a web page. How about a set of elements, with a complex layout, like a “three-column layout with images,” that has responsive behavior for mobile devices? Still no. Call that a content block, or a layout block, perhaps.

So what makes a thing on a web page a component?

Components are like mini-applications, embedded in a web page. They can access remote resources, provide a small user interface, and can “do work.” So: an embedded YouTube widget is a component; a display helper for a PDF is a widget, or a “here’s the weather in your area” is a widget since it pulls data from another site, and maybe geo-locates the user.

Components:

  1. are embedded on a web page, and delivered via a web browser;

  2. are styled, hopefully, to look similar to the site itself;

  3. have states, like loading, display, interactions, or error screens;

  4. have a user interface, even if it’s a small “play” button on a video;

  5. can connect to other systems via APIs, including local data or remote servers and data stores;

  6. are developed in Javascript, and therefore can function like mini, independent applications;

  7. are isolated from their parent app, from the perspective of look and feel (they can have their own scoped styles), code (they can have their own isolated Javascript), and functionality — they work independently of the business logic of the parent app.

Updated on