Thuongvu Ho thuongvu

Building a Maintainable, Agile Architecture for Realtime, Transactional Apps

A maintainable application architecture requires that the UI only contain the rendering logic and execute queries and mutations against the underlying data model on the server. A maintainable architecture must not contain any logic for composing "app state" on the client as that would necessarily embed business logic in the client. App state should be persisted to the database and the client projection of it should be composed in the mid tier, and refreshed as mutations occur on the server (and after network interruption) for a highly interactive, realtime UX.

With GraphQL we are able to define an easy-to-change application-level data schema on the server that captures the types and relationships in our data, and wiring it to data sources via resolvers that leverage our db's own query language (or data-oriented, uniform service APIs) to resolve client-specified "queries" and "mutations" against the schema.

We use GraphQL to dyn

System Design Cheatsheet

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

Basic Steps

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?

Descartes, Berkeley and Functional Reactive Programming

By @dmvaldman

Functional Reactive Programming (FRP) is generating buzz as an alternative to Object Oriented Programming (OOP) for certain use cases. However, an internet search quickly leads a curious and optimistic reader into the rabbit-hole of monads, functors, and other technical jargon. I’ve since emerged from this dark and lonely place with the realization that these words are mere implementation details, and that the core concepts are far more universal. In fact, the groundwork was laid down many centuries before the first computer, and has more to do with interpretations of reality, than structuring programs. Allow me to explain.

There’s an old thought experiment that goes like this:

Vanilla websockets vs socket.io

Note: The points below are a comparison of using vanilla websockets on client and server and using 'em via socket.io and not about why only use socket.io

Native websockets provide us with only a send method to send data to the server. Send accepts only string input (not too sure about this). Socket.io lets us emit arbitrary events with arbitrary data (even binary blobs) to the server.
To receive messages on a vanilla websocket you can only assign a handler for the message event. The data you receive is mostly likely to be text (again not too sure about this) and you will have to parse it manually before consuming it. Socket.io lets the server and client both emit arbitrary events and handles all the parsing and packing/unpacking.
Socket.io gives us both a server and a client. Implementing a vanilla websocket server isn't something that you would want to do per project since it's quite painful. You will have to implement [RFC6455](https://tools.ietf.org/h

React (Virtual) DOM Terminology

In React's terminology, there are five core types that are important to distinguish:

ReactElement / ReactElement Factory
ReactNode
ReactComponent / ReactComponent Class

React Elements

Install MongoDB with Homebrew

brew install mongodb
mkdir -p /data/db

Set permissions for the data directory

Ensure that user account running mongod has correct permissions for the directory:

	<!doctype html>
	<html>
	<head>
	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
	<link rel="stylesheet" type="text/css" href="http://jmblog.github.com/color-themes-for-google-code-prettify/css/themes/github.css">
	<style>
	.line-numbers {
	border-right: 1px solid #eee;
	color: #aaa;
	font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;

	import { Component } from "React";

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

	# Hello, and welcome to makefile basics.
	#
	# You will learn why `make` is so great, and why, despite its "weird" syntax,
	# it is actually a highly expressive, efficient, and powerful way to build
	# programs.
	#
	# Once you're done here, go to
	# http://www.gnu.org/software/make/manual/make.html
	# to learn SOOOO much more.