React Rally is a community conference about React and topics interesting to React developers. We focus on a friendly, welcoming atmosphere, engaging talks from new and established speakers, and plenty of hallway-track time to chat with interesting people. Join us!

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.

How React literally waters my lawn

2015

Facebook's React has taken client side development by storm. From single-page apps, to server rendering, to native mobile, to apps on your TV, React is everywhere. Come hear from the best and the brightest in the React community about what makes it so incredible.

Building React From Scratch

‹Rethinker stop={false}/›

Your guide to philanthropy through software

React and Give Back

What is RxJS? What are observables? How does RxJS compare to Redux? Have these questions answered and find out why Netflix loves reactive programming with Rx so much. You'll learn the basics of RxJS 5 observables and how they're used. We'll explore how Netflix uses RxJS 5, Redux and React together, by example.

Async Redux Actions With RxJS

Where in the Stack is Carmen Sanfrancisco?

The biggest sources of code complexity are state & control flow. Loops, conditionals, try/catch blocks, callbacks, & mutable variable assignment is one way to ensure such complexity. 

By contrast, if we have a composable set of pieces that plug together, we can “dot chain” a single expression for which our data flows through. We’ll examine techniques from functional programming, borrow some moves from OO, and write blocks of dead-simple to understand code.

Oh Composable World!

React is fast, really fast, thanks to its virtual DOM. However, React does perform a lot of expensive computations on the main UI thread.

The only semblance of a separate thread is a web worker - a feature from the HTML5 hype-era; often used to perform artificial image manipulations in fancy demos.

In this talk, we will look at ways create a web worker based renderer for React, and analytically compare its performance to a normal react operation. We will also explore the limitations of this approach and see how we can use this in our existing applications.

Rise of the Web Workers

Animating in React

We don't have a whole lot of data structures here in JavaScript world, but there's a whole world of super useful data structures out there. In this talk we're going to learn all about the fundamental data structures. 

Hash Tables, Arrays, Stacks, Queues, Linked Lists, and Binary Search Trees, we won't just learn them, we're going to build them. When we're done you'll be impressing all your friends with your mad structured data skills.

From Zero to Binary Search Tree

React is the hotness when it comes to efficient and reactive UI in the browser. RethinkDB is the hotness when it comes to pushing live data. Lastly, Raspberry Pi is the smallest and cheapest computing device for doing awesome IoT things. 

So what happens when we combine all three? A motion detection-activated security camera with an automagically updating UI! The RRR combo gives us a great way to put together a homebrewed hardware ideas with minimum code. 

React is an efficient interface for IoT projects and even more so when the feed is a RethinkDB changefeed.

RRR matey! - React, RethinkDB, and Raspberry Pi

Benchling builds tools that allow scientists to design large-scale DNA, embed rich spreadsheets, document captured imagery, and more. We use React heavily to build tools that work with complex data, and in doing so we've hit all sorts of limits in browser performance and compatibility (and filed a few browser bugs). We'll go over the kinds of challenges you face when your app gets large, and the tools we've built to address them.

Scaling React to Accelerate Life Science Research

You've heard of Elm and it sounds super cool, but you can't rewrite from scratch and you don't want to give up the innovation of the React community! What if you could get Elm's benefits one file at a time while still utilizing your existing or 3rd party React components? 

What if that alternative also supported hot reloading, component styling, and smart editor plugins? What if it was simultaneously a simpler and more powerful language, letting you easily drop into familiar JavaScript while also supporting crazy powerful abstraction and typing features?? 

Welcome to PureScript (& Pux)!

PureScript & Pux -- a safer, more expressive way to React

GraphQL's flexibility has made it an intriguing and necessary choice for frontend developers. These developers seem to understand the benefits of using GraphQL before their backend counterparts. Most concerns from backend developers are around the GraphQL structure and deployment. 

What if you could deploy GraphQL without the need to deploy and manage entire servers? In this talk we'll explore using GraphQL in a serverless context with AWS Lambda, using the Serverless framework. We'll look at the pros and cons of deploying GraphQL in such an architecture.

Deploying GraphQL in a Serverless Context

Reintroducing Relay

Come sit around the fire and listen to the tale of rebuilding the Firefox JavaScript Debugger with React and Redux. We’ll tell you the horrors, the glorious triumphs, and lessons learned while building a very complex UI with these technologies. Take a swig of our tales and wipe away the enduring fatigue as you see how this is all actually worth it.

You will also get a sneak peek into our ultra-secretive new JavaScript debugger frontend (it’s on github), and see what we think a modern debugger should be.

