React + Flux

and the future of e-commerce search

by

Ken Ding and Sean Kozer

What we do

• Retail eCommerce across multiple departments
• Django + Backbone + more

Let's Build Something

• Elasticsearch is great, but our front end is lacking
• Heaps of view logic makes it complex
• Only way out is to overhaul

Why React?

• Opportunity to build a prototype
• New way of thinking
• Easy for collaboration

What is React?

• Javascript library for creating UI
• Just the V in MVC
• Built by Facebook and Instagram

What is FLUX?

• Design pattern
• Unidirectional flow

Initial "React"ion

Mark up in JS?

 

No thanks.

Technical benefits

• Building components, not templates.
• Reduced complexity
  • Declarative
  • Goodbye micromanaging DOM manipulation
  • Figuring out which views to update
• Virtual DOM
• Fun

Example of DOM MANIPULATION

var View = Backbone.View.extend({
  modifyDOM: function() {
    this.$el.html(this.template(obj));
  },

  render: function() {
    this.$el.html(this.template(obj));
    return this;
  }
});

DEMO TIME

How we built it

Tech Stack

• ReactJS + Flux + Immutable JS
• Webpack
• Go
• Elasticsearch

Component Hierarchy

Component Hierarchy

Component Hierarchy

/** @jsx React.DOM */

var React = require('react');

var MainApp = React.createClass({
    render: function() {
        return (
            <div>
                <InstantBar />
                <InfoBox />
                <ProductGrid />
            </div>
        );
    }
});
    
module.exports = MainApp;

The Flux Cycle

var SuggestionActionCreator = {
  fetchSelectedProduct: function (text) {
    // Making a call to our server
    ProductWebAPIUtils.fetchProducts(text)
      .then(function (data, textStatus, jqXHR) {
        AppDispatcher.dispatch({
          actionType: Constants.FETCH_PRODUCTS,
          data: data
        });
      }, function (jqXHR, textStatus, errorThrown) {
        console.log(errorThrown);
      });
  }
}

Lessons

• Hard to choose the right implementation
  • Flux
  • Reflux
  • Fluxxor
• Building components from scratch

Questions?

We're hiring

check out

careers.kogan.com/software-devs-engineering