staltz

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

---

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

---

staltz

TypeScript supports Pick to allow you to get a "subset" object type of a given type, but there is no built-in Pick for deeper nested fields.

If you have a function that takes a large object as argument, but you don't use all of its fields, you can use Pick, Pick2, Pick3, etc to narrow down the input type to be only just what you need. This will make it easier to test your function, because when mocking the input object, you don't need to pass all fields of the "large" object.

staltz

Not for everyone. Each programmer has their own appreciation of what is good coding music.

For when I need to think deep, debug something, or design

(From most influential to least)

• David Helpling & Jon Jenkins (sample)
• Patrick O'Hearn (sample)
• Ólafur Arnalds (sample)
• Michael Hedges (sample)
• Alex de Grassi (sample)

staltz

function createObservable(subscribe) {
  return {
    subscribe,
    pipe: function(operator) {
      return operator(this);
    },
  };
}

const numberObservable = createObservable(function(observer) {

staltz

'use strict';

import {Router5, RouteNode} from 'router5';
import logger from '../logger';

// The set of valid sink functions includes synchronous state-affecting router functions that do not require a callback
// and which do not have a significant return value other than the router object itself.
const validSinkFuncs = ['add','addNode','canActivate','deregisterComponent','navigate','registerComponent','setOption','start','stop'];

function validateAndRemapSinkArgument(arg) {

staltz

const Cycle = require('@cycle/core');
const CycleWeb = require('@cycle/web');
const makeHTTPDriver = require('@cycle/http');
const h = CycleWeb.h;

function main(responses) {
  const GITHUB_SEARCH_API = 'https://api.github.com/search/repositories?q=';

  // This essentially models when search requests are supposed
  // to happen

staltz

import kotlin.browser.document
import kotlin.browser.window

// Type definitions
native("Cycle")
val Cycle : dynamic = noImpl

native("Cycle.h")
fun h(tagName: String) : VTree = noImpl

staltz

import Cycle from 'cyclejs';

const { h, Rx } = Cycle;

// all html/svg element names <<
var elements = [
  'a',
  'abbr',
  'address',
  'area',

staltz

var Q = require('q');

function delaydo(x) {
	var deferred = Q.defer();
	setTimeout(function() {
		if (x === 2) {
			console.log("reject: "+x);
			deferred.reject(x);
		}
		else {

staltz

Code glossary

A useful list of programming jargon to solve your naming problems.

Adapter: a design pattern that translates one interface for a class into a compatible interface.

Admin: short for 'administrator'; very commonly used in speech or online to refer to the systems person in charge on a computer. Common constructions on this include sysadmin and site admin (emphasizing the administrator's role as a site contact for email and news).

Counter: a variable or user interface that counts occurrences or repetitions of some phenomena or event.