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