January 28 & 29 — Facebook HQ, CA
Registration & Breakfast at Facebook
Breakfast at Facebook
Tom Occhino and Christopher Chedeau
Christopher Chedeau
Brenton Simpson
Andrew Rota
Gurdas Nijor
Lee Byron
Daniel Schafer and Jing Chen
Jafar Husain
James Long
Zach Nation
Michael Jackson
David Nolen
Pete Hunt
Bill Fisher
Jason Bonta
Bonnie Eisenman
Eric Ferraiuolo
James Brantly
Ryan Florence
Dinner at Aloft Hotel (included)
Cocktail at Aloft Hotel (included)

Day 1 #

Keynote #

by Tom Occhino and Christopher Chedeau

Wednesday, 10:00–10:30am

Tweak your page in real time, without leaving the comfort of your editor #

by Brenton Simpson

Wednesday, 10:30–11:00am

Dev Tools are awesome! They let you experiment with the design and structure of your page by providing instant feedback. Unfortunately, each browser (and device) has its own set that doesn't work with any other's (without some experimental sorcery). Even then, you often have to leave behind comforts like JSX and Sass to work in the bare-metal world of Web Inspector.

In this talk, you'll learn how to bring all that instant-feedback magic into your favorite editor, where the key-bindings are familiar and your favorite transpilers are at your aid. Make changes to your JSX+JS Harmony+Sass-powered app and watch them cascade across every device on your desk in real-time, with no reloading! Organize your codebase into modules for development, but minify and inline them for production, all without touching a Gruntfile.

Unlocking the structure of your React applications with the AST #

by Gurdas Nijor

Wednesday, 11:30–12:00pm

Lisp programmers have understood the power of the concept of "code as data" for decades. Having a structured representation of your code allows for an untold number of new applications that go far beyond what can be achieved by treating it as a lifeless stream of characters.

Esprima, a parser for javascript pushes your development very far in that direction by allowing you access to an AST (abstract syntax tree) representation of your code, that coupled with the strong conventions and API of React allow for some pretty amazing applications that i'll demonstrate how to implement.

Data fetching for React applications at Facebook #

by Daniel Schafer and Jing Chen

Wednesday, 12:00–12:30pm

React and the flux architecture combine to simplify many aspects of building a modern web application, but data fetching is still a tricky problem, especially as applications become more complex. We'll describe the approach Facebook uses to make data fetching simple for developers, even as a project grows to include dozens of developers and the application becomes as complex as Facebook's news feed.

Communicating with channels #

by James Long

Wednesday, 2:00–2:30pm

React has a simple way for components to communicate with each other: pass event handlers down through children and events will flow upwards to parent components. This works well for simple components and certain UI events, but it breaks down with large complex apps. The Flux architecture helps with this by defining 'actions' that components can fire and subscribe to, and you write code outside of your components to handle data and dependencies of the actions.

With the advent of 'goroutines' and channels in languages like Go and Clojure, we have a new style of coordinating actions. We have developed a library that allows you to write goroutine-like code on top of generators, called js-csp. I will take a look at how this might be used to handle complex data flow in a React-based app. We will see what parts of Flux and React's event system might be improved, or if it even helps at all!

react-router increases your productivity #

by Michael Jackson

Wednesday, 2:30–3:00pm

react-router is a powerful routing library built on top of React that helps you add new screens and flows to your application incredibly quickly, all while keeping the URL in sync with what's being displayed on the page. The project benefits from several years of combined experience working with the legendary Ember.js router.

This talk will show how the router makes it easy to implement many common flows including authentication, navigation prompts, and animation. We'll also explore some advanced techniques including server-side rendering and partial application loading.

Full Stack Flux (was: The future of JavaScript layout systems) #

by Pete Hunt

Wednesday, 3:30–4:00pm

When you build apps with React, all the time you spent futzing with DOM manipulation goes away. It's amazing.

Now that I've been building React apps for 2 years, I've realized that I spend most of my time fighting with CSS layout. CSS was designed a long time ago to style semantic documents, not to build complex, interactive applications.

