keynote

React allows you to write styles inline and bypass a host of CSS shortcomings. Scope, dependency management, dead code elimination, these problems go away when adding your styles directly to components. But it's not all rainbows and unicorns. Things like theming and media queries become much more difficult when all your styles live directly on components. In this talk, we'll look at how to solve these problems with contexts and plain old JavaScript. We'll also look at the role of container-components and when it's better to "just use CSS."

Flux is most often used to implement shared state within a single window. But done properly, this architecture can be used to implement real-time, multi-user shared state between many users of the same web applications. Using HTTP requests to dispatch stores, and Websocket to broadcast updates, Flux over the Wire has the potential to trivialize several hard problems. While the idea of using Websockets to back Flux is rather straightforward, doing it in a way that scales up to tens of thousands of concurrent viewers can prove challenging. In addition, Flux over the Wire offers an interface which considerably eases server-side rendering, as it completely abstracts data fetching and data syncing from the React views that tap into its stores and dispatch its actions.

React Native's architecture has opened up many possibilities for re-inventing the clunkier aspects of UX construction on traditional platforms, making it easier and faster to build world-class experiences. This talk will walk through building an advanced gestural UI leveraging the unique power of the React Native layout and animation systems to build a complex and fluid experience.

At React.js Conf last January, we introduced the idea of GraphQL: a data fetching language that allows clients to declaratively describe their data requirements. Let's explore more of GraphQL, it's core principles, how it works, and what makes it a powerful tool.

Your front and back ends are already successfully in production but you don't have to miss out on the productivity that React brings. Forget the rewrites, this is brownfield!

React’s unique strength is bringing to JavaScript development some of the benefits previously exclusive to more radically functional languages such as Elm and ClojureScript, without forcing you to completely eschew local state or rewrite code with exclusively immutable data structures. In this talk, Dan will demonstrate how React can be used together with Webpack Hot Module Replacement to create a live editing environment with time travel that supercharges your debugging experience and transforms the way you work on real apps every day.

Relay is a new framework from Facebook that enables declarative data fetching & updates for React applications. Relay components use GraphQL to specify their data requirements, and compose together to form truly modular applications. This talk will explore the problems Relay solves, its architecture and the query lifecycle, and how can you use Relay to build more scalable apps. We’ll also see examples of how Relay powers applications as complex as the Facebook News Feed.

Paradoxically that today it is easier to create GUI than Text UI. Developer has an arsenal of different GUI libraries and layout engines. When one decides to write Terminal Text UI app he faces obstacles of Text UI DSL Library, imperative layouts, constantly increasing complexity and underdeveloped approaches. In this talk I will show you how to ask browser layout engine for help, how to avoid slavery of DSL and build declarative Text UI using only web-technologies like HTML, JS, CSS and React.

React has always been about the Virtual DOM. A nice way to render HTML (and some of SVG and maybe some Web Components). Although there's also react-art, react-three, react-canvas, react-curses... Oh, and react-native! Even if you bottom out at HTML, most of what React does really well is rendering to OTHER React components. Meanwhile most projects still try to retrofit our needs into HTML and CSS primitives. I'll talk about why the DOM is flawed and how it is becoming a second-class citizen in the land of React apps.

Lightning talks

Most React developers already use a build pipeline to transform their JSX into vanilla JavaScript. This is usually under-utilised only doing basic transformations such as concatenation, minification and linting. In this talk, Sebastian will go over how this already existing infrastructure can be further utilised to perform even more significant code transformations such as transpilation, optimisation, profiling and more, reducing bugs, making your code faster and you as a developer more productive and happy.

A talk on the past, the present and the future of animation, and the place React can potentially take in this. I will be focusing on a few experiments on animation I've done, specifically: react-tween-state, react-state-stream and some unreleased transition-group related thoughts and work.

