Reactathon is where the world's leading front-end developers converge. The conference features an evening reception with Topic Tables and Lightning Talks, plus a full day of technical talks on all things React. 

Come hang out with and learn from some of the brightest minds and best speakers in the JS/React community, and join the workshops to dive even deeper on a specific subject.

Reactathon

React revolutionized the way we build modern user interfaces. But before it took off, it was built to solve a few key problems when building apps for the web. In this short talk, we'll learn what those problems were and how React approached solving them.

Reactathon 2018 Kickoff

As the Frontend Platform team at Eventbrite switched from Backbone/Marionette over to React, it had to convince other developers, managers, directors, and non-engineers that React was the right path. And the rationale for moving wasn’t just because React is insanely popular. There are many tangible benefits that make the effort of migrating worthwhile. 

New to React and want to learn a little about how it works? Seeking ammunition to convince your team to make the change? Come learn about why we made the decision to transition to React, through an introduction of how to build user interactions with React.

Why React?

JSX is an XML-like syntax extension to JavaScript, popularized by React. When seen for the first time it can often elicit bad memories of intermixing HTML and code, but JSX is *very* different! Let's learn exactly what it is, how it works, and even how you can use it outside of React.

Why I Love JSX!

There are often many ways to solve the same problem. This talk explores two different approaches, imperative and declarative. We will look at code samples and discuss the relative merits of each, starting with vanilla JS then moving to more concrete examples in JSX.

From Imperative to Declarative

React has no standard way to style components. A slew of ideas and frameworks have grown out of the community. But, with so many CSS in JS solutions, how do you know which one to choose? In this talk, I will cover five different ways to style your React projects, and the pros and cons of each approach. From CSS Modules with SASS to Styled Components, you’ll learn how each library works so that you know which one(s) best fits your needs.

CSS in React

React can make your D3 amazing. Want to animate 20,000 elements with React? I'll show you. Want to build a complex dataviz? You'll know how. Want to write maintainable dataviz components that you can reuse in any project? I gotchu, fam. 

This talk shows you everything I've learned about creating reusable and maintainable graphical components over 3 years of hammering away at the question: 'Jeez D3 sure is hard to learn, how do we make this easier?'

Data Visualizations with React + D3

Redux is the most widely-used state management library for React applications, and has spread throughout the Javascript ecosystem. However, the learning curve can be steep for many people. 

Come join Redux co-maintainer Mark Erikson as we talk about the core concepts of Redux, how to use Redux with React, and how Redux was designed to make Javascript applications predictable.

The Fundamentals of Redux

The promise of writing code for iOS and having it “just work” out of the box on Android is a tempting one. That along with hot reloading code and the ability to push over the air updates to published apps make React Native a tempting proposition. This sounds too good to be true so what’s the catch? 

React Native is a framework for building native apps using Javascript. Many native developers rightly associate hybrid Javascript apps with disappointing consumer experiences and frustrating development environments. Over the years the same promises have been made by many other Javascript based frameworks, so why is React Native any different? 

This talk will be from the perspective of an experienced iOS developer who has been working with React Native for the last 2 years and has shipped several cross platform apps with it.

An iOS Developer's Opinion of React Native

GraphQL is a declarative query language that is revolutionizing how we think about the data in our applications — it helps make accessing APIs from both the client and the server an absolute breeze. Come learn the basics of GraphQL and how you can use it today!

Intro to GraphQL

Building websites has changed dramatically over the last few years. In this session we’ll go on a history trip to discover where we came from, why React is a such a big deal, and where we might be going soon. We’ll discuss what a website is and why we use the tools we do to build them and how this is the best of all times to be building for the web.

The Client-Side Revolution, Brought to You by React

The 'Serverless Architecture' has become massively popular this year, and for the right reasons. It’s zero-administration nature and pay-per-execution pricing model enable developers to manage less infrastructure and build more than ever. So what are developers actually building with it? 

