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

The Flux Cycle

The Flux Cycle

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

React + Webpack

By skozer

React + Webpack

  • 4,247