@eldh

Designer & developer

Selecting a framework

MV*

Templates

Data binding

	

		

			
			{{todo.text}}
		
	
	

	

	  {{#each todos}}
			

				<input type="checkbox" {{bindAttr checked="done"}}>
				{{text}}
			
		{{/each}}
	
	

And now for something completely different

React

Made by facebook

Only UI

Renders UI and responds to events

DOM operations are slow & hard

Javascript is fast

Virtual DOM
&
synthetic events

Data flow

No templates

Syntax

jsx

	/** @jsx React.DOM */
	var HelloMessage = React.createClass({
		render: function() {
			return 
Hello {this.props.name}
;
		}
	});
	

	<HelloMessage name="John Doe" />
	

	
Hello John Doe
	

Javascript

	var HelloMessage = React.createClass({displayName: 'HelloMessage',
		render: function() {
			return React.DOM.div(null, "Hello ", this.props.name);
		}
	});
	

	HelloMessage({name: 'John Doe'});
	

	
Hello John Doe
	

	@ul {className: 'unstyled'},
		for todo in @props.todos
			@li {},
				@input { type: 'checkbox', checkedLink: todo.done }
				todo.text
	

	

	  {{#each todos}}
			

				<input type="checkbox" {{bindAttr checked="done"}}>
				{{text}}
			
		{{/each}}
	
	

backbone & react

Listen to backbone model changes

	subscribe: (obj) ->
		if obj instanceof Backbone.Collection or obj instanceof Backbone.Model
			_throttledForceUpdate = _.debounce @update.bind(this, null), 0
			obj.on "add remove change reset sort sync", _throttledForceUpdate, this
			true
		false

	update: ->
		@forceUpdate() if @isMounted()
	

Attach tags to 'this'

			React.DOM.div
		

			@div
		

Demo!

Verdict

Benefits

+ Performance

+ Component based

+ Code makes sense

+ Testing

Concerns

- Maturity

- Community

- Testing