Kosmin

import React, { PropTypes, PureComponent } from 'react';

class Car extends PureComponent {
  render() {
    return (
      <div>
        {`Your object: ${details.name} ${details.color}`}
      </div>
    );
  }

Kosmin

import React, { PropTypes, Component } from 'react';

class Car extends Component {
  shouldComponentUpdate(nextProps) {
    return this.props.details === nextProps.details;
  }

  render() {
    return (
      <div>

Kosmin

import React, { PropTypes, Component } from 'react';

class Car extends Component {
  shouldComponentUpdate(nextProps) {
    return  this.props.details.name === nextProps.details.name &&
            this.props.details.color === nextProps.details.color;
  }

  render() {

Kosmin

import React, { PropTypes, Component } from 'react';

class Car extends Component {
  render() {
    return (
      <div>
        {`Your object: ${details.name} ${details.color}`}
      </div>
    );
  }

Kosmin

import React, { Component }, from 'react';

class Container extends Component {
  render() {
    console.log('rendering Container');
    return (
      <div>
        <Car details={this.props.firstCarDetails} />
        <Car details={this.props.secondCarDetails} />
      </div>

Kosmin

import React from 'react';

const Car = ({details}) => {
  console.log('rendering Car component');
  return (
    <div>
      {`Your object: ${details.name} ${details.color}`}
    </div>
  );
}

Kosmin

// This comes in handy whenever we want to uniquely identify JSON objects on the client side
// - works with ImmutableJS objects or ES6 Maps
export default (object) => {
  if (object.get) {
    return `${object.get('type')}_${object.get('id')}`;
  }

  return `${object.type}_${object.id}`;
};

Kosmin

// Simple interface used to execute a callback in different ways depending on
// whether or not a function returns a promise or not.

// Usage:
//     import Promisable from 'promisable';
//
//     Promisable(someFunction()).then(() => {
//        promiseWasSuccessful()
//     }, promiseFailed());
//

Kosmin

module = angular.module 'helpers.promise_queuer'

# Lets us ensure that some promises don't execute if others are in progress
# within a given context
#
# Notes:
#   This also helps us decouple the queuing logic from our promises.

###
Architecture Notes:

Kosmin

# Shows in an understandable format what the diff is between two hashes.
# I've only really used this for debugging purposes
deepCompare = (source, destination, stack = []) ->
  # This relies on angular, but this line can be replaced with return if source == destination
  return if angular.equals(source, destination)

  # Object and not array
  if typeof source == 'object' && source.constructor != Array
    # invalid destination or different types
    if !destination? || (typeof destination != 'object' || destination.constructor == Array)