David will explore different use cases for building microservices with Serverless technology. The talk will include real world serverless examples from companies & the open source world.

Why Serverless Architecture is Changing Software Development

React & the JAMstack

It's been quite a year for React! In this short talk, we'll cover a few of the highlights -- following Brian's welcome to the conference.

Welcome to Reactathon

Design systems are an extremely efficient way to scale out a scalable frontend solution across multiple teams in a large (or growing) organization. Come and learn how to building an internal component library & design system can help your company ship and iterate faster. 

This talk will cover how David has built multiple design systems and will run through the protips and pitfalls learned along the way. TLDR; It’s easier than you think to create a scalable, maintainable UI library + Design system with React.

Building a self-documenting component library for your company

WebAssembly (aka wasm) is a new, standardized compilation target for the web, available in all modern browsers. But since it's so low level it can be difficult to see how it will revolutionize the future generations of React apps and potentially even power React itself. 

In this talk Jay will reveal what it is, how you can use it today, and the incredible opportunities it will continue to unlock.

React, Powered by WebAssembly

Many companies use React JS for their website and would like to reuse that code in their mobile apps. This talk will cover identifying the best candidates for shared code, sharing both UI components and UI-less business logic, and using React Native in both greenfield and brownfield apps.

Sharing Code between React and React Native

Using GraphQL APIs is by now the default for most React developers. But how does a GraphQL backend actually work? 

This talk gives an overview over modern backend development using GraphQL and the benefits of serverless deployment workflow.

The future of backend development: Serverless GraphQL

At freeCodeCamp, we've built a large Redux app with lots of moving parts. But building large scale Redux apps can get quite frustrating. 

In this talk we'll cover some rules to mitigate common issues seen in large apps, structural guidelines inspired by Clojure(Script) frameworks, and Redux theory of actions as events that help keep your large app transparent and manageable.

Vertical Redux Architecture

You may have heard of CSS in JS, but what alternatives are there for implementing interactive motions in JS? This talk will be a comparison of several approaches from using vanilla Javascript to libraries like Anime.js and Popmotion, as well as ones in React ecosystem like React Transition Group and React Motion.

Motion in JavaScript

Serverless-Side Rendering with AWS and Parcel.js

As web developers, we have incredible demands placed upon us. Expectations for the quality of websites are remarkably high, and continue to rise. Not only must websites be feature-rich and robust, they must load and run quickly on a near-infinite variety of devices and browsers all around the world. Oh, and do it with limited team members on an aggressive timeline. 

Come join Kyle Mathews, founder of Gatsby, as he talks about modern web performance. You'll learn the tools & techniques you can start using today to make your React sites super fast. We’ll discuss code splitting, "link preload", greedy prefetching, header optimizations, service workers, and more using Gatsby as a case study for these techniques.

Advanced Web Performance Optimizations

At Docker, we are using GraphQL alongside our existing REST APIs and making it work without a GraphQL server. Instead, we use GraphQL client side, where it serves as the interface to our network layer and the glue that binds our components together. We have taken this approach as a progressive solution to the difficult problem of introducing GraphQL to an existing application stack. By breaking the rules a bit we gain many of the benefits that GraphQL provides immediately while spreading out the implementation over many releases. 

While a novel approach I also envision a future where running GraphQL on the client is not uncommon. With the advent of blockchain technology and the concept of “dapps” we must reconsider the role of the application that runs on the end user’s device. By running GraphQL on the client we can consume remote GraphQL services, interact directly with the blockchain, browser / native APIs, and more through GraphQL.

GraphQL Outside the Box

Learn how to leverage the front-end skills you already know to connect to a smart contract and deploy to the Ethereum blockchain. 

We'll cover a brief introduction to Solidity, the Ethereum smart contract programming language (similar to JavaScript), and discuss the tools you need create a smart contract on the Ethereum blockchain. We'll also learn how to use web-based blockchain intermediaries such as Metamask.

