Schedule (2019)
8:30-9:30AM
Breakfast
9:30-10:15AM
Deconstructing React and The Web Platform Delta
Amal Hussein - NPM
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.
10:15-10:45AM
Your Guide to Making Scalable Design Systems
Neha Sharma - HCL Software
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 design system in react for 30+ enterprise products. In this talk , I will address:
- Why we decided to have DS
- How we brought all 30+ products requirements on one page
- How we developed the DS in react to make it scalable
- What was our biggest challenges and learnings
- and 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, Engineering manager who wants to start with DS or have their own DS too.
10:45-11:15AM
React with gRPC
Disha Sule - Optimus Ride
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.
11:15-11:45AM
Break
11:45-12:15PM
Saving the Web 16 Milliseconds at a Time
Joshua Comeau - DigitalOcean
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.
12:15-1:30PM
Lunch
1:30-2:15PM
Full-stack Type Safety with React, GraphQL, and TypeScript
Robert Zhu - AWS
2:15-3:00PM
⚡ Lighting Talks ⚡
3:00-3:30PM
Visual UI Testing: Testing the Last Mile
Craig Cavalier - ezCater
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.
3:30-4:00PM
Sacré bleu! The trials and tribulaciones of internationalising your ẨṔṔŁîÇåŤḯṏÑ�
Robin Dykema - Taulia
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.
4:00-4:30PM
Say Hello to Box, Flex and Stack: Layouts in the Component Era
Artem Sapegin - Wayfair
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.
4:30-5:00PM
Building the Dark Mode of Your Dreams with Color Science
Ryan Struhl - Robin
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.
