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

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

Location#

Paasitorni Congress Hall - Paasivuorenkatu 5 A, Helsinki

React and GraphQL – From zero to production#

Glenn is a front-end Engineer, who builds modern user interfaces and apps with React & GraphQL, loves OSS, co-organizes ReactVienna meetups, and plays JM music on guitar.Glenn Reyes

In this workshop we will build a production-ready React app with GraphQL backend from the ground up. 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 with Graphpack
  • Exploring the GraphQL API using GraphQL Playground
  • Setting up the GraphQL Client with Apollo
  • Querying and rendering data in your React app using React Apollo
  • Creating, updating & deleting data using GraphQL Mutations with Apollo
  • Working with real-time data using GraphQL Subscriptions
  • Access control patterns using Context
  • Deployment with ZEIT Now

Prerequisites#

Developers have basic knowledge about the core concepts of React. Bring your own laptop (I'm on Mac). Make sure, latest node and yarn or npm works on your machine.

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

Location#

Paasitorni Congress Hall - Paasivuorenkatu 5 A, Helsinki

Getting Started with ReasonML & ReasonReact#

Patrick Stapfer is a JavaScript Software Engineer and freelancer, mostly known for his contributions to the Flow type checker ecosystem and his recent work at Runtastic, where he spent most of his time working on the Mobile News Feed feature (built in React Native). Most of his Open Source time is dedicated to the ReasonML and OCaml platform to build robust, type-safe JS applications.Patrick Stapfer

ReasonML is a new cool JavaScript-like language with a strong type-system and first level React bindings. As with every new language, there comes a new ecosystem and unfamiliar concepts with it.

In this workshop, attendees will first of all learn how to setup and use ReasonML with React and find explanations on how to find relevant information for their coding problems (navigating the docs, leverage the community).

Later own they will discover the capabilities of the underlying JS-compiler platform called BuckleScript and see how Reason translates to JavaScript. They slowly will get introduced to the interoperability layer to be able to interact with existing JavaScript code and learn how the React component model works in practise.

In more detail, the workshop will cover following topics:

  • Why ReasonML?
  • Introduction to the platform / tech stack (OCaml, BuckleScript, Tooling, ReasonML)
  • Dev-Setup / Editor integration
  • Basic language features (data types, pattern-matching, Collection APIs)
  • BuckleScript related topics (JS-compilation,
  • React related topics (stateless / reducer components, JSX, CSS etc.)
  • Interoperability with existing JavaScript

In the end, ambitious attendees will be able to integrate Reason React components in their existing React codebase without interrupting the existing development workflows.

Location#

Paasitorni Congress Hall - Paasivuorenkatu 5 A, Helsinki

Advanced Performance Tuning for React Applications#

Sia Karamalegos is a web developer, currently focused on developing web applications and improving front-end performance. She is an international conference speaker and co-organizes #FrontEndParty, gnocode, and NOLA Hack Night in the New Orleans area. Sia loves making developers' lives easier through teaching, speaking at conferences, and mentoring. She is the founder and lead developer for Clio + Calliope Web Development and was recognized in the Silicon Bayou 100, the 100 most influential and active people in tech and entrepreneurship in Louisiana. When she's not coding, speaking, or consulting, Sia likes to design crochet patterns and dabble in charcoal figure drawing. She's also an avid endurance athlete.Sia Karamalegos

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.

Location#

Paasitorni Congress Hall - Paasivuorenkatu 5 A, Helsinki

🥇Gold Sponsors#

🥈Silver Sponsors#

Become a sponsor

🥉Bronze Sponsors#

Become a sponsor

Partners#