React Boston is a two-day, single-track conference on React hosted in Boston's Back Bay neighborhood and organized in collaboration with Wayfair Engineering and the ReactJS Boston Meetup. 

We're excited to welcome developers of all backgrounds, skill sets, experience levels to join us for a weekend of high-quality content and great conversations with others in the developer community.

React Boston

Comprehensive talk on design systems. Learn what they are and what it takes to build one.

Design systems are in the world around us, from street signs to the layouts of grocery stores, and our products are no exception. In this talk we'll delve into the world of Design Systems and learn what they are and what it takes to build one.

Foundations of Design Systems

Excellent introduction to Hooks, for beginners.

Hooks offer a simple, concise way to write stateful React components without classes.

In this talk you'll learn about the "magic" behind how Hooks work and get to see a few examples of them in action. We'll cover the big four: useState, useEffect, useReducer, and useContext, plus how to write your very own custom hooks.

You may never want to write a class again.

A Guided Tour of React Hooks

We often build component libraries to improve consistency, collaboration, and customization for a given product. But what if a component library could also scale accessibility across the entire organization? 

Building accessible components can help distribute responsibility across all of design and engineering, without needing everyone to be an expert on the nitty-gritty details. 

In this session, we'll go through specific component examples and use cases to help you and your team contribute to a better, more inclusive web.

Accessibility in the Age of Components

If you had to rewrite your tests when writing a hook in your React application, then you’re writing tests wrong.

react-testing-library is what it sounds like, but more importantly, it encourages writing tests in the way that your end users will be using your components.

In this talk, I will first introduce react-testing-library, what it is, what it encourages, and what it does best. I’ll then dive into how to effectively test a react component, first a smaller component, then a "larger" component with redux, i18n dependencies, etc., then I will show all of the different APIs that react-testing-library provides, and how to effectively use them. Then, I’ll show how to write effective tests across an entire application (writing reusable, effective tests that are not brittle).

Using React Testing Library to Write Stronger Tests

Developers spend more time reading existing code than writing new code. Navigating codebases is especially important when joining new projects, or when investigating external libraries. Unfortunately, getting a full understanding of a system can be a slow process, especially in large codebases. Incomplete or inaccurate mental models contribute to bugs and slow development. Handmade architecture diagrams can help, but it is easy for these to drift out of sync from the code they originally described.

Automatically generated visualizations can help to untangle this complexity, but they aren't mainstream (yet). This talk will share a few existing tools and techniques for visualizing relationships in source code developed for other languages, such as Smalltalk and Java. We’ll examine how these "old" techniques could benefit modern Javascript/Typescript codebases. Next, we'll explore techniques currently available to React developers beyond the standard devtools, including automatic code annotation, state charts, annotated code maps, and network analysis tools to make sense of a file’s dependency tree. I'll close by sharing ideas for visual analysis from other fields that can be applied to understanding concepts in frontend code.

I've Fallen Into a Large Codebase and I Can't Get Up!

Have you ever wondered how real time score or weather information update happens? 
 
In this lightning talk, let us explore how integrating React or Express.js and a reactive Meteor framework based on Distributed Data Protocol (DDP) establishes real-time data communication using web sockets.
 
Data exchange between the two servers is facilitated by a MongoDB database. Simple smart home dashboard application will be demoed to illustrate this process.

Realtime App Development by Integrating Web Frameworks

At this point, most of us have been on at least one team that took agile seriously. You participated in all of the ceremonies, groomed your backlogs, and tracked your team’s velocity. It can often seem like scrum is the only way to build good software. However, there are companies who are successfully building great software without running two-week sprints. 

Recently, Ryan Singer from the Basecamp team released a book called “Shape Up: Stop Running in Circles and Ship Work that Matters” that explores an alternative to our common agile practices. In this talk, we will cover the main points in Shape Up — from shaping, to betting, to building. You will walk away with a high-level understanding of this successful alternative to agile, and will have everything you need to try it out in your own team.

Ditch the Backlog – Stop Sprinting and Start Shaping

Have you ever ran into flaky tests? How about tests which pass but should not have? This is a story about how we went about finding these dangerous tests in a suite of over 13,000 tests and what tooling we've built to prevent them from coming back. Hopefully our story and tooling can help you on your own team, big or small.

Jest in Strict Mode – Finding and Preventing Flaky Tests

