Practical React In Marionette application 

@mthenw 

No content

Egnyte Web UI 

Egnyte Web UI Backbone/Marionette require.js karma/jasmine JSHint/JSCS underscore templates 

not so much unit tests a lot of HTML duplication overcomplicated business logic two-way binding (rivets.js) 

New feature - Audit Reports 

No content

DataGrid PoC 

No content

DataGrid PoC less code reusable components easy to test 

React + Marionette 

no revolution 

React Bridge 

var ReactBridge = Backbone.Marionette.ItemView.extend({ template: "#react-bridge-template", initialize: function (options) { this.options = options; }, onRender: function () { React.render(this.initializeComponent(this.options), this.el); }, onClose: function () { React.unmountComponentAtNode(this.el); } }); 

var Grid = ReactBridge.extend({ initializeComponent: function (options) { return DataGridComponent({ title: "Cool Grid", desc: "with awesome data", collection: options.collection, ... }); } }); 

App.Settings.layout.content.show( new Grid({collection: collection}) ); 

No content

Model Component model’s attributes as props update on change getModel().set(.., ..) 

Best practises 

Best practises JSX 

var Header = React.createClass({ render() { return ( ); } }); var Header = React.createClass({ render() { return ( React.createElement( "header", {className: `${this.props.classNamePrefix}-header content-header`}, React.createElement("div", null, React.createElement("h1", {key: “header"}, React.createElement("span", null, this.t(this.props.title) )), React.createElement("span", {className: "desc", key: "desc"}, this.t(this.props.desc) ), filters, React.createElement("div", {className: "actions", key: "actions"}, actions ) ) ) ); } }); 

Best practises JSX small components beware of using state 

var DataGrid = React.createClass({ render() { return

Best practises JSX small components even smaller components beware of using state 

var Icon = React.createClass({ render() { return ; } }); 

Best practises JSX small components even smaller components beware of using state no revolution 

+1 

Thanks!