vasanthk

System Design Cheatsheet

Picking the right architecture = Picking the right battles + Managing trade-offs

Basic Steps

1. Clarify and agree on the scope of the system

• User cases (description of sequences of events that, taken together, lead to a system doing something useful)
  • Who is going to use it?
  • How are they going to use it?

vasanthk

function mapValues(obj, fn) {
  return Object.keys(obj).reduce((result, key) => {
    result[key] = fn(obj[key], key);
    return result;
  }, {});
}

function pick(obj, fn) {
  return Object.keys(obj).reduce((result, key) => {
    if (fn(obj[key])) {

vasanthk

import { Component } from "React";

export var Enhance = ComposedComponent => class extends Component {
  constructor() {
    this.state = { data: null };
  }
  componentDidMount() {
    this.setState({ data: 'Hello' });
  }
  render() {

vasanthk

[...document.querySelectorAll('.invite-card')].forEach(card => {
  const headline = card.querySelector('.headline').textContent;
  const accept = card.querySelector('.bt-invite-accept');
  const decline = card.querySelector('.bt-invite-decline');
  const name = card.querySelector('.name').textContent;

  if(headline.match(/recruit/gi)) {
    console.log(`Nah. ${name} looks a little fishy to me. 🚷🚷🚷`);
    decline.click();
  } else {

vasanthk

import React, { Component } from 'react'
import Subapp from './subapp/Root'

class BigApp extends Component {
  render() {
    return (
      <div>
        <Subapp />
        <Subapp />
        <Subapp />

vasanthk

////////////////////////////////////////////////////////////////////////
// Intro
///////////////////////

// Tools like Redux-saga, React-redux and Reselect can easily be used without Redux
// For Reselet there's nothing to do, it's just not coupled to Redux
// For the others, you just need to provide an adapter

// At Stample.co we use a legacy framework that is quite close to Redux but with a bad API
// We want to progressively migrate to Redux, so starting now to use Redux tools on new features will make our migration faster

vasanthk

const store = createStore((state = { counter: 0 }, action) => {
  switch(action.type) {
    case "INCREMENT":
      return { counter: state.counter + 1 }
    case "DECREMENT":
      return { counter: state.counter - 1 }
    default:
      return state
  }
})

vasanthk

cf-ui monorepo

Technical Decision

Build our UI framework inside a monorepo using Lerna.

TL;DR

Building npm packages across many individual repos make big changes difficult to make, test, and publish. Using a monorepo we can solve many of these and

vasanthk

Broken Promises

Technical Decision

Eliminate all promises from application.

TL;DR

The Promise API is the source of many confusing errors in our application, using node style callbacks eliminates the issue without reducing code quality.

vasanthk

import { connect } from 'react-redux'
import ProfilePicture from 'components/ProfilePicture'
import { changeProfilePicture } from '../actions'

export function mapStateToProps(state:any, ownProps:any):any
{
    return {
        profilePictureUrl: state.user.profilePictureUrl,
    }
}