Grid stylesheets bring the Cassowary constraint solver (popularized by Apple's AutoLayout system in iOS) to the web. In this talk I'll show off my React bindings to this library, why they are awesome, and why they're relevant in a world where we can use flexbox.

Making your app fast with high-performance components #

by Jason Bonta

Wednesday, 4:00–4:30pm

We can all appreciate that React apps are easy and awesome. They make great demos that are crushingly good at DOM-manipulations. But as they grow (and they always do), things start to get unwieldy. Big apps — especially ones with long life-spans, huge data sets, or numerous contributors — can suffer serious perf and maintenance inefficiencies.

The Facebook Ads Interfaces team shares what they’ve learned after spending the last year building one of the world’s largest React applications. By being intentional about your app's component hierarchy, separation, and data-passing, you can achieve excellent performance, sustainable even at a massive scale.

Format data and strings in any language with FormatJS and react-intl #

by Eric Ferraiuolo

Wednesday, 5:00–5:30pm

You speak English, but most people don't. Formatting numbers, dates, and pluralizing strings is hard enough to get right in English, let alone internationalizing your web app to support multiple languages. FormatJS with react-intl (open sourced by Yahoo) has your back by providing a declarative way for your React-based app to format data and strings for English and over 150 languages in just 7KB gzipped.

Hype! #

by Ryan Florence

Wednesday, 5:30–6:00pm

Most of the time, I simply find React to make me more productive with the work-a-day tasks of building a UI in the browser. Other times, when I'm asked by fellow developers or designers if, and how, we could do some kind of crazy sounding thing, I find that React saw it coming.

Lets push the boundaries of what React lets you do with some of the most interesting use-cases I've come across and implemented.

Day 2 #

React Native #

by Christopher Chedeau

Thursday, 10:00–10:30am

The complementarity of React and Web Components #

by Andrew Rota

Thursday, 10:30–11:00am

The component driven, performance focused approach of React is a perfect complement to the modularity and portability of native HTML Web Components. At first glance, React and Web Components might seem like two radically different solutions to the same problem. But when combined properly they complement each other to create an extremely powerful, expressive framework for developing complex web applications.

Immutable Data and React #

by Lee Byron

Thursday, 11:30–12:00pm

Immutable data unlocks powerful memoization techniques and prohibits accidental coupling via shared mutable state. It's no accident that these are the the same benefits provided by React.

Persistent data structures provide the benefits of immutability while maintaining high performance reads and writes and present a familiar API.

Learn about how persistent immutable data structures work, and techniques for using them in your React applications with Immutable.js, a library of fully persistent immutable data structures.

Beyond the DOM: How Netflix plans to enhance your television experience #

by Jafar Husain

Thursday, 12:00–12:30pm

Netflix has rebuilt our mobile and web UIs. These UIs are hosted in the browser, and we've seen big performance gains thanks to React's virtual DOM. But what if the DOM is just too slow on a given platform?

Netflix uses a canvas-like API to maximize performance on smart TVs and game consoles. Given that React improved performance and simplified the code on our other platforms, we asked ourselves "could React work without the DOM?"

Yes. Not only is it possible to use React without the DOM, React's design is particularly well-suited to working with low-level APIs like Canvas or WebGL. As a matter of fact, React's design is heavily influenced by game-rendering engines. In this talk, you will learn about how we are integrating React with our TV platform, and what design patterns we're using to get a good balance of simplicity and performance.

Scalable Data Visualization #

by Zach Nation

Thursday, 2:00–2:30pm

Visualizing large-scale data in the browser presents many challenges, including performance of rendering, responding to state changes from user input or data changes, and transforming gigabytes of data into hundreds or thousands of visual elements efficiently. Being able to reason about the effects of state changes, and the performance implications of those effects, becomes even more important at large scale. GraphLab uses React.js extensively to help control the complexity of rendering and enable us to build bigger and better visualizations.

This talk will cover various techniques for rendering, and the pros and cons of each, including: render targets (canvas vs. SVG), client-server application architecture optimized for large data, and integration with other visualization libraries including d3.js. While React.js is a solution for client-side rendering, it must be combined with a whole data pipeline to be effective for rendering larger data than can fit in the browser. By using a stateful server-side and a modified Flux-like architecture, in which XMLHttpRequest communicates with a server-side dispatcher, we can keep transformations close to the raw data and manage client-side application complexity at the same time.

Refracting React #

by David Nolen

Thursday, 2:30–3:00pm

Om is a popular ClojureScript binding to React that streamlines integration with persistent data structures. Besides providing basic global state management facilities, it also contains some unique concepts that will be of interest to both users and implementers of React and React-like systems. This talk will explore the design decisions, tradeoffs, and benefits that result from taking a more aggressive stance on application state when pursuing scalable component architecture.

Flux Panel #

by Bill Fisher

Thursday, 3:30–4:00pm

Michael Ridgway (Yahoo!), Spike Brehm (Airbnb), Andres Suarez (SoundCloud), Jing Chen (Facebook), Kyle Davis (Facebook), and Ian Obermiller (Facebook).

Codecademy's approach to component communication #

by Bonnie Eisenman

Thursday, 4:00–4:30pm

Codecademy recently rebuilt our entire learning environment using React. The learning environment needs to dynamically accommodate various combinations of components (the code editor, browser preview, terminal, and lesson content, for example), leading to changing communication needs. We solved this using meta-programming to create dynamic communication "adapters," allowing us to mix-and-match functionality on the fly. I'll discuss our motivations for doing so, and how this approach has met our needs for flexibility even if it's not the "React way" of doing things.

Static typing with Flow and TypeScript #

by James Brantly

Thursday, 5:00–5:30pm

Learn how to take advantage of static typing in React with Flow and TypeScript. Flow is a recently released static type checker from Facebook designed to work well with React from the ground up.

TypeScript integration is more difficult and we will cover solutions to common problems such as class system integration and JSX. Both allow you to annotate your React application with types for compile-time checking of invariants and other common issues.

Q&A with the team #

Thursday, 5:30–6:00pm

Tom Occhino, Ben Alpert, Lee Byron, Christopher Chedeau, Sebastian Markbåge, Jing Chen, and Dan Schafer.