Flux explained for newbies - Part 2

Reading Time: 5 minutes

Introduction

Flux-CapacitorIn the first part of this article series I started to talk about "WHY?" using Flux. Using a simple form component as example I demonstrated, that we need to decide how our form data flows. I concluded the post, that the inherent way of how data flows in component based application can be quite cumbersome, especially if a complex component consists of a multi-layered component-hierarchy. Traditional data-binding (may it one-way, or two-way) leads to a chain of re-passing data down- and upwards the component tree. Extrapolating the given problem we can depict the problem in a more generic way.

Continue reading

My talk at QCon in Rio de Janeiro

Reading Time: 1 minutes

Slides of my talk held at the international developer conference QCon in Rio de Janeiro in August 2015.

I talked about the emerging trend of component based development (CBD) in frontend engineering. The presented examples cover similarities in current and emerging technologies applying the concept of CBD. Covered technologies are AngularJS (v1 e v2), ReactJS, Polymer, Web Components among others.

Lesson Learnt: Isolate Components Behavior in ReactJS

Reading Time: 4 minutes

hangmanA few weeks ago I complained that calling asynchronous operations inside Reacts lifecycle method componentWillMount like AJAX may have collateral effects. In my case, the application hangs and stuck inside an infinite rendering loop. I discovered that my first attempt to solve the problem was by no way the solution, although I thought it was. The real cause was an unfortunate composition of components. The scenario was the following:

Continue reading

Decorator Components with ReactJS

Reading Time: 7 minutes
Decorator Pattern in OO

Decorator Pattern in OO

Today I'd like to talk about a composition pattern, which can be best denominated as Decorator. Like in object oriented programming the decorator wraps a component and extends its functionality, usually without changing the basic behaviour. With the composition capabilities of ReactJS it is possible to adopt this concept and allows to create components that extends other components, for example by visual effects, or pure functional behaviour like logging activities. In this article I'll present a simple use case demonstrating the pattern.

Continue reading