Daniel O’Connor

Notes from React Rally 2019

I was recently at React Rally, a two-day conference about React in Salt Lake City. This post is a collection of the notes I took.

Since all the talks are on YouTube, I recommend using these notes to help discover which talks you’d like to watch. I’ve also included links to the slides and more notes, when available.


Table of contents


Notes

Chrome ❤️ React

By Nicole Sullivan - More notes

  • The Chrome team hired Nicole as a product manager to work with frameworks.
  • “We’re on the brink of a performance revolution” that is “led by frameworks” and “inspired by powerful, battle-tested internal tools and technology.”
  • Her team saw a ~16% improvement in median time to interactive (TTI) on sites that use frameworks (React, Vue, etc.) with a “meta-framework” (Next.js, Nuxt, Gatsby, etc.)
  • Chrome has an entire team contributing code to frameworks like React and Next.js. When they contribute to Next.js, they try to make the change in a way that others can also benefit. Instead of submitting a PR to Next.js, for example, they’d rather submit a PR to Webpack.
  • They’ve been collaborating with the React team on a main-thread scheduling API for JavaScript. The API shipped last week. This Scheduling in React article explains why this is helpful.
  • They recently merged a PR in Next.js that allows modern browsers to load a smaller JavaScript bundle, leading to a 21% reduction in bundle size.
  • An example of a PR they made to Next.js: https://github.com/zeit/next.js/pull/7961
  • Chrome has a $200,000 fund to support open-source projects that tackle performance on the web.

Frontend Application Bundles: the Docker of Frontend

By Glen Maddern - More notes

  • Glen has been working on fab.dev, a tool that seeks to do to front-end what Docker did to infrastructure.
  • He started the talk with a brief story of how the shipping container completely transformed commerce.
  • FAB (Frontend Application Bundle) bundles code from Create React App, Next.js, Gatsby, and other “meta-frameworks” into a format that can be deployed on AWS Lambda, Cloudflare Workers, Now, and other services.
  • Believes that the React team’s current work on server-side rendering improvements will greatly change performance in React applications. He recommended Andrew Clark’s talk at Zeit Day.
  • He prefers Next.js over Gatsby because you ship static and dynamic server-rendered pages pages. Gatsby is only static.
  • He is also very impressed by Clouldlare Workers, a platform that allows developers to build serverless applications that get deployed to Cloudflare’s data centers in 193 cities.

Off Balance — Interactive Storytelling with React

By Mihai Cernusca - Slides - More notes

  • Mihai is a storyteller on the web. He creates animation heavy interfaces such as America Off Balance.
  • His talk covered “shape generation, orchestration and dynamic interpolation strategies to bring a design to life.” He covered “performance considerations and lessons learned” through examples of the project he’s worked on.

Is React Translated Yet?

By Nat Alison - More notes

  • The Facebook team hired her to work on the translation of reactjs.org.
  • 80% of the world doesn’t speak English.
  • Some lessons she learned:

    • If you don’t make officially translated documentation, folks will make unofficial clones. While the enthusiasm is great, these docs will likely get stale and the translations may be inaccurate.
    • She started the project by focusing on three languages. This allowed her to find issues early and fix them before scaling to 45 languages.
    • She borrowed some ideas from the Vue translation efforts and created GitHub bots to automate much of the work.
    • Each language has a team of maintainers. She gave them as much ownership as possible to work as they find effective.
  • She created the website isreacttranslatedyet.com to encourage volunteers and share progress. The site celebrates all the work that has been done.

Saving the Web, 16ms at a Time

By Josh Comeau - Slides - More notes

Helping Governments And Nonprofits With Our Coding Superpower

By Joel Denning - More notes

  • In life, it’s easy to get caught up in getting attention and not enough in paying attention.
  • He decided to help non-profits. Sent a cold-email to Comunidades Unidas and is now building them a CRM to track their work.
  • He and his team have worked on a handful of other initiatives such as OpenMRS and Utah Expungements.
  • Gave tips on how to get involved in these types of projects. You don’t have to quit your job. It’s possible to start small and have a large impact.

Battle for the DOM: D3 vs React

By Danielle Carrick - Slides

  • Using D3 with React is not obvious because both want control over the DOM.
  • One way to make it work is to give D3 a div within React and allow it to use that for rendering. The other is to let React handle all the DOM and to use D3 only for the utility functions that it provides. The latter approach is much faster.
  • She talked about her work on her projects for Wired, Teen Vogue, and The New Yorker.

A11y And React, Why Is It Important?

By Johnny Bell - Slides - More notes

  • Johnny is a developer at StackShare and runs Devs With Disabilities. He was born without his left arm.
  • We’ve agreed as a society that the real world must be accessible. There are wheelchair ramps, handicapped bathrooms, priority seating, and much more. Why don’t we have standards in the digital world?
  • He went through two examples of filling out a form field. The first was without using a mouse. The second was with a screen-reader. Many times it’s not even possible to use the site.
  • If you want to audit the accessibility on your site, he recommends using Google’s Lighthouse tool and the ESLint plugin eslint-plugin-jsx-a11y.

Creating Awesome UX with Observables

By Feather Knee - Slides - More notes

  • Explained Observables at a high level, gave examples of uses cases, then dove into implementations.
  • RXJS is a “is a library for composing asynchronous and event-based programs by using observable sequences.” It’s “like Lodash for events.”
  • (I didn’t take good notes for this one. I recommend reading through @swyx’s more detailed notes instead.)

