GithubHelp home page GithubHelp logo

rafa2000 / tuxedojs Goto Github PK

View Code? Open in Web Editor NEW

This project forked from tuxedojs/tuxedojs

0.0 2.0 0.0 409 KB

A feature-complete framework built on React and Flux.

Home Page: https://tuxedojs.org

License: Other

JavaScript 100.00%

tuxedojs's Introduction

Tuxx Logo
Build Status

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 synch.

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 #


Interested in Contributing? #

Please review CONTRIBUTING.md.


Team #

tuxedojs's People

Contributors

drabinowitz avatar cheerazar avatar sjstebbins avatar plauzy avatar mparramont avatar

Watchers

Rafael A. Salazar avatar James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.