React Week '19
Conference
Friday, July 19th

Featuring lectures by internationally renowned speakers & networking opportunities with hundreds of attendees from around the world.

Wednesday, 17th
Master Classes
Party
Thursday, 18th
Workshops
Saturday, 20st
Hackathon

Internationally renowned speakers will present topics in advanced React, React Native, Redux, MobX, and everything about the ecosystem. Our attendees are seasoned web and mobile developers, software engineers, tech leaders and a wide range of other people in the front-end industry.

Schedule

08:15 AM
Check In & Light Breakfast
Track A
Track B
09:30 AM
Opening Words
09:45 AM
Karan Thakkar
Code Splitting with React Native
Meltem Kilic
Automating component variation rendering using the Cartesian component
10:20 AM
Anna Doubková
Practical Performance in React (Native)
Rajat Kumar
Conditional Modules & Dynamic Bundling, A Netflix Original
10:55 AM
Break
11:15 AM
Kasia Jastrzebska
CSS. Under the Hood
Dustin Myers
Solving Real-Life Problems with React Suspense
11:50 AM
Nir Kaufman
Refactoring React Apps
Aucher Serr
A Case Study in Animating Data Visualization Transitions
12:25 PM
Lunch Break
01:30 PM
Erin Depew
Building a React application with smart contracts
Chen Feldman
React Native - Under The Bridge
02:05 PM
Drew Wyatt
Hooked on Context: Managing External State
Elizabteh Funk, Steve Dalonzo and Suyash Chopra
Introduction to React Testing Library
02:40 PM
Break
03:05 PM
Naomi Meyer
Building React Apps with Internationalization (i18n) in Mind
Stephen Kalmakis
Rendering React to Real Paper
03:40 PM
Daniel Zen
GraphQL for React
Kaleb McKelve
Developer Productivity
04:15 PM
React Quiz
04:45 PM
Closing words

Speakers

Karan Thakkar

Karan Thakkar

Code Splitting with React Native

The idea behind this talk is to go through the existing landscape of bundling techniques for React Native, followed by a detailed introduction to an alternative idea of code splitting that I have worked on.

General Outline:

- Introduction

 - Who am I

 - What do I do

 - Overview of the talk

- Current techniques

 - Short intro of Regular and RAM bundles and how they are loaded

 - Differences between each in terms of underlying implementation, performance, startup time, etc.

- Code Splitting

 - Comparison to traditional bundling techniques

 - Explanation of all the different parts needed to make this work:

  - Metro support

  - Native Modules for bridging

  - RCTCxxBridge for lazy JS injection

 - Live/Recorded Demo

- Conclusion

 - Advantages

 - Drawbacks

 - Future

Meltem Kilic

Meltem Kilic

Automating component variation rendering using the Cartesian component

When you're building a component library or a design system, you'd want to visualize how the growing number of components look in their different states and variations. One way to achieve this would be writing every possible variation of the component by hand. This is a manual process, harder to maintain and means a lot of lines of code. What do we all have in common as developers? We hate all those 3 things. In this talk, you'll find out how you can automate your component variation rendering process and improve your workflow by applying the Cartesian Component concept. The code will be presented in React but the concept is applicable to the components written in other frameworks as well

Anna Doubková

Anna Doubková

Practical Performance in React (Native)

There are quite a few theoretical concepts of writing good a React application, including popular functional programming approaches. However, few take into consideration the impacts these will have on performance of the application. In this talk you’ll find out how some commonly used patterns have an adverse effect on the speed of your app, and how to avoid using them. We’ll mainly explore UI and state management but we’ll also dive into some native-specific issues and look at how to prevent them.

Rajat Kumar

Rajat Kumar

Conditional Modules & Dynamic Bundling, A Netflix Original

