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](https://github.com/TypesInCode/jTemplates) The framework was used to make [Qwiqwit](https://qwiqwit.com), a multi-player web-game I built with my friend, [Paul](https://paulwind.com/). 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 ```typescript 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: ```html

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. ```typescript 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: ```html

Incoming Message

Message Body: Hello world

``` Give it a shot: [Code Sandbox](https://codesandbox.io/s/j-templates-static-components-w6j4ry?file=/index.ts). Next post will describe how to bind to data.

typesincode

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

Join Our Newsletter. No Spam, Only the good stuff.