umma.dev

Design Patterns in Front-end Frameworks

Looking into how ReactJS, Angular and jQuery all differ when it comes to design patterns.

React

Traditionally the Decorator pattern is used to add new functionality to objects without changing the structure of the application. In React the Decorator pattern is referred to Higher Order Components (HOC).

This means that you can have can have an app that has many different components, which are programmed to function in different ways.

Let’s say for example you have a Christmas tree. You want to decorate the tree but you do not want to modify it. You add different components onto the tree, such as tinsel, lights and baubles.

Angular

Angular follows MVC (Model, view and control), which is similar to the Observer design pattern.

The model deals with all the logic/data within the application from the view and the controller.

The view is the functionality for the UI.

The controller is the interface between themodel and view, it controls the handling of interactions between the UI and data.

jQuery

In the Composite pattern the app shares a common set of properties ad methods. A lot of the logic is seperated into two parts, JavaScript files and CSS files.