Debugging Your Debugger

Writing fresh code is always more fun than debugging that old stuff you wrote last week, but sometimes you just have to bite the bullet.

- Learn how to use the React Devtools effectively to fix bugs, fight crime, and bring home the bacon.
- Learn best-practices for writing maintainable React components.
- Hear about the tools we use at Khan Academy that assist us in our quest for the ultimate development experience.

Real World React Debugging

If you’ve ever written a mobile app, browser add-on, or Electron app with a web-based front-end, you’ve probably struggled with keeping your UI layer in communication with the rest of your app. How do you integrate message passing, propagate user interactions to the right part of the system, and keep data and state in sync?

I’ll show you some strategies we’re experimenting with in Firefox using React and Redux to keep our multi-process code more maintainable, reliable, and easy to work with.

Writing better multi-process hybrid apps with React and Redux

GraphQL is in everyone's mind right now - but often times people have a hard time actually setting up a server that can speak it easily, and adapts as your backend changes.

In this talk I'll introduce an easy approach how to automatically build GraphQL-based APIs on top of a PostgreSQL database, as well as work through an example of how we can use GraphQL in React effectively.

I will demonstrate this using a dashboard I've built based on these technologies, and explain details using code samples from that dashboard application.

Powering React-based Dashboards using GraphQL and PostgreSQL

Several months ago I found myself in an odd situation. Having never looked at a Javascript framework before, I was tasked with creating a production app for a client, in React, in six weeks. I was the only developer on the project.

This talk details the terrifying and varied mistakes that I made while developing this app, what I learned throughout it, and how this awful process sparked within me a curiosity and passion for Functional Reactive programming in Javascript.

All the terrible things I did the first time I made a complex React app

Have you ever dreamed of creating video games? Do you dream of developing worlds, characters, and stories instead? Did you choose the wrong path by becoming a web developer? Nonsense, my friend. React is not only great for UI - it’s great for making video games, too!

Let’s explore the nitty gritty details of programming a turn-based RPG in React. We’ll look at level creation, battle mechanics, and character intelligence. It’ll work in the browser on your desktop and your mobile phone. You may become empowered to make your own games, or bring any other non-traditional React project to life.

The Danger Crew: Lessons learned from building an RPG in React

Parashuram is speaking at React Rally 2016. We talk about performance, web workers, his life, and some interesting experiments in speeding up React.

Parashuram N interview

Ryan Florence is a speaker at React Rally 2016. Check out this interview for a sneak preview of what he will be talking about.

Ryan Florence Inteview

Interview with Ben Lesh, Netflix engineer and RxJS project  lead, about React Rally.

Ben Lesh interview

Interview with Drew Conley for React Rally.

Drew Conley interview

React Rally speaker interview with Brian Lonsdorf.

Brian Lonsdorf interview

Interview with React Rally 2016 speaker Marcy Sutton on accessibility, tooling vs frameworks, and Where In The Stack Is Carmen San Francisco.

Marcy Sutton interview

We interview Paul O'Shannessy about React, Facebook, and life in general.

Paul O'Shannessy interview

2016

Facebook's React has taken client side development by storm. From single-page apps, to server rendering, to native mobile, to apps on your TV, React is everywhere. Come hear from the best and the brightest in the React community about what makes it so incredible.

React Rally is a two day single track conference for developers of all backgrounds using Facebook's React.js, React Native, and related tools. Speakers will cover topics such as React Native, Flux, ES6, isomorphic universal JavaScript, and so much more. Whether you're a seasoned developer who has been using React since before it was cool, or a newcomer to the scene, React Rally has something for everyone!

Service workers can give us instant page loads and the ability to browse with little or no internet connection. This talk includes a Service Worker primer and steps for enabling offline browsing in a React app.

Redux + ServiceWorker = Offline React

Imagine that you’re locked-in, unable to communicate except by blinking a single functional eye. Your only method of communication is to watch (and listen) as a helper reads through a list of all the letters of the alphabet. When you want to select a letter, you blink. 

Can you imagine this? Can we do more than imagine it? On the modern web, we can! Using React and WebGazer.js (an open-source eye-tracking library for the web), we can approximate this communication technique, the method that Jean-Dominique Bauby used to compose his best-selling memoir The Diving Bell and the Butterfly.

React-ing htmlFor=empathy

Fiber was introduced in version 16 of React. It is a ground-up rewrite of the React scheduler, typically mis-referred to as the "Virtual DOM." The Fiber-based scheduler supports "cooperative scheduling" and allows for other output renderers besides the browser DOM. 