Connecting a React Front-end to an Ethereum Smart Contract

Day 2 Keynote

With all the great charting libraries out there, why would you want to roll your own charts from scratch? Sometimes you want more control, or your use case is so simple you can avoid bringing in an unneeded dependency, or maybe you just want to strip away the magic for a moment and learn how the browser's drawing APIs really work. 

We'll go over some examples of building charts with basic HTML, SVG and Canvas.

Charts from Scratch in React

A review of how we created a GraphQL backend backed by Postgres. The key challenges faced by real-world apps and our solution approach, specifically around expressive query arguments, access control, schema iteration, sharing auth between multiple API backends. 

We will also review some quick tips to make the most out of Postgres and reveal some early performance benchmarks. We will end with a demo how you can create complex data models and make intuitive graphql queries from your app without requiring in-depth knowledge of graphql schemas.

A Postgres-backed GraphQL BAAS

Types can be invaluable when working on a large project, by making refactoring less error-prone, enabling better coordinating between teammates, and improving readability. Reason gives you a powerful, battle-tested type system with cross-file inference, macros, and excellent JavaScript interop. 

Come learn what differentiates it from added-on type systems like Flow and TypeScript, what it looks like to build React UIs in Reason, and what makes it easy to start into and integrate with your current JavaScript app.

Type-safe React with ReasonML

Creating a React application for orphans in Ghana offered some unique challenges. Progressive Web Apps (PWAs) are more than just “cool” or “hip” — they can be really important for applications where the internet is spotty, if available at all. 

Learn why I chose React + AWS Lambda for a country with poor internet connectivity, and general lessons on the often messy and exciting world of creating offline applications.

React off the Grid!

Jest is a testing framework that has a big emphasize on development experience. We will talk about how Jest can become a platform and how you can leverage it to enhance your existing tooling. Putting your tool on top of Jest, allows you to benefit from its infrastructure, which provides a watch mode, Git integration, etc.

Jest as a Platform

GraphQL is quickly becoming mainstream as one of the best ways to get data into your React application. When we see people modernize their app architecture and move to React, they often want to migrate their API to GraphQL as part of the same effort. But while React is super easy to adopt in a small part of your app at a time, GraphQL can seem like a much larger investment. 

In this talk, we’ll go over the fastest and most effective ways for React developers to incrementally migrate their existing APIs and backends to GraphQL, then talk about opportunities for improvement in the space. If you’re using React and are interested in GraphQL, but are looking for an extra push to get it up and running at your company, this is the talk for you!

Incremental Migration to GraphQL

There is more to hiring great engineers than just looking at their skillset. In this talk, we'll explore some strategies for hiring great engineers by hiring great people.

How to Hire Great Developers

React is most often associated with Single Page Applications, but tools like Gatsby, React Static, Phenomic and Cuttlebelle has made React hyper-relevant for content driven websites as well. Netlify CMS is an open-source project with the goal of building a content management UI in React. It works with any static site generator, and makes content editors participate in the modern git-centric workflow that developers are used to. 

This talk will show how to use Netlify CMS with a Gatsby-based site, to build high-performant and infinitely-scalable sites with git-based content editing, a user friendly UI, and live browser previews - all without a backend.

React-Based Content Management with Netlify CMS & Gatsby

Join senior front-end engineers Ryan Burgess, Jem Young, Stacy London, and Derrick Showers as they close out Reactathon 2018 with a live recording of the Front-End Happy Hour Podcast!

A podcast featuring panelists of engineers from Netflix, Evernote, Atlassian & LinkedIn talking over drinks about all things Front End development.

Front End Happy Hour Closing Panel

Accessibility in React has been a hot topic in the last few years, but in this talk, we'll be going beyond the basics. We'll explore a data-driven perspective to convince the business to invest in accessibility, then dive into the details of accessibility testing. 