React hooks have become widespread since their introduction, and React-Redux recently introduced a new hooks API as an alternative to the traditional `connect()` HOC. Many React developers have questions about how these approaches differ.  We'll look at some of the strengths, weaknesses, and tradeoffs for both hooks and HOCs in general, and what this means for React-Redux users specifically as they decide how to write their applications.

Hooks, HOCS, and Tradeoffs

People don’t leave companies, the saying goes, – they leave managers.

As a technology leader passionate about the people side of software development, I have always been captivated by the impacts of great and horrible bosses; on the individual, team, and organization.

Organizations will continue to face an increasingly difficult uphill battle as we try to recruit top technical talent. The unfortunate reality is that there simply are not enough qualified candidates for the increasing demand.

Therefore, there is a dire need to significantly change our approach to leadership if we want to continue building and retaining strong, empowered, motivated, and loyal teams.

Enter Developer First leadership.

Developer First leadership is the drive to focus on the growth and advancement of your team members before yourself.

This approach is centered around the idea that developers should not work for their leaders. Instead, their leaders must work for them!

Kate will demonstrate how developer-first leadership can translate directly to the daily lives of technical leaders.

Participants will leave with tactical methods to truly embrace the human side of software development and serve your teams as intentional, respectable, and inspiring leaders.

Developer First – A New Leadership Mindset

Laura shows how she got started with React Native, and the key differences between React and React Native.

From React to Native

Developers are usually familiar with the phrase, progressive web app (PWA), but aren't 100% sure of what it is. Most would be surprised to know that they are about 50% of the way there with most of their applications just through best practices. Once you have a checklist for creating PWAs, you'll be able to take any web application and apply it regardless of the framework you use.

React in particular makes it incredibly easy to create PWAs or to update your current React apps and make them PWAs. In this talk, we'll cover the 8 necessary attributes of a PWA, some of the advanced PWA attributes, and how to create/update React apps to make them PWAs. By the end of this talk, attendees should have a concrete understanding of what a PWA is and how to make one with React.

Why You Should Make All of Your React Apps PWAs and How

For eons, web developers have paved the path forward for innovation on the web platform. We’ve spawned countless design patterns, APIs, and libraries, all which fill some gap to help us write resilient modern web applications. These early experimentations have often found their way into our native web platform. 

In the age of JavaScript compilers, React is no exception, and it boldly leaps forward with creative and opinionated solutions on how we productively write performant UI code. 

In this talk, we’ll deconstruct the virtual DOM, synthetic events, JSX and all the other things that make React unique, helping you understand the cost of this controversial web platform delta.

Deconstructing React and The Web Platform Delta

Every product is building their design system. However, the challenge comes when you have to build a scalable design system. Recently at my work we have developed a design system in React for 30+ enterprise products. In this talk, I will address:

- Why we decided to have a DS

- How we brought all 30+ product requirements on one page

- How we developed the DS in React to make it scalable

- What our biggest challenges and learnings were

- How we kept 'reusability' of code, 'scaling' of code as well as 'adaption' of new technologies in mind while developing

This talk is suitable for every developer, product manager, and engineering manager who wants to start with DS or have their own DS too.

Your Guide to Making Scalable Design Systems

The subject explored in this talk is using gRPC-Web with React. gRPC was released by Google a few years back and since then there has been a lot of effort towards getting the industry to consider this as the glue for micro-services communication. It is built on HTTP/2, which provides us with a high-speed communication protocol. The data transferred is in a binary format and, hence, is lighter than JSON/XML payloads. This can make a big difference when latency is an issue. 

gRPC-Web provides a Javascript library that lets browser clients access a gRPC service. gRPC-Web clients connect to gRPC services via a special gateway proxy: the current version of the library uses Envoy by default, in which gRPC-Web support is built-in. React does not offer official support for gRPC-web yet but it is possible to integrate the two. 

The presentation talks about gRPC and its integration with React for utilizing the benefits that gRPC offers and circumventing the flaws of HTTP and REST.

React with gRPC

This talk is all about performance after the initial page load. Learn cool tips about animations, accordions, and more.

When we talk about performance, we generally focus on the initial load experience - the ephemeral period between entering a URL in the address bar and being able to see/interact with the page. That stuff's important, but there's more to this enchilada!

