w33ble

<snippet>
  <!-- Example: Hello, ${1:this} is a ${2:snippet}. -->
  <content><![CDATA[
React.createClass({
  render: function() {
    return React.DOM.${1:div}({
      className: '${2}',
      children: '${3}'
    });
  }

w33ble

define(function(require, exports, module){
  var React = require('react');
  var Parse = require('parse');
  var ReviewSummary = require('components/review-summary');
  var ReviewsList = require('components/reviews-list');
  var ReviewForm = require('components/review-form');
  var Emitter = require('emitter');
  var emitter = new Emitter();

  var user = Parse.User.current();

w33ble

var gulp = require('gulp'),
    gutil = require('gulp-util'),
    less = require('gulp-less'),
    mustache = require('gulp-mustache'),
    clean = require('gulp-clean');
    fs = require('fs');

gulp.task('clean', function () {
    var stream = gulp.src('dist/', {read: false})
        .pipe(clean())

w33ble

// commonjs pattern
define(function(require) {
  var $ = require('jquery');

  // Replaces the 'shorthand' function from the first example 
  // This is returned as a module to the require call
  return {
    show: function() { 
      $('.loading-overlay').removeClass('hidden');
    },

w33ble

// require pattern
var deps = [
  'jquery',
  'lodash',
  'backbone'
];

define(deps, function($, _, Backbone) {
  // Replaces the 'shorthand' function from the first example 
  // This is returned as a module to the require call

w33ble

define(function(require, exports, module){
  var React = require('react');
  var Avatar = require('avatar');

  return React.renderComponent(Avatar({ email: 'hello@world.com' }), document.querySelector('body'));
});

w33ble

# bookshelf code, to compliment the knex code above

exports.PG = Bookshelf.PG = Bookshelf.initialize
  client: 'pg'
  connection: config.get('/postgres')

# property photo model
exports.PropertyPhoto = PropertyPhoto = Bookshelf.PG.Model.extend
  tableName: 'property_photos'

w33ble

Hey, I'm the React zealot on Reddit (slash on the core team :)) I expect lots of debate from this :)

I wrote a blog post a while ago about this: http://www.quora.com/Pete-Hunt/Posts/Facebooks-React-vs-AngularJS-A-Closer-Look[22]

First of all I think it's important to evaluate technologies on objective rather than subjective features. "It feels nicer" or "it's cleaner" aren't valid reasons: performance, modularity, community size and ease of testing / integration with other tools are.

I've done a lot of work benchmarking, building apps, and reading the code of Angular to try to come up with a reasonable comparison between their ways of doing things.

Community / project maturity

w33ble

Vagrant.configure("2") do |config|
  config.vm.box = "precise64"
  config.vm.box_url = "http://files.vagrantup.com/precise64.box"
  config.vm.provision :shell, :path => "provision.sh"
  config.vm.network :forwarded_port, host: 9200, guest: 9200

  config.vm.provider "virtualbox" do |vb|
    vb.customize ["modifyvm", :id, "--cpuexecutioncap", "60", "--cpus", "1"]
    vb.memory = 512
  end

w33ble

#!/bin/sh

# Some things taken from here
# https://github.com/mathiasbynens/dotfiles/blob/master/.osx

# Set the colours you can use
black='\033[0;30m'
white='\033[0;37m'
red='\033[0;31m'
green='\033[0;32m'