Code Tips #9: Javascript – Compare objects

Many times we are in situations where we want to compare instances of a class, aka objects. Let’s see it with an example

class Car {
  constructor(speed){
    this.speed = speed
  }
}


const car1 = new Car(100)
const car2 = new Car(120)
const car3 = new Car(90)

console.log(car2.speed > car1.speed) // true

const sorted = [car1, car2, car3].sort((a,b) => {
  return a.speed - b.speed;
});

console.log(sorted) // [ Car { speed: 90 }, Car { speed: 100 }, Car { speed: 120 } ]

This works perfectly fine but we can do better Continue reading Code Tips #9: Javascript – Compare objects

Code Tips #8: Null Object Pattern

Many times functions accept object references that can be null, and we tend to add if statements to treat the special case where null is passed to a function, and either provide a default response or do nothing. In the following example our calculateSpeed function expects an object that has a getSpeed function. In Javascript we will have to do something like:

class Car {
  getSpeed(){
    return 100;
  }
}


const calculateSpeed = function(vehicle){
  if(vehicle && typeof vehicle.getSpeed === 'function'){
    return vehicle.getSpeed();
  } else {
    return 50;
  }
}

const car1 = new Car();

console.log(calculateSpeed(car1)); // 100
console.log(calculateSpeed()); // 50

But there is a better way to achieve that. Using the Null Object Pattern we can Continue reading Code Tips #8: Null Object Pattern

Code tips #5: React – How to avoid extra control property

In React many times we have components that have some slight variations and we want to control how these components will be rendered. For example, we have a mobile and a desktop version of a component. Usually React developers tend to add an extra property in the component based on which they control the version of the component that will be rendered, either through if or switch statements.

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ProductCardSmall from './ProductCardLarge';
import ProductCardMedium from './ProductCardMedium';
import ProductCardLarge from './IPBadgeLarge';

export default class ProductCard extends Component {
  static propTypes = {
    cardType: PropTypes.string,
  };

  render() {
    const { cardType } = this.props;

    switch (cardType) {
      default:
      case 'small':
        return <ProductCardSmall {...this.props} />;
      case 'medium':
        return <ProductCardMedium {...this.props} />;
      case 'large':
        return <ProductCardLarge {...this.props} />;
    }
  }
}

And then use the component like:

<ProductCard cardType="medium" />

But there is a way to simplify the code by Continue reading Code tips #5: React – How to avoid extra control property

Implementing backpressure for smoother user experience in low-end devices

If you are building applications that consume real-time data you may have faced a situation where the component or service that consumes the data cannot keep up with the volume or speed of the produced data. The “producer” module of the system is emitting data faster than the “consumer” module of the system can process.

The consumer tries to keep up processing the data by increasing the amount of the system resources it is using (CPU, memory), that can be fair in Continue reading Implementing backpressure for smoother user experience in low-end devices

Provide i18n to an application without harming its performance

Internationalization/Localization is an important aspect of a successful web application and one that can be particularly difficult to get it right from the beginning.

In React world there are several i18n solutions, with react-i18n by Yahoo being the most popular one. Its use is pretty simple, you just wrap your application with Continue reading Provide i18n to an application without harming its performance

Pseudomandatory parameters in es6 functions

In many programming languages, the parameters of a function are by default mandatory and the developer has to explicitly define that a parameter is optional. In Javascript, every parameter is optional, but we can enforce this behavior without messing with the actual body of a function, taking advantage of es6’s feature of default values for parameters.

const _err = function(message) {
  throw new Error(message);
}

const getSum = (a = _err('a is not defined'), b = _err('b is not defined')) => a + b;

getSum(10); // throws Error b is not defined

`_err` is a function that immediately throws an Error. If no value is passed for one of the parameters, the default value is going to be used, `err` will be called and an Error will be thrown. You can see more examples for the default parameters feature on Mozilla’s Developer Network.