React Finland

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

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.

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.

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

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.

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.

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.

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

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.

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.

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

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.

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

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.

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!

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