React Finland

The design system workshop will provide you with all the basics and fundamentals of building a Design System, from scratch. It is mainly intended to Frontend / UI developers but can be valuable to other teammates. As long as you‘re working on any product interface, regardless of your position, this workshop will give you the keys to collaborate, from Design to System.

The workshop is dedicated to learning Design Systems fundamentals, from a Developers perspective with a bit of Designers’ incentive. During this session, you will understand the basic of the Design System terminology (what Design Tokens are, how a Design System architecture is designed…) and we’ll go through what differentiates a Design System from a collection of themable components.

After covering the building of few tokens-based components , with their relatives documentation, stories, and tests ; we’ll go to practicing in a real world use-case, where you’ll start a Design System for a project from scratch, architecture it, build its first components and documentation, publish it, and use it in a dedicated React host app.

Note that this workshop is held twice with the same content.

React 18 was a long-awaited release. New APIs were introduced and certain behavior changed. Some of these changes have quite an impact on your daily development, while others rarely affect you. Nevertheless, only by knowing your tools can you best decide when to use which of them.

In order to get a deep understanding of these new APIs and behavior changes we will explore the following topics:

• new concurrent rendering APIs: useTransition, startTransition, useDeferredValue
• new Hooks: useId, useSyncExternalStore, useInsertionEffect
• strict effects in the new Strict Mode and revisiting useEffect
• automatic batching and flushSync
• sneak peek into what's coming after React 18 including a brief introduction into <Suspense> and <SuspenseList> for data fetching

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. The final topic about what's coming after React 18 is only covered as a presentation.

By the end of the workshop you will be able to leverage the new features of React 18 and be able to use them in production ready applications.

Prerequisites: This workshop is targeted for intermediate and experienced React developers. You should be comfortable using Hooks (incl. useEffect, useRef) and basic understanding of Concurrent Mode is recommended but not required.

Preparation: Please have Node 16+ and Yarn installed on your machine.

Length: One full day.

In this advanced half-day session, we discuss how to improve ROI of your design system implementations. Bring your own projecsts/topics.

In this advanced half-day session, you'll learn how to govern your design system work, what are the options, and how to move from one model to another. Bring your own problem(s)!

Note that this workshop is held twice with the same content.

In this half-day workshop we look into how Web Components work, how you can easily create them and how they can utilized by you and your team in larger projects, no matter the library/framework you're using.

Requirements: JavaScript skills, Preferably experience in writing UI elements with React, Vue or a similar library.

We've come a long way from pen and paper. In this workshop, you'll learn how to build apps with statecharts - a method of drawing diagrams that can be executed as production code. This opens up new opportunities for collaboration - helping you improve the handoffs between product, design, and dev. We'll be using XState - an open-source statechart tool for JavaScript - and Stately's visual tools to build an internet banking app, from diagram to deploy. You'll learn how to model any piece of code using states, events, actions and services.

Note that this workshop is held twice with the same content.

React 18 was a long-awaited release. New APIs were introduced and certain behavior changed. Some of these changes have quite an impact on your daily development, while others rarely affect you. Nevertheless, only by knowing your tools can you best decide when to use which of them.

In order to get a deep understanding of these new APIs and behavior changes we will explore the following topics:

• introduction to <Suspense> and <SuspenseList>
• new concurrent rendering APIs: startTransition, useDeferredValue
• new Hooks: useId, useSyncExternalStore, useInsertionEffect
• strict effects in the new Strict Mode
• automatic batching and flushSync
• sneak peek into what's coming after React 18

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. The final topic about what's coming after React 18 is only covered as a presentation.

By the end of the workshop you will be able to leverage the new features of React 18 and be able to use them in production ready applications.

Prerequisites: This workshop is targeted for intermediate and experienced React developers. You should be comfortable using Hooks (incl. useEffect, useRef) and basic understanding of Concurrent Mode is recommended but not required.

Preparation: Please have Node 16+ and Yarn installed on your machine.

Length: One full day.

You don’t want to exclude any users. I know it. But sometimes, it can happen that your user interface doesn’t work for users who don’t use a mouse for navigating. Or for those who can’t see the interface or can see it only after zooming in. Or those who are trying to use your app or site in direct sunlight. We don’t always even know how to test for these scenarios, especially if we are sighted mouse users with good color sight.

In this workshop, we will look into some tools and techniques which help with that. In the workshop, you will learn:

• A set of tools and techniques that can help you to test for accessibility
• Problems to look for when developing

Bring your own project to test to get the most out of the workshop. I will prepare an example project, but you will learn more if you can apply your learnings to a project you’re working with - be it a personal or work project.

Prerequisites: When attending the workshop, you should have a basic understanding of React development.

Preparation: Have the project (your own or cloned workshop example) up and running on your computer. If you want to use an example I've created, instead of your own project, you can find the A11y workshop project from Github.

Note that this workshop is held twice with the same content.

In this half-day workshop we look into how Web Components work, how you can easily create them and how they can utilized by you and your team in larger projects, no matter the library/framework you're using.

Requirements: JavaScript skills, Preferably experience in writing UI elements with React, Vue or a similar library.