Design Systems 101#

Andrey is a front-end engineer and UI designer from Russia who lives in Austria and works on modern user interfaces using web technologies. As an active Open Source contributor, he contributed to Webpack, React.js, and Jest; designed the PostCSS official website and created a bunch of logos for other OSS projects.

Andrey is a co-organizer of the ReactVienna community, designer, and co-creator of ColorSnapper. He loves mountain biking, snowboarding, and specialty coffee.Andrey Okonetchnikov and Varya Stepanova is a design systems expert from Helsinki. She has a long history working in a field of component-focused UI design and development, creating helpful tooling for the subject and spreading the practices across large organizations. Nowadays her focus is bringing design systems to the next level of success which includes cooperative work in the company development community and bridging the gap for designers, developers, and business specialists.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.

Location#

Paasitorni Congress Hall - Paasivuorenkatu 5 A, Helsinki

Modeling React Applications with Statecharts#

David Khourshid is a Florida-based web developer for Microsoft, a tech author, and speaker. Also a fervent open-source contributor, he is passionate about JavaScript, CSS, animation, innovative user interfaces, and cutting-edge front-end technologies. When not behind a computer keyboard, he’s behind a piano keyboard or traveling.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.

Location#

Paasitorni Congress Hall - Paasivuorenkatu 5 A, Helsinki

Advanced React – Suspense, Time Slicing, Hooks and more …#

Nik cares about good UX and development tools. He co-created several popular open source projects like DraftJS Plugins and Polished. Nik participated in Stripe’s Open Source Retreat and joined Serverless Inc. to deploy auto-scaling infrastructures. In his spare-time he enjoys writing code in Reason and play with WebVR as well as organising the ReactJS Vienna meetup.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.

Location#

Paasitorni Congress Hall - Paasivuorenkatu 5 A, Helsinki

From Legacy to React#

Stephen is a Frontend Engineering Lead at BCaster and doubles as the Arch Conveyer/Community Manager of CodeAfrique, a not-for-profit weekend intensive software engineering Bootcamp for underrepresented groups in IT which was first started off in Estonia. During my free time, I sometimes volunteer as an open-source developer for https://adsbexchange.com, play golf and coach football (soccer as Americans call it).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).

The goal of this workshop is to give you a practical hands on step by step guide on how to approach incrementally migrating legacy JavaScript or JQuery application into a React app without needing to use the CLI initially and eventually moving the new codebase into a CLI project structure. The workshop requires participants to know basic javascript and DOM manipulation. It is suitable for both beginners and intermediates alike, however, the contents are primarily beginner focused.

Location#

Paasitorni Congress Hall - Paasivuorenkatu 5 A, Helsinki

Full stack apps with React and AWS#

Nader DabitNader 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.

Location#

Paasitorni Congress Hall - Paasivuorenkatu 5 A, Helsinki

Test React Applications#

Making people's lives better with software.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.

In this hands-on workshop we’ll work on adding tests to existing components as well as use our tests to speed up our workflow building new components. We’ll work with everything from simple components and JavaScript functions to complex components with asynchronous logic.

Topics:

  • 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.

Location#

Paasitorni Congress Hall - Paasivuorenkatu 5 A, Helsinki

Modern Forms with React#

American expat JavaScript developer.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.

Location#

Paasitorni Congress Hall - Paasivuorenkatu 5 A, Helsinki

Design Systems for React Developers#

Andrey is a front-end engineer and UI designer from Russia who lives in Austria and works on modern user interfaces using web technologies. As an active Open Source contributor, he contributed to Webpack, React.js, and Jest; designed the PostCSS official website and created a bunch of logos for other OSS projects.

Andrey is a co-organizer of the ReactVienna community, designer, and co-creator of ColorSnapper. He loves mountain biking, snowboarding, and specialty coffee.Andrey Okonetchnikov and Artem is a frontend developer living in Berlin, passionate photographer and owner of crazy dogs. Creator of React Styleguidist.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.

