-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
281 lines (214 loc) · 8.47 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>React Fiber</title>
<meta name="description" content="Talk on the new Fiber reconciliation system of React">
<meta name="author" content="Claudio Procida">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/moon.css" id="theme">
<!-- Code syntax highlighting -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<link href="https://fonts.googleapis.com/css?family=Courgette|Fira+Sans:300" rel="stylesheet" />
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
<style type="text/css">
.small-title h1 {
font-size: 3em;
}
.reveal h1,
.reveal h2,
.reveal p {
font-family: 'Fira Sans', sans-serif;
font-weight: 300;
text-transform: none;
}
span.s {
text-decoration: line-through;
}
</style>
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section data-markdown data-separator-notes="^Note:">
# React Fiber
## Overview of the rewrite of React's core
Claudio Procida [@claudiopro](https://github.com/claudiopro)
</section>
<section data-markdown>
# Hi!
</section>
<section data-background="https://jetstreamprojector.files.wordpress.com/2009/09/3300696905_512c9fc25f_b.jpg"
data-background-transition="zoom">
</section>
<section data-background="https://techpinions.com/wp-content/uploads/2013/10/5563065416_f9562778cc.jpg"
data-background-transition="zoom">
</section>
<section data-background="https://c1.staticflickr.com/1/572/32241885223_577dc312e9_h.jpg"
data-background-backup="http://a.fastcompany.net/multisite_files/fastcompany/imagecache/inline-large/inline/2013/11/3021307-inline-fb-thumbsup-printpackaging.jpg"
data-background-transition="zoom">
</section>
<section data-background="https://facebook.github.io/react/img/logo.svg">
</section>
<section>
<h2>Core Concepts</h2>
<ul>
<li class="fragment">Virtual DOM</li>
<li class="fragment">Reconciliation</li>
<li class="fragment">Push vs. Pull</li>
<li class="fragment">Updates</li>
</ul>
<aside class="notes">
Some notes
</aside>
</section>
<section data-background="https://c1.staticflickr.com/5/4007/4229175586_44111916a3_b.jpg">
</section>
<section>
<h1>Stack</h1>
<ul>
<li class="fragment">Synchronous</li>
<li class="fragment">Recursive</li>
<li class="fragment">Render and reconcile</li>
</ul>
</section>
<section data-background="https://c1.staticflickr.com/8/7159/6815678009_444a2fa91e_b.jpg">
</section>
<section data-markdown data-separator-notes="^Note:">
# Stack: Issues
* Heavyweight context
* Can't be split in chunks
* Java-like OO architecture
* See [Sebastian Markbåge's notes](https://github.com/facebook/react/issues/7942) for insight
</section>
<section data-background="https://c1.staticflickr.com/2/1494/26296983622_a398aaeef4_k.jpg">
</section>
<section>
<h1>Fiber</h1>
<ul>
<li class="fragment">Complete rewrite of core</li>
<li class="fragment">Async reconciliation</li>
<li class="fragment">Atomic commit</li>
</ul>
</section>
<section data-markdown data-separator-notes="^Note:">
# Fiber: Goals
* Pause and resume work
* Assign priority to different types of work
* Reuse previously completed work
* Abort work that is no longer needed
Note:
In a sense, Fiber's goals are to build a flexible and extensible UI rendering scheduler
</section>
<section data-markdown data-separator-notes="^Note:" class="small-title">
# Fiber: Internals
* Uses `requestAnimationFrame`, `requestIdleCallback` APIs
* Iterative, not recursive
* Linked lists of components
* While loops to reconcile and update
</section>
<section data-markdown data-separator-notes="^Note:">
# Fiber: Pros 🎉
* Does not drop frames
* Splits work across frames
* Commits when work is complete
* Can de-prioritize offscreen work
</section>
<section data-markdown data-separator-notes="^Note:">
# Fiber: Cons 😭
* Harder to debug
* Better tooling needed
* Difficult to reason about
* Non instantaneous updates
</section>
<section data-markdown data-separator-notes="^Note:">
# Fiber: Caveats
In Fiber, `setState()` calls will be batched more frequently. This code may not work as expected:
```js
// Wrong
this.setState({
counter: this.state.counter + this.props.increment
});
```
Use the callback form instead:
```js
// Correct
this.setState((prevState, props) => ({
counter: prevState.counter + props.increment
}));
```
</section>
<section data-markdown data-separator-notes="^Note:">
# Fiber: Extras 🎁
* Error Boundaries
* Multiple components in `render()`
* Portals for dialogs
* Better SSR performance without client-side logic
Note:
React will add new features while implementing Fiber. It will add support for error handling via
Error Boundaries, sort of an equivalent to catch blocks. Error Boundaries are components to render
in case of exceptions in any of the lifecycle methods.
Additionally, render() will be able to return multiple components. This will support use cases like
tables, where collections of children should not be wrapped in parent elements. It will also play
nicely with Flexbox or Grid layouts where flex parent and children should not be separated by an
intermediate element.
Finally, server side rendering will be decoupled from the Stack implementation, which currently
slows down rendering to string, that requires no reconciliation. There is currently no plan to
provide a replacement implementation, but it could be a streaming one.
</section>
<section data-markdown data-separator-notes="^Note:">
# Demo
[Fiber vs Stack](https://claudiopro.github.io/react-fiber-vs-stack-demo/)
</section>
<section data-markdown data-separator-notes="^Note:">
# Fiber: When?
* Already in master HEAD (go check it out! 😍)
* Expected enabled by default in React 16
* http://isfiberreadyyet.com
Note:
Fiber is expected to be available in 2017 and will be enabled by default in React 16.
The reason why it's not enabled yet is because it's still broken.
There is a website, isfiberready.com, which shows the progress in terms of test pass rate.
Currently, test success rate is 98.1%
</section>
<section data-markdown data-separator-notes="^Note:">
# Thank you!
</section>
<!-- <iframe src="./fiber-demo.html"></iframe> -->
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script>
// Full list of configuration options available at:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
transition: 'slide', // none/fade/slide/convex/concave/zoom
// Optional reveal.js plugins
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true },
{ src: 'plugin/notes/notes.js', async: true }
]
});
</script>
</body>
</html>