eiriklv

ES6 Classes

ES2015 has introduced the concept of "classes" in JavaScript.

But be aware - JavaScript classes are just syntactical sugar over JavaScript's existing prototype-based inheritance. The class syntax is not introducing a new object-oriented inheritance model to JavaScript.

JavaScript classes provides simpler and clearer syntax to create objects and deal with inheritance (proceed with caution.. inheritance vs. composition = specialization vs. sharing behavior).

The existing model of prototypal inheritance in JavaScript is based on a special kind of function and the new keyword, which really just alters how the function behaves regarding what it returns and how it sets up the prototype chain.

eiriklv

// How to ensure that our animation loop ends on component unount

componentDidMount() {
  this.startLoop();
}

componentWillUnmount() {
  this.stopLoop();
}

eiriklv

/**
 * Example of empty game using 2D representation
 */
const exampleGame2D = [
  ['', '', ''],
  ['', '', ''],
  ['', '', ''],
];

/**

eiriklv

/**
 * Dependencies
 */
const { plural } = require('pluralize');

/**
 * Get an item from an array collection by id
 */
const getByIdFromArray = (collection = []) => (id = '') => {
  return collection.find((item = {}) => item.id === id);

eiriklv

const { log } = console;

const Undefined = new Proxy(function() {}, {
  get(target, key, receiver) {
    if (key === 'name') {
      return 'Undefined';
    }

    return Undefined;
  },

eiriklv

/**
 * Modeling an online store with categories, sub-categories and products
 *
 * NOTE: The important thing is to be able to
 * describe any requirement with the chosen data model
 *
 * NOTE: Another important thing is conventional interfaces
 * and impedance matching. Data should just flow through the
 * functions without needing to conform to many different interfaces
 */

eiriklv

Make it real

Ideas are cheap. Make a prototype, sketch a CLI session, draw a wireframe. Discuss around concrete examples, not hand-waving abstractions. Don't say you did something, provide a URL that proves it.

Ship it

Nothing is real until it's being used by a real user. This doesn't mean you make a prototype in the morning and blog about it in the evening. It means you find one person you believe your product will help and try to get them to use it.

Do it with style

eiriklv

/**
 * Import dependencies
 */
const { EventEmitter } = require('events');
const ReconnectingWebSocket = require('reconnecting-websocket');

/**
 * Export a function that creates a websocket connection interface
 */
export default function createReconnectingWebsocket(uri) {

eiriklv

/**
 * Modeling a step-wise form with data
 *
 * NOTE: The important thing is to be able to
 * describe any requirement with the chosen data model
 *
 * NOTE: Another important thing is conventional interfaces
 * and impedance matching. Data should just flow through the
 * functions without needing to conform to many different interfaces
 */

eiriklv

/**
 * Dependencies
 */
const sortBy = require('sort-by');

/**
 * Representing an election as a data structure
 */
const votes = [
  { id: 0, voterId: 'a', zone: 'Oslo', party: 'Miljøpartiet De Grønne' },