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
Before coming to the workshop, make sure you set up component-driven-development repository and follow the instructions. Doing this will save time and help you get started faster.
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
You could clone the workshop repository before the workshop to speed up the setup.
React and GraphQL – From zero to production#Glenn Reyes
In this workshop we will build a Twitter Lite React app with a GraphQL backend. 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
- Exploring the GraphQL API
- Setting up the GraphQL Client
- Querying and rendering data in your React app
- Creating, updating & deleting data using GraphQL Mutations
- Access control patterns using Context
- Bonus: Working with real-time data using GraphQL Subscriptions
- Bonus: Deployment setup
Developers have basic React knowledge. Bring your own laptop (I'm on Mac). Make sure, latest node and yarn or npm works on your machine.
Set up the workshop repository to save some time and the preview the content.
You can find the workshop slides online.
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.
To learn more about TypeScript, read Michel's interview.
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#Sara Vieira
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.
Before coming to the workshop, make sure you set up advanced-react-perf repository and follow the instructions. Doing this will save time and help you get started faster. You could also check out the workshop slides beforehand.