Location#

Paasitorni Congress Hall - Paasivuorenkatu 5 A, Helsinki

Modeling React Applications with Statecharts#

David Khourshid is a Florida-based web developer for Microsoft, a tech author, and speaker. Also a fervent open-source contributor, he is passionate about JavaScript, CSS, animation, innovative user interfaces, and cutting-edge front-end technologies. When not behind a computer keyboard, he’s behind a piano keyboard or traveling.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.

Location#

Paasitorni Congress Hall - Paasivuorenkatu 5 A, Helsinki

Advanced React – Suspense, Time Slicing, Hooks and more …#

Nik cares about good UX and development tools. He co-created several popular open source projects like DraftJS Plugins and Polished. Nik participated in Stripe’s Open Source Retreat and joined Serverless Inc. to deploy auto-scaling infrastructures. In his spare-time he enjoys writing code in Reason and play with WebVR as well as organising the ReactJS Vienna meetup.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.

Location#

Paasitorni Congress Hall - Paasivuorenkatu 5 A, Helsinki

From Legacy to React#

Stephen is a Frontend Engineering Lead at BCaster and doubles as the Arch Conveyer/Community Manager of CodeAfrique, a not-for-profit weekend intensive software engineering Bootcamp for underrepresented groups in IT which was first started off in Estonia. During my free time, I sometimes volunteer as an open-source developer for https://adsbexchange.com, play golf and coach football (soccer as Americans call it).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).

The goal of this workshop is to give you a practical hands on step by step guide on how to approach incrementally migrating legacy JavaScript or JQuery application into a React app without needing to use the CLI initially and eventually moving the new codebase into a CLI project structure. The workshop requires participants to know basic javascript and DOM manipulation. It is suitable for both beginners and intermediates alike, however, the contents are primarily beginner focused.

Location#

Paasitorni Congress Hall - Paasivuorenkatu 5 A, Helsinki

React Native#

Nader DabitNader Dabit and Head of mobile dev @GoforeGroup. React Native & Android background.Juha Linnanen

In this workshop you will learn everything needed to create cross-platform mobile applications for iOS and Android. We will show you how to leverage your possible existing Javascript and React skills and put them in good use creating beautiful mobile apps. Workshop will cover the core features of React Native, which will give you a solid foundation to work on your own afterwards. The workshop will be hands on, creating an example application, where you get to learn first hand the concepts being taught, all the while having experienced trainers ready to help you progress fast.

Pre-requisites: Basic Javascript (ES6) / React knowledge, macOS preferred (ability to build for iOS), tools installed

Location#

Paasitorni Congress Hall - Paasivuorenkatu 5 A, Helsinki

React Performance#

Making people's lives better with software.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
  • Profile JavaScript with the Chrome 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.

Location#

Paasitorni Congress Hall - Paasivuorenkatu 5 A, Helsinki

Modern Forms with React#

American expat JavaScript developer.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.

Location#

Paasitorni Congress Hall - Paasivuorenkatu 5 A, Helsinki

Resilient Component Libraries with React#

Andrey is a front-end engineer and UI designer from Russia who lives in Austria and works on modern user interfaces using web technologies. As an active Open Source contributor, he contributed to Webpack, React.js, and Jest; designed the PostCSS official website and created a bunch of logos for other OSS projects.

Andrey is a co-organizer of the ReactVienna community, designer, and co-creator of ColorSnapper. He loves mountain biking, snowboarding, and specialty coffee.Andrey Okonetchnikov and Artem is a frontend developer living in Berlin, passionate photographer and owner of crazy dogs. Creator of React Styleguidist.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.

Location#

Paasitorni Congress Hall - Paasivuorenkatu 5 A, Helsinki

Sponsors of 2019#

🥇Gold Sponsors#

🥈Silver Sponsors#

🥉Bronze Sponsors#

Partners#