Netflix runs hundreds of A/B tests a year and we have seen exponential growth in variations of user experiences we serve to our Netflix users. Pre-publishing these millions of variations of the UI bundles to allow for these unique experiences, was not possible at Netflix’s scale. So what did we do? We built our own `Conditional Module Bundler`. Take a look at how Netflix uses `conditional dependency graph` and `runtime dynamic bundling` to generate unique UI bundles and the challenges involved in building such a system. Learn about how we hacked Webpack for our needs, leveraged Abstract Syntax Tree (AST) to identify conditional dependencies in our dependency graph and glued them all together to build a highly scalable, server side JS and CSS bundler, that serves these unique user experiences to millions of Netflix customers across the globe.

Kasia Jastrzebska

Kasia Jastrzebska

CSS. Under the Hood

Let's see together, how different ways of adding CSS to your app will impact browser performance and by that, let's dig deeper, explore DOM and CSSOM building processes. In the end, we will figure out if there is any difference, and if is, which way is the fastest one.

Dustin Myers

Dustin Myers

Solving Real-Life Problems with React Suspense

As your user base grows, so do your ever-mounting UI needs/issues. One area that we try to provide a good experience to our users is in loading states. This gets very complicated very quickly, but React Suspense is here to save the day! In my talk, you will learn how React Suspense delays the rendering of a component if that component is fetching data, or even loading images! You will also get a glimpse of the under-the-hood magic of react-cache - the engine that allows Suspense to do this. We will build react-cache from scratch, and walk through each piece that makes React Suspense work. And it will only take 7 lines of code! We will then take things one step further. With the knowledge we gain about Suspense and react-cache, we will implement react-cache again to delay rendering until all of our images have finished loading. With React Suspense for data fetching, you will be able to provide a better experience for all of your users. No more spending a lot of time coming up with custom solutions for loading states in your software. React Suspense and react-cache give us everything we need to handle every situation with ease!

Nir Kaufman

Nir Kaufman

Refactoring React Apps

Your coding habits define you both as a developer and as a human being. By applying refactoring techniques and mental mode, you can improve the quality of your code base, and your life. During this session, we will learn about the connection between your code and your personality through a series of use cases. The change is just a keystroke away.

Aucher Serr

Aucher Serr

A Case Study in Animating Data Visualization Transitions

This talk will be an exploration into the tricky, sticky, jittery world of animations within a React ecosystem. At Two-N, we spend our time developing ways to make data-driven graphics more intuitive and engaging. One of our strategies for doing this is by thinking (a lot) about how our visualizations behave as they transition between defined states. This talk will focus primarily on how we approach animating these elusive in-between regions. Specifically, this talk will be a deep dive into an animated transition we revisited recently for our elastic tooltip component. We will walk through our design considerations for creating a beautiful yet flexible reusable component, share our attempts (and failures) in implementing our desired behavior, and lay out how we ultimately learned to orchestrate updates within the React Lifecycle using a combination of CSS Transitions, RequestAnimationFrame and React Transition Groups. Aiming to bridge the gap between idealized transition designs and their successful implementation, this talk will highlight our stickiest challenges as well as how we ultimately solved for them. We will also reveal our best practices for creating seamless data-driven animations and share our most useful takeaways from the ‘in-between.’

Erin Depew

Erin Depew

Building a React application with smart contracts

Blockchain isn’t just for the cryptocurrencies and get rich quick schemes your coworker won’t stop talking about. It’s also a genuinely useful database for web applications when paired with smart contracts. We will cover the next generation of blockchains, smart contracts, formal verification, and governance. We will also discuss the benefits they provide web engineers looking to build scalable and secure web applications by demonstrating how you can use React and Pact to build a simple crowdfunding app.

React Native - Under The Bridge

In this talk, I am going to reveal that there is no magic in React Native. There is a real smart mechanism that lets the JS code communicate with the Native code (and vice-versa). A major part of this mechanism is The Bridge which is written in C++ (wait..what??) and mapping between all your app modules and even lets you create custom ones of your own! If you are a curious React developer who believes that knowing the internals of a library makes you a better developer, join me to the journey Under The Bridge.