At Twitter, teams have starting adopting React because it’s enabled UI engineers to forget about time when writing rendering code. And we've started exploring similar simplifications in the data layer, embracing the UI’s role as part of a distributed system. First, we'll share how user experience choices are a primary influence on how we design the data layer, especially for teams developing new products with full-stack capabilities. Working with data from multiple backend services has powerful benefits, and shapes the problem space for UI engineering. Next, we'll look at how React and Flux approaches can help in our problem scenarios. Yet even after the advances in React’s component model, the data layer is still an important source of complexity as an app grows and changes over time. Finally, we'll look at new approaches we’ve been exploring, and how designs like decoupling 'recording facts' from 'computing views of those facts' have influenced UI engineering. These designs nudge teams towards simplicity when creating impactful user-facing improvements like real-time updates, optimistic commits, and graceful handling of network outages.

React.js is changing the way developers think about mobile app development, especially with the recent announcement of React Native. However, in many ways hybrid (web + mobile) app development is here to stay for a large number of mobile apps. Everyone's heard "you can't build a native experience in a web view". We disagree. You just have to know the right tricks. And when you do, the web becomes an incredibly powerful platform for delivering amazing user experience using the technology you know. At Thinkmill in Sydney, over the course of developing several commercial apps, we've experienced the power of using ReactJS for mobile apps built on web technology, and developed a framework we call TouchstoneJS (which Tom Occhino called "the best looking and feeling implementation of this that I've seen" during the Q&A session at React Conf) to share this capability with developers around the world. In this talk I'll share what we've learned and how we've approached the unique challenges of mobile web apps - with tools that are useful to all developers building touch interfaces with React, as well as a walkthrough of our development process and framework. I'll also talk about what you can do with the web platform that you can't with native apps, and even React Native.

Since May 2014 over 100 people have contributed code to React Router and many, many more have filed issues, given talks, and used the router in both server and client environments. It has been mine and Ryan's privilege to work with and learn from these wonderful people and to guide the direction of a library that we hope will help us all build amazing products and tools with React over the next few years.

This year we are introducing support for React Native and we are working closely with the Relay team to ensure the router meets the needs of React developers everywhere React runs. More importantly though, we are focused on bringing great experiences to consumers of applications built using React Router. In this talk, we will discuss how your users can benefit from the many tools the router provides including server-side rendering, real URLs on native devices, and much, much more.

In this talk, we'll take a deeper dive into putting GraphQL to work. How can we build a GraphQL API to work with an existing REST API or server-side data model? What are best practices when building a GraphQL API, and how do they differ from traditional REST best practices? How does Facebook use GraphQL? Most importantly, what does a complete and coherent GraphQL API looks like, and how can we get started building one?

Flux provides a good framework for building rich client applications, but did you know you can reuse the flux architecture for server rendering? In this talk, I'll walk you through an isomorphic Flux architecture to give you the holy grail of frontend development. With this architecture you'll be able to reuse all of your application code on the server and client without worrying about server-side concurrency issues that you may see with stock Flux. Once the concepts have been explained, I will introduce the open source libraries that we have open sourced and are powering many of Yahoo's high-traffic web applications.

React provides us with a lot of tools for building components, but isn't prescriptive about how we use those. Objects can have props, state, and instance fields. When is it best to use each? We've heard a lot about pure components, but how do we make pure components when we have to deal with the realities of a stateful world? How do we make more complex components whose props actually represent them? We'll cover how we've answered these questions at Khan Academy, including techniques and patterns to make dealing with large pure components simpler, as well as current open questions.

Chrome is great, but 3rd party extensions make it better. The iPhone is great, but apps make it better. You React-app may be great, but imagine if you could safely and robustly allow 3rd party extensions to enhance it. We'll talk about specific features of React & Flux, React CSS, programming design patterns, and custom libraries, which can turn a static application into a dynamic platform that an ecosystem of developers can build on top of. We've built a highly-extensible desktop email client with React & Flux on Atom Shell, and we'll also show concrete examples of where these tools enabled a 3rd party ecosystem of email plugins. Our goal is for you to take away how to use React to be more than just great application developers, but now great platform developers as well.

Q&A