Coded Geekery


What is Component-Oriented Programming (COP)?

Roger Stringer / September 14, 2019

1 min read––– views

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.

Tagged In:#code#links

Coded Geekery

© 2021 Roger Stringer. All rights reserved.



HomeAbout MeContact Me

Not Playing


Buy me a coffee

Buy me a coffee