Priya Bhatt PriyaBhatt13

The introduction to Reactive Programming you've been missing

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.

Reactive Programming

Introduction
Functional Programming

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

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?

Stuff I wish I'd known sooner about service workers

I recently had several days of extremely frustrating experiences with service workers. Here are a few things I've since learned which would have made my life much easier but which isn't particularly obvious from most of the blog posts and videos I've seen.

I'll add to this list over time – suggested additions welcome in the comments or via twitter.com/rich_harris.

Use Canary for development instead of Chrome stable

~~Chrome 51 has some pretty wild behaviour related to console.log in service workers. Canary doesn't, and it has a load of really good service worker related stuff in devtools.~~

Concurrency in JavaScript

Javascript is a programming language with a peculiar twist. Its event driven model means that nothing blocks and everything runs concurrently. This is not to be confused with the same type of concurrency as running in parallel on multiple cores. Javascript is single threaded so each program runs on a single core yet every line of code executes without waiting for anything to return. This sounds weird but it's true. If you want to have any type of sequential ordering you can use events, callbacks, or as of late promises.

	'use strict';

	/***************NATIVE forEACH*******************/

	Array.prototype.myEach = function(callback) {
	for (var i = 0; i < this.length; i++)
	callback(this[i], i, this);
	};

	//tests

	import { takeLatest } from 'redux-saga'
	import { call, put } from 'redux-saga/effects'
	import fetch from 'isomorphic-fetch'
	import * as actions from './modules/grid'
	import * as api from '../lib/api'

	export function* fetchGrids(action) {
	try {
	const grids = yield call(api.GET, 'grids')
	yield put(actions.fetchGridsSuccess(grids))

	# Requirements

	* Python 2.7
	* Google Chrome
	* ChromeDriver - WebDriver for Chrome

	- Download the latest chromedrive which is 2.28 from here - https://sites.google.com/a/chromium.org/chromedriver/downloads
	- Extract and move `chromedriver` file to `/usr/local/bin/chromedriver`
	- git clone https://github.com/li-xinyang/OS_FrontendMaster-dl
	- cd OS_FrontendMaster-dl

	/* Client side, works in Chrome 55 and Firefox 52 without transpilation */
	//https://blogs.msdn.microsoft.com/typescript/2016/11/08/typescript-2-1-rc-better-inference-async-functions-and-more/
	async function fetchURLs() {
	try {
	// Promise.all() lets us coalesce multiple promises into a single super-promise
	var data = await Promise.all([
	/* Alternatively store each in an array */
	// var [x, y, z] = await Promise.all([
	// parse results as json; fetch data response has several reader methods available:
	//.arrayBuffer()