Coded Geekery

What is Component-Oriented Programming (COP)?

September 14, 2019

What is component-oriented programming?

Indrek Lasn:

With all the latest front-end frameworks — such as React, Angular, and Vue — we’re seeing a cool new paradigm rise. It’s known as component-oriented programming, and it’s all about stitching reusable components together like Lego blocks.

At its core, component-oriented architecture embraces the Don’t Repeat Yourself (DRY) dogma. Repeating code is time and efficiency wasted. The less time we spend repeating ourselves, the faster we can build our applications. As software engineers, with the deadlines we’re sometimes set, taking any advantage can be crucial in satisfying our overlords.

[…]

If you know any modern front-end frameworks, such as React, Angular, or Vue, you might know already what component-based architecture looks like. Here’s a basic example of a Header component:

import React from 'react';
import { Logo, ProfileImage, BurgerMenu, HeaderWrapper } from 'components';

const Header = () => (
  <HeaderWrapper>
    <Logo></Logo>
    <ProfileImage></ProfileImage>
    <BurgerMenu></BurgerMenu>
  </HeaderWrapper>
)

export default Header;

As you can see, we’re importing components and compositing and laying them like bricks to modify one piece of the application — the header in this case.

Posted in: #Code#Links
Source: https://medium.com/better-programming/what-is-component-oriented-programming-cop-10b32ae1fa1c

Roger Stringer

Written by Roger Stringer, Coded Geekery is a blog designed to give me a forum to talk and think. You should follow me on Twitter