In this session geared towards those familiar with React, let’s learn about what React Fiber is and why it exists through the lens of how it will impact your React development and the performance of your apps at runtime.

Layperson's guide to React Fiber

D3 & React

React Native and PWAs like Twitter Lite are blurring the lines between web and native apps. PWAs now offer native-like capabilities via the web. And the React Native components and APIs are a great platform for React UI development. But what if you could create PWAs with React Native? Twitter Lite is an experiment in doing just that. Find out how React Native for Web is implemented and used in Twitter Lite.

Twitter Lite, React Native, and Progressive Web Apps

UNPKG: The CDN for everything on npm

You have two teams, making two apps. The first made something that demands very few updates and doesn't require specialized knowledge. But the codebase is huge. The second is a bespoke, Hacker News masterpiece. But it demands regular rewrites and requires constant re-education.

Which do you chose?

Maybe you already chose a path. Your fingers are bleeding from all the typing or you're in the middle of re-write #3.

How do you get off that path?

Let's talk about getting back to React, the overlooked APIs and uncommon patterns that make you a happier and healthier React developer.

Back to React: The Story of Two Apps

There’s a big push to improve React’s perceived performance. And WebAssembly is fast. Could WebAssembly be part of the solution? In this talk, code cartoonist Lin Clark will look at what WebAssembly could mean for React’s performance, and how the new Fiber architecture makes that even more of a possibility.

What WebAssembly means for React

Many React developers bump into bugs because of using setState() incorrectly. In fact, some dreadfully avoid setState(). In particular, its asynchronous nature and batching often confuse React developers. 

In this talk, I will explore common setState() misunderstandings and pitfalls, explain why exactly setState() needs to be asynchronous, how to use it correctly, the powerful patterns buried in setState(), and what it means for the future of React in Fiber.

Demystifying setState()

Convergent Evolution

I have an NFC implant in my hand and a household full of Internet of Things technologies. I'm building out a device that allows me to wave my hand over an RFID reader outside my home and set my entire house to my personal settings before I enter.

A hand wave of React for all your Internet of Thangs

In this talk, we’ll examine the details of a project that recognizes handwritten equations and generate the result in LaTeX format. Through the project, we’ll learn how to give the first steps into learning AI, through sharing my own experience we’ll review the challenges, excitement, suspense, frustration and hype around it. We’ll discuss some basic neural networks concepts that serve as starting point, how any of us, either beginner or seasoned developer, can get into AI and how can React help us in this journey.

ReacTex: using React Native and Neural Networks to recognize handwritten equations

2017

Data Visualizations

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

React Fiber was a full re-write of React that will enable new and exciting patterns around control flow, which we've seen previewed with React Suspense. But what is a fiber? How does it relate to a coroutine? What are algebraic effects, and why do I keep hearing about them? This talk will go over these computer science topics in the context of React Fiber, to help shed some light on how React Fiber is implemented and the control flow concepts behind the new APIs.

Algebraic effects, Fibers, Coroutines. Oh my!

Three components: that’s all you need to know to start building React applications with GraphQL. In this talk, I’ll walk you through brand new ways to get data with the Query Component. We’ll examine how to change data in ways that will explode your mind with the Mutation Component. And just when you think you can’t handle any more excitement, we’ll bring out the Subscription Component. That’s all you’ll need to know to get hooked on GraphQL.

Everything You Need to Know About GraphQL in 3 Components

Explorable explanations are dynamic, interactive, visual tools created to teach systems and concepts, the unlikely pairing of a video game and a data visualization. They’re an exciting new form of media that lets the learner develop an intuitive understanding of the subject.

In this talk, we’ll reconstruct an existing explorable explanation on waveforms and sound. We’ll start from the bottom up, using small, bite-sized components that encapsulate specific UI or behavioural concerns, working our way up to a dynamic, interactive, animated tool.

Explorable Explanations with React

The Code is rising up to enslave us. An army of linter-plugins have given it a voice and it's angry. Clean code isn't the goal, its the enemy. Great code isn't clean, it's hot garbage—hot-swappable and easy to throw out. Code is a means to an end. When we stop fetishizing code and start fighting it, we've found the right enemy and we can get back to to the good work of serving customers.

Hot Garbage: Clean Code is Dead

WebAssembly (aka wasm) is a new, standardized compilation target for the web, shipping in all modern browsers. But since it's so low level it can be difficult to see how it will revolutionize the next generation of web apps–and definitely not just games and C++!

