Tony Brown anthonybrown

Better streaming interface for modern JavaScript

Node streams have a lot of issues. Awkward to control backpressure, no error propagation, overcomplicated implementation impenetrable to any view source attempts, etc...

To solve this, here is an implementation of pull-streams in modern JS, using promises, async iterators, and for..await loops.

Features:

Built in backpressure.
Build in error propagation.

pure() can be used as a higher order function or a decorator.

When passed a pure functional component, it wraps the function in a classful Component with a shouldComponentUpdate() that ignores renders for unchanged props.

When passed a classful Component, it injects a shouldComponentUpdate() method into the Component's prototype that ignores renders for unchanged props & state.

Functional Example

import pure from 'pure-component';

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

How RabbitMQ Saved My (S)aSS

What happens to your web app when a databases update fails? Or the email service is unreachable due to network hiccups? Will the front-end survive bad code crashing the back-end? Admit it - the web app will crash and show a useless "server error" message. But there is hope! Messaging servers, like RabbitMQ, work wonders in the face of failure - decoupling processes and allowing for re-try when things come back up.

In this talk, I'll show you how I re-architected SignalLeaf to deal with crashes and sometimes-connected services. You'll hear tales from the trenches of success and failure with RabbitMQ and Node.js. You'll see how a message queue can help you build a more resilliant web app. And you'll clean up your code at the same time! Rejoice as your application architecture improves by leaps and bounds, with RabbitMQ!

	import React, { Component } from 'react';
	import { Field, reduxForm } from 'redux-form';
	import moment from 'moment';
	import DatePicker from 'react-datepicker';
	import ReactQuill from 'react-quill';
	import MaskedInput from 'react-maskedinput';

	export const renderField = (field) => (
	<div>
	<input {...field.input} type={field.type} placeholder={field.placeholder} className="form-control" />

	import React from 'react';
	import { shallow } from 'enzyme';
	import MyComponent from '../src/my-component';

	const wrapper = shallow(<MyComponent/>);

	describe('(Component) MyComponent', () => {
	it('renders without exploding', () => {
	expect(wrapper).to.have.length(1);
	});

	{
	"auto_complete_commit_on_tab": true,
	"color_scheme": "Packages/Oceanic Next Color Scheme/Oceanic Next.tmTheme",
	"draw_white_space": "all",
	"font_face": "Fira Mono",
	"font_size": 20,
	"tab_size": 2,
	"theme": "Brogrammer.sublime-theme",
	"translate_tabs_to_spaces": true,
	"trim_automatic_white_space": true,

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/2.3.22/rx.all.js"></script>
	<style id="jsbin-css">
	body {
	font-family: sans-serif;

	module.exports = {
	courses: [
	{
	id: "clean-code",
	title: "Clean Code: Writing Code for Humans",
	watchHref: "http://www.pluralsight.com/courses/writing-clean-code-humans",
	author: {
	id: "cory-house",
	name: "Cory House"
	},

	/**
	* Basic proof of concept.
	* - Hot reloadable
	* - Stateless stores
	* - Stores and action creators interoperable with Redux.
	*/

	import React, { Component } from 'react';

	export default function dispatch(store, atom, action) {