Rolling my own front-end framework pt. 1/?

For a long time I've iterated on my own small front-end framework fueled by ongoing developer gripes with popular libraries. My goal here is to write a series of posts as a retrospective on that work, summarize design goals and document the problems I faced and how I chose to solve them.

Repo link: j-templates

The framework was used to make Qwiqwit, a multi-player web-game I built with my friend, Paul.

Some of the initial goals were:

• No transpile step besides TypeScript
• Fully typed in the editor, no bindings in string or .html templates
• Sensibly reactive, no need to self-manage change detection

My goals were reactions to pitfalls present in early React/Angular development. This was 6+ years ago so a lot of these complaints have been addressed since.

Hello World

import { Component } from 'j-templates'; import { div } from 'j-templates/DOM'; // Create the Component class class HelloWorld extends Component { // Override the Template function Template() { return div({}, () => "Hello world"); } } // Convert the class to an element function const helloWorld = Component.ToFunction("hello-world", null, HelloWorld); // Append a new hello-world element to the page Component.Attach(document.body, helloWorld({})); 

Produces the following markup:

<hello-world> <div>Hello world</div> </hello-world> 

All elements are represented as functions that take a configuration object. The HelloWorld component class is converted to a function using the Component.ToFunction(...) method. Calling one of these function returns a NodeDefinition object which is the framework's virtual representation of the DOM.

Element functions (i.e. div, span, p) take a second parameter to define children. This function can return a string to create a text node or one/many NodeDefinition objects. This is all you need to start building static views.

import { Component } from 'j-templates'; import { div, span, h1, b } from 'j-templates/DOM'; class MessageHeader extends Component { Template() { return h1({}, () => "Incoming Message"); } } const messageHeader = Component.ToFunction("message-header", null, MessageHeader); class HelloWorld extends Component { Template() { return [ messageHeader({}), div({}, () => [ b({}, () => "Message Body: "), span({}, () => "Hello world") ]) ]; } } const helloWorld = Component.ToFunction("hello-world", null, HelloWorld); Component.Attach(document.body, helloWorld({})); 

Produces the following markup:

<hello-world> <message-header><h1>Incoming Message</h1></message-header> <div><b>Message Body: </b><span>Hello world</span></div> </hello-world> 

Give it a shot: Code Sandbox. Next post will describe how to bind to data.