In this talk I will reveal what it is, how you can use it today, and the incredible opportunities it will unlock in the years to come on both the Web and on Desktop. We'll also explore how React itself might some day use WebAssembly to power it's Virtual DOM.

Help me WebAssembly, you're my only hope!

Chaos Monkey, but for your web app. Come learn how intentional failure injection is not only good for the back end but also for the front end. Hint: it means you’ll get paged less at 3AM, and I think we’re all happy about that.

Chaos Monkeys in Your Browser  What Chaos Engineering Means For the Front End

My team is building a platform for AI in the cloud using React. The concept behind this project is to make AI accessible to anyone. "AI for you! AI for you too! And even you, over there, have some AI!" This talk will explore unique challenges of writing a complex React app in a totally new domain.

AI For Everybody

ReasonML is Serious Business

Budgets, Housing, and Hurricanes. What do all of these things have in common? Civic Hacking. These were local problems that were tackled by a village of coding warriors using React offerings to deploy quickly.

Reacting in a Crisis

Functional-reactive libraries like RxJS make it easy to understand how data changes, giving us tools to declaratively handle events and manage state. But while our render methods react to state changes, React isn’t reactive. Instead, we write imperative event-handlers, and trip up on gotchas like async setState and race conditions. Why? 

In this talk we build a Reactive React to show the difference between the "push" and "pull" paradigms of data flow and understand why React chooses to manage Scheduling as a core Design Principle, enabling awesome features like async rendering and Suspense!

Why React is  not  Reactive

In 1936 Sergei Prokofiev introduced his piece Peter and The Wolf, which broke down a complex system of sound and tied it to narrative elements: Peter as the playful Strings, the Wolf as powerful French Horns, etc.

I will apply a similar method to introduce, teach and identify each component life cycle method with a musical accompaniment. I will compose a musical theme for and introduce each one independently. 

Finally I will conduct a small chamber of orchestral musicians as they perform their themes along with an actual react component performing updates in real(ish) time!

The Life Cycle Methods And The Wolf - A Musicological Romp

We often use React and write JSX without thinking about the syntax. But what’s React actually doing under the hood? What’s the JavaScript look like? Let’s translate React into JavaScript, transpile that and see what we get. Let’s pick apart what React is really doing and get at the heart of it. 

We’ll talk about the importance and usefulness of knowing its baselines for beginners and experts alike. We'll gain a clearer understanding of where React’s magic originates. So the next time you use React or write JSX, you’ll be secretly translating in your head for deeper insight and edification.

Translating React

The “Something” Statements

Why do releases take so long, what challenges do we still face in open source, and why have I been feeling so anxious all the time? Here's some reflections on open source.

Through the Open Source Looking Glass

Don't you love how easy it is to encapsulate UI code into a React component? I do! Despite this, making those same components reusable can be a challenge. Our components often start simple, but then they have to adapt as unforeseen use cases come up. This often results in a growing list of props and complex implementation full of if statements and a confusing API. An inevitable rewrite of the component eventually hits and now we have two problems.

Let's take a step back and consider some things we can do upfront to keep our components flexible, simple, and optimized for inevitable change.

Simply React

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

React's new async rendering brings with it a whole new set of practices and possibilities. Many of these (if not most) are all about switching from one screen to another, which is exactly the job of a router. We're going to dive in to see what async rendering means for routing in React.

Route Recalculating

2018

React Rally is a community conference about React and topics interesting to React developers. We focus on a friendly, welcoming atmosphere, engaging talks from new and established speakers, and plenty of hallway-track time to chat with interesting people.

React Rally is a two day single track conference for developers of all backgrounds using React.js, React Native, and related tools. Speakers will cover topics like React Native, state management, hooks, isomorphic/universal JavaScript, and more. Whether you're a seasoned developer who has been using React since before it was cool, or a newcomer to the scene, React Rally has something for everyone!

Nicole from the Chrome team explains how they work with framework developers to create new tools and APIs in Chrome.

Chrome ❤️ ⚛️ (no, really)

Glen gives a fascinating talk on container technology and how that translates to the frontend.

Frontend apps are on the cusp of a revolution—React is about to launch a streaming server renderer that massively improves performance on both low-end and high-end devices. 

It's a new dawn for performance & accessibility, but raises another question. How should we host the server component? Can we do that without vendor lock-in?

Enter FABs, a portable, compact, immutable, server-side JS format that lets you deploy anything from static sites or Next.js to full custom server-rendered React apps anywhere that can run JS, like Cloudflare Workers, Lambda@Edge, Now, etc. Come check it out!

