firecracker.js v1.0.5

firecracker.js

A small DOM manipulation and eventing library that packs a big punch!

• Angular and React are built by giant FAANG/MANAA companies that have needs that most of us don't.
• Vue.js is React-lite, but is still pretty damn large, and there are arguably too many abstractions.
• jQuery tries to do too much magic and its size suffers as a result.

If you're looking for something tiny, which handles the DOM and event fundamentals, and keeps things “close to the metal”, firecracker.js may be the right tool for you.

Features

Goals

• Provide “close to the metal” syntactic sugar around DOM manipulation, events, and templating.

• If it’s broadly supported in modern browsers, leverage the built-in functionality. Avoid polyfills.

• Keep the final bundle as small as possible when minified and compressed. Aiming to keep the Brotli-compressed version under 2 kb.

• No external dependencies. The fact that left-pad was ever a problem shows just how much of a dumpster-fire the npm ecosystem is. I'm choosing to not be part of the problem.

What firecracker.js has

• Firecracker VDOM is a Virtual DOM construction implementation which dramatically improves on the core DOM primitives. Less syntax and more chaining makes it much easier to dynamically construct Virtual DOM in JavaScript before attaching it to the page.

• Firecracker DQuery contains DOM traversal helpers (e.g., the “good parts” of jQuery), and implement them using DOM levels 3 and 4 so that they are fast, small, and target modern browsers. Provides a lightweight wrapper around DOM objects, while still exposing access to the underlying Element and NodeList data types.

• Firecracker Events is an implementation of the event delegation pattern, using core DOM events and built for modern browsers.

What firecracker.js doesn’t have

• No Ajax. Take a look at fetch() instead.

• No JSX, but we feel like JSX requires extra steps that aren't strictly necessary if you’re not Facebook.

• No utility functions. Take a look at You don't (may not) need Lodash/Underscore if that’s something you need.

• No support for Internet Explorer or EdgeHTML as both are end-of-life. If you need support for legacy browser engines, take a look at Babel.

Examples

VDOM is an updated ES6+ version of a Virtual DOM implementation I built in 2008 before Virtual DOM even had a name yet.

The term “Virtual DOM” refers to real DOM nodes that exist in memory, but are not attached to the live tree. This means that they can be modified and manipulated in-memory without triggering repaints and reflows in the browser engine, making modifications dramatically faster.

By leveraging DocumentFragment objects under the hood, we can collect one or more sibling elements together which do not have a shared parent node until they are injected into the live DOM. This is fundamentally the same way that React.createElement() works, and the syntax is very similar.

Examples:

From the https://reactjs.org homepage, this example generates a new DOM element (via a React component) and appends it to the live DOM.

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );

    // or...
    // return React.createElement(
    //   "div",
    //   null,
    //   "Hello ",
    //   this.props.name
    // );
  }
}

ReactDOM.render(
  React.createElement(
    HelloMessage, { name: "Taylor" }
  ),
  document.getElementById('hello-example')
);

Here's an equivalent example using Firecracker’s VDOM and DQuery. There are no magical props because there are no components. Just standard functions and variables.

const _ = VDOM,
      $ = DQuery;

function HelloMessage(props) {
  return `
    <div>
      Hello ${props.name}
    </div>
  `;

  // or...
  // return _('div').h(`Hello ${props.name}`);
}

$('#hello-example')[0].render(
  HelloMessage({ name: "Taylor" })
);

VDOM sits much “closer to the metal”, which makes it (a) faster, and (b) smaller. While it lacks some of the niceties like sanitizing user content to pass directly into JSX, you can still use innerHTML and DOMString objects which get you most of the way there at very little cost.

Stay tuned for Firecracker Templates which we’re hoping will empower things like two-way binding and some state management.

Filesize

Inspiration

DOMBuilder (this project's predecessor) was originally inspired by (but shares zero code with) the Builder code from Scriptaculous which I discovered in 2005-ish, and implemented my own independent version in 2008.

DOMBuilder inspired DOMBrew, which then inspired improvements to VDOM.

React, which became public in 2013 (5 years after DOMBuilder), has many similarities in the public API for rendering DOM elements (while handling much more complex use-cases than DOMBuilder at the cost of much larger file size). That said, I very much doubt React took any inspiration from DOMBuilder in any way, and the similarities are purely coincidental.