So You Think YOU’RE a Junior Dev?

By Revel Carlberg West

  • Revel is a 10 year old developer.
  • This was his second time speaking about React. The first was at React NYC when he was 9 years old.
  • He gave an impressive live demo of React Hooks.

Horrible Interfaces and How to Build Them

By Anthony Frehner - Examples

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

By Anjana Vakil - Slides - More notes

  • A lambda (λ) function is anonymous, pure, and little.
  • Anjana gives an overview of lambda calculus by writing functions in JavaScript. In the talk she creates functions that can count, add, and multiply. She also covers booleans, conditionals, and more.

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

By Sarah Lim - Slides - More notes

  • WebAssembly (Wasm) is a “binary instruction format for a stack-based virtual machine.” It compiles high-level languages (like C/C++/Rust) into code that can run on the web in a server or client.
  • Wasm matters because we need a performant runtime for the web.
  • Wasm modules provide both type safety and memory safety. They are sandboxed so that memory security issues are not a concern. There’s no way for one module to affect another.
  • The ”WebAssembly Explorer” lets you write C++ and see how it gets compiled into a .wat file. You can also assemble the file and see the output as Firefox x86 Assembly.
  • Wrote a neat tool to trace the execution of Wasm code.

Debugging the Debugger

By Princiya Sequeira - Slides

  • Grace Hopper coined the term debug. It is called “debug” because there was a literal bug in the computer.
  • Elizabeth Holberton invented the breakpoint.
  • In her talk, Princiya gives tips on how to effectively use the Firefox debugger. This includes setting a breakpoint, adding conditional logging, debug worker threads, working with sourcemaps, adding conditional breakpoints.
  • Princiya also shows how she debugs the debugger in Firefox. She is an active contributor to firefox-devtools/debugger.
  • Firefox will soon have ”Time Travel Debugging,” providing developers the ability to record the execution of a web page. Developers can then rewind the execution to assist with debugging.

Write Fewer Tests! From Automation to Autogeneration

By David Khourshid - Slides - More notes

  • As product requirements grow, the amount of code grows, and the amount of tests grow even more.
  • Outside the tech industry, tests are not written by the person that wrote the source.
  • (This talk is a follow-up to a talk called ”Infinitely Better UIs with Finite Automata” that David gave at the 2017 React Rally. If this one sounds interesting, I’d recommend watching that one first.)
  • David shows how we can use ”Model-based testing” in JavaScript. If we define our model upfront with state machines, we can easily autogenerate tests for our application.
  • This works for unit tests and E2E tests.
  • David recently launched @xstate/test, a tool that facilitates model-based testing. He gave a demo of it.

Harnessing React to Build Consistently Designed Applications

By Emily Plummer - Slides - More notes

  • Emily builds Primer, the design system at GitHub.
  • Her team has defined a set of principles that they follow when building components.
  • They use styled-system to build their components.
  • They enjoy working in the open on GitHub, Spectrum, and Twitter.
  • (I mostly listened to this one and didn’t take too many notes.)

React Hooks Pitfalls

By Kent C. Dodds - Slides and examples - More notes

  • (This talk is adapted from Kent’s “5 Tips to Help You Avoid React Hooks Pitfalls” blog post. I recommend reading it if this seems interesting.)
  • The five common React Hooks pitfalls:

    • Starting without a good foundation: Read the docs.
    • Not using (or ignoring) the ESLint plugin
    • Thinking in Lifecycles: Our previous experience with lifecycles can make it more difficult to grasp how hooks work.
    • Overthinking performance: “Know that React is fast by default and do some digging before applying performance optimizations pre-maturely”
    • Overthinking the testing of hooks: You may need to re-write tests that used Enzyme’s .state function. This refactor is a good thing because you should avoid testing implementation details.

Code is a User Interface

By Justin Falcone

  • Built Zebu, a JavaScript library for building little languages with tagged template literals.
  • (I didn’t take good notes for this one. Sorry!)

Follow the (full)stack trace: understand your app with distributed tracing

By Will Klein

  • How do we inspect what’s going on in our app when a request happens? We can look at console log’s, the network tab in DevTools, server logs, and much more.
  • Distributed tracing allows you to get a high-level view of performance across all your services. It’s mostly seen as a tool for backend engineers---not something that is used in the frontend. In his talk, WIll shows how you can use middleware to achieve a “(full)stack track” that connects the frontend and backend.

Weaving Tapestries of Code

By Jen Luker - Slides

  • Jen gives walks us through the history of the textile industry.

    • She shows how advancements in textile technology led to the birth of computing.
    • All of the advancements in the textile and computing industry were built on top of the work of others. “Just because your work is built on top of other people’s work doesn’t mean it’s amazing.”
  • Knitting is used as a tool to teach programming to folks that don’t have access to a computer.

Human React

By Brian Holt - Slides

  • We choose frameworks partly because of the community.
  • As developers, ensuring that our UIs are accessible is a good way to lend our privilege.
  • “When should you refactor your app to use Hooks? After you fix your accessibility!” It’s easy to forget our users and get caught up in the latest and greatest technologies.
  • Brian gives a plea to thoughtfully learn from others in other communities, welcome all into the React community, avoid tribalism, and lift each other up.
  • daniel@danoc.me
  • Twitter
  • GitHub
  • LinkedIn