Design Systems 101#Andrey Okonetchnikov and Varya Stepanova
Ever wondered what is a design system and how is it different to a component library? Or how to introduce a design system to your product or organisation? This one day workshop will help your multi-disciplinary team of designers, developers, and project managers to get familiar with design systems, find design-related issues in your product, and understand how to work around them by improving product-related communication.
During this workshop participants will get a hands-on experience with basic design processes while creating and maintaining their own design system. You'll learn how following these processes helps with establishing a well documented universal design language which reflects a shared understanding of the brand and translates into the design-system implementation in code and design tools.
With the knowledge of communicational practises and modern design and developer's tools you too should be able to introduce a design system in your company and star working smarter, not harder.
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.
Advanced React – Suspense, Time Slicing, Hooks and more …#Nik Graf
React has changed quite a lot in the past couple months: Hooks, Suspense, Error Boundaries and in addition to that Time Slicing is around the corner.
In this workshop we go through several concepts usually don't need every day. The examples will include challenges that include the following topics:
- useRef to persist values for the full component lifetime
- useLayoutEffect to manipulate the DOM before the browser paints
- useCallback to memoize functions across multiple renders
- Suspense and React.lazy for code splitting
- Suspense for data fetching … and more
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.
From Legacy to React#Kenigbolo Meya Stephen
Changing applications from one technology to another can turn out to be quite challenging depending on the type of tech stack. If you have read about migrating large projects then you probably know how daunting it could get, especially moving from a direct DOM manipulation pattern to a Virtual DOM pattern.
After becoming Front End Engineering lead at BCaster I became responsible for handling the migration of a couple of JQuery legacy codebases into React. At first sight, it sure did seem to be straightforward, especially with proper test coverage, however about 20% into this migration we encountered certain issues which meant a total re-evaluation of several architectural decisions that had been made in regards to this migration.
Migrating a couple thousand lines of JQuery code required an incremental approach which ensured that a stable version of the codebase was always avaialble in production despite having significant changes to it. This meant that certain steps needed to be introduced in order to save us from the ordeal of a total rewrite (in some cases rewritting "might" a valid option).
Full stack apps with React and AWS#Nader Dabit
In this full day workshop you’ll learn how to build, end to end, a full stack application complete with serverless functions, authentication, a GraphQL API, and fine grained access control.
We’ll learn about how to set up react navigation with protected routes based on authorization rules, test and mock the APIs locally, and work with secure image storage and retrieval.
We’ll start by creating a blank React app and begin adding features using AWS and the AWS Amplify CLI. By the end of the course, you’ll have be ready to start building full stack applications that scale.
Test React Applications#Kent C. Dodds
Use jest, jest-dom, and React Testing Library to write unit and integration tests for React Components
Writing React applications is pretty easy, but shipping those applications with confidence is an entirely different story. How do you know that your changes work? How do you know those changes aren’t going to break other parts of your application? Do you have to manually walk through your whole application to make certain everything’s still working? No thank you! The more your tests resemble the way your software is used, the more confidence they can give you. Let’s learn how to write tests that make us confident.
- Install jest-dom and React Testing Library and configure them to work well with Jest
- Test a simple component
- Test function logic with jest-in-case
- Test components that make HTTP requests
- Test a form
- Test driven development
- Write a custom render function for testing components that rely on context providers (like @reach/router and redux)
Note that in order to participate the workshop and get most out of it, you should already have basic concepts of React and testing in mind.
Modern Forms with React#Erik Rasmussen
This workshop will take the students from building a two-field form using just useState() hooks through to using a form library to manage complex form data such as field arrays, with support for field-level and record-level client-side validation as well as submit validation, third party input components and more. It will also touch on more complex concepts like minimizing field re-renders with a useField() hook, as well as subscribing to certain parts of form state with a useFormState() hook.
Beyond only forms, the app we build will talk to a GraphQL backend to load data into the form and mutate it upon form submission using Apollo Client, using hooks, of course!
Students will walk away confident in their knowledge of how to build forms of any complexity with great UX.
The workshop requires an intermediary level in React.js (>= 3month experience). More details coming soon. Ticket includes breakfast and lunch. It does not include the conference ticket.
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.
React Native#Nader Dabit and Juha Linnanen
React Performance#Kent C. Dodds
React is fast, until it isn't
In this workshop, you'll learn everything you need to diagnose, profile, and fix performance problems in your React application using the Browser Performance Profiler, React DevTools Profiler, and proven React optimization techniques.
The tools we have for profiling React Applications are extremely powerful, but they can often be really difficult to grok. Sure, starting a profiling session is simple enough, but how do you go from all the information in the flamegraph to actionable steps to improve your application's performance? And once you know what parts of your app are causing performance issues, what then? How do you optimize your React components without making the whole application a complex mess?
Oh, and don't forget that you should profile your app in production mode to make sure you get accurate measurements. Do you know how to do that?
Hi, I'm Kent C. Dodds and in my latest workshop I'll teach you the ins and outs of optimizing React applications. I will take you on a deep dive browser profiling tools, and show you what you need to know to start using them to make your applications fast right away.
When you are done you will:
- Profile React components with the React DevTools profiler
- Utilize built-in React features (like React.memo, useMemo, anduseCallback) to optimize React components
- Know how to apply better patterns for application state management to optimize components by default
Note that in order to participate the workshop and get most out of it, you should be already familiar with React hooks.
Resilient Component Libraries with React#Andrey Okonetchnikov and Artem Sapegin
In the world where frontend applications are becoming more complex and time constraints more tight, design systems and component libraries are becoming everyday tools for developers to fulfil new business requirements as fast as possible without sacrificing user experience and quality of the product.
The truth is, the way your design system and component library is built will inevitably affect the quality of the application code. If components aren't flexible enough to match business requirements and time constraints, there will be hacks and workarounds — the source of endless bugs and maintenance issues. On the other hand, too much control over markup and styling can lead to inconsistent user interfaces and hurt user experience.
This workshop covers general architecture principles and React-specific techniques that lead to better components architecture and API design and are going to make teams be more productive and products be more consistent.