tuxx

A Front-End JavaScript Framework built on Facebook's powerful React view layer and Flux architecture.

React and Flux are two novel and exciting approaches to front-end development. Lots of people use React as the V in MVC, since it makes no assumptions about the rest of your technology stack and it uses a virtual DOM diff implementation for ultra-high performance.

Flux is an application architecture for React that remedies the problems associated with predicting changes in applications that use two-way directional data flows, instead utilizing a unidirectional data flow which makes it easier to understand and modify an application as it becomes more complicated. In Flux, the Dispatcher is a singleton that directs the flow of data and ensures that updates do not cascade. As an application grows, the Dispatcher becomes more vital, as it can also manage dependencies between stores by invoking the registered callbacks in a specific order. See this blog for more on Flux.

TuxedoJS capitalizes on the performance benefits of React and the simplified application architecture of Flux. It abstracts away unnecessary complexity and implements a more accessible and semantic interface for working with Flux and augmented React components in various aspects of the view logic.

Table of Contents

1. Features and Examples
2. Graceful Degradation
3. Requirements
4. Development
   1. Installing TuxedoJS
   2. Tasks and Dependencies
   3. Roadmap
5. Credits and Tech Stack
6. Interested in Contributing?
7. Team

Features and Examples #

Tuxx abstracts away the complexity of Flux with powerful Actions syntax:

    var Actions = require('tuxx/Actions');
 
    var todoActions = Actions.createActionCategory({
      category: 'todos',
      source: 'todo views',
      actions: ['add', 'remove']
    });
 
    module.exports = todoActions;

Tuxx provides all of the glue code needed to build stores and register them with the TuxxActions dispatcher:

    var TodoActions = require('./TodoActions')
    var ActionStores = require('tuxx/Stores/ActionStores');
 
    var todoStore = ActionStores.createStore({
      _todos: [],
 
      getAll: function () {
        return this._todos;
      },
 
      onAdd: function (todo) {/*handle creation of Todo*/},
 
      onRemove: function (todo) {/*handle removal of Todo*/},
 
      //semantic method allows us to register our store with actions
      register: function () {
        return {
          todos: {
            add: this.onAdd,
            remove: this.onRemove
          }
        };
      }
    });
 
    module.exports = todoStore;

Tuxx provides powerful opinionated React classes that make connecting with your stores, sharing methods with child components, and building high performance components a cinch.

A high performance component:

    var React = require('tuxx/React');
 
    var Todo = React.createMutableClass({
      mutableTraits: {
        props: 'text'
      },
 
      //tuxx provides tools for automatically sharing static properties and methods between components via nearestOwnerProps
      handleRemove: function (e) {
        e.preventDefault();
        this.nearestOwnerProps.remove(this.props.todo);
      },
 
      render: function () {
        return (
          <p>{ this.props.todo.text }</p>
          <button onClick={this.handleRemove}>Delete</button>
        );
      }
    });
 
    module.exports = Todo;

A standard Tuxx component:

    var TodoCreateForm = React.createOwneeClass({
      //you can perform propType checking on nearestOwnerProps too
      nearestOwnerPropTypes: {
        add: React.PropTypes.func.isRequired
      },
 
      //again, using automatically shared static methods here via 'nearestOwnerProps'
      handleSubmit: function (e) {
        e.preventDefault();
        var todoTextInput = this.refs.textInput.getDOMNode();
        this.nearestOwnerProps.add({text: todoTextInput.value});
      },
 
      render: function(){
        return (
          <form onSubmit={this.handleSubmit}>
            <input type="text" ref="textInput" placeholder="Add a Todo" />
            <button type="submit">Add</button>
          </form>
        );
      }
    });
 
    module.exports = TodoCreateForm;