This talk focuses on animation performance. We'll dig into why accordions are almost always implemented wrong, dust off some long-forgotten tricks to run just about any animation at 60fps, and explore the bleeding-edge APIs that can help us in this mission.

Saving the Web 16 Milliseconds at a Time

Full-stack Type Safety with React, GraphQL, and TypeScript

The differences between Elm and React with Redux are often framed as a competition, but it doesn’t have to be that way. Coming to React as an experienced Elm developer, I’ll explore what the two share in order to help you better understand the design patterns behind both. I will talk about the problems that the Elm and Redux architectures solve.

I will then outline how Elm’s flow compares to Redux’s unidirectional data flow, and describe the pros and cons I’ve seen different teams I’ve been on encounter when using Elm or React. I will also show how similar reducers in Redux are to Elm update functions, by doing a side-by-side comparison of the same component, built in both React with Redux and in Elm.

Finally, handling synchronous events is built in to React, but there is no one way to handle side effects. I’ll give an overview of the main options for React - thunks, sagas, and observables - and will introduce the audience to redux-loop, which borrows from Elm’s commands. After this talk, you should have a better understanding of the choices behind the React-Redux and Elm architectures.

React and Elm Join Forces

Implementing a new design system on an existing application isn’t easy. Because updating an entire codebase in one go can be time consuming, we often like to think that we’ll update our codebase over time. But when development teams are very focused on building new features, it’s hard to remember to update old screens and pages. Codebases often end up with a mix of old and new design.

Wouldn’t it be nice if we could use ESLint  to remind us to update old code? In this lightning talk, I’ll talk about how to write ESLint rules to enforce your design system on your codebase. I’ll demonstrate how to write rules to:

- Prevent using colors outside of your design system palette
- Prevent using raw text and button components in favor of your design system components
- Enforce that components in special directories (like pages or screens) follow the same UI patterns.

This talk will be in the context of a React Native project, but it’s applicable to any React application.

Enforcing Your Design System with ESLint

Some things can't be easily tested with unit tests and integration tests, and so far too frequently we rely on manual QA to verify visual changes to our applications. With a proliferation of device sizes and browser versions, spot checking changes in the browser is not possible at scale. 

In this talk, Craig Cavalier explores how visual ui testing can close the testing gap and restore confidence in our ability to make UI changes that work cross-browser.

Visual UI Testing – Testing the Last Mile

Everything you didn't know you wanted to know about internationalization. Design your app to be language, region, and culture independent.

When I started working at my company, all our translations sat in static JSON files. Manually adding new translations was tedious and error-prone, every language loaded on every page, and new translations rarely made it in the same release as their accompanying feature work. 

This talk will discuss how we transitioned to using react-i18next to localize our app, the problems we had along the way and how we solved them, and tips for designing applications to minimize future localization problems.

Sacré Bleu! The Trials of Internationalising Your ẨṔṔŁîÇåŤḯṏÑ�

CSS is a great language and has improved a lot in the past decade but it still has the same global nature as in its early days. CSS was designed to style documents, and that often causes issues in large scale applications. Naming conventions, like BEM, CSS Modules and later CSS in JS significantly improved the maintainability of styles, but we can go one step further. Using components to create responsive Flexbox and Grid layouts can simplify code, improve developer experience and it feels natural in React.

In this talk we’ll explore how to create any kind of page layout with just three generic components: Box, Flex and Stack.

Say Hello to Box, Flex and Stack: Layouts in the Component Era

Information-rich talk on color science, with practical examples on how to design a dark mode.

With iOS 13 and Chrome 76, a majority of people on the web will have the option to switch their browsers to 'dark mode' for the benefit of both the visually impaired and code vampires like me. While transitioning applications to have alternate color modes won't be easy, there are a couple of techniques that developers and designers can use to make it as simple as possible.

In this session, we will introduce some concepts from color science like luminance, contrast, and chromaticity to help build better, more accessible patterns for color in our applications. We will then look at how to use these patterns in React to build out a sweet looking dark mode for an application.

This talk is for developers and designers of all skill levels who are thinking about how to build a dark mode for their application or just want to level-up their understanding of color. You will come away with practical patterns to help improve the design consistency and developer experience across light, dark, and every color mode in-between.

Distinctive event

React Boston 2019

Sep 21 - Sep 22 | Massachusetts, USA