An Introduction to React -- FED Date -- IBM Design

Josh Black
@joshblackfr
github.com/joshblack

C R E D I T S
Sebastian Markbåge
Christopher Chedeau
Joseph Savona
Michael Chan

T O D AY
• What is React?
• Why does it matter?
• How can we use it at scale?

React is a bridge from an imperative API
to a declarative API.

I M P E R AT I V E V S D E C L A R AT I V E

Imperative
Specify how to do something
var nums = [1, 2, 3, 4, 5];
// Double an array of values
for (var i = 0; i < nums.length; i++) {
nums[i] = nums[i] * 2;
}

Declarative
Specify the desired result
var nums = [1, 2, 3, 4, 5];
var doubled = nums.map(function (num) {
return num * 2;
});

🔥🔔
🔔
🔔
8
99+
Add label
Set label to 8

🔥🔔
🔔
🔔
8
99+
Add label
Add fire
Set label to 99+

– D A N A B R A M O V
“The complexity of the code to update the UI
increases as the square of the number of its states.”

if (count > 99) {
if (!hasFire()) { addFire(); }
} else {
if (hasFire()) { removeFire(); }
}
if (count === 1) {
if (hasLabel()) { removeLabel(); }
return;
}
if (!hasLabel()) { addLabel(); }
text = count > 99 ? '99+' : count;
getLabel().setText(text);

H O W C A N W E S O LV E T H I S ?

H O W C A N W E D O L E S S W O R K ?

function render(state) → DOM

function render(count) {
if (count > 99) {
return <Bell>
<Label>99+</Label>
<Fire />
</Bell>
} else if (count === 1) {
return <Bell />;
} else {
return <Bell><Label>{count}</Label></Bell>;
}
}

Imperative
Specify how to update the DOM
Declarative
Specify the desired result

– J I M S P R O C H
“React is a translation layer that takes in a description
of how things should be and executes the minimal
DOM operations to make it happen.”

– S E B A S T I A N M A R K B Å G E
“React is not a virtual DOM library for you to render
to the DOM. It’s a tool for building out your toolbox
of components.”

W H AT I S A C O M P O N E N T ?

W H Y D O E S T H I S M AT T E R ?

• We can think about components in isolation, rather than about a
system as a whole
• We basically write a function that describes what should happen, and
React handles the transitions for you
function render(state) → DOM

– J O S E P H S AV O N A
“React makes it a lot easier to do client side
development because it’s a simpler mental model.”

AV O I D I N G D ATA M U TAT I O N
• Complexity is often strongly correlated with data mutation
• If you rewrite the complex code to avoid mutation, it is usually much
easier to reason about

W R I T E S I M P L E R C O D E
• Makes it difficult to do data mutation
• Makes it difficult to use an Imperative API
• As a result, your application is more manageable

W H AT D O E S A C O M P O N E N T
L O O K L I K E ?

class MyView {
render () {
return <div>Hi</div>
}
}

S E PA R AT I O N S O F C O N C E R N S

S E PA R AT I O N O F T E C H N O L O G I E S

J S
H T M L
C S S
presentation

<div>Hi</div> →
React.createElement('div', null, 'Hi');

class Person {
render () {
return <div>{this.props.name}</div>
}
}

class Person {
render () {
return React.createElement(
'div',
null,
this.props.name
);
}
}

React.createElement(Person, { name: 'Jasmine' });
<Person name="Jasmine" /> →
<div>Jasmine</div>
O U T P U T S

class MyView extends Component {
render () {
return (
<div style={{ fontFamily: 'myFont' }}>
<section className="box">
<span role="tooltip" className="tooltip">
<a href="…" rel="help">Click here</a>
</span>
<button
onClick={this.handleOnClick}
role="button"
tabIndex={1}
/>
</section>
</div>
);
}
}

class MyView extends Component {
render () {
return (
<ContainerBox>
<HelpTip target="view-help">
Click Here
</HelpTip
<OkButton onAction={this.handleAction} />
</ContainerBox>
);
}
}

C O M P O N E N T S
ContainerBox
H
elpTip
O
kButton

C O M P O N E N T S
ContainerBox
HelpTip
OkButton

“Building up what primitives we need is not easy. But
we are the best people to say which components we
need.”

“For new developers, it’s really hard to jump into the
system and begin making changes and making
decisions while still being confident that the overall
system will work.”

joesavona
joesavona: classic view!
cpojer: so jealous right now
ﬂipper

joesavona
ﬂipper
<Feed>

joesavona
ﬂipper
<Feed>
<Media>

joesavona
ﬂipper
<Feed>
<Media>
<Comment>

H O W H A R D C O U L D I T B E ?
*Infamous last words before all-nighter

joesavona
ﬂipper
/feed
/photo/a
/photo/b
/photo/c
/comment/a1
/comment/b1
/comment/c1

joesavona
ﬂipper
/feed
/photo/a
/photo/b
/photo/c
/comment/a1
/comment/b1
/comment/c1
1
2
4
3
…

joesavona
ﬂipper
/feed_with_photos_and_comments

joesavona
ﬂipper
/feed?count=1
/feed?count=1&offset=1

joesavona
ﬂipper
/feed?count=1
1
2
3

Pagination
State Management
Ordering
Request Coordination
Error Handling
Retry
Callbacks
Caching
Promises

– Y O U R D E S I G N E R
“Can we add one more thing?”

joesavona
ﬂipper
/feed

joesavona
ﬂipper
Endpoints
/feed

joesavona
ﬂipper
Endpoints
/feed
Presentation

joesavona
ﬂipper
Endpoints
Presentation
Behavior
/feed

“Our simple change has turned into this. One change
requires a cascade of change throughout our
application. If you’re a new developer and you get a
task like add a photo, you might think it is easy but
then you have to understand the entire system in
order to make the change. This doesn’t scale.”

S O L U T I O N S
• Relay
• Falcor
• Flux

C O M P O N E N T S
• Adhere to DRY
• Encapsulation
• Manage own state

G E T T I N G S TA R T E D
http://cdpn.io/e/WvLJXP

“React is a component model for abstraction.”

• We build up the primitive components of our application
• We compose them together to create abstractions for higher order
components
• React is the tool that allows us to build out our toolbox of
components specific to our application

class App {
render() {
return (
<section>
<ul>
<li>Item #1</li>
<li>Item #2</li>
<li>Item #3</li>
<li>Item #4</li>
<li>Item #5</li>
</ul>
</section>
);
}
}

class App {
render() {
return (
<section>
<List items={items} />
</section>
);
}
}

class Permalink {
render() {
return (
<Link
highlighted
href={this.props.href}
{this.props.children}>
</Link>
);
}
}
<Permalink href="..." />

class Permalink {
render() {
return (
<a
className="permalink-button"
href={this.props.href}
rel="bookmark">
{this.props.children}
</a>
);
}
}
<Permalink href="..." />

“Your job is not to create clever hacks to compose
two wrong abstractions together. Your job is to
compose the right abstractions for the right job.”

R E A C T TA R G E T S
• DOM
• SVG
• WebGL
• iOS
• Android
• Canvas

Let’s build something amazing together.

An Introduction to React -- FED Date -- IBM Design

Recommended

Recommended

More Related Content

Similar to An Introduction to React -- FED Date -- IBM Design

Similar to An Introduction to React -- FED Date -- IBM Design (20)

Recently uploaded

Recently uploaded (20)

An Introduction to React -- FED Date -- IBM Design