Practical React in Marionette application

meet.js Poznań

Transcript

1. Practical React In Marionette application
2. @mthenw
4. Egnyte Web UI
5. Egnyte Web UI Backbone/Marionette require.js karma/jasmine JSHint/JSCS underscore templates
6. not so much unit tests a lot of HTML duplication overcomplicated business logic two-way binding (rivets.js)
7. New feature - Audit Reports
9. DataGrid PoC
11. DataGrid PoC less code reusable components easy to test
12. React + Marionette
13. no revolution
14. React Bridge
15. 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); } });
16. var Grid = ReactBridge.extend({ initializeComponent: function (options) { return DataGridComponent({ title: "Cool Grid", desc: "with awesome data", collection: options.collection, ... }); } });
17. App.Settings.layout.content.show( new Grid({collection: collection}) );
19. Model Component model’s attributes as props update on change getModel().set(.., ..)
20. Best practises
21. Best practises JSX
22. var Header = React.createClass({ render() { return ( <header className={ `${this.props.classNamePrefix}-header content-header` }> <div> <h1 key="header"><span>{ this.t(this.props.title) }</span></h1> <span className="desc" key="desc">{ this.t(this.props.desc) }</span> { filters } <div className="actions" key="actions">{ actions }</div> </div> </header> ); } }); 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 ) ) ) ); } });
23. Best practises JSX small components beware of using state
24. var DataGrid = React.createClass({ render() { return <div className="datagrid" > <Header /> <Notifications /> <Table /> <Pagination /> </div>; } });
25. Best practises JSX small components even smaller components beware of using state
26. var Icon = React.createClass({ render() { return <i className={"icon-" + this.props.icon} />; } });
27. Best practises JSX small components even smaller components beware of using state no revolution
28. +1
29. Thanks!