Frontend Application Bundles: The Docker of Frontend

This is an advanced talk about SVGs, shapes, animations and orchestration. It is also a talk about architecture, abstractions and building tools that open up new possibilities.

In this talk we’ll hold a technical retrospective of an animation heavy interactive experience built with React. Through this lens we’ll discuss shape generation, orchestration and dynamic interpolation strategies to bring a design to life. Along the way we’ll cover performance considerations and lessons learned.

Off Balance: Interactive Storytelling with React

From around the world, voices sounded out in a multitude of languages: is React Translated Yet? With the efforts of hundreds of contributors, I can finally say: ¡Sí! Sim! はい！

Over the course of a month, I helped the React team kick off translations of reactjs.org into 40 languages. Join me for a behind-the-scenes look at what it takes to get the docs for a massively popular library translated. We'll talk about GitHub rate limits, managing a global community, amateur bot-building and more!

Is React Translated Yet?

Creating rich animations that run at a buttery 60fps is a deceptively complex task. Yet, it's so important.

Creating rich animations that run at a buttery 60fps is a deceptively complex task. And yet, it's so important: mobile apps have rich, sophisticated animations, and the web is falling behind.

In this talk, we'll break down how to convert a janky animation into a smooth one. We'll unearth rarely-seen techniques, like using spritesheets with CSS, and discover bleeding-edge web APIs like OffscreenCanvas that unlock a world of possibilities.

Saving the Web, 16ms at a Time

"They're programmers, not coders."
"Our process is just too complicated to be automated."
"We'll get back to you in 8 months."
"We need to double our workforce to do the thing that the software is doing."

The world of writing software for governments and nonprofits is so different from the one we're used to. But with surprisingly small effort, we can make impact in our local community.

I'll talk through how four cold emails have given me the chance to make an impact in Utah's criminal justice system.

Helping Governments And Nonprofits With Our Coding Superpower

[Spoiler Alert: React wins] D3 is the most popular library for creating interactive data visualizations. React is one of the most popular frameworks for web development (duh, that’s why we’re here). But, anyone that has tried to use them together, has realized they don’t always play nice. 

In this talk, I will share how I learned this the hard way, as well as tips and case studies for building data visualizations in React, and when to give the power to D3.

Battle for the DOM: D3 vs. React

I have a disability (missing my left arm from the elbow down). I have encountered a lot of discrimination throughout my 10 year career. I’m now at a point mentally in my career that I’m ready to talk about my experiences.

