Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/skyzyx/firecracker.js
A small DOM manipulation and eventing library that packs a big punch!
https://github.com/skyzyx/firecracker.js
dom events innerhtml javascript query small tiny virtual-dom
Last synced: 7 days ago
JSON representation
A small DOM manipulation and eventing library that packs a big punch!
- Host: GitHub
- URL: https://github.com/skyzyx/firecracker.js
- Owner: skyzyx
- License: other
- Created: 2022-02-04T20:40:28.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-06-18T05:00:44.000Z (5 months ago)
- Last Synced: 2024-06-18T05:59:25.393Z (5 months ago)
- Topics: dom, events, innerhtml, javascript, query, small, tiny, virtual-dom
- Language: JavaScript
- Homepage: https://ryanparman.com/firecracker.js
- Size: 3.87 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# 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](https://www.google.com/search?q=gzip+vs+brotli)-compressed version under 2 kb.
* No external dependencies. The fact that [left-pad](https://www.davidhaney.io/npm-left-pad-have-we-forgotten-how-to-program/) 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()`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_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](https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore) if that’s something you need.
* No support for [Internet Explorer](https://docs.microsoft.com/en-us/lifecycle/faq/internet-explorer-microsoft-edge) or [EdgeHTML](https://techcommunity.microsoft.com/t5/microsoft-365-blog/new-microsoft-edge-to-replace-microsoft-edge-legacy-with-april-s/ba-p/2114224) as both are end-of-life. If you need support for legacy browser engines, take a look at [Babel](https://babeljs.io).
## 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 homepage, this example generates a new DOM element (via a React component) and appends it to the live DOM.
```javascript
class HelloMessage extends React.Component {
render() {
return (
Hello {this.props.name}
);
// 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.
```javascript
const _ = VDOM,
$ = DQuery;
function HelloMessage(props) {
return `
Hello ${props.name}
`;
// 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
| File | Description | Size in bytes |
|---------------------|-----------------------|---------------|
| `firecracker.js` | Stripped and minified | 5.20 kb |
| `firecracker.js.gz` | gzip-compressed | 1.86 kb |
| `firecracker.js.br` | brotli-compressed | 1.64 kb |
## Inspiration
[DOMBuilder](https://github.com/skyzyx/dombuilder) (this project's predecessor) was originally inspired by (but shares zero code with) the [`Builder` code from Scriptaculous](https://github.com/madrobby/scriptaculous/blob/master/src/builder.js) which I discovered in 2005-ish, and implemented my own independent version in 2008.
DOMBuilder inspired [DOMBrew](https://github.com/glebm/DOMBrew/), which then inspired improvements to VDOM.
[React](https://reactjs.org), 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.