Facebook's ReactJS has taken client side development by storm. From single-page apps, to server rendering, to native mobile, to apps on your TV, ReactJS is everywhere. Come find out what makes it so incredible.

React Rally

As software grows, we look for new ways to break it into parts and then hook the parts together. Functional programming is about new ways to isolate and then integrate code. Learn principles behind the trappings of functional programming. React embodies some of these principles — and can embody all of them, if we use it carefully. 

See how we are untangling the spaghetti of MVC, first with React, then Flux, then Elm. Find out how you’re already following functional principles, and how you can choose to benefit even more.

Functional Principles In React

This talk is about how to write cleaner, more efficient React code using ES6 and ES7. It will cover various topics from how to write components that work as both higher-order components and as decorators to using Symbols to quickly iterate over stored objects.

Elegant React with ES6 (and a bit of ES7)

Testing is a good way to see whether the program actually runs as you intended, and I'd like to show you some of the gotchas when testing react components, and how some components are easier to test than others.

Testable React Components

We all know that React works, but being functional implies so much more than the typical dictionary definition would imply. Using React and Om as an example, I’d like to walk you through some tenets of functional programming. A win much bigger than the words ‘virtual dom’ exists in React, and through my examples, you’ll see what makes reasoning about functional systems such a treat.

Why is React "functional"?

With the addition of the new Observe API, React becomes truly reactive! This fresh feature allows components to subscribe to observable data sources, and respond automatically as data is fetched or updated. 

The talk will cover when and how to use the new API in your own applications, and discuss how it stands to change the way we build and organize React components. We'll also detail how Parse implemented the first data source designed to interact with this API, and the lessons we learned along the way. Finally, we'll explore some unique use cases for observable data to inspire your own projects.

Bringing Observable Data to React

GraphQL is a query language that lets client applications concisely describe the data they require, and a server-side library that binds to your existing application code. GraphQL powers Facebook's mobile applications and is the data language of Relay. Learn more about GraphQL and how it might simplify your data driven applications.

Exploring GraphQL

In this talk, we'll dive into the structure of GraphQL servers, the APIs they enable, and where we want to take the broader ecosystem around GraphQL.

GraphQL Servers

tl;dr: This talk will be about syncing application state across clients over the network using sockets and observable streams and managing it using the Flux pattern. Also, canvas and functional reactive programming.

Basically, I will talk about how to build a simple multi-player game, which stores player state in a Flux store and syncs it across other players using sockets. Socket programming usually means event based async programming. Using streams/observables (RxJS) we can use sockets in a reactive manner, which makes it cleaner and easier to reason about.

Syncing stores using socket streams

Server-side JavaScript developers have been developing with small modules for years. Small modules have been more pain than their worth for many front-end developers, though. The tools for doing it well haven't been there.

But the tools are starting to change as the front-end is moving towards a componentized future. Frameworks like React are encouraging developers to create components that are compact and easy to reason about, as well as easy to share.

In this talk, we'll look at some of those tools, such as webpack and npm, to see how they help you work with small modules today and what's coming in the future.

Making small modules actually work with webpack and npm

When talking about animations, most people think about fire and forget animations. But as we transition to mobile, gesture based animations are more prominent than ever. In this talk I'm going to introduce the Animated library that lets you write performant animations in a very React-y way.

Animated

Exponent ( http://exp.host ) is a way create and view rich articles built with React Native. Anyone with an iPhone and the Exponent app can view Exponent articles, and you can develop for it with just a text editor and a web browser -- no need for Xcode or even a simulator.

Exponent: A React Native development tool

Many of us have the issue where we have to pass props to children again and again because we have data that a parent has and a deeply nested child needs. It's a difficulty that comes with React and no one has quite solved it yet. At Netflix, we believe we have a good solution for it that is explicit, performant, and terse without sacrificing clarity.

The name of the soon-to-be open sourced library is Falcor and it takes care not only of your data tunneling issue but also caching, cache invalidation, and even simple AJAX operations. Let's chat about how we can push React data to the next level.

Falcor: Simplifying Your Data

The Web Audio API has taken a huge leap forward by introducing MIDI into the equation. That means making music in the browser with all the great instruments you've had at home! Learn what it takes to build your own synths, styles or effects with React!

React & Web Audio Api: Building a MIDI Interace

Let's explore some of the similarities and differences between these two technologies, as well as how they can be used together in a production application. React is geared toward easy-to-maintain DOM manipulation, while WebGL excels at rendering complex shapes in 3D space. These differences allow us to make interesting tradeoffs, and allow us to do some pretty incredible things.

React and WebGL

All you need for a simple bar chart is D3.js, the standard library for interactive data visualization on the web. But for a highly complex visualization - and here "visualization" should be interpreted broadly to include all manner of charts, graphs, and dashboards with interactivity provided through scrolling, paging, filtering, focusing, and zooming - managing the state of the visualization becomes a complex task. And the problem multiplies if the data updates in real time.

This talk introduces a Flux-based strategy to separate the state of the visualization into three stores: one for the configuration of the visualization, one for the data that is the subject of visualization, and a third that bridges - and depends on - the first two and provides methods for accessing exactly the state information needed to render the current configuration of the data visualization using the subset of the current dataset that falls within the domain under inspection.

Flux for Data Visualization: A Preliminary Manifesto

Flow is a gradual static type system for JavaScript. I'll talk about why we're building it, how it works, where React fits in to it's story, what it is/isn't good for, and why it's probably not like many other type systems you might've used in the past.

Flow or how I learned to stop worrying and typecheck my React code

You love React. You want to rewrite your whole app in React right now. But you have millions of paying users, and maintaining a stable app is absolutely critical. How do you migrate now and optimize for future change?

I'll cover the lessons we learned when gradually moving a business critical PayPal Backbone/Node app with millions of users to React.

Migrating critical apps to React

I hate yard work, but React makes everything better. For this talk, I'll show you how I ported my home-built sprinkler system's old-and-busted iOS app to a hot-and-modern React web app. Including a live demo with a camera feed from my home.

React Rally 2015

Aug 24 - Aug 25 | Utah, USA