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/

lit-html + unistore

import { html, render } from 'lit'
import { provide, connect } from './unlit'

const app = provide(store)( () => html`<div>${counter}</div>` )

const counter = connect('count', {

	/**
	* 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

	// Licensed under a CC0 1.0 Universal (CC0 1.0) Public Domain Dedication
	// http://creativecommons.org/publicdomain/zero/1.0/

	// HTML files: try the network first, then the cache.
	// Other files: try the cache first, then the network.
	// Both: cache a fresh version if possible.
	// (beware: the cache will grow and grow; there's no cleanup)

	const cacheName = 'files';