HackerTube
HomeLongsLikedHistoryWatch laterCategoriesPlaylistsSettings

Lin Clark - A Cartoon Intro to Fiber - React Conf 2017

Meta Developers3 HN recommenders · recommended in 3 months, 2017-2018
YouTube
216K views · 9 years ago · talk · dated

Lin Clark gives an illustrated, cartoon-style walkthrough of React Fiber, the rewrite of React's reconciler, explaining its incremental rendering and scheduling at React Conf 2017.

HN commenters recommend it as the clearest explanation of how Fiber and React 16 work.

Web development#react#fiber#reconciliation#timeslicing#linclark

7 comments from Hacker News

@carlmungz2018 · in “Ask HN: Can you suggest educative react projects for newbies to make?”

Study the React source code and implement your own mini-version. It's a great way to deepen framework specific knowledge (if that's what you are after) and also learning more about the language used to create the framework. Start with these articles: link link link ▶ this video link

CitesView on HN
@swyx2018 · in “Beyond React 16 by Dan Ambramov – Async Rendering and React Suspense”

typo in the title - its Abramov not Ambramov It's interesting that Lin Clark basically demoed Time Slicing a -year- ago at ReactConf: ▶ this video and in the first 10 mins of Dan's talk you see basically the same thing with user interaction applied. createFetcher is brand new and here's the metaconversation on Twitter/Github: link and link with a couple implementations here ( link ) and here ( link ) // style discussion below one thing I really appreciate about this talk is hard it is to even communicate asynchronous problems and the solutions to them. Personally the lagging animationFrame clock display (for time slicing) and the loading state devtools (for "react suspense") were actually the bigger "wow" moments. (Yes I know this talk is not about the tools or the charts) he does another thing I'm a fan of - starting with a question. this helps frame the rest of the talk: explaining why the question is a big deal, breaking the question down, proposing some solutions, showing how the solutions answer the question. bottom line - there's more to learn from this talk than just React.

CitesView on HN
@acemarke2018 · in “Show HN: Nerv – A fast React alternative, compatible with IE8 and React 16”

Yeah, the React team takes backwards compatibility very seriously. They did finally drop some deprecated methods from the main package in React 16, but made them available as separate packages, and even wrote codemods to automatically replace usages. I can recommend several resources for understanding the changes in React 16: - Lin Clark's fantastic ReactConf presentation on "A Cartoon Intro to Fiber": ▶ this video - The official announcements for React 16: link and link - A good summary of the major changes: link - Two articles looking at the user-facing features and changes: link and link

Strongly recommendsView on HN
@pmlamotte2017 · in “Inside a fast CSS engine”

I believe she just has a talent for it, she's an engineer as far as I know and has other related cartoon descriptions: link Her talk on react fiber this year is quite good as well: ▶ this video

RecommendsView on HN
@acemarke2017 · in “Facebook Announces React Fiber, a Rewrite of Its React Framework”

I'll repeat the comment I made in the "React 15.5" thread a couple weeks ago ( link ): For those who are interested in some of the details of the work that's going on, Lin Clark's recent talk on "A Cartoon Intro to Fiber" at ReactConf 2017 is excellent [0]. There's a number of other existing writeups and resources on how Fiber works [1] as well. The roadmap for 15.5 and 16.0 migration is at [2], and the follow-up issue discussing the plan for the "addons" packages is at [3]. I'll also toss out my usual reminder that I keep a big list of links to high-quality tutorials and articles on React, Redux, and related topics, at link . Specifically intended to be a great starting point for anyone trying to learn the ecosystem, as well as a solid source of good info on more advanced topics. Finally, the Reactiflux chat channels on Discord are a great place to hang out, ask questions, and learn. The invite link is at link . [0] ▶ this video [1] link [2] link [3] link

Strongly recommendsView on HN
@mklarmann2017 · in “Facebook Announces React Fiber, a Rewrite of Its React Framework”

React Fiber was beautifully described by Lin on the last reactconf. ▶ this video Congratulations to the release.

RecommendsView on HN
@acemarke2017 · in “React v15.5.0”

