Component Based Architecture

By Barak Drechsler

Front EndComponent Based Architecture

At the beginning we had MVW

MVC MVVM

How MVW front end apps looked like?

We would have a separate horizontal layers

VIews

Controllers

Models

Routes which linked between controllers and views.

Angular 1.4 app example MVC style

https://github.com/angular/angular-phonecat/tree/1.4-snapshot

But after a while things got complicated...

Hard to re-use

Hard to decouple

Hard to maintain and understand as the project grows

Models got bloated with view data.

And then...

Component Based Architecture

Component-based software engineering, is a branch of software engineering that emphasizes the separation of concerns in respect of the wide-ranging functionality available throughout a given software system. It is a reuse-based approach to defining, implementing and composing loosely coupled independent components into systems. This practice aims to bring about an equally wide-ranging degree of benefits in both the short-term and the long-term for the software itself and for organizations that sponsor such software. (wikipedia)

Component Definition

An individual software component is a software package, a web service, a web resource, or a module that encapsulates a set of related functions (or data).

(wikipedia)

Front End Component

Components only control their own View and Data

Components have a well-defined public API - Inputs and Outputs

Components have a well-defined lifecycle

(angular component doc)

The advantages of CBA

Vertical alignment of our code base

Advocates Unidirectional data flows

Easier separation of concerns, and single responsibility

Easier to maintain and expand

Reusability

CBA Example - angular 2 example app

https://github.com/johnpapa/angular2-tour-of-heroes

How to think in components?

Everything is a component, even if it won’t be reusable.

The whole app is a tree of components

Components contain other components

Components interact with other components through their defined API

Stateful and stateless components

Stateful - a “living” component which has knowledge and state, and the ability to modify state, and communicate with external resources.

Stateless

Receives inputs and displays them

Calculates changes, but do not store them, but transfer them to other components

Stateful - impure function

Stateless - pure function

Component Composition

Just like high order functions, we can composite components to extend and enhance existing components.

Usually stateful component will composite state less components to pass them data.

Components In action

Questions?