Design Systems for React Developers#Andrey Okonetchnikov and Artem Sapegin
Development of digital products is a complex process that involves multiple stakeholders and roles: managers, designers, engineers, QA, and customers. This increases the communication overhead, slows down the process, and oftentimes results and less than ideal user experience.
- How to communicate design ideas between different stakeholders effectively?
- How to deliver consistent UI without constant supervising?
- How to ensure same problems not being solved multiple times?
Design systems offer a systematic approach to the process of product creation. This approach establishes an organization-wide design language that can be backed into a UI library and the styleguide and becomes the single source of truth for the entire organization. Component libraries and living styleguides encourage reuse, promote consistency, improve team productivity, help to identify common patterns and solve similar problems only once.
This workshop will show you how to:
- Understand what a design system is and how to start thinking in design constraints
- Analyze and split your UI into small reusable components
- Setup an environment to create components in isolation
- Create a living style guide and start building a component library
- Structure your application around components
- Write maintainable styles for your components based on the design system
Modeling React Applications with Statecharts#David Khourshid
Statecharts are a powerful, well-established formalism that describe even the most complex application behavior and logic in a visual, hierarchical, and deterministic way. In this workshop you will learn about finite state machines and statecharts, and apply them to real-life React applications in ways that will increase productivity and eliminate entire classes of possible bugs from your code. You will also learn how to:
- Refactor React applications of any size to use statecharts, piece by piece
- Auto-generate full integration tests
- Visualize application logic
- Analyze statecharts to determine which user flows can be optimized
- Identify all possible edge cases
- Apply late-breaking changes and requirements methodically
- Auto-generate designs of all possible component states with Storybook
- Use advanced features of XState
React and GraphQL – From zero to production#Glenn Reyes
In this workshop we will build a production-ready React app with GraphQL backend from the ground up. This workshop is targeted to engineers who want to learn to build a complete and full stack React app with GraphQL.
- Fundamentals & GraphQL core concepts
- Setting up the GraphQL Server with Graphpack
- Exploring the GraphQL API using GraphQL Playground
- Setting up the GraphQL Client with Apollo
- Querying and rendering data in your React app using React Apollo
- Creating, updating & deleting data using GraphQL Mutations with Apollo
- Working with real-time data using GraphQL Subscriptions
- Access control patterns using Context
- Deployment with ZEIT Now
Developers have basic knowledge about the core concepts of React. Bring your own laptop (I'm on Mac). Make sure, latest node and yarn or npm works on your machine.
TypeScript for React Developers#Michel Weststrate
About the author: Michel has been working with TypeScript full-time for the last 3 years. He authored several open source libraries (such as MobX and MobX-state-tree) that are written in TypeScript and leverage some of it's finest features.
Advanced React – Suspense, Time Slicing, Hooks and more …#Nik Graf
React has changed quite a lot in the past couple months. New lifecycle methods were released, Suspense and Time Slicing is around the corner and we even got a new API: React Hooks.
In this workshop we build an application relying on new techniques. The examples will include challenges that include the following topics:
- Async React (Suspense, Time Slicing)
- Advanced React Hooks (useLayoutEffect, useReducer, …)
The workshop is targeting intermediate and experienced React developers, that are looking to not only learn the mentioned topics from a theoretical standpoint, but also try them out in practice.
The workshop is split into several modules. Each of them starts with a 20 min presentation, 30-50 min coding session and is followed by a 10 min retrospective.
Advanced Performance Tuning for React Applications#Sia Karamalegos
Getting performance right is hard, even when we have the luxury of starting our apps from scratch. It’s even harder when the ideal crashes headlong into reality, and we need to improve the performance of existing apps, as is so often the case. In this workshop, Sia will lead you through the process of:
- Assessing an existing React app
- Diagnosing performance problems
- Prioritizing the fixes that will make the biggest impact
- Implementing performance fixes
During this full-day workshop, you’ll learn advanced techniques for improving the performance of React apps, including:
- Lazy loading resources & components (including React.lazy and Suspense)
- Leveraging Service Workers for performance
- Seamlessly preloading and prefetching assets
- Automatically optimizing images and fonts
- Mitigating the performance impact of third-party scripts
- Code splitting and bundle optimization
- Using psychological tricks to improve perceived performance
By the end of the workshop, you’ll be able to diagnose performance problems and solve them with a combination of modern and time-tested performance techniques. You’ll also learn how to weigh the trade-offs of implementing fixes to ensure that both your apps and your teams perform well. The tools added to your toolbox will continue to serve you, your team, and your users for years to come.
Preparation: Please come with a laptop ready for development. You must have Chrome, the React DevTools extension, and Node (v 8+) installed.
This workshop was prepared in partnership with Eli Fitch and Jason Lengstorf.