Tungsten.js is a modular framework for creating web UIs with high-performance rendering on both server and client.
Status
Tungsten.js is no longer maintained, and the project has been archived. Tungsten served as Wayfair's UI library since 2015, but as we shifted to a more component oriented architecture we realized react.js was a better fit for developing our user interfaces. In 2017, we chose to adopt react.js as our primary web UI framework, and have since migrated many of our features and applications.
What Tungsten.js Provides
- High-performance virtual DOM updates powered by virtual-dom
- Use of mustache templates, with HTML parsed by htmlparser2, which render to virtual DOM objects
- Event system which binds and delegates each event type to the document root
- Adaptor for Backbone.js views and models
Motivation
Tungsten.js was built as an alternative to existing front-end JavaScript libraries because we needed a library with:
- Fast, first-class server-side rendering across multiple platforms
- Fast client-side DOM updates with support back to IE8
- Modular interfaces to swap out library components as necessary
How Tungsten.js Works
In Tungsten.js, the initial page loaded is rendered with Mustache templates on the server (in, say, C++, PHP, or Go) then rehydrated by Tungsten.js on the client. Subsequent DOM updates are made with those same mustache templates which have been pre-compiled to functions which return virtual DOM objects used by virtual-dom to diff and patch the existing DOM.
An adaptor layer is used to connect with Tungsten.js with a preferred modular client-side framework to handle data and view management. The default adaptor is a thin layer on top of Backbone.js with a childViews hash to define relationships between views and a compiledTemplate property to define the root pre-compiled template function. Other adaptors can also be used with the core library.
Tungsten.js has no dependency on jQuery.
Setup
Install
npm install tungstenjs --save
For the latest, but unstable, version:
npm install git+http://github.com:wayfair/tungstenjs.git#master --save
UMD
The UMD build is the preferred method for including Tungsten.js in a project, and is generally included via require('tungstenjs').
Dependencies are bundled in the build. It exposes underscore and backbone
as tungstenjs._ and tungstenjs.Backbone to be used globally if necessary.
To compile templates, use
tungsten.templateHelper.compileTemplates({myTemplate: 'Hello {{name}.'}).
Ordinarily this is done on the server at build time.
An client-side only example of a Tungsten.js app using the UMD build is available in the examples.
Bundler (e.g., webpack)
Tungsten.js can be built for your application using a module bundler such as webpack. Because Backbone expects jQuery to be present, Tungsten.js includes a jQuery-less shim, src/polyfill/jquery, which is included in the default build.
Requirements
Node.js(for builds; not necessary for production runtime)webpackor other CommonJS compatible client-side module loader- {{ mustache }} renderer on server (for server-side rendering)
API
The API a developer interacts with when building an API with Tungsten.js is the API of the Backbone adaptor, which provides View, Model, and Collection properties. These are available directly when importing the Tungsten.js build and are used as the base view, model, and collection constructors in the application. As usual with Backbone, custom constructors can extend from each of these.
Getting Started
When building a Tungsten.js app we recommend starting with an app model, app view, and app (mustache) template. These are the entry points for a Tungsten.js applications. A place to bootstrap the app and get everything started is also needed: often this is in the form of an init file:
var AppView = require('./views/app_view');
var AppModel = require('./models/app_model');
var template = require('../templates/app_view.mustache');
module.exports = new AppView({
el: '#app',
template: template,
model: new AppModel(window.data)
});See the Tungsten.js TodoMVC app for a complete example.
Documentation
Detailed documentation on Tungsten.js features can be found in /docs:
Versioning
master changes regularly and so is unsafe and may break existing APIs. Published releases, however, attempt to follow semver. High level changelog available at CHANGELOG.md.
Credits
Tungsten.js was created by Matt DeGennaro and is maintained by the JavaScript team at Wayfair. Contributions are welcome.
Tungsten.js uses portions of these and other open source libraries:
License
Tungsten.js is distributed with an Apache Version 2.0 license. See LICENSE for details. By contributing to Tungsten.js, you agree that your contributions will be licensed under its Apache Version 2.0 license.