DEV Community: Jay Landrum

Handling Events

Jay Landrum — Fri, 10 Nov 2023 19:01:35 +0000

Many JavaScript libraries seem intent on wrapping browser events in some custom event object. Libraries like jQuery and Angular hide the original Event object behind a custom type that may be useful to the library but I can't remember it ever being useful to me.

My goal for handling events was to keep it simple. Registering an event on an element in the framework is effectively the same as calling .AddEventListener(...). The only responsibility of the framework is to manage or clean up those events.

Registering an Event

Events are registered using the on property of the element configuration object. This property takes an object with event names as properties.

div({ 
  on: { 
      click: (event: Event) => alert('Hello World') 
  }, 
  () => "Click!"
)

Component events

Components define supported events through the third generic parameter of the Component<void, void, E> class. The second type parameter is for defining templates and covered in a future post. The component events type is expected to be a map of event names associated with the type of data emitted by the event. A component can fire an event by calling this.Fire(eventName: string).

Listening for a component event also uses the on property of the component configuration object. Component event callbacks take a single parameter typed by the event map. Components do not fire standard DOM events.

type Events = {
  alert: string;
};

class ChildComponent extends Component<void, void, Events> {
  Template() {
    return div(
      {
        on: { click: () => this.Fire("alert", "Hello from ChildComponent") }
      },
      () => "Child click!"
    );
  }
}

const childComponent = Component.ToFunction(
  "child-component",
  null,
  ChildComponent
);

class HelloWorld extends Component<void, void, Events> {
  Template() {
    return
      childComponent({ on: { alert: (message) => alert(message) } });
  }
}

Code Sandbox

Next post will cover adding reactivity to components.

Data binding

Jay Landrum — Fri, 10 Nov 2023 15:17:04 +0000

This second post will describe how to bind data to elements/components. In my approach I tried to simplify how the framework handles data.

In web development it's very common to need: If some array exists Then render each item in the array.

Angular separates these steps into two structural directives, *ngIf and *ngFor which can't be applied to the same element. I believe React requires the developer to return a default empty array in place of a falsy value (but this may have changed since I last worked with React).

It seemed to me "If falsy, do nothing" was worth handling instead of relying on the developer to guard the framework against falsy values. Also, non-arrays should be treated as single-element arrays. These assumptions result in a flexible data property that handles each of these inputs:

falsy -> []
truthy -> [truthy]
[...any] -> [...any]

Element Data Binding

// single truthy value
div({ data: () => "Hello World" }, (message: string) => 
    span({}, () => message)
)

// array of values
div({ data: () => ["Hello", "World"] }, (message: string) => 
    span({}, () => message)
)

// falsy value
div({ data: () => false }, (message) => 
    span({}, () => message)
)

Results in:

<div> <!-- "Hello World" -->
    <span>Hello World</span>
</div>

<div> <!-- ["Hello", "World"] -->
    <span>Hello</span>
    <span>World</span>
</div>

<div> <!-- false -->
    <!-- nothing is rendered -->
</div>

Sandbox link

Component Data Binding

Components declare an arbitrary input type using the first generic parameter of the Component<T> class. Within a Component, input data is accessed using this.Data property. When using a component, data is passed to the component using the data property of the component configuration object.

// Input type
type MessageHeaderData = { message: string };
// Type is included as part of the Component definition
class MessageHeader extends Component<MessageHeaderData> {
  Template() {
    return h1({}, () => this.Data.message);
  }
}

// Pass MessageHeaderData to the component
messageHeader({ data: () => ({ message: "Hello World" }) });

Sandbox link

Next post will cover adding event listeners to elements/components.

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

Jay Landrum — Thu, 09 Nov 2023 15:55:42 +0000

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.