This week I've been preparing to give a React workshop at Hackbright Academy. Most of the attendees will not have much exposure to React and probably front end programming in general, so I want to give an overview of the front end landscape and help them understand the benefits of React. Part of my approach has been to get a deeper understanding of the DOM and what that means for performance in a framework like React. I want to help the attendees understand the actual DOM vs the virtual DOM and how those two are connected and why it's important.
In our newsletter this week we are highlighting some talks and tutorials that explain the importance of the virtual DOM and how Facebook is hoping to improve their rendering algorithm through their (currently experimental) library, React Fiber. For an extensive look at the current JavaScript landscape read "The State of JavaScript in 2016", where over 9,000 developers were surveyed and asked their opinions on various aspects of JavaScript (frameworks, testing, state management, etc). Vue.js, another framework which also uses a virtual DOM implementation was deemed the "up and coming framework" in "The State of JavaScript" survey and we'll take a look at some of it's interesting features. And finally, from the last JSConf in Iceland, Pinterest engineer, Tilde Ann Thurium talks about Pinterest's migration from a Backbone codebase to using React. Inspired by Pinterest's move from Backbone, check out the library for using Backbone with React.
Happy Coding!
-Sophia Shoemaker
State of JavaScript 2016 Survey
Over nine thousand developers took part in the first edition of the State Of JavaScript survey. They answered questions on topics ranging from front-end frameworks and state management, to build tools and testing libraries. As far as front-end frameworks go, React was definitely at the top of the list as far as favorites go. Vue.js is a new up and coming framework people seem to be excited about as well. Check out all the results from this extensive survey!
stateofjs.com
Vue 2.0
Vue is another front-end framework that has been gaining traction lately. It's community-backed (in other words, not sponsored by Google or Facebook) and has some interesting features. Version 2.0 was just released last week.
Some interesting features of this framework include:
- The rendering layer has been rewritten using a Virtual DOM implementation forked from snabbdom.
- Built-in streaming server-side rendering, so that you can render your component, get a readable stream back and directly pipe it to the HTTP response.
- The option to use either the HTML-based template syntax or directly write render functions instead of templates, with optional JSX support.
Vue looks like an interesting framework. Check it out!
medium.com
Videos
Andrew Clark's talk from ReactNext conference
One of the best features about React is it's declarative API. You just call setState on a component, and React worries about when and how those changes are manifest in the actual DOM. The way the current rendering algorithm works in React is that when setState is called on a particular component, the component itself and it's sub tree are recursively re-rendered until there is nothing left to render. There is no consideration given to different types of updates. Animations, user interactions (forms, clicks, etc) and data subscriptions (Redux) are all treated the same.
React Fiber is hoping to change the way updates to the DOM happen in React. Instead of treating all DOM updates the same, giving a higher priority to more important tasks like animations (as compared to other tasks like data fetching) can result in a better user experience and improve performance. Andrew Clark's talk from the latest ReactNext conference gives an in depth look at what Facebook is doing to improve the performance of React's rendering algorithm.
youtube.com
Pivoting to React, at scale from JSConf Iceland 2016
Prior to pivoting to React, Pinterest's codebase was a combination of Django on the back end and Backbone on the front end. There were quite a few issues with this setup including performance bottlenecks, JavaScript and CSS bloat and dual code paths (server side rendering for SEO and client side rendering).
In this talk from JSConf Iceland by Tilde Ann Thurium, she goes over the failures and successes their team encountered when pivoting the Pinterest codebase. With almost 500,000 lines of code and over 100 developers, this was no small feat. After migrating to React, the Pinterest team found some significant improvements including a 22% decrease in the time to interact with the profile page and a 10.6% increase in conversion rate on the pins page.
youtube.com
Tutorials
React Fiber in depth
React Fiber is an ongoing reimplementation of React's core algorithm. Over two years of research have gone into this project. Its headline feature is incremental rendering: the ability to split rendering work into chunks and spread it out over multiple frames.
If you don't have time to watch Andrew Clark's talk, head over to Github and read this introduction to React Fiber.
github.com
Why the Virtual DOM?
One way data-binding, composition through components are obvious benefits to using React, but what about the virtual DOM? Is that truly a benefit? JavaScript engines seem to be constantly improving, why do we need it? This article discusses what goes on when a change to the DOM happens and what benefits the virtual DOM gives us with React.
hashnode.com
Code
Backbone React component
If you're in a similar boat as Pinterest and have a Backbone codebase and you're looking to make the transition to using React, check out this library. It automatically plugs your Backbone models and collections into your React components, on the browser and server.
github.com
About
Fullstack React: The Book
Learn React the right way with Fullstack React: The Complete Guide to ReactJS and Friends. If you've already purchased a copy, you automatically get access to the latest changes. If you haven't purchased a copy yet, don't delay and get the most up to date and comprehensive information and tutorials.
fullstackreact.com
Like what you've been reading from Fullstack React? You can help us spread the word. Please forward this email to you friends (and let them know they can subscribe here).
Follow us on Twitter
Curated with love by Sophia Shoemaker, Nate Murray and the Fullstack.io team.
Suggestions are welcome, just reply to this email - we'd love to hear from you.