JavaScript’s power and flexibility are shown through its wide array of libraries and frameworks, which include Angular, Node.js, React, and more. Each takes different approaches to empower the various goals of software engineers.

In this course, you’ll be introduced to the various processes of these unique frameworks as you develop a new open-source solution: Assma.js. You’ll become acquainted with compilation theory before defining logical operators. Next, you’ll delimit functions by creating production rules and define the elements of the programming language, including the syntax and semantics in the framework. You’ll finalize the core of the framework using DOM and tree structures before bundling the packages into a plugin component to manage future projects.

By the end of the course, you’ll have a deep understanding of core functions, design theories, and the creation of JavaScript frameworks from conception to deployment.

Discover: JavaScript Frameworks Behind the Scenes

Before we move to the core concepts and techniques, we need to transform the output of the parsing stage to another tree-like structure.

# Transformer
The <strong>transformer</strong> provides methods to transform an AST structure that is generated in the compilation stage into a virtual DOM tree structure. It will be used as input to the diffing process.

Below is the implementation of the method. 

> You can enter an AST object as an input at the bottom of the widget to run the code.

#concept=Transformer#Details#concept#

export class NotAsExpected {
  constructor(expected, cursor) {
    this.expected = expected;
    this.cursor = cursor;
  }
}

export class AST {
  constructor(value, cursor) {
    this.value = value;
    this.cursor = cursor;
  }
}

export const isAliasObject = object => object != undefined && object.hasOwnProperty("type") && object.hasOwnProperty("value");

export const stringify = array => array.join("");

export const removeWs = string => string.trim().replace(/(\r\n|\n|\r|\t)/gm, "");

export const generateKey = string => string + Date.now();

export const isVirtualDomTreeObject = object => object != undefined && object.hasOwnProperty("type") && object.hasOwnProperty("key");

export const Constants = {
	"INTERPOLATION": "interpolation",
	"ATTRIBUTES": "attributes",
	"NODE": "node",
	"NODE_DATA": "nodeData",
	"NODE_DATA_CHILDREN": "nodeDataChildren",
	"COMMENT": "comment",
	"COMMENT_BEGIN": "<--",
	"COMMENT_END": "-->",
	"SPACE": " ",
	"TAB": "\t",
	"RETURN": "\n",
	"TEXT": "text",
	"BACKSLASH": "\\",
	"SLASH": "/",
	"BRACKET_OPEN": "{",
	"BRACKET_CLOSE": "}",
	"BRACKET_SQUARE_OPEN": "[",
	"BRACKET_SQUARE_CLOSE": "]",
	"LESS_THAN_SIGN": "<",
	"GREATER_THAN_SIGN": ">",
	"EQUAL_SIGN": "=",
	"PARENTHESIS_LEFT": "(",
	"PARENTHESIS_RIGHT": ")",
	"QUOTATION": "\"",
	"APOSTROPHE": "'",
	"GRAVE_ACCENT": "`",
	"ASTERISK": "*",
	"HASH": "#",
	"REGEX_IDENTIFIER": /[$\w.]/
}
Object.freeze(Constants);

import { Constants } from './constants'
import { run } from "./stdin";
import { stringify, removeWs, generateKey, isAliasObject, isVirtualDomTreeObject } from './util';

// Input example: {"value":{"type":"node","value":["<",[],["d","i","v"],[" "],"/>"]},"cursor":7}
function transform(ast) {
	var vdomNode = {};
	if (Array.isArray(ast)) {
		for (let i = 0; i < ast.length; i++) {
			vdomNode = Object.assign(vdomNode, this.generate(ast[i]))
		}
	} else if (isAliasObject(ast)) {
		const type = ast.type;
		if (type === Constants.NODE) {
			const value = ast.value;
			vdomNode.children = null;
			vdomNode.attributes = null;
			vdomNode.type = stringify(value[2]);
			vdomNode.key = generateKey(vdomNode.type);
		} else if (type === Constants.NODE_DATA) {
			const value = ast.value;
			vdomNode.children = null;
			vdomNode.type = stringify(value[2]);
			vdomNode.key = generateKey(vdomNode.type);
			const attributes = value[4].value;
			const attributesLength = attributes.length;
			if (attributesLength === 0) {
				vdomNode.attributes = null;
			} else {
				vdomNode.attributes = [];
				for (let i = 0; i < attributesLength; i++) {
					const pair = attributes[i];
					var attribute = {};
					attribute[pair[0].join('')] = pair[2][1].toString().split(',').join('');
					vdomNode.attributes.push(attribute);
				}
				if (vdomNode.attributes.length === 0) {
					vdomNode.attributes = null;
				}
			}
		} else if (type === Constants.NODE_DATA_CHILDREN) {
			const value = ast.value;
			vdomNode.type = stringify(value[2]);
			vdomNode.key = generateKey(vdomNode.type);
			const attributes = value[4].value;
			const attributesLength = attributes.length;
			if (attributesLength === 0) {
				vdomNode.attributes = null;
			} else {
				vdomNode.attributes = [];
				for (let i = 0; i < attributesLength; i++) {
					const pair = attributes[i];
					let attribute = {};
					attribute[stringify(pair[0])] = stringify(pair[2][1].toString().split(','));
					vdomNode.attributes.push(attribute);
				}
				if (vdomNode.attributes.length === 0) {
					vdomNode.attributes = null;
				}
			}
			const children = value[6];
			const childrenLength = children.length;
			if (childrenLength === 0) {
				vdomNode.children = null;
			} else {
				vdomNode.children = [];
				for (let i = 0; i < childrenLength; i++) {
					const child = children[i];
					const childGenerated = this.generate(child);
					if (isVirtualDomTreeObject(childGenerated) || typeof childGenerated == "string") {
						vdomNode.children.push(childGenerated);
					}
				}
				if (vdomNode.children.length === 0) {
					vdomNode.children = null;
				}
			}
		} else if (type === Constants.TEXT) {
			const text = ast.value;
			const textNoWhitespace = removeWs(stringify(text));
			if (textNoWhitespace != "") {
				return textNoWhitespace;
			}
		} else if (type === Constants.INTERPOLATION) {
			const interpolation = ast.value[1].value;
			const interpolationNoWhitespace = removeWs(stringify(interpolation));
			if (interpolationNoWhitespace != "") {
				return Constants.BRACKET_OPEN + interpolationNoWhitespace + Constants.BRACKET_CLOSE;
			}
		}
	}
	return vdomNode;
}

run(transform);

# Virtual DOM
The <strong>virtual DOM</strong> is a virtual representation of the real DOM. Every time the state of the application changer, a new virtual DOM is created instead of updating the real DOM. The virtual DOM is reconciled against the real DOM to determine what changes are necessary to apply. The framework follows the observable pattern and listens for the creation and changes of virtual DOM. Next, it applies the diffing process to update the real DOM.

Get an overview of virtual DOM, diffing process, rendering, components, and single-file components.

Course

Core

Transformer