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!

React Rally

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

Distinctive event

React Rally 2019

Aug 22 - Aug 23 | Utah, USA