Jason Miller developit

Preact componentDidCatch performance

Environment

The benchmark was run on a HP Z440 (3.5 GHz Intel Xeon E5-1650 v3, 32 GB RAM, Windows 10 1709, Chrome 64.0.3282.186 (64-bit))
Ran npm run selenium -- --count 10 --framework preact in the webdriver-ts of this js-framework-benchmarks fork

Duration in milliseconds ± standard deviation (Slowdown = Duration / Fastest)

transpiler-lite

So, you need to transpile classes to ES5 for some reason, but you need to do it in the browser.

Could we use a gross regular expression to get that done? Yes.

Should we? No, but it's far too late for that now.

JSFiddle Demo

In this talk we will be all discussing the origin of the furry fandom. How we will thogheter create a new furry-in-js framework. We will going over how they have changed the current fandom world, our hearts and the js world in 5 very awesome minutes! This talk is to prove a point that stars mean nothing in this case.

https://reactiveconf.com/

	import { watch as watchOnline } from 'is-offline';
	import Sockette from 'sockette';

	const msg_types = {
	GQL_CONNECTION_INIT: 'connection_init', // Client -> Server
	GQL_CONNECTION_ACK: 'connection_ack', // Server -> Client
	GQL_CONNECTION_ERROR: 'connection_error', // Server -> Client
	GQL_CONNECTION_TERMINATE: 'connection_terminate', // Client -> Server
	GQL_START: 'start', // Client -> Server
	GQL_DATA: 'data', // Server -> Client

	// Expected Queueing Time
	// https://docs.google.com/document/d/1Vgu7-R84Ym3lbfTRi98vpdspRr1UwORB4UV-p9K1FF0/edit
	// Initial impl by Nicolás Peña (npm), Tim Dresser (tdresser)

	// Usage:
	// var eqt = EQT.begin();
	// // ...
	// const {expectedQueueingTime} = EQT.end();
	class EQT {
	constructor() {

	/**
	* Handles multithread processing on an array through promise-ified Web Workers
	* (through workerize-loader https://github.com/developit/workerize-loader)
	*
	* @example
	* const piranhas = new Piranhas(
	* Worker,
	* // Listens for messages from workers
	* e => { e.data.type === 'INCREMENT' && someIncrementer() }
	* )

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<script src="./clooney.min.js"></script>

	<script>
	!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):e.greenlet=n()}(this,function(){return function(e){var n=new Worker(URL.createObjectURL(new Blob(["onmessage=("+function(e){return function(n){var t=n.data;return Promise.resolve().then(function(){return e.apply(e,t[1])}).then(function(e){postMessage([t[0],null,e])},function(e){postMessage([t[0],""+e])})}}+")("+e+")"]))),t=0,o={};return n.onmessage=function(e){var n=e.data,t=n[0],r=n[1];o[t][r?1:0](r\|\|n[2]),delete o[t]},function(){for(var e=[],r=arguments.length;r--;)e[r]=arguments[r];return new Promise(function(r,u){o[++t]=[r,u],n.postMessage([t,e])})}}});
	//# sourceMappingURL=greenlet.umd.js.map
	</script>

	import { Component } from 'preact';
	import Snackbar from 'preact-material-components/Snackbar';

	const TIMEOUT = 3;

	export default class Toaster extends Component {
	seen = [];
	queue = [];

	snackbarRef = c => {

	import App from './components/app';
	import { h, render } from 'preact';
	import { default as renderToString } from 'preact-render-to-string';
	import { ServerStyleSheet } from 'styled-components'

	if(typeof window === undefined) {
	const sheet = new ServerStyleSheet()
	const html = renderToString(sheet.collectStyles(<App />))
	const styleTags = sheet.getStyleTags() // or sheet.getStyleElement()
	}

	// This is @zz85's attempt to understand and annotate the greenlet.js lib
	// from https://github.com/developit/greenlet/blob/master/greenlet.js

	/** Move an async function into its own thread.
	* @param {Function} fn The (async) function to run in a Worker.
	*/
	export default function greenlet(fn) { // greenlet takes in a function as argument
	let w = new Worker( // creates a web worker
	URL.createObjectURL( // that has a local url
	new Blob([ // created from a blob that has the following content