We'll use lighthouse to audit applications, educate ourselves with the axe browser extensions, incorporate eslint-plugin-jsx-a11y into our lint process, and add axe-core to our automated testing suite. You'll leave prepared to add accessibility features to your application.

Accessibility: Beyond the Basics

We are all talented designers and engineers that strive to create the best user experience. Unfortunately, we don’t always know what the best user experience is until a new feature is in production and used by our customers. That’s where the power of A/B testing comes into play! At Netflix, we are constantly running A/B tests to improve our user experience. 

Find out how to handle A/B testing at scale, what it takes to build the optimal test, and how to start implementing A/B tests within your company.

Testing into a Better User Experience

Building an extensible web IDE in React presents a unique set of challenges around sandboxing and API design. In this talk, we’ll explore the unique challenges we faced, lessons learned, and takeaways that can be applied to the challenge of building any large React application.

Repl.it plugins in React & Redux

Have you ever wondered why good performance around animated transitions on views is so hard to achieve in web projects? Animations and performance are one of the top point of discussion when comparing web application to their native counterparts. 

I’m going to share my learnings on how to safely kick off route based animations, performance tricks and modern workflows to build reliable transitions for web applications.

A sleek view transition recipe for web apps

One frustrating thing for many people coming to functional programming is the clunkiness of updating a single field in an object. Shades.js provides lens functions for native JS objects, and provides a rich library of utility functions that make transforming and updating data declarative. Time permitting, we can discuss how these patterns can fit into a Redux architecture.

Functional Lenses In JavaScript with Shades

Sometimes, undefined is not a function. As mortal programmers, we ship bugs to production everyday. Bugs slow us down, frustrate our users, and cause us to have crises of confidence. Don't go alone–type systems in TypeScript, Flow, and GraphQL can improve your confidence and help you ship less bugs. 

We'll start with why: a practical look at what you'll get from embracing types. Then, a gentle introduction to the ideas behind them. Finally, we'll explore the possibilities of a type system over the network.

Swipe Left, Uncaught TypeError: Learning to Love Type Systems

Learn how to make Webpack + Babel work for your users: smaller bundles, faster parse times, browser-engine opts and de-opts, and faster perceived load times.

Your app is bigger and slower than it needs to be. Without rewriting app code we can squeeze more performance out of your code by tweaking Webpack and Babel. These tools are immensely powerful but it’s a delicate dance to get them to play nice. 

This talk is full of tips and tricks to get you there. After three years of tooling around with Webpack and Babel at Netflix, LinkedIn, and Reddit Brian got some battle-won knowledge that he’d like to share with you all. Some non-intuitive tricks that lead to smaller bundles, faster parse times, browser-engine opts and de-opts, and faster perceived load times. 

While these examples will use react to make examples this apply to any application that uses these two phenomenal tools. You’ll be surprised at what you can do just turning a few knobs.

10k or Bust: The Delicate Power of Webpack and Babel

Optimizing Performance with Code Splitting

Three components: that’s all you need to know to start building React applications with GraphQL. In this talk, we'll take a closer look at how to incorporate Apollo's Query, Mutation, and Subscription components to handle all of your React app's data fetching needs. And with that, you'll be hooked on GraphQL.

Eve Porcello - GraphQL in 3 Components

Half of NPM users started using it within the last 2 years. NPM's co-founder talks about speed, security, yarn and how to make the most of NPM as a React developer.

Fifty percent of npm users started using it less than a year ago, so if you’re only scratching the surface of npm’s features, you’re not alone. Laurie Voss gives a guided tour of npm’s greatest features, old and new, and explains how they can be integrated into your workflow to make you better, happier, and more productive.

Things you didn't know about npm

React and similar libraries are tools that solved specific problems to address the limitations of vanilla JavaScript and the web browsers where it runs. But are they still needed today? In this talk, we will explore how far vanilla JS has come, what it can and should be used for, and where its limitations may require a library such as React.