ConfPad

React will have a new core algorithm soon with Fiber. This new algorithm improves responsiveness and perceived performance for complex pages. But to make that happen, the architecture had to be reconsidered from the ground up. In this talk, I'll break down the new concepts and explain what makes it seem faster.

I'd like to describe our journey building Next.js and what comes after :)

JavaScript is evolving quickly. The ES6 specification was released back in 2015 and has been implemented by modern browsers. New versions of ECMAScript will now be released on a yearly basis. We can leverage ES6 and functionality slated for future versions right now to write even clearer and more concise React code. Experience with React will help you get th…

Redux has become the defacto way to manage state in React— yet, there's a new kid on the block that is seeing promising growth and adoption: Mobx. The goal of the talk is to explore a thorough and balanced view on Mobx vs. Redux for state management. They both have distinct mental models for handling state (i.e. Functional vs. Object-oriented and Reactive, M…

Tools like Flow and TypeScript promise "types for your JavaScript" - but what does that get you, exactly? What's the experience like of adding types to a large JavaScript project? Is the overhead worth it for you and your team? In the end, embracing type systems will give you more confidence in your code, fewer production bugs, and a much friendlier codebase…

Integrating React Native with a large existing native codebase can prove to be very difficult. Use of React Native generally falls into two categories: "Green Field" and "Brown Field". "Green Field" apps are built from the ground up with 100% React Native, and "Brown Field" apps integrate React Native into an already existing codebase. Integrating React Nati…

The async nature of the React Native bridge incurs an inherent performance penalty, preventing JavaScript code from running at high framerates. Modern animation libraries, like Animated, address this by minimizing passes over the bridge. User interactions, where UI continuously reacts to the user's gestures, are a step further. How can we run those at 60 FPS…

In my talk last year, "Nuclide hacks for React Native development" I briefly touched on how Flow can lead to writing better React Native apps. This year, the focus is entirely on using Nuclide's rich UI for Flow features to move fast with React.

AWS Lambda is an event-driven, "serverless" service that makes it easier and cheaper than ever to get an application up and running. In this talk I'll dive into some of the details of what AWS Lambda is, how it works, how to integrate it with another AWS service, API Gateway and how you can "go serverless" with React applications.

In this talk we will explore React’s composable & flexible programming model in the domain of, well… programming. Here we will see how React can be used to codify your teams best practices, teach beginners JavaScript & help proficient programmers refactor more efficiently. You know what they say? “When all you have is hammer… React is good for everything.”

What if we took the best of JavaScript and the best of CSS, and combined them together to create the ultimate styling solution for React? Glen Maddern (CSS Modules co-creator) and I sat down and starting thinking about this. Let's talk about what we thought about and why we arrived where we did – 💅 styled-components.

How does Netflix select which new content to offer from a myriad of choices? The service is famously data-driven, but sometimes there is very little data to inform decisions. Data science meets art. Learn about a prediction tool that was recently redesigned, expanded and re-written in React.

GraphQL is the future, and you can use it today in React applications with minimal changes. No fancy frameworks are needed. Start using GraphQL right away to get the power of composition and declarative data requirements and work with more efficient APIs.

Data is all around us! From health tracking to sports statistics, users expect to see the data they're consuming presented consistently on every platform. In this talk, you'll learn how to use Victory, a library available for React and React Native, to build interactive, composable charts with ease. You'll also see some cool real-world examples on both platf…

An exploration in past and current alternative uses for React, non-standard rendering targets, and the future of such shenanigans.

The React components we know and love are a powerful and constrained abstraction for building user interface. The React team has managed to not only rewrite the entire reconciler with Fiber, but also create a simple and constrained API for implementing a React renderer! Let’s take a short exploration into what happens when we expand the definition of user in…

A presentation of the create-react-native-app (CRNA) tool. CRNA follows in the well-trodden path of create-react-app, providing a cross-platform, boilerplate-free developer experience for new React Native projects. CRNA is the product of a collaboration between Exponent, Facebook, and open-source contributors.

My talk will give you an overview of the WebVR ecosystem, beginning with a short introduction of the basic VR concepts, like head tracking sensors, the field of view and stereoscopic images. You will also see the current status of the ReactVR in action with code samples. Which leads to another important point of this talk: the struggles of creating VR applic…

React's declarative model has made it fun and easy to build engaging realtime interactions. But great realtime apps need great realtime APIs. Come learn how GraphQL can push data to your React apps in realtime with GraphQL Subscriptions. We'll take a look at the GraphQL Subscriptions Specification and how it enables an ecosystem of clients and servers.

With Jest, you can capture snapshots of React trees or other serializable values to simplify UI testing and to analyze how state changes over time. In this talk we will do a deep dive into snapshot testing and talk about other uses for them. We are also going to chat about how some of its internal packages can be used to create your own tools that leverage J…

The most performant code is code that never runs. Modern web apps are bigger in size that ever before, and the idea of Shipping Less JavaScript™ feels like a pipe dream. Until now. Thanks to modern bundlers, ES6 module magic and the brand new import() proposal, JavaScript finally has an idiomatic way of delivering parts of your web app when it's needed. This…

React Native brought the web’s enviable development patterns like hot module replacement and Redux action replay to mobile, without needing to sacrifice native UI. In this talk, we will take the idea further to explore some more interesting developer workflows. Starting by looking at the internals of React Native debugging, we will take advantage of Node's b…

React-Storybook provides a complete isolated environment with hot reloading that let you design and develop iteratively your UI React components. On top of that, by building your components this way you will ensure almost for free the creation of a nice living documentation and you will have a perfect entry point when we'll became the time to experiment thin…

Extensible React is a deep narrow slice through the world of extensibility and how to build pluggable web applications in React. This talk answers questions like: What is extensibility? Why would you want to build it? And what new problems do you encounter when trying to build an extensible front-end.

Last year I won the diversity scholarship and this year I’m going to talk about how we can grow this community outside of our peers. I’m going to talk about the importance of diversity within the tech culture and how doing that has brought React to be as awesome as it is. Also steps we can do to improve contributing, ideas of how we can collaborate, and how …

All editors format code slightly differently and don't even help with more complex situations like deeply indented syntax, which forces you to manually break it up across lines. This becomes a point of strife within teams, and we waste so much time trying to enforce a consistent coding style. I will show how a new JavaScript formatter, Prettier, takes a diff…

Delivering your React app offline, with a look and feel of a native app, is becoming increasingly feasible. Technical benefits include fast installs (since it's just a web page), push notifications, caching page content, delivering a faster feeling experience, and keeping the user logged even when the network drops a connection. By using JS plugins and libra…

Web Apps and Native Apps are going through a convergence on mobile. Technologies such as Progressive Web Apps and React Native are blurring the lines between the web and native. At Flipkart, we are building platforms and products at scale, designed around this convergence by utilizing the best of both worlds. In this talk I'll go over the architectural desig…

React Router is a full-featured routing layer for React applications that run in the browser, on the server, on React Native, and anywhere else React runs. This talk will highlight the capabilities of the first truly universal JavaScript router, enabling developers to learn a single URL-based API for routing and then apply those same principles for adding ne…

What is a piece of code? What is a library, a tool, a platform and a language? Based on my last talk on the spectrum of abstraction, this talk explores the daily concerns and the meta-concerns of writing code, and how our new effort, Reason, relates to them.