React Finland combines the Finnish React community with international flavor.

React Finland combines the Finnish React community with international flavor. 

In this single track event you will learn more about React and surrounding topics while meeting some of the leading talents of the community. In addition to enjoying the event, this is your chance to explore Finland.

Our goal is to connect our valued speakers with our local community in the most fruitful way we can and provide Finnish hospitality to our conference visitors.

We hope to create something unique by combining our northern traditions with speakers and visitors from all around the world.

React Finland

When React was first introduced, it was ridiculed for going against established web development best practices as we knew them. Five years later, React is the gold standard for how we create user interfaces.

Along the way, we’ve discovered a new set of tools, design patterns and programming techniques. In this talk, we’ll explore how we can apply the React philosophy to software engineering problems far beyond the React ecosystem.

The New Best Practices

Writing declarative code for our UIs is so common that we do not even think about it. But when it comes to writing logic for managing state and side effects it requires a lot of discipline to get the same benefits. We are going to talk about how we can get help writing our business logic in a declarative manner and see what benefits it gives us.

Declarative state and side effects

With React 16.3, the context API has been completely revamped. This talk will demonstrate a good use case for context: Putting ad placements on your web page to get rich quick! You'll learn how easy it is to use context now and how to migrate your old context code to the new API.

Get Rich Quick With React Context

From the very first prototype to a global site with content in multiple languages, the textual content of your app or project will be a series of compromises, some of which you won't even notice making. 

Localization is a ridiculously difficult problem in the general case, but in the specific you can get away with really simple solutions, especially if you understand the compromises you're making.

There's always a better way to handle localization

All you need to know to become hero of CSS-in-JS with styled-components. We will go through the new API, performance improvements, server side rendering with Next.js and the theming manager available with v2 of styled-components.

Styled Components, SSR, and Theming

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.

Universal React Apps Using Next

Apollo has given us freedom and happiness when it comes to managing our data coming from the server but we still had to write code and sometimes a lot of it to manage our local state? Well, what if we managed it with queries too? Sounds too awesome right? Let's learn how to do this with apollo-link-state.

State Management in React Apps with Apollo Client

A year in, developing and using Detox in production taught us a lot. From designing its API to consuming it, testing real user scenarios to advanced mocking, we learned what makes sense when E2E testing an app and what doesn’t.

In this talk, we’ll discuss how Detox works and what makes it deterministic, cover some advanced use cases and methodologies, go over new features and tease the ones that are upcoming.

Detox: A year in, Building it Testing with it

No other topic in software development probably has so much controversy as linting.

With a wrong workflow linting can be really a pain and will slow you and your team down. With a proper setup, though, it can save you hours of manual work reformatting the code and reducing the code-review overhead.

This talk is a quick introduction into how 🚫💩 lint-staged — a node.js library I created and maintain — can improve developer experience in historically pita field — linting.

Coupled with tools that analyze and improve the code like ESLint, Stylelint, Prettier and Jest, you'll witness how much difference can a small tool like this make.

Make linting great again

I want to show you that the unexpected JavaScript things you encountered are understandable by humans and formally specified.

Understanding the differences is accepting

I'm writing my own YAML library, because none of the existing ones allowed me to manage comments within YAML files. Apparently this is not a thing one should do, as "The YAML spec is larger than the XML and XML Namespaces specs combined" and "No one in their right mind would want to write a parser for it."

But, well, here we are. Let me explain where "here" is, the route I took, and why any of this matters.

Why I YAML

This talk will examine how React changed the front end landscape as we know it. We'll start by recounting the pre-React landscape, including prior art. Next, we'll venture into the introduction of React, and its reception and growth.

But most importantly, we will take a look at the core idea of React, and why it transcends language or rendering target and posit on what that means going forward, including what React might look like years from now.

How React changed everything

What was it like to build sites in the 90s? What did we learn? And how to do it now?

Static Websites, The Final Frontier

We will kick off with the basics and then quickly go into how to leverage features like variant types and pattern matching to make impossible states impossible. After you gained some knowledge about the basics the course will dig even further into ReasonReact.

Get started with Reason

