Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Practical React in Marionette application
mthenw
April 10, 2015
Programming
2
560
Practical React in Marionette application
meet.js Poznań
mthenw
April 10, 2015
Tweet
Share
More Decks by mthenw
See All by mthenw
How to make better technical decisions
mthenw
0
25
Globally distributed applications with Serverless Framework
mthenw
1
77
The State of Serverless
mthenw
0
510
The State of Serverless (PCUG)
mthenw
0
110
Apex: The Holy Grail of AWS Lambda
mthenw
0
95
Microservices on AWS ECS
mthenw
8
720
Working with single-threaded event loop
mthenw
1
150
Bingo Bango Mongo
mthenw
6
330
Are you Redis? Introduction to Redis.
mthenw
2
660
Other Decks in Programming
See All in Programming
Let's make a contract: the art of designing a Java API
mariofusco
0
160
mrubyを1300円のボードで動かそう
yuuu
0
180
Monadic Java
mariofusco
4
260
코드 품질 1% 올리기
pluu
1
960
SRE NEXT 2022: Sensible Incident Management for Software Startups
takanabe
2
270
Android Architecture Design With Koin
agiuliani
0
230
You CANt teach an old dog new tricks
michaelbukachi
0
110
JGS594 Lecture 23
javiergs
PRO
0
400
CIでAndroidUIテストの様子を録画してみた
mkeeda
0
170
A technique to implement DSL in Ruby
okuramasafumi
0
640
Micro Frontends with Module Federation: Beyond the Basics @jax2022
manfredsteyer
PRO
1
280
Kueue入門/Kueue Introduction
bells17
0
510
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
19
2.9k
Teambox: Starting and Learning
jrom
121
7.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
151
12k
Reflections from 52 weeks, 52 projects
jeffersonlam
337
17k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
100
5.9k
Clear Off the Table
cherdarchuk
79
280k
Intergalactic Javascript Robots from Outer Space
tanoku
261
25k
Designing with Data
zakiwarfel
91
3.9k
Scaling GitHub
holman
451
140k
How GitHub Uses GitHub to Build GitHub
holman
465
280k
Become a Pro
speakerdeck
PRO
3
770
Transcript
Practical React In Marionette application
@mthenw
None
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
None
DataGrid PoC
None
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}) );
None
Model Component model’s attributes as props update on change getModel().set(..,
..)
Best practises
Best practises JSX
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 ) ) ) ); } });
Best practises JSX small components beware of using state
var DataGrid = React.createClass({ render() { return <div className="datagrid" >
<Header /> <Notifications /> <Table /> <Pagination /> </div>; } });
Best practises JSX small components even smaller components beware of
using state
var Icon = React.createClass({ render() { return <i className={"icon-" +
this.props.icon} />; } });
Best practises JSX small components even smaller components beware of
using state no revolution
+1
Thanks!