React Finland

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.

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.

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.

Topics covered#

• 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

Prerequisites#

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.

The JavaScript ecosystem is moving to TypeScript. Fast. This workshop will get you up and running with the basic and more advanced patterns of TypeScript. TypeScript has some powerful features, that fit very well with the dynamic nature of the JavaScript language. In this workshop we will cover all the essentials and some of the unique features of TypeScript.

But beyond that, this is a workshop for React devs! To practice the theory, during the hands-on parts of this workshop we will be migrating an application from plain JavaScript to TypeScript.

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.

Pre-requisites: Familiarity with JavaScript, React and modern syntax features (ES2015).

To learn more about TypeScript, read Michel's interview.

It will help if you have Yarn installed before the workshop. React to TS conversion example requires it as a dependency.

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, …)
• React.lazy
• Refs
• Context

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.

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.

Prerequisites: To attend this workshop, you must already have a working understanding of React and JavaScript in addition to HTML, CSS, and the command line. You must also have a basic understanding of Chrome DevTools, including inspecting an element and using the console. A basic understanding of webpack would also be helpful but is not required.

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.