Based on @nikgraf's introduction to Reason (Get started with Reason), this talk goes deeper into the world of variant types and pattern matching and puts them into a practical context. 

You will learn how these tools help you design solid APIs, which are impossible to misuse by consumers. Additionally you will get more insights into practical ReasonReact code.

Making Unreasonable States Impossible

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.

Reactive State Machines and Statecharts

WebVR enables web developers to create frictionless, immersive experiences. We’ll explore the core concepts behind VR, see different demonstrations, learn how to get started with React VR and how to add new features from the Three.js library.

ReactVR

A case study of the app I'm currently working on with my team. I'll show you how we managed to set up a friendly environment with the best DX, spot bugs in early stage and deliver continuous builds to QA (just by merging the PR’s). I'll also cover dropping classic state management thanks to apollo-link-state and overcoming react-native and metro-bundler limitations. You can't miss this one!

World Class experience with React Native

The first app that we could publish to App Store and play store, and what we learned on the way.

React Finland App, Lessons learned

Life can be simple again. Haven’t we built the same house, or given the same haircut over and over? 80% of mobile app development is the same old song. So why is mobile so difficult/expensive? It’s not with React Native.

Let's look at how simple it is to get started in React Native using Ignite CLI. Using Ignite, you can jump in with a popular combination of technologies, OR brew your own. Ignite is the freedom to learn and automate your mobile app.

React Native Ignite

The best way to study a new development approach is to do it in practice. But good projects built with modern technologies most often require developers with experience in these technologies. One of the options to get this is a side project. What can it be in React?

Varya will show how to generate a multilingual static website using Metalsmith, React and other modern technologies and tools. For over a year, she has been using this stack to build her personal blog and it turned out to be expressive, fast and convenient. After all, it’s our beloved React.

How to use React, webpack and other buzzwords if there is no need

2018

WARNING: The sound is kind of bad on this one so please turn the volume down a bit.

The opening of React Finland 2019 (24-26.04) conference.

Opening ceremonies

The creator of MobX talks about his journey with the library and open source, reactive programming, client-side state management and learning new things.

MobX is downloaded a million times per month, and used by many large and small companies, such as Microsoft, Amazon, Lyft, SAP and DICE.

By now, it is 3,5 years ago (in other words, ancient!) that I've wrote it and started building a community around it. In this talk I will both reflect on the product and my journey into the Open Source Software world:

* What makes a great open source library? (Can we even answer that question)
* What is so appealing about the programming model of MobX? (Reactive programming, yet, not scary?)
* How is it possible that open source even works. What does it mean to be a good OSS citizen? (Yeah, I'm looking at you!)
* Why do so many maintainers burn out? (And how to avoid that)

Reflection on the past often gives clues about the future:

* What is the future of MobX and client side state management?
* And what is the future of open source? How can we foster innovation. And maintenance?

Expect a highly personal talk about a successful open source project. Some first hand experiences from an author that still tries to figure out how much of all that is just dumb luck in the end :).

MobX - The Journey

Behavioral Programming is a new paradigm that changes how we think about developing software. Programs are constructed in an incremental-fashion where newly added code can change how old code is executed. 

In this talk I will explain this paradigm in the context of developing a React app. Furthermore I will show how changes can be made to the app without having to understand how old code was written; hence I describe this method as "append-only development".

Append only development with React

What if you could predict user behavior? Smart UIs help understand your users, and adapt the experience around their personal needs.

In this talk, we will explore how we can make adaptive and intelligent UIs in React that learn from how individual users use your apps, and personalize the interface and features just for them, in real-time. With probability-driven statecharts, decision trees, reinforcement learning and more, UIs can be developed in such a way that it automatically adapts to the user's behavior.

Mind Reading with Adaptive and Intelligent UIs in React

Often when we need to develop user interfaces, we model the interface behaviour based on a visual design or the platform we ship onto. However, since the behaviour of the component is the same, it would be beneficial to find a practical way to share this behaviour between different platforms, styling systems, state containers, data transmitters and any other sort of integrations.

In this talk, I'll be showing a set of techniques to model a semi complicated React component, independent from the common integrations.

Abstract component modeling in React

