ConfPad

Tom Occhino reviews the past and present of React in 2015, and teases where it's going next.

In this talk, Brenton Simpson talks about how to bring 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 mod…

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 b…

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 b…

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 sub…

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 route…

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 brin…

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 Ad…

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 Engl…

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 interesti…

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 …

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 imm…

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 ou…

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 …

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 bene…

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

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 "ada…

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 Reac…