What is Component-Oriented Programming (COP)?

Component-oriented programming is the new object-oriented programming

Indrek Lasn
Sep 13, 2019 · 4 min read
Image for post
Image for post
Photo by Daniel Korpai on Unsplash

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.

What Component-Oriented Programming Looks Like

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.

The Problems Component-Oriented Programming Solves

COP is a powerful concept since it lets us isolate and encapsulate logic. The smaller our files are, the more maintainable they are — it’s easy as that. There’s a good reason Facebook had to innovate and fix their famous notification bug.

Back in around ‘2014–15, the notification would keep indicating you had new notifications, yet when you clicked on the red notification bell, it didn’t show any new notifications. It sparked rage all over the internet. The cause of that bug was unmaintainable, huge slobs of files and spaghetti PHP code. I’m not trying to bash PHP. I think it’s practical and a great way of getting things off the ground. It’s possible to write spaghetti code in any language — the poor culprit just happened to be PHP in this case.

React was invented to solve that particular notification issue, and the birth of that library marked the dawn of a new era. That era is called component-oriented programming (COP).

My prediction for the future is native web components all the way. As of now, each framework has its own ecosystem of tooling, components, libraries, etc. While it’s handy to reuse open-source code, what’s not cool is that each ecosystem has locked itself in a bubble. If you know React, you’re locked into using only React versions of code. You can’t use Angular tooling with Vue or Svelte. The native Web Components API will change all of that.

Think of the possibilities if we could share between all libraries.

Exhibit A: Someone wrote an awesome animation library that’s compatible with all frameworks as libraries as long as it’s written in JavaScript or transpiled or compiled to JavaScript. That’s exactly what the native Web-Components API aims to achieve: a unified way for all libraries to share code. If you’re curious to learn more about the Web Components API, head over to this article.

Web Components API

Soon, we will have a unified API for all JavaScript libraries and frameworks to share code. You code it once and reuse it everywhere. The Web Components API lets us do all of that. This is what a simple button looks like using the Web Components API:

class WebComponentButton extends HTMLElement {

constructor() {
super()
this.addEventListener('click', () => {
console.log('click')
})
}

}

A web component is a simple class-based inheritance piece of code. Notice how we extend our button to inherit the HTMLElement class.

Image for post
Image for post
HTMLElement — https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement

If you’re curious and want to learn more about web components, head to the Mozilla documentation. Mozilla has a well-written bit about web components.

Next time you’re thinking about solving a problem, try to approach it with a component-based architecture mindset and solution. The component-based architecture really shines as you’re growing in complexity. The larger the challenge, the more you should break it up into smaller pieces.

Browser Support for the Web Components API

The API is gaining traction and support. Keep in mind it’s a relatively experimental technology, and no one knows when and how it will be standardized, but it’s always good to be in the loop and keep your eyes open for new and cool programming-related technologies.

Don’t worry, you don’t have to learn yet another API or technology just yet. The landscape changes quickly in the JavaScript demographics, but it doesn’t hurt to expand your toolbox with more handy tools.

If you’re new to JavaScript and want to learn the language, I recommend starting with reading books combined with building things. Start with the “A Smarter Way to Learn JavaScript” book and here’s a list of fun apps to build.

Thanks for reading, stay awesome. Happy coding!

Better Programming

Advice for programmers.

Indrek Lasn

Written by

I develop the internetz. Stay up to date with the newsletter https://wholesomedev.substack.com/welcome- Connect with me on Twitter @ https://twitter.com/lasnind

Better Programming

Advice for programmers.

Indrek Lasn

Written by

I develop the internetz. Stay up to date with the newsletter https://wholesomedev.substack.com/welcome- Connect with me on Twitter @ https://twitter.com/lasnind

Better Programming

Advice for programmers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store