“Should designers code?” or “Should coders design?”—these two eternal questions are being asked for years with no particular answer given.

* How to let developers know what typography style or button variance they should be using on this particular screen?
* How to ensure that the whole UI is consistent?
* How to let designers know that some screen design doesn’t fit the requirements and needs to be updated?

In order to answer those questions designers and developers have to speak the same language. But what language should it be?

UI components and pattern libraries can provide this intermediate abstraction and be a common language for both designers and developers.

A Common Design Language - Let Designers and Developers talk to each other

Design systems bridge the gap between designers and developers, communicate shared practices to all the company levels and significantly decrease production costs. We all have heard this but how to achieve that in practice?

React ecosystem and community already provide a lot of efficient open source tools which can be used for building your design system infrastructure. With them, you can have the most automated development process, high-level interactive documentation for the libraries in your system and support contribution practices within your organisation.

This practical guide shows how to apply existing development tools to your system and what is the value you can get.

A practical guide to building your design system infrastructure

Both continuous integration and continuous delivery (CI/CD) are elements of software development best practices. Setting up CI/CD can be time consuming, even more so for a mobile project. Understanding the basics of how to apply CI/CD practices in React Native mobile application development to automate software release tasks will improve performance and will free up time more usefully spent elsewhere in the project.

CI/CD for React Native

I’m using exploratory testing to design which tests I leave behind as automated. Creating automation forces me to explore details in a natural way. When an automated test fails, it is an invitation to explore. The two sides of testing, automation and exploration, complement each other. These intertwine the considerations of the best for today and for the future.

For great testing bringing value now as well as when we are not around, we need to be great at testing - uncovering relevant information - and programming - building maintainable test systems. At the core of all this is learning. With our industry doubling in size every five years, half of us have less than five years of experience. We all start somewhere on our learning journey.

In this talk, we look at skills-focused path to better testing in the intersection of automation and exploratory testing. We can arrive at the intersection by enhancing our individual skills, or our collaboration skills. What could you do to become one of those testers who companies seek after that work well in the intersection, giving up the false dichotomy?

Takeaways:

* Recognising skill in testing and skill in programming for testing as dimensions
* Building skills in testing / programming
* Using collaboration to achieve better testing

Intersection of Automation and Exploratory Testing

If you want to improve the accessibility of your React apps but you don't know how or where to start, this talk is just what you need. Manuel shares 12 tips that will help you build web sites and applications that can be used by anyone. 

Each tip fits on one slide and you'll be able to put them into practice right away without having to learn anything fundamentally new. The tips include testing, HTML, JS techniques, and general best practices.

12 Tips For More Accessible React Apps

JavaScript is a language of add-ons, and one of its more recent trends is typing. There are obvious benefits to typing, but what are the drawbacks? Should you choose Flow or TypeScript? Why use types at all? And why not just go straight to Reason? This session will provide some insight into these questions, peppered with examples from the real world.

All aboard the type train

Often when we write new components, we might be like: Come on, there must be a library out there! And most times there was already someone who faced the same problem... only that it's not quite the same. Should I use the 3rd party lib? Or go with my own? Let's find out the differences and trade-offs in this session.

Drawing the line between 3rd party and handcrafted components

Themes ease learning curves and reduce the time to a deployable app. Want to get that great blog written, but don’t want to spend the time creating a bunch of components and UI details? Themes. 

Themes allow you to focus on what matters: delivering compelling experiences for your end users. Themes are coming very soon to Gatsby, and this talk will do a deep dive on what they are, how to use them, and the types of amazing content you can create easily with a framework that people love: Gatsby.

Gatsby + and Themes: The Future of Gatsby

Check out the world’s award-winning websites—what do they all have in common? Animations! They have elements that move and change. When done well, animations can amaze us. But why are some animations delightful while others are so annoying? The answer could be in how our brain perceives motion.

Understanding this could be the key to confidently adding animations to our websites and apps. Animations with code seem hard, but they shouldn’t be. In this talk, I will give some tips and explore some tools to simplify creating animations in React.

Delightful UI animations by understanding the brain

Unpopular opinions are mostly popular opinions people post on Twitter and share them as an unpopular opinion. Some unpopular opinions though are really unpopular for a good reason. Doesn’t make sense to you? Neither to me.

