bel - :dragon: A simple library for composable DOM elements using tagged template strings.

  •        33

A simple library for composable DOM elements using tagged template strings. If you're looking for a higher level front end framework, try yo-yo. Or even higher than that, try choo.

https://github.com/shama/bel

Dependencies:

hyperx : ^2.3.0
is-electron : ^2.0.0
pelo : ^0.1.0

Tags
Implementation
License
Platform

   




Related Projects

diffhtml - diffHTML is a library that acts like a framework; helping you create web applications

  •    Javascript

A suite of JavaScript user interface tools built for the web. diffHTML is a library that assists with creating user interfaces using JavaScript. These interfaces can be: applications, games, data visualizations, or anything else that you may want to render in a web browser.

etch - Builds components using a simple and explicit API around virtual-dom

  •    Javascript

Etch is a library for writing HTML-based user interface components that provides the convenience of a virtual DOM, while at the same time striving to be minimal, interoperable, and explicit. Etch can be used anywhere, but it was specifically designed with Atom packages and Electron applications in mind.Note that using an Etch component does not require a reference to the Etch library. Etch is an implementation detail, and from the outside the component is just an ordinary object with a simple interface and an .element property. You can also take a more declarative approach by embedding Etch components directly within other Etch components, which we'll cover later in this document.

nanomorph - 🚅 - Hyper fast diffing algorithm for real DOM nodes

  •    Javascript

It's common to work with lists of elements on the DOM. Adding, removing or reordering elements in a list can be rather expensive. To optimize this you can add an id attribute to a DOM node. When reordering nodes it will compare nodes with the same ID against each other, resulting in far fewer re-renders. This is especially potent when coupled with DOM node caching. Sometimes we want to tell the algorithm to not evaluate certain nodes (and its children). This can be because we're sure they haven't changed, or perhaps because another piece of code is managing that part of the DOM tree. To achieve this nanomorph evaluates the .isSameNode() method on nodes to determine if they should be updated or not.

nanocomponent - 🚃 - create performant HTML components

  •    Javascript

Native DOM components that pair nicely with DOM diffing algorithms. These are some common patterns you might encounter when writing components.

virtual-dom - A Virtual DOM and diffing algorithm

  •    Javascript

Manual DOM manipulation is messy and keeping track of the previous DOM state is hard. A solution to this problem is to write your code as if you were recreating the entire DOM whenever state changes. Of course, if you actually recreated the entire DOM every time your application state changed, your app would be very slow and your input fields would lose focus. virtual-dom is a collection of modules designed to provide a declarative way of representing the DOM for your app. So instead of updating the DOM when your application state changes, you simply create a virtual tree or VTree, which looks like the DOM state that you want. virtual-dom will then figure out how to make the DOM look like this efficiently without recreating all of the DOM nodes.


morphdom - Fast and lightweight DOM diffing/patching (no virtual DOM needed)

  •    Javascript

This module was created to solve the problem of updating the DOM in response to a UI component or page being rerendered. One way to update the DOM is to simply toss away the existing DOM tree and replace it with a new DOM tree (e.g., myContainer.innerHTML = newHTML). While replacing an existing DOM tree with an entirely new DOM tree will actually be very fast, it comes with a cost. The cost is that all of the internal state associated with the existing DOM nodes (scroll positions, input caret positions, CSS transition states, etc.) will be lost. Instead of replacing the existing DOM tree with a new DOM tree we want to transform the existing DOM tree to match the new DOM tree while minimizing the number of changes to the existing DOM tree. This is exactly what the morphdom module does! Give it an existing DOM node tree and a target DOM node tree and it will efficiently transform the existing DOM node tree to exactly match the target DOM node tree with the minimum amount of changes. morphdom does not rely on any virtual DOM abstractions. Because morphdom is using the real DOM, the DOM that the web browser is maintaining will always be the source of truth. Even if you have code that manually manipulates the DOM things will still work as expected. In addition, morphdom can be used with any templating language that produces an HTML string.

asm-dom - A minimal WebAssembly virtual DOM to build C++ SPA (Single page applications)

  •    C++

asm-dom is a minimal WebAssembly virtual DOM to build C++ SPA (Single page applications). You can write an entire SPA in C++ and compile it to WebAssembly (or asmjs as fallback) using Emscripten, asm-dom will call DOM APIs for you. This will produce an app that aims to execute at native speed by taking advantage of common hardware capabilities, also, you can use your C/C++ code without any change, you haven't to create a binding layer to use it (as we have to do if we want to use a C++ lib from JS). Basically we are creating an app in C++ that call javascript if needed instead of the opposite. You can write only once in C++ and share as much code as possible with desktop/mobile apps and web site. If you want to learn more about performance, please see this. asm-dom is a low-level virtual DOM library. It is unopinionated with regards to how you should structure your application.

petit-dom - minimalist virtual dom library

  •    Javascript

A minimalist virtual DOM library. Not quite. React is a more complete solution for writing UIs using Components. It ships with a full Component API and implementation. Also, React is not specifically a virtual DOM library. It just happens that the Component API is implemented using virtual DOM (which may or may not change in the future).

