itsjoekent

This is intended only as a proposal and not a set of final guidelines. It assumes you have working knowledge of React & Redux. Last updated March 8th, 2018.

Theory

This document outlines a system for developing React applications that should be able to provide a clean and natural way of thinking about data within your UI and how it binds to components. The system should try to get out of the way as much as possible, and make it simple to refactor your application when the time arises. Finally it should keep things separate from eachother, and make it clear how each piece can be independently tested.

Specific Problems-to-solve

These are problems specific to React/Redux applications and is not meant to be a critique of any specific project.

1. Keeping data consistent across components.

itsjoekent

sync prod --> staging content

Goal: Have staging mirror production content

tools reference

• contentful-import
• contentful-export
• contentful-entry-removal (Not the exact tool we need but provides a good reference)

steps

itsjoekent

/*
 * view the diff here https://imgur.com/a/cdHwP
 */

import { connect } from 'react-redux';
import { Connector as PuckConnector } from 'puck-client';
import Feed from './Feed';
import { clickedViewMore, clickedSignUp } from '../../actions';
import {
  getBlocksWithReportbacks,

itsjoekent

Keybase proof

I hereby claim:

• I am deadlybutter on github.
• I am itsjoekent (https://keybase.io/itsjoekent) on keybase.
• I have a public key whose fingerprint is 3C64 78F4 5258 EF83 3360 247C A930 CDA6 5BC4 4485

To claim this, I am signing this object:

itsjoekent

var increment = 100000;

// http://halistechnology.com/2015/05/28/use-javascript-to-export-your-data-as-csv/
function convertArrayOfObjectsToCSV(args) {
    var result, ctr, keys, columnDelimiter, lineDelimiter, data;

    data = args.data || null;
    if (data == null || !data.length) {
        return null;
    }

itsjoekent

# Save a student record to database
# string firstName
# string lastName
# array grades
#   assignment => grade
function addRecord (firstName, lastName, grades)
  id = random() # Names are not unique and our database could contain conflicting records
  db_save(id, firstName, lastName, grades) 

# Find a student record, only one parameter required to perform DB query

itsjoekent

    if(monster.x + monsterSpeed == data.x || monster.x - monsterSpeed == data.x || monster.x == data.x) {
      if(monster.y + monsterSpeed == data.y || monster.y - monsterSpeed == data.y || monster.y == data.y) {
        if(data.x > wallWidth && data.x < mapWidth - wallWidth) {
          if(data.y > wallHeight && data.y < mapHeight - wallHeight) {
            monster.x = data.x;
            monster.y = data.y;
            monster.direction = data.direction;
            socket.broadcast.emit('update-pos', monster);
          }
        }

itsjoekent

posUpdates.push(data);

itsjoekent

socket.on('update-pos', function(data) {
  if(allMonsters[data.id] == undefined) {
    allMonsters[data.id] = new Monster(data.x, data.y, data.type, data.id, data.direction);
  }
  else {
    // Relevant part, by getting to this point we assume the human 
    // does in fact exist, as it's in the list of human ID's
    posUpdates.push(data);
  }

itsjoekent

git checkout dev;
git fetch upstream;
git rebase upstream/dev;
git push origin dev;

NewBranch () {
  read -p "Do you wish to checkout a new branch? " yn
  case $yn in
    [Yy]* ) echo "Type in the issue #"; read issue_number; git checkout -b $issue_number; break;;
    [Nn]* ) ExistingBranch; break;;