Introduction

Rubix only utilizes Node.JS for dependency resolution (CommonJS) and compiling/uglifying assets. You can always plug in any backend in the language of your choice (which includes PHP/ASP.NET etc).

Remember that support is always available at : support@sketchpixy.com

Installation - Node.JS + NPM

To get started, head over to the Node.JS official website and download the installer for the platform of your choice:

Download

NPM is needed for installing the dependencies defined in package.json (found in the root of Rubix folder). It should be bundled by default in the Node.JS installation for Windows (if you downloaded and installed the MSI) / MacOSX (if you downloaded and installed the PKG file) / if you built from source.

If it isn't available in your environment for some reason you can try one of the fancy installs suggested in the NPM documentation located here: https://github.com/npm/npm#fancy-install-unix

package.json

Change directory to root of Rubix and run the following command (this launches the 'app' starter project) depending on your OS environment:

Windows:

> cd path\to\rubix
> npm install .
> npm install -g gulp
> gulp

To launch the demo run this command instead:

> gulp --rtl --name demo

MacOSX/Linux:

$ cd path/to/rubix
$ npm install .
$ npm install -g gulp
$ gulp

To launch the demo run this command instead:

$ gulp --rtl --name demo

Screenshot of gulp output

We are done! A new browser window should be launched pointing to http://localhost:8080.


Here is a list of all the modules that ship with Rubix (which you can inspect by looking at the package.json file):

{
  "name": "rubix",
  "version": "2.0.0",
  "private": true,
  "author": "SketchPixy (support@sketchpixy.com)",
  "copyright": "SketchPixy LLP, email: support@sketchpixy.com",
  "devDependencies": {
    "browser-sync": "^1.9.0",
    "compression": "^1.2.2",
    "cookie-parser": "^1.3.3",
    "css-flip": "^0.5.0",
    "del": "^1.1.0",
    "enhanced-require": "^0.5.0-beta6",
    "eventemitter2": "^0.4.14",
    "express": "^4.10.6",
    "express-beautify": "^0.1.2",
    "fluxxor": "^1.5.1",
    "gulp": "^3.8.10",
    "gulp-autoprefixer": "^2.0.0",
    "gulp-bless": "^3.0.1",
    "gulp-concat": "^2.4.2",
    "gulp-cssfont64": "0.0.1",
    "gulp-insert": "^0.4.0",
    "gulp-minify-css": "^0.3.11",
    "gulp-rename": "^1.2.0",
    "gulp-replace": "^0.5.0",
    "gulp-sass": "^0.7.3",
    "gulp-ttf2woff": "^1.0.0",
    "gulp-uglifyjs": "^0.5.0",
    "gulp-util": "^3.0.2",
    "gulp-webpack": "^1.1.2",
    "jquery": "^2.1.3",
    "json-loader": "^0.5.1",
    "jsx-loader": "^0.12.2",
    "map-stream": "0.0.5",
    "modernizr": "^3.0.0-pre",
    "raw-loader": "^0.5.1",
    "react": "^0.12.2",
    "react-hot-loader": "^0.5.0",
    "react-router": "^0.11.6",
    "run-sequence": "^1.0.2",
    "through": "^2.3.6",
    "transform-loader": "^0.2.1",
    "vinyl-transform": "^1.0.0",
    "watch": "^0.13.0",
    "webpack": "^1.4.14",
    "webpack-dev-server": "^1.6.6",
    "yargs": "^1.3.3"
  }
}

Here is a rundown of each module's functionality:

Plugin(s) Functionality
gulp, gulp-util, run-sequence, yargs

The streaming build system.

Why Gulp and not Grunt?

We evaluated both Grunt and Gulp and decided to go with Gulp for it's use of streams. Grunt is more declarative while Gulp is imperative. This means that the build file (called the gulpfile) follows a code-over-configuration approach. Because of its minimal API surface it doesn't have the steep learning curve that Grunt does.

gulp-util

Helpers for gulp. Used for formatting dates (copyright banners) and logging to the terminal.

run-sequence

A module to help run tasks in series in gulp. This is a temporary solution which will be removed once gulp 3.0 is released.

yargs

Light-weight option parsing with an argv hash. No optstrings attached.

webpack, webpack-dev-server, gulp-webpack, enhanced-require, json-loader
Webpack:

A bundler for CommonJS/AMD modules but can be used to bundle anything. Its fast because of its support for incremental building and smart caching.

enhanced-require:

Enhanced NodeJS Require with Webpack loader support for server side rendering.

json-loader:

JSON loader for webpack.

React, react-hot-loader, react-router, Fluxxor, jsx-loader
React:

A Javascript library for building User interfaces open-sourced by Facebook. It uses a virtual DOM diff implementation for ultra-high performance. It also implements a one-way reactive data flow which reduces boilerplate and is easier to reason about than traditional data binding.

React Hot Loader:

Live edit React components without unmounting or losing their state (a Webpack loader)

React Router:

A complete routing solution for React.js

Flux and Fluxxor:

Flux is the application architecture that Facebook uses for building client-side web applications. It complements React's composable view components by utilizing a unidirectional data flow.

Fluxxor is a set of tools to facilitate building Javascript data layers using the Flux architecture by reifying many of the core Flux concepts.

jsx-loader:

This is a loader for webpack which loads, compiles and concatenates JSX modules.

Sass, gulp-sass, gulp-minify-css, css-flip, gulp-autoprefixer, gulp-bless
Sass:

Sass (Syntactically Awesome StyleSheets) is the most mature, stable, and poweful professional grade CSS extension language in the world.

gulp-sass:

We chose gulp-sass because it used node-sass which provides a binding to libsass (C/C++ implementation of Sass compiler) under the hood. This version is ultra-fast in comparison to the original Ruby implementation and reduces dev time by a big margin.

gulp-minify-css:

A gulp plugin to minify CSS files.

css-flip:

A module maintained by Twitter to flip CSS stylesheets from LTR to RTL and vice-versa.

gulp-autoprefixer:

Don't use mixins for generating vendor prefixes for shadows/gradients etc. Write standard code and use gulp-autoprefixer instead to add vendor prefixes.

gulp-bless:

We use gulp-bless to split up the resulting CSS output from SASS to ensure that the maximum selectors limit bug in IE9 is not hit. See this link: blesscss for more information on the bug.

gulp-ttf2woff, gulp-cssfont64
Why gulp-ttf2woff and gulp-cssfont64?

Instead of serving users with TTF, SVG, EOT and WOFF files with IE specific hacks we decided to use embedded Base64 fonts. This has multiple advantages:

  • Single HTTP request (as all fonts are embedded in a single CSS file)
  • Better maintainability (only drop the TTF into designated folder rather than maintain 4 different formats with IE specific hacks)
  • No font flashing
  • Cross-Browser support

gulp-ttf2woff:

Converts TTF font files to WOFF type.

gulp-cssfont64:

Embeds WOFF fonts into CSS files by converting them to Base64 format.

gulp-uglifyjs

Uglify static assets.

del, gulp-concat, gulp-insert, gulp-rename, gulp-replace, map-stream, through, transform-loader, raw-loader, vinyl-transform

File manipulation utilities and webpack loaders for performing all the grunt work.

express, compression, cookie-parser, express-beautify

Express is a web server for Node.JS. Use it for dev environment to test the frontend. Compression library provides for Gzip based compression, cookie-parser for parsing cookies and express-beautify for prettifying server rendered HTML.

eventemitter2

A nodejs event emitter implementation with namespaces, wildcards, TTL, works in the browser.