PREACT - Fast 3kB alternative to React, with the same ES2015 API

  •    Javascript

PREACT is a fast 3kB alternative to React, with the same ES2015 API. It provides the thinnest possible Virtual DOM abstraction on top of the DOM. The web is a stable platform, it's time we stopped reimplementing it in the name of safety. Preact is also a first-class citizen of the web platform. It diffs Virtual DOM against the DOM itself, registers real event handlers, and plays nicely with other libraries.

nerv - A blazing fast React alternative, compatible with IE8 and React 16.

  •    Javascript

Nerv is a virtual-dom based JavaScript (TypeScript) library with identical React 16 API, which offers much higher performance, tinier package size and better browser compatibility. 💫 Support React 16 features, Error Boundaries, Portals, custom DOM attributes, etc.

hyperx - 🏷 - tagged template string virtual dom builder

  •    Javascript

This module is similar to JSX, but provided as a standards-compliant ES6 tagged template string function. hyperx works with virtual-dom, react, hyperscript, or any DOM builder with a hyperscript-style API: h(tagName, attrs, children).

neo - The application worker driven frontend framework

  •    Javascript

neo.mjs enables you to create scalable & high performant Apps using more than just one CPU. No need to take care of a workers setup, and the cross channel communication on your own. Most frontends today still look like this. Everything happens inside the main thread (browser window), leading to a poor rendering performance. The business logic happens inside main as well, which can slow down DOM updates and animations. The worst case would be a complete UI freeze.

omi - Omi === Preact + Scoped CSS + Store System + Native Support in 3kb javascript.

  •    Javascript

Omi === Preact + Scoped CSS + Store System + Native Support in 3kb javascript. Different to preact, you need not to import { h } from 'omi'.

purescript-pux - Build type-safe web apps with PureScript.

  •    PureScript

Build type-safe web applications with PureScript. Pux has not focused on performance yet. The slow performance arises from translating Pux's (smolder) virtual DOM to React's virtual DOM. The goal is to write a purescript virtual DOM module for smolder, which would avoid that translation step and could be optimized for a monadic datastructure. I suspect this would achieve performance on par with Halogen.

Mithril - A Javascript Framework for Building Brilliant Applications

  •    Javascript

Mithril is a modern client-side Javascript framework for building Single Page Applications. It's small (8.18 KB gzipped), fast and provides routing and XHR utilities out of the box. It supports virtual dom, which is a Javascript data structure that describes a DOM tree. It consists of nested virtual DOM nodes, also known as vnodes.

ijk - Transforms arrays into virtual dom trees; a terse alternative to JSX and h

  •    Javascript

This is a tiny recursive factory function that allows you to write terse, declarative representations of virtual DOM trees. It does not try mimic HTML or JSON syntax but instead a series of nested arrays to represent user interfaces. The above call to h returns a virtual DOM tree with named attributes that respect the provided schema. Expected output here, would be of the shape { x: 'main', y: {}, z: [...] }. A tree like this can be passed as a node to patch, diff and render algorithms exposed by libraries like Hyperapp, Ultradom or Preact.

million - 🌈 <1kb virtual DOM - it's fast!

  •    TypeScript

Current Virtual DOM implementations are inadequate—Ranging from overcomplicated to abandoned, most are unusable without sacrificing raw performance and size. Million aims to fix this, providing a library-agnostic Virtual DOM to serve as the core for Javascript libraries. Million doesn't require build tools by default, but it is highly recommended you use NPM to install.

iron-list - Element for a virtual, "infinite" list

  •    Javascript

iron-list displays a virtual, 'infinite' list. The template inside the iron-list element represents the DOM to create for each list item. The items property specifies an array of list item data. For performance reasons, not every item in the list is rendered at once; instead a small subset of actual template elements (enough to fill the viewport) are rendered and reused as the user scrolls. As such, it is important that all state of the list template be bound to the model driving it, since the view may be reused with a new model at any time. Particularly, any state that may change as the result of a user interaction with the list item must be bound to the model to avoid view state inconsistency.

ramjet - Morph DOM elements from one state to another with smooth animations and transitions

  •    Javascript

npm install ramjet, or download ramjet.js.Ramjet makes it look like your DOM elements are capable of transforming into one another. It does this by cloning the elements (and all their children), transforming the second element (the one we're transforming to) so that it completely overlaps with the first, then animating the two elements together until the first element (the one we're transitioning from) has exactly the same position and dimensions as the second element originally did.

ember-wormhole - Render a child view somewhere else in the DOM.

  •    Javascript

This addon provides a component that allows for rendering a block to a DOM element somewhere else on the page. The component retains typical Ember context in terms of bound data and action handling. Ember Wormhole is compatible with Ember FastBoot as of version 0.4.0, so long as the destination element is part of Ember's own templates. This library is particularly useful for cases where you have UI that is the logical child of a component but needs to render as a top-level DOM element, such as a confirmation dialog.






We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.