Styleguide-driven Development#

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

Web applications becoming bigger and more complex, and as they grow, the complexity of the User Interface, arguably the most important part of your application, increases. And with it, your responsibility as a UI developer.

A traditional development workflow — change code, refresh the app in the browser, click-click-click to reproduce the desired state, repeat — doesn't work anymore. Tools like React hot loader make it faster but don't really fix the underlying issue.

This workshop will help you:

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

Valkoinen Sali - Aleksanterinkatu 16, Helsinki

Reactive State Machines and 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

Managing the many user interface states of an application easily becomes complicated. We'll discover how some historical and important computer science concepts – state machines and statecharts – and a functional + reactive approach can make it much easier to understand, visualize, implement, and automatically create tests for complex user interfaces and flows.

Location#

Elisa Appelsiini - Kaarlenkatu 11, Helsinki

React Native#

Gant is a New Orleans-based force of nature. Not satisfied to be “just” an experienced programmer in an array of disciplines, he’s also a prolific writer, an award-winning public speaker, and an adjunct professor.

A self-improvement aficionado, he takes every opportunity to connect with people and share knowledge through education and outreach. In the zombie apocalypse, Gant will run our much-needed bar, offering up advice, encouragement, and libations in equal measure.Gant Laborde

In this beginner workshop you will learn what React Native (RN) consists of, how to write basic applications, how to use Storybook with RN, how to test RN, and finally how to kickstart your own project.

Location#

Valkoinen Sali - Aleksanterinkatu 16, Helsinki

Webpack - The Good Parts#

Juho Vepsäläinen is behind the SurviveJS effort. In addition to being a core developer of Webpack, he has been active in the open source scene since the early 2000s. Blue Arrow Awards winner.Juho Vepsäläinen

In this high-level overview you'll learn how to configure Webpack. Even if you know it already, there might be some surprises in store as you gain insight to the tool you otherwise might miss.

The topics covered include:

  • Fundamental ideas of webpack
  • Development techniques
  • Build techniques
  • Asset management
  • Bundle/code splitting
  • Build analysis
  • Optimizing the build

Location#

Elisa Appelsiini - Kaarlenkatu 11, Helsinki

State Management#

Full-stack tech lead and open source evangelist at Mendix. Author of MobX, MobX-State-Tree and Immer. On a quest to make programming as natural as possible.Michel Weststrate

In this workshop we will dive into the basics and more advanced usage patterns of Mobx-State-Tree (MST) in combination with React. MST is a tool that helps to model complex problem domains and combines the best features of the modern state technologies out there.

  1. The state tree philosophy.
  2. Modeling your data structures and state
  3. Views & actions
  4. Asynchronous processes
  5. Composing trees and types
  6. Connecting to GraphQL
  7. Writing your own middleware

Location#

Valkoinen Sali - Aleksanterinkatu 16, 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 and 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

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#

Elisa Appelsiini - Kaarlenkatu 11, Helsinki

Advanced E2E Testing with Detox#

Rotem is a Software Engineer, open source advocate, passionate about Android, React Native, mobile performance, writing developer tools and Lego! In his current position at Wix, Rotem is working with React Native, writing infrastructure and testing tools.Rotem Mizrachi-Meidan

In this workshop we will get to know the cool features hidden in Detox. By getting to know how Detox works and what makes it deterministic, you will be able write better and more stable tests.

You will either build a demo app to experiment with its features (basic and advanced), or work on your existing app’s test suite.

We will experiment with the following:

  1. Running app against mock server
  2. Mocking mechanisms: permissions, user notifications
  3. Understanding synchronization issues
  4. Debugging failed tests
  5. Stabilizing E2E builds in CI

Location#

Valkoinen Sali - Aleksanterinkatu 16, Helsinki

Testing React#

Front-End Developer at @YLDio, open sorcerer, maker of useless modules, Blogger, Drummer and horror movie fan girl.Sara Vieira

In this workshop I will be going through unit testing in Javascript, how you can make it fun and meaningful for your app.

We will start by learning all the things about unit tests and how to implement very simple tests for your functions.

We will then move to React/React Native territory and learn about snapshot testing and components testing to keep regressions from happening.

By the end, we will implement all of this in continuous development with GitHub and Travis so you can leave with the exact idea on how to go about implementing extensive tests in your app without shedding a single tear.

Location#

Valkoinen Sali - Aleksanterinkatu 16, Helsinki

Universal React Apps Using Next.js#

Sia Karamalegos is the founder and lead developer for Clio + Calliope Web Development. She has over 15 years of experience in technology, strategy, project management, and operations from small startups to large corporations across multiple industries, especially high-tech and education. She leverages her depth of experience with software engineering to build high-value applications.Sia Karamalegos

Every user’s hardware is different, and processing speed can hinder user experience on client-side rendered React applications. Server-side rendering and code-splitting can drastically improve user experience by minimizing the work that the client has to do.

It’s easy to get lost in the lingo, so come learn what it all means and how to easily build universal React apps using the Next.js framework. We’ll walk through the concepts and use code examples to cement your understanding. You’ll get the most out of this session if you’re comfortable with React and ES6 syntax.

Location#

Elisa Appelsiini - Kaarlenkatu 11, Helsinki

Babel#

Sven is a software engineer living in France and mostly working with Golang and JavaScript. OSS enthusiast and one of the persons behind Babel.Sven Sauleau

You will learn how to refactor your React code effectively in this workshop by Sven Sauleau, one of the core developers of Babel. He will discuss the following topics:

  • How and why JSX syntax works?
  • How to create your first Babel plugin?
  • How to perform type analysis?

Read your own refactoring tool article to learn more!

Location#

Elisa Appelsiini - Kaarlenkatu 11, Helsinki

🥇 Gold Sponsors#

🥈 Silver Sponsors#

🥉 Bronze Sponsors#

Partners#