Unpopular Opinions

In this talk, Jamon will go into what it took to build a thriving developer community around the popular React Native CLI and boilerplate, Ignite.

Building a Community Around Ignite

Rick demonstrates the difficulties of providing consistent interactions across platforms, and discusses where React Native space is headed.

Rick shares what the React Native team has learned about touch devices, how to provide a rich user experience today, and where this space is going.

The Untouchable Web

React Native is the tool for building cross platform React apps. To build native-like experiences, we need good APIs providing the native capabilities of each platform in a unified way. Is the answer a standard library for React apps?

React Standard Library

Custom CSS is the simplest way to make the UI inconsistent, especially if we’re talking about spacing between UI elements, font sizes or colors. When developers have too much freedom in defining the UI, they will do things differently. 

The issue could be solved by avoiding any custom CSS on the app level and having a set of primitive components that allow developers to glue UI together in a consistent way.

Custom CSS is the path to inconsistent UI

What if we could wield layout composition as an actual React component? Spoiler: that would solve the #1 issue that prevents our layouts from being truly reusable.

Creating layouts that last

This talk explores creating living documentation for design systems, ensuring consistent documentation at all times using TypeScript.

This session explores creating living documentation for design systems, ensuring consistent documentation at all times using TypeScript.

We will read Markdown files, render components described in them, and expose live type-safe code playgrounds powered by the Monaco Editor. We will, together, explore:

* Static Type Analysis and its value
* The Monaco text editor that powers VS Code
* Connecting it all together with React

Scalable Design Systems with TypeScript

The granular approach of designing components helps us to build reusable and encapsulated features. On another hand, it also makes a codebase much more complex by extra added abstractions and drastically increased amount of source code files. How can we navigate the maze of hundreds of React-atoms now? Join my talk to get the answer.

Codecrumbs in React

React is usually responsible for managing the render of the whole application. This talk will be about the different use case in which a React application is divided into several standalone configurable modules.

I am going to show how the React modules can be integrated into diverse CMS platforms such as WordPress or Liferay with help of React Union library.

Then we take a look at state management challenges in this kind of setup and how to solve them with @redux-tools.

React Union Write once, plug anywhere

Most of us have used or at least heard about TypeScript, but how many have released a React library written in TypeScript on NPM?

In this session we will take a look at the tooling required and some best practices for publishing a library using TypeScript and Rollup.

Releasing a library written in TypeScript on NPM

There are quite a few theoretical concepts of writing a good React application, including popular functional programming approaches. However, few take into consideration the impacts these will have on performance of the application. In this talk you’ll find out how some commonly used patterns have an adverse effect on the speed of your app, and how to avoid using them. We’ll mainly explore UI and state management but we’ll also dive into some native-specific issues and look at how to prevent them.

Practical Performance for React (Native)

JavaScript has had the monopoly on the web for quite some time now. What if, for performance reasons or preference, you want to use another language on the web or mix them?

WebAssembly is the right tool for the job! I want to demonstrate how you can write parts of your React application using Rust and related tools. To complete the demonstration, the code will be deployed on Cloudflare's serverless platform.

Rust ecosystem offers many great tools to work with WebAssembly on the web. These include DOM manipulation, JavaScript bindings and so on, and you will learn more about them in the talk.

WebAssembly   The Next Big Platform

Change is inevitable. So is legacy. And too often, we as developers (who love to solve problems by coding) fall into the trap of believing the only way to fix it is by rewriting everything again and again. But how can we design an application architecture that is more resilient to change in the first place? 

In this talk we’ll look at specific techniques you can use today to keep your app from turning into that infamous ball of mud.

Building resilient frontend architecture

One of the nuances of working in frontend development is constantly being told that insert whatever tooling, frameworks or technologies here are "super simple" or "easy to pickup". While on the surface this seems great, the reality is that many of these technologies are riddled with syntax quirks, incomplete documentation and a high barrier to entry.

In this talk, we'll discuss why truly intuitive tooling doesn't exist, go over some common misconceptions in the React community and learn more inclusive ways to talk about emerging frontend technologies.

"Intuitive" Tooling

The closing of React Finland 2019 conference.

Closing ceremonies

2019

Learn More about React, Explore Finland. React Finland combines the Finnish React community with international flavor. 

Due to the COVID-19 pandemic, this year's React Finland will be replaced by a series of online mini-conferences to serve the community while hoping for the best.

See how the language we use affects our users, and discover the first steps towards writing accessible, approachable and use case-driven documentation

It’s no secret that most people don’t read technical documentation for pleasure. Users often come to your docs when they are frustrated with your software, disappointed that they haven't been able to solve the problem on their own and generally feeling pretty low. This is sad, sure, but being aware of these feelings is key for developers and technical writers alike. These emotions frame the reader’s perspective and therefore, should shape the mood of our docs.

In this talk, we’ll discuss how the language we use affects our users and the first steps towards writing accessible, approachable and use case-driven documentation.

Humanizing Your Documentation

Kenigbolo Meta Stephen discusses his approach for documenting legacy React code.

In this talk, Kenigbolo Meta Stephen discusses his approach for documenting legacy React code.

Documentation in legacy React code - A love/hate paradigm

In this talk, Margarita Obraztsova discusses how to go beyond Redux.

Going beyond Redux. Diversify frontend state management

In this panel discussion, Jani Eväkallio (the MC), Carolyn Stransky, Kenigbolo Meya Stephen, Margarita Obraztsova, Juho Vepsäläinen, and James Stone discuss documentation.

React Finland Mini-conf #1 - Panel discussion about documentation

See the principles behind Reakit, a toolkit designed for developing accessible component libraries.

Diego Haz discusses the principles behind Reakit, a toolkit designed for developing accessible component libraries.

Reakit - Toolkit for building accessible UIs

Dive into Effector, a new state management solution for React.

In this talk, Yan Lavryushev dives into Effector, a new state management solution for React.

Dive in Effector

Luke Jackson and Juho Vepsäläinen discuss Oceanwind.

Luke Jackson and Juho Vepsäläinen discuss Oceanwind. Oceanwind implements the styling semantics of Tailwind (https://tailwindcss.com/) but in an opposite manner. Instead of coming with a CSS file with all the possible utility CSS rules, Oceanwind composes the required CSS based on usage. 

As a result, less tooling is required and the approach works both as a runtime and through server-side rendering while being performant and yielding good results.

Introduction to Oceanwind

Find out how to prevent burnout and how to diagnose its first symptoms.

Mikhail Novikov and Juho Vepsäläinen discuss the topic of burnout. As an industry, we seem to be particularly vulnerable to it and therefore it is an important topic to discuss in our conference series. Find out how to prevent burnout and how to diagnose its first symptoms.

Lessons learned from burnout

In this panel, Juho Vepsäläinen, Mikhail Novikov, Luke Jackson, and Aapeli Haanpuu discuss lessons learned.

React Finland Mini-conf #4 - Panel about lessons learned

Learn how to analyze their React apps for solvable issues, and learn some state management and async handling techniques.

As you add more components to your React application, you'll start to notice performance issues. Maybe data isn't loading as fast or you notice that things are happening out of order. There are tools and techniques you can use to handle these kind of issue at a large scale. 

In this talk, attendees will learn how to analyze their React apps for solvable issues and learn some state management and async handling techniques.

Making Your React Apps Perform At Scale

Nik Graf discusses his experience in optimizing React applications as he goes through a few specific cases where he improved performance.

In this talk, Nik Graf will discuss his experience in optimizing React applications as he goes through a few specific cases where he improved performance.

Tips and tricks for optimizing your React application

A series of optimizations against a simple grid component that's optimized step by step while learning how to profile the application, how to apply React APIs to speed it up, and what might be the next steps.

In this session, Andrey Goncharov and Juho Vepsäläinen will walk through series of optimizations against a simple grid component that's optimized step by step while learning how to profile the application, how to apply React APIs to speed it up, and what might be the next steps.

Live Coding - Optimizing a React application

In this panel, Juho Vepsäläinen, Andrey Goncharov, Milecia McGregor, and Nik Graf discuss the topic of performance in React.