My Journey in a UI Project (aka front-end is the new back-end)

In this blog post, I share my recent experience in a UI project, as a developer with limited past experience in UI development. I published this internally on REA Group’s wiki a while back to foster interest in UI projects from a broader set of developers – highlighting that solid engineering is a big part of contemporary UI development.

This is not specific to REA, hence I was keen to share this journey externally on our blog. Continue reading

React Training is Coming to Melbourne

We have been busily re-building our core property listings experience using ReactJS for a while now. After the release of our revamped sold property section, we decided to find a way to engage the other areas of the company and give back to the local tech community.

With that in mind, REA Group is very excited to announce that on the 8th – 10th February 2017 we will be hosting a ReactJS workshop run by the amazing React Training team. React Training is a US based group comprised of ReactJS experts and the creators of some of the most popular open source libraries in the space, many of which we use here.

REA and React Training

Continue reading

Functions as Child Components and Higher Order Components

I have recently been on a Higher Order Component (HOC) craze. HOCs are a good tool for implementing cross-cutting concerns or common functionalities, such as logging and tracking. For more information on HOCs, check out this recent post by my colleague Mehdi Mollaverdi!

Then I discovered Functions as Child Components (FaCC) and a couple of my brain cells perished. FaCC’s are components that receive a function as their child. For example:

So let’s take a trip through struggle town.

Continue reading

Singletons Suck (aka Flux to Redux)

As previously mentioned (see ReactJS – Real World Examples of Higher-Order Components), we are currently re-building the core realestate.com.au property experience with ReactJS. While ReactJS may be the shiniest of a long line of JavaScript frameworks (see Derek Zoolander meme), we have been careful about pulling in new “hot right now” libraries until we felt the pain and really needed them. Cue Flux.

Flux-Capacitor

Continue reading

ReactJS – Real World Examples of Higher-Order Components

A Little Bit of Background

Here at REA Group, we've recently been working on a new UI for the core property search experience on realestate.com.au. We've been building this UI as a universal javascript application, supporting both server-side and client-side rendering, using NodeJS and ReactJS.

During this project, we came across a few different use cases for some cross-cutting concerns, such as page load tracking, toggling new features on and off, and desktop/mobile toggling. We wanted to implement these in a generic and reusable way to avoid code duplication. For example, we had different pages (routes) in our application, and wanted to track user visits to those pages, but didn't want to duplicate this tracking code for every route.

We initially used React mixins for some of these problem, but ended up replacing it with higher-order components. In this blog post, I'll first provide a brief introduction to higher-order components (HOCs), and will then go through our journey for each use case and will explain each of the aforementioned techniques (mixins and higher-order component) in more details.


Continue reading