Matthew Phillips matthewp

One of the most difficult problems in web development today is the need to use the same views to render HTML on a web server and to update DOM nodes to reflect changes that occur on the client.

This desire comes down the need to server render for SEO, performance, and fallback reasons, while additionally needing complex, interactive applications.

Most frameworks today have consolidated on the idea of Isomorphic JavaScript, sometimes also called Universal JavaScript, as a solution to this problem.

Problem

I find isomorphism to be an inadequate solution to the use-case stated above. Isomorphism has the following problems:

Finite State Machines in CanJS

Finite State Machines (FSM) provide a mechanism for transitioning between states in a program. By declaratively listing all possible states up front, and how to transition between them, the state machine can ensure that no invalid state is ever reached.

This proposal lays out a plan for us to adopt FSMs into the CanJS (and greater Bitovi) ecosystem especially surrounding our CRUD initiatives.

This drawing shows how state transitions occur within a client project we are working on.

	<!doctype html>
	<html lang="en">
	<title>Web component SSR</title>
	<script>
	customElements.define("shadow-root",class extends HTMLElement{connectedCallback(){let a=this.parentNode,b=a.firstElementChild;this.remove(),a.attachShadow({mode:"open"}).append(b.content.cloneNode(!0))}});
	</script>

	<a-component>
	<template>
	<header>

	<!doctype html>
	<html lang="en">
	<title>Some title</title>

	<my-element id="myel"><my-element>

	<script type="module">
	class MyElement extends HTMLElement {
	static get observedAttributes() {
	let defines = this.define;

	function decorate(tag, template) {
	customElements.define(tag, class extends HTMLElement {
	constructor() {
	super();
	this.attachShadow({ mode: 'open' });
	}

	connectedCallback() {
	let root = this.shadowRoot;
	if(!root.firstChild) {

	<div>
	<main id="main1"></main> 0
	</div>

	div.appendChild(main2);
	div.removeChild(main1);

	<div>
	<main id="main2"></main> 0
	</div>


	function printDocument(node, startIndex = 0) {
	let skip, tmp;

	let depth = 0;
	let index = startIndex;

	let items = [];

	function add(node) {

	node_modules/
	out.js

Matthew Phillips matthewp

Problem

Finite State Machines in CanJS

Terminology