004 Pete Hunt, Software Engineer for Facebook, discussing Facebook's open source js UI framework, React

Jeff interviews Pete Hunt, Software Engineer for Facebook, on the history and design of Facebook's React web UI framework for javascript and Node.js

In this episode, Jeff interviews Pete Hunt, a software engineer with Facebook about Facebook’s hot new open source js UI framework, React. React is a fresh look at how to build UI’s, attempting to improve on the limitations of the past. React gets some of its inspiration from how game engines acehieve awesome performance in their rendering pipeline.

React can be used in the browser and on the server with node.js so you can have single page apps that are fully indexable by the search engines and have instant load characteristics. React has pluggable backends so it can be used to target the DOM, HTML, canvas, SVG, and other formats.

The ideas and concepts behind React are very compelling, I encourage you to give it a look.

Episode Info

Episode: CW 004
Published: March 17th, 2014
Tags: js, nodejs,UI,framework
Duration: 42:17
Updated: 2014-05-01 Added links to great articles by Reto Schläpfer

Episode Notes
Interview timeline

2:08 - What is React and why might people want to use it?
3:08 - The symbiotic relationship of ClojureScript and React
4:54 - The history of React and why it was created
9:43 - Updating web page with React without using data binding, a better approach inspired by game engines
13:11 - Using the virtual DOM to change the browser DOM
13:57 - Programming with React, render target HTML, canvas, other. Javascript is reference implementation of React. Node.js, ClojureScript, other environments.
16:45 - Working with designers. Contrasted with Ember and AngularJS. React encourages building a component architecture.
21:45 - JSX Compiler bridging HTML and React javascript
23:50 - Autobuilding JSX and in browser tools for React
24:50 - Tips and tricks to working with React, suggestions for getting started with React
27:17 - Rendering HTML on the server with Node.js. Pluggable React rendering backends (DOM, HTML, canvas, mixed mode static HTML + background JS binding). Better single page app performance
29:20 - React evolved through survival of the fittest at Facebook
30:15 - Ideas for having state on server and client, possibilities for using React over web sockets.
32:05 - React-multiuser - distributed shared mutable state using Firebase
33:03 - Better debugging with React using the state transitions, rewinding the state to replay the events
34:08 - Differences from Web Components
34:25 - Notable companies using React - Khan Academy, Oscars (Neartime.com), Largest bank in Russia, Facebook, Instagram
35:16 - Could a React backend plugin be created to target PDF?
36:30 - Future of React, what’s next?
39:38 - Contributing and getting help

Notable users of React

Instagram.com is 100% built on React, both public site and internal tools.
Facebook.com’s commenting interface, business management tools, Lookback video editor, page insights, and most, if not all, new JS development.
Khan Academy uses React for most new JS development.
Shirtstarter is 100% built on React.
Sberbank, Russia’s number one bank, is built with React.
The New York Times’s 2014 Red Carpet Project is built with React.

Resources
Links from Show

Main Reactjs.org site
Github Repo for Reactjs Source
Pete Hunt’s Twitter
Khan Academy question editor GitHub repo written in React
irc: #reactjs on freenode

Online Training Courses

CodeWinds React.js Fundamentals - The premier online course and community where you learn React.js by pragmatically building a real web app while applying TDD/BDD principles

“Highly recommended!”
- Kevin Old, Senior Software Engineer

“Look no further, the React.js Fundamentals course is the only course you will need to become an expert in React.js”
- Wyatt Preul, Software Architect, nearForm

“Overall I would give this React.js course a 4-star thumbs up!”- Kevin Bridges - Senior Technical Consultant at Applied Software

Tutorials

Videos and podcasts covering React
Getting Started with Reactjs
Tutorial for React
Thinking in React
React examples page
JSX javascript XML syntax for React

Other

The articles below by Reto Schläpfer are excellent in explaining why you might consider Reactjs vs traditional MVC frameworks.

Why you might not need MVC with React.js - Reto Schläpfer
React.js vs traditional MVC (Backbone, Angular) - Reto Schläpfer
Joel Burget’s blog article and slides about Khan Academy switching from Backbone Views to React
Reactjs Google Group
Stack Overflow questions on Reactjs