For those who are interested in some of the details of the work that's going on, Lin Clark's recent talk on "A Cartoon Intro to Fiber" at ReactConf 2017 is excellent [0]. There's a number of other existing writeups and resources on how Fiber works [1] as well. The roadmap for 15.5 and 16.0 migration is at [2], and the follow-up issue discussing the plan for the "addons" packages is at [3]. I'll also toss out my usual reminder that I keep a big list of links to high-quality tutorials and articles on React, Redux, and related topics, at link . Specifically intended to be a great starting point for anyone trying to learn the ecosystem, as well as a solid source of good info on more advanced topics. Finally, the Reactiflux chat channels on Discord are a great place to hang out, ask questions, and learn. The invite link is at link . [0] ▶ this video [1] link [2] link [3] link

Strongly recommendsView on HN
Dan Abramov: Beyond React 16 | JSConf Iceland33:25

Dan Abramov: Beyond React 16 | JSConf Iceland

JSConf
139K views • 8 years ago
Cheng Lou - On the Spectrum of Abstraction at react-europe 201635:32

Cheng Lou - On the Spectrum of Abstraction at react-europe 2016

ReactEurope
63K views • 10 years ago
React.js Conf 2015 - The complementarity of React and Web Components25:47

React.js Conf 2015 - The complementarity of React and Web Components

Meta Developers
22K views • 11 years ago
React Today and Tomorrow and  90% Cleaner React With Hooks1:35:30

React Today and Tomorrow and 90% Cleaner React With Hooks

React Conf
1.2M views • 8 years ago
Pete Hunt: React: Rethinking best practices -- JSConf EU29:32

Pete Hunt: React: Rethinking best practices -- JSConf EU

JSConf
548K views • 13 years ago
React.js Conf 2015 - Beyond the DOM: How Netflix plans to enhance your television experience25:55

React.js Conf 2015 - Beyond the DOM: How Netflix plans to enhance your television experience

Meta Developers
26K views • 11 years ago
[JSConfUS 2013] Tom Occhino and Jordan Walke: JS Apps at Facebook18:55

[JSConfUS 2013] Tom Occhino and Jordan Walke: JS Apps at Facebook

JSConf
45K views • 13 years ago
React.js Conf 2015 - Hype!31:17

React.js Conf 2015 - Hype!

Meta Developers
108K views • 11 years ago
React.js Conf 2016 - Lightning Talks - Elie Rotenberg4:40

React.js Conf 2016 - Lightning Talks - Elie Rotenberg

Meta Developers
4K views • 10 years ago
Keynote - JSON Graph: Reactive REST at Netflix54:58

Keynote - JSON Graph: Reactive REST at Netflix

Association for Computing Machinery (ACM)
41K views • 11 years ago
React.js Conf 2015 - Immutable Data and React31:11

React.js Conf 2015 - Immutable Data and React

Meta Developers
159K views • 11 years ago
React.js Conf 2016 - Ben Alpert - What Lies Ahead27:45

React.js Conf 2016 - Ben Alpert - What Lies Ahead

Meta Developers
50K views • 10 years ago
Hacker Way: Rethinking Web App Development at Facebook44:36

Hacker Way: Rethinking Web App Development at Facebook

Meta Developers
900K views • 12 years ago
Dan Abramov - Live React: Hot Reloading with Time Travel at react-europe 201530:41

Dan Abramov - Live React: Hot Reloading with Time Travel at react-europe 2015

ReactEurope
472K views • 11 years ago
Pete Hunt: React - Rethinking Best Practices (updated) - JSConf.Asia 201340:58

Pete Hunt: React - Rethinking Best Practices (updated) - JSConf.Asia 2013

JSConf
58K views • 12 years ago
Jordan Walke - React to the Future36:45

Jordan Walke - React to the Future

ReasonConf
48K views • 6 years ago
Sebastian Markbage: Minimal API Surface Area | JSConf EU 201424:28

Sebastian Markbage: Minimal API Surface Area | JSConf EU 2014

JSConf
71K views • 12 years ago
Netflix JavaScript Talks - Async JavaScript with Reactive Extensions28:39

Netflix JavaScript Talks - Async JavaScript with Reactive Extensions

Matt Marenghi
69K views • 12 years ago
React without memo12:01

React without memo

React Conf
150K views • 4 years ago
Pete Hunt - The Secrets of React's Virtual DOM (FutureJS 2014)35:25

Pete Hunt - The Secrets of React's Virtual DOM (FutureJS 2014)

Codegram
75K views • 12 years ago