Jack Hanford hanford

Workbox runtime caching recipes

Your Service Worker script will need to import in Workbox and initialize it before calling any of the routes documented in this write-up, similar to the below:

importScripts('workbox-sw.prod.v1.3.0.js');
const workbox = new WorkboxSW();

// Placeholder array populated automatically by workboxBuild.injectManifest()

Virtual DOM and diffing algorithm

There was a [great article][1] about how react implements it's virtual DOM. There are some really interesting ideas in there but they are deeply buried in the implementation of the React framework.

However, it's possible to implement just the virtual DOM and diff algorithm on it's own as a set of independent modules.

	import Service, { Router } from '@eaze/service'
	import { auth, isAdmin } from '@eaze/middleware'

	class Acacia extends Service {
	static router () {
	return (
	<Router>
	<Get route='/products' handler={(req, res) => res.send(200)} />
	<Post route='/products/create' middleware={[ isAdmin ]} handler={(req, res) => res.send(200)} />
	<Patch route='/products/:id' middleware={[ isAdmin ]} handler={(req, res) => res.send(200)} />

	//npm init -y
	//npm install --save puppeteer
	//usage: node script.js /path/to/input.html /path/to/output.pdf


	//script.js
	const puppeteer = require('puppeteer');

	(async () => {

	var t = window.performance.timing;
	var interactive = t.domInteractive - t.domLoading;
	var dcl = t.domContentLoadedEventStart - t.domLoading;
	var complete = t.domComplete - t.domLoading;

	console.log('interactive: ' + interactive + 'ms, ' + 'dcl: ' + dcl + 'ms, complete: ' + complete + 'ms');

	// connect() is a function that injects Redux-related props into your component.
	// You can inject data and callbacks that change that data by dispatching actions.
	function connect(mapStateToProps, mapDispatchToProps) {
	// It lets us inject component as the last step so people can use it as a decorator.
	// Generally you don't need to worry about it.
	return function (WrappedComponent) {
	// It returns a component
	return class extends React.Component {
	render() {
	return (