Drew Wyatt

Drew Wyatt

Hooked on Context: Managing External State

Imperative SDKs can be annoying to deal with in React (a self-proclaimed declarative library). While it’s never been inherently *difficult* to wrap an SDK inside of a ComponentClass, it’s easy to tightly couple things, or put make a class responsible for more than is healthy. Testing can also be a pain. Hooks and Context provide a means to isolate concerns into small, testable pieces that are loosely coupled. This talk focuses on breaking a class into smaller pieces, creating a custom hook, and highlighting the behavior of useContext, useReducer, useCallback, and useEffect.

Elizabeth Funk

Elizabeth Funk

Introduction to React Testing Library

What is React Testing Library? Why should you use it? What problems does it solve? This introduction to React Testing Library (RTL) will cover the basics -- how to set it up and how to run basic tests -- and will cover the pros and cons of using RTL with Jest as a replacement for Enzyme.

Suyash Chopra

Suyash Chopra

Introduction to React Testing Library

What is React Testing Library? Why should you use it? What problems does it solve? This introduction to React Testing Library (RTL) will cover the basics -- how to set it up and how to run basic tests -- and will cover the pros and cons of using RTL with Jest as a replacement for Enzyme.

Steve Dalonzo

Steve Dalonzo

Introduction to React Testing Library

What is React Testing Library? Why should you use it? What problems does it solve? This introduction to React Testing Library (RTL) will cover the basics -- how to set it up and how to run basic tests -- and will cover the pros and cons of using RTL with Jest as a replacement for Enzyme.

Naomi Meyer

Naomi Meyer

Building React Apps with Internationalization (i18n) in Mind

At Adobe we build products for the world, this talk with provide a high level overview of internationalization (i18n), globalization (g11n), and localization (l11n) learnings. Why these are important and how to implement in design, UX, and within the codebase - using React examples and react npm module recommendations.

Stephen Kalmakis

Stephen Kalmakis

Rendering React to Real Paper

Much has been discussed about how React is revolutionizing web and native app development, but at Oscar, we're also using React to revolutionize something a bit more old school: paper. In this talk, we'll introduce you to Oscar's homegrown, lightweight React library for rendering paper documents and PDFs - why we built it, some of the unique challenges we needed to solve, and how it's helped our company save time, save money, and save the planet.

Kaleb McKelvey

Kaleb McKelvey

Developer Productivity

Senior developers mentor, lead, architect, and code all while staying on top of new tech trends, extinguishing production fires, and completing certifications. Sound like a tough time management task? it certainly is! That's where I come in - I'll show you how efficient developers use top apps, extensions, shortcuts, and workflows to continuously increase your productivity, and just as important, your career!

Daniel Zen

Daniel Zen

GraphQL for React

GraphQL is a strongly typed query language for your API to retrieve hierarchical data. It can help decouple your backend from your frontend and avoid the latency of multiple requests. By fetching all of the data you need in one request it can speed up your data-intensive application. Experience faster frontend development because you can request the data in the shape you need it and iterate faster without waiting for new backend endpoints. If you haven't considered GraphQL before, now is the time.

Venue: Pier 60

Pier Sixty at Chelsea Piers
Pier 60, Chelsea Piers
23rd Street and West Side Highway
New York, NY 10011

In addition to creative, world-class menus provided by renowned caterer Abigail Kirsch, Pier Sixty is the largest waterfront New York City event venues. It features picturesque water views, floor-to-ceiling windows, and a luxurious column-free space.

Supreme Sponsor
Five Hundred Tech

Boutique front-end consultancy and development shop, specializing primarily in React. Helping companies build interactive user interfaces.

Code of Conduct
Organized with love
by Five Hundred Tech
and the community
This website works best with Internet Explorer 5.5