Component Composition with ReactJS

Reading Time: 12 minutes

Decoupled and coupled composition.

ReactJS follows the current trend of component oriented Web UI design. Component oriented design is nothing new; in my good old desktop times I wrote applications in Qt, which uses widgets. Java Server Faces, WebForms and others do the same on server side. Nowadays, we can see the same trend hitting client side, like WebComponents, Directives in Angular, FlightJS, and of course ReactJS. In this article I'll talk about different composition types you can realize with ReactJS. Although this article shows how to compose your UI using ReactJS for composition, the ideas behind the composition modalities can be applied for other component driven libraries, or frameworks, too. I distinguish two modalities of composition, which I call Coupled and Decoupled Composition.

A coupled composition means that one component is the owner of another component.The owning component can be considered as a parent, while the owned component becomes a child.This kind of coupling leads to a typical component hierarchy with parent and children components.

decoupled composition is used when none of the components is owner, nor owned.These components exist on the same screen, nevertheless they are not bound or related to each other.

The composition modality defines the way how components communicate which each other.

Continue reading

Component based web UI with ReactJS

Reading Time: 10 minutes

Component based Web UI with ReactJS

Recently, I started a web frontend project using ReactJS. I am working with AngularJS on an enterprise application, but I thought for this relatively small project it would be a total overbloat using Angular. As I started to read about React, my curiosity grew. Most critics were positive, especially from those who already worked with React, and so I decided to give it a try. Now, after some days of seriously working with ReactJS, I would like to share my experiences.

Continue reading

Javascript Evolution - 2015 Preview

Reading Time: 3 minutes

The upcoming year will be a milestone in history of Javascript evolution. In mid of 2015 the ECMA 6 "Harmony" is going to be released, which brings a bunch of new features, like a native Promise API, Arrow Functions, Generator Functions, Maps and Sets, and a lot of more. Nowadays, some features are already supported by the more elaborated major browsers. To have a better idea what is currently supported take a look at this page. The excellent documentation of MDN covers at least the features implemented already available in FF.

Continue reading