Presentation of React Fiber. During HTGrenoble. My goal was to explain React principles.

1. ReactFiber
@sabativi - HTGrenoble Mai 2017 - www.reactivic.com

2. VictorSabatier
Freelance Web and mobile
developper.
Build stuff using Meteor, React
and React native.
Love learning and sharing
victor@reactivic.com
@sabativi - HTGrenoble Mai 2017 - www.reactivic.com

3. React Fiber is an ongoing reimplementation of
React’s core algorithm. It is the culmination of
over two years of research by the React team.
-- React Team
@sabativi - HTGrenoble Mai 2017 - www.reactivic.com

4. PrologueforReactFiber
@sabativi - HTGrenoble Mai 2017 - www.reactivic.com

5. PrologueforReactFiber
WhyReact?1
1
Learn more
@sabativi - HTGrenoble Mai 2017 - www.reactivic.com

6. React was invented as an
alternative to manual DOM
manipulation.
@sabativi - HTGrenoble Mai 2017 - www.reactivic.com

7. · Virtual DOM.
· Updating.
· And Reconciliation
@sabativi - HTGrenoble Mai 2017 - www.reactivic.com

8. ThevirtualDOM2
It is an object-based representation of how the DOM should look like
{
type: 'button', //The main element, an html button
props: { //The properties the element has
className: 'button-red', //Keyword 'class' is reserved
children: { //Nested HTML (or React) elements
type: 'span', //The nested element, a span
props: {
children: 'I am just text, so I don't have a type'
}
}
}
}
2
try to answer theses questions : who do we render in our application ? And where do you render it ?
@sabativi - HTGrenoble Mai 2017 - www.reactivic.com

9. Updating
@sabativi - HTGrenoble Mai 2017 - www.reactivic.com

10. Reconciliation3
3
try to answer theses questions : how (in what way) and why (under which circumstances) we render our application.
@sabativi - HTGrenoble Mai 2017 - www.reactivic.com

11. Reconciliationisnot
rendering!
@sabativi - HTGrenoble Mai 2017 - www.reactivic.com

12. andthisisawesome!
React Native, React VR...
@sabativi - HTGrenoble Mai 2017 - www.reactivic.com

13. Sofarweknow
@sabativi - HTGrenoble Mai 2017 - www.reactivic.com

14. · Who to render
· Where to render
· How to render
· Why it render
@sabativi - HTGrenoble Mai 2017 - www.reactivic.com

15. Whentorender?
@sabativi - HTGrenoble Mai 2017 - www.reactivic.com

16. Assoonaspossible
@sabativi - HTGrenoble Mai 2017 - www.reactivic.com

17. Oups
@sabativi - HTGrenoble Mai 2017 - www.reactivic.com

18. EnterReactFiber.
· Can pause/resume updates.
· Can prioritize updates.
· Can re-use previous updates.
· Can cancel updates.
@sabativi - HTGrenoble Mai 2017 - www.reactivic.com

19. Benefits
· Chunk updates.
· Smoother animations ( React Native )
· Less work for us.
@sabativi - HTGrenoble Mai 2017 - www.reactivic.com

20. Thanks
Q&A
@sabativi - HTGrenoble Mai 2017 - www.reactivic.com

21. Thispresentationwasbasedon
· isfiberreadyyet
· orlandohamsho.com
· react-fiber-architecture
· cartoon intro
@sabativi - HTGrenoble Mai 2017 - www.reactivic.com