As the web is becoming a place for everyone including people with disabilities, it’s important for everyone to start thinking about a11y.
A11y is often overlooked or seen as a ‘nice to have’. With 20-25% of the population having disabilities (https://www.w3.org/WAI/business-case/) a11y is getting more and more important to be seen as a must have and included in a MVP.

A11y And React, Why Is It Important?

Everyone is a power user of the web. We have no patience for a UX that doesn’t move as swiftly as our attention spans. We want maximum flexibility and instant feedback. We want to search without pressing a button, to be fickle, and to talk to our computers like the boss in IT Crowd (except there’s a response).

Observables FTW! First, an exploration of Observables at a high level, then a survey of use cases, followed by a dive into implementation details. Surprisingly, with libraries like RxJs we can implement Observable patterns in React with few lines of code.

Creating Awesome UX with Observables

Hi my name is Revel. I'm 10 years old and am a I junior developer. I love to code, especially using React Hooks. This talk will walk you through how I took an app that uses Hooks, and refactored it into its own general purpose custom hook that I published as OSS.

So You Think YOU'RE a Junior Dev?

With the purpose of learning some Javascript, CSS, and HTML, I built some really horrible volume-level interfaces inspired by this imgur gallery. Some of the topics we’ll cover: CSS transforms, HTML5 audio & mic, HTML5 Drag & Drop, and how to get users to hate us.

Horrible Interfaces and How to Build Them

You know that a tiny anonymous function, like a JS arrow function, can be useful when you’re feeling too lazy to think up a good name. But did you know that this humble little arrow can summon one of the most powerful & elegant abstractions in the history of computer science?

The lambda calculus lets us represent our programs - all their logic and data - with nothing but pure, anonymous functions. Numbers, booleans, logic, control flow, data structures… an arrow can do it all! 

In this session we'll live-code our way to a deeper understanding & admiration of the computational power of the lambda, an abstraction fundamental to functional programming.

The Universe in a Single Arrow: A Live Dive into the Lambda Calculus

Do you have a vague understanding of WebAssembly, but don't quite get it? Sarah, gently, unmasks the black box of WASM and shows its innerworkings.

According to the website, WebAssembly is "a binary instruction format for a stack-based virtual machine, designed as a compilation target for higher-level languages like C++ and Rust." 

One year ago, I knew what some of those words meant. Now I understand all of them, and my goal is to share this understanding with you, fellow JavaScript programmer. We'll deep-dive into the WASM linear memory model and execution semantics, and explore how to interact with WASM modules using the JavaScript API. 

If calling C++ a "high-level language" makes you feel slightly ill, you are the target audience member for this talk. The title, by the way, is a reference to A Brief, Incomplete, and Mostly Wrong History of Programming Languages by James Iry, which you should read immediately.

Links:
📊 Slides: http://sarahlim.com/react-rally-2019/
🧮  Fiddle: https://mbebenita.github.io/WasmExplorer/
🦀 Rust code: https://github.com/sarahlim/wasm-trace

All The Memory Safety Of C Combined With All The Blazing Speed Of JavaScript

This talk is an inception of debugging the Firefox devtools' debugger which is built using React and Redux. All of us love to 'console' log our code, but there are other effective techniques that will help accelerate the debug loop cycle. 

In this talk I will present the various available browser devtools debugging techniques using practical examples from the community to debug the development of the debugger project!

Debugging the Debugger

What if you could automatically generate hundreds of integration and end-to-end tests, instead of manually coding them? Discover how model-based testing greatly improves the maintenance and coverage of your entire React app, uncovers elusive edge-cases, and stay in sync with ever-changing requirements. 

In this talk, you'll learn how abstract modeling with state machines saves tons of time in both developing and testing your existing apps.

Write Fewer Tests! From Automation to Autogeneration

This talk will cover the who, what & why of design systems as well as our approach building a React component library to accompany GitHub's design system, Primer. 

Attendees will walk away with a deeper knowledge of how to design a public API for components, how theming works, and common pitfalls one might come across when trying to scale a design system across an organization.

Harnessing React to Build Consistently Designed Applications

The hooks honeymoon phase is over. We were able to overlook our confusion as a reasonable familiarity issue, but now it’s time to get real about the pitfalls of React Hooks. 

Hooks lead to a better user experience and fewer bugs for sure, but without the right foundational understanding of them and certain JavaScript semantics, we’ll probably cause other problems in the process of using hooks.

In this talk, we’ll explore some of the gotchas of using hooks, why those things are problems, and how to think about hooks so we develop an intuition for how to use hooks while avoiding the pitfalls.

React Hook Pitfalls

What if we could write code that was much more understandable, and eliminated entire classes of bugs at the same time? As front end developers, we understand the value of well-designed user interfaces. 

But our code is also a user interface, with our fellow programmers as the users, and we can improve the understandability and maintainability of our code by applying UI design principles.

Code is a User Interface

What if we could follow a user request, from a page load in the browser, to our backend, through our services, to the database, and back? What does it look like to see how our UI receives data and renders across a timeline? What happens when we put these traces together?!

In this talk, we will learn the basics of distributed tracing, how to instrument a React and Redux app effectively, and ultimately, understand everything that happens when someone uses your app!

Follow The (Full)stack Trace: Understand Your App with Distributed Tracing

Jen takes us on a ‪fascinating‬ journey though computer science's history and pre-history. Learn how weaving helped kick-start the computing revolution.

Yarns, fibers, and fabrics. You have more in common with the weavers of yesteryear than you realize. In this expedition into the past of fiber arts, we'll explore how our coding art is the continuation of our ancestors at the loom, how you can learn lessons from their patterns, and maybe a thing or two about that nice sweater you're wearing.

Weaving Tapestries of Code

React is a great tool. But what really matters are the people that use our apps and the ways we can enrich their lives. React is also a large community that we need to fight to keep it welcoming, diverse, and inclusive.

Hooks. Sagas. Synergy. Buzzword. Trend. Fad.

We love to be in the now. We all want to thought leader on the Twitters. However we’re building apps for humans, not bringing humans to our code. Your neighbor doesn’t care of your TypeScript generics nor your observable operators. They care if your app works, is responsive to input, and is intuitively designed.

We will build a monument to engineering folly, a tower of 6to5. We’ll explore engineering excellence that leads to UX failures. You’ll see that you must first remember the human and then shape your implementation to them, the users.

Slides: https://speakerdeck.com/btholt/human-react