Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Practical React in Marionette application

5ff4f1dbfd3888fba963ec7cc629e6f3?s=47 mthenw
April 10, 2015

Practical React in Marionette application

meet.js Poznań

5ff4f1dbfd3888fba963ec7cc629e6f3?s=128

mthenw

April 10, 2015
Tweet

More Decks by mthenw

Other Decks in Programming

Transcript

  1. Practical React In Marionette application

  2. @mthenw

  3. None
  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

  8. None
  9. DataGrid PoC

  10. None
  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}) );

  18. None
  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!