A Tuxx class designed to manage state and pass down properties/methods:

    var todoStore = require('./todoStore');
    var todoActions = require('./todoActions');
    var Todo = require('./Todo');
    var TodoCreateForm = require('./TodoCreateForm');
 
    var TodoViewOwner = React.createOwnerClass({
      getInitialState: function () {/*get Todos from store*/},
 
      connectOwnerToStore: function () {
        return {
          store: todoStore,
          listener: function () {
            this.setState({ todos: todoStore.getAll() });
          }
        };
      },
 
      registerOwnerProps: function () {
        return {
          add: todoActions.add,
          remove: todoActions.remove
        };
      },
 
      render: function () {
        var Todos = this.state.todos.map(function(todo) {
          return (<Todo todo={todo} />);
        });
 
        return (
          <div>
            <TodoCreateForm />
            {Todos}
          </div>
        );
      }
    });

Tuxx provides an entire library of semantic plug-and-play animations.

    var React = require('tuxx/React');
    var Fly = require('tuxx/Animations/Fly');
    var FadeUp = require('tuxx/Animations/Fade/Up');
 
    var Home = React.createClass({
      render: function () {
        return (
          <div>
            <FadeUp>
              <h1>Hello World</h1>
            </FadeUp>
            <Fly>
              <h3>Hello, Classier World</h3>
            </Fly>
          </div>
        );
      }
    });

See our TuxedoJS Doc Site for a full list of Tuxx features and functionality.

---

Graceful Degradation #

Tuxx allows you to be as classy as you want.

An integral facet of the Tuxx architecture is that you can use as much or as little of it as you want. Tuxx does absolutely no modifying of the underlying React and Flux components it is built upon, but rather extends their core functionality and provides more intuitive interfaces for leveraging their power.

Furthermore, Tuxx was designed to be as modular as possible, allowing you to only use the specific parts you need. It is for this very reason that we don't pollute the global namespace with one large Tuxx object that holds unnecessary JavaScript.

Thus, feel free to fall back to React or Flux conventions as much or as little as you desire. We hope you enjoy the flexibility.

---

Requirements #

• Node 0.10.x

---

Development #

Installing TuxedoJS #

Install TuxedoJS through npm:

npm install tuxx

---

Tasks and Dependencies #

Tuxx is built with CommonJS and thus you will need a compiler such as Browserify or webpack. In our case, we use Browserify for compiling, Reactify for compiling JSX, Envify for accessing NODE_ENV variables in the browser (great for automatically turning dev tools on and off), and Watchify for automatic compiling.

npm install --save browserify
npm install --save envify
npm install --save reactify
npm install --save watchify

To use these modules in development, we recommend adding the following lines to the scripts key of your package.json file to set up automatic JSX compiling and configure testing:

"scripts": {
  "start": "watchify -d [YOUR MAIN.JS OR SIMILAR FILE] -o [YOUR OUTPUT BUNDLE.JS] -v",
  "build": "NODE_ENV=production browserify [YOUR MAIN.JS OR SIMILAR FILE] | uglifyjs -cm > [YOUR OUTPUT BUNDLE.JS]"
}

Include this browserify transform in your package.json file as well:

"browserify": {
  "transform": [
    [
      "reactify",
      {
        "es6": true
      }
    ],
    "envify"
  ]
}

The browserify transform will cause watchify to use reactify to compile your JSX and es6 syntax like the Spread syntax, and allow you to use envify for node environment variables in the browser.

After adding this code, run

npm start

during development to automatically compile all JSX and JavaScript syntax into one bundle.js which you can then directly link to your index.html file. Use

npm run build

to compile a production ready bundle of your code.

---

Roadmap #

View the project roadmap here.

---

Credits and Tech Stack #

• React
• React-Tools
• React-Router
• Flux
• Jest
• Jest-cli
• CommonJS
• Browserify
• Reactify
• Watchify
• Envify
• object-assign

---

Interested in Contributing? #

Please review CONTRIBUTING.md.

---

Team #

• Team Lead: Dmitri Rabinowitz
• Scrum Master: Gunnari Auvinen
• Product Owner: Spencer Stebbins
• Software Engineer: Pat Lauer