Note that the times have been adjusted to your local timezone automatically.

It's possible to subscribe to the conference calendar directly to keep up to date with any changes.

2018-04-24 - Workshop day#

-

Styleguide-driven Development #

  • React.js
  • Styling
  • Style guides
  • Tooling

Reactive State Machines and Statecharts #

  • React.js
  • State management

React Native #

  • React.js
  • React Native

Webpack - The Good Parts #

  • Tooling
  • Webpack

Testing React #

  • React.js
  • Testing

Universal React Apps Using Next.js #

  • Next.js
  • React.js
  • SSR
  • Universal React
-

Styleguide-driven Development #

  • React.js
  • Styling
  • Style guides
  • Tooling

Reactive State Machines and Statecharts #

  • React.js
  • State management

React Native #

  • React.js
  • React Native

Webpack - The Good Parts #

  • Tooling
  • Webpack

Advanced E2E Testing with Detox #

  • Detox
  • React.js
  • React Native
  • Testing
  • Tooling

Universal React Apps Using Next.js #

  • Next.js
  • React.js
  • SSR
  • Universal React

Babel #

  • Babel
  • Tooling
-

State Management #

  • Immer
  • Mobx
  • mobx-state-tree
  • React.js
  • State management

2018-04-25 - Presentation day#

-

Registration, Finnish breakfast. #

Trust me, it's the best.

-

Opening ceremonies #

-

The New Best Practices — Jani EväkallioJani Eväkallio#

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.

  • React.js
-

Declarative state and side effects — Christian AlfoniChristian Alfoni#

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.

  • Cerebral
  • React.js
  • State management
-

Immer: Immutability made easy — Michel WeststrateMichel Weststrate#

 Slides (web)

Immer is a tiny package that allows you to work with immutable data structures with unprecedented ease. It doesn't require learning new data structures or update APIs, but instead creates a temporarily shadow tree which can be modified using the standard JavaScript APIs. The shadow tree will be used to generate your next immutable state tree. Join this talk to see how to write your reducers in a much more readable way, with half the code and without requiring additional large libraries.

  • Immer
-

Get Rich Quick With React Context — Patrick HundPatrick Hund#

 Slides (web)

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.

  • Legacy
  • React.js
  • Redux
-

There's always a better way to handle localization — Eemeli AroEemeli Aro#

 Slides (web)

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.

  • Tooling
  • React.js
-

Lunch #

It's functional. You are not supposed to like it.

-

Styled Components, SSR, and Theming — Kasia JastrzębskaKasia Jastrzębska#

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.

  • React.js
  • SSR
  • Styling
-

Universal React Apps Using Next.js — Sia KaramalegosSia Karamalegos#

 Slides (web)

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.

  • Next.js
  • React.js
  • SSR
  • Universal React
-

Coffee break #

We don't mind if you drink tea, though. Water is available as well.

-

State Management in React Apps with Apollo Client — Sara VieiraSara Vieira#

 Slides (web)

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.

  • Apollo
  • GraphQL
-

Detox: A year in. Building it, Testing with it — Rotem Mizrachi-MeidanRotem Mizrachi-Meidan#

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
  • React.js
  • React Native
  • Testing
  • Tooling
-

Coffee break #

Other beverages are available too although black coffee is our favorite.

-

Make linting great again! — Andrey OkonetchnikovAndrey Okonetchnikov#

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.

  • Code quality
  • Linting
-

Understanding the differences is accepting — Sven SauleauSven Sauleau#

 Slides (web)

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

  • Babel
  • Tooling
-

Why I YAML — Eemeli AroEemeli Aro#

 Slides (web)

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.

  • Tooling
-

Panel #

Panel discussion to end the day

2018-04-26 - Presentation day#

-

Registration, Finnish breakfast. #

Trust me, it's the best still.

-

Opening ceremonies #

-

How React changed everything — Ken WheelerKen Wheeler#

 Slides (web)

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.

  • React.js
-

Static Websites - The Final Frontier — Juho VepsäläinenJuho Vepsäläinen#

 Slides (web)

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

  • React.js
  • Static site generation
  • Webpack
-

Get started with Reason — Nik GrafNik Graf#

 Slides (web)

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.

  • Reason
  • React.js
-

Making Unreasonable States Impossible — Patrick EckerPatrick Ecker#

 Slides (web)

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.

  • React.js
  • ReScript
-

Lunch #

You might like it better this time

-

Reactive State Machines and Statecharts — David KhourshidDavid Khourshid#

 Slides (web)

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.

  • React.js
  • State management
-

ReactVR — Shay KeinanShay Keinan#

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.

  • React.js
  • React VR
-

Coffee break #

We don't mind if you drink tea, though. Water is available as well.

-

World Class experience with React Native — Michał ChudziakMichał Chudziak#

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!

  • React.js
  • React Native
-

React Finland App - Lessons learned — Toni RistolaToni Ristola#

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

    -

    React Native Ignite — Gant LabordeGant Laborde#

     Slides (web)

    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.js
    • React Native
    -

    How to use React, webpack and other buzzwords if there is no need — Varya StepanovaVarya Stepanova#

     Slides (web)

    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.

    • React.js
    • Styling
    • Style guides
    • Tooling
    -

    Panel #

    Panel discussion to end the conference

    -

    Buses leave to after party (Sea Life, Tivolikuja 10) #