Are you into React, React Native, GraphQL and hungry to learn from the best? Welcome to the Web of tomorrow.

Take part in the exploration of the React universe! Focusing on in-depth talks, hands-on workshops, and finding new opportunities, React Day Berlin conference provides space for everyone to make friends and develop stellar apps together.

Since 2017 we're running Berlin based React community of people passioned about Open Source and JavaScript engineering. Since then we have also landed 2 React conferences, with last one uniting 800 engineers from Germany and worldwide.

Join our third edition in 2019 to celebrate all things React and meet engineers caring about their craft alike.

React Day Berlin

Opening

The Past, Present and Future of CSS-in-JS

Best practices, auditing tools to help you improve the accessibility of your React applications, and an in-depth live example on how to build reusable accessible components in React.

Accessibility should be a priority in the design and development process, not merely an afterthought. 

So I’ll demonstrate best practices, auditing tools to help you improve the accessibility of your React applications and provide a live example by going in depth into how I’m building my own reusable accessible component library in React.

Compassion-Driven Development: Building Accessible React UI

Do you worry about the performance of your React applications? This is a how-to of performance improvement, with techniques to track and increase speed. 

Do you worry about the performance of your React applications? Do not worry anymore, I will take you through a how-to of performance improvement. 

We will look at how to use techniques to track and increase speed.

We will start with an example app which loads data into a table and discuss how we can make the performance better.

Performance anxiety with React

IPFS is a stack of protocols for decentralized, p2p communication and data transfer on the web. Learn how you can use IPFS to host files and apps, created p2p databases, and more!

IPFS is a stack of protocols for decentralized, p2p communication and data transfer on the web. In this talk we will present how to use the IPFS protocols alongside local storage to achieve multi-device p2p or multi-user p2p synchronization on the web.

Decentralized React states - using IPFS to sync, store, and recover state

Useful techniques for customizing data visualizations, numbers, dates, right-to-left, iconography, and colors for a global audience.

Building React custom data visualizations with full international support is not always easy.

This past year, I’ve worked to add new data visualizations features and modify legacy visualizations, for an international audience - on my team at Adobe. It’s been a learning process to correctly format strings, numbers, dates, times, currencies, calendars, x/y axis, and more!

In this talk, I will share some of the useful techniques I’ve learned about customizing data visualizations for a global audience. With a focus on React and high level ideas to keep in mind when designing, coding, testing, internationalizing, and localizing data visualizations for the world!

Data Visualizations and Internationalization

This presentation will show you how to create an a Progressive Web Application using Gatsby.

This presentation will show you how to create an a Progressive Web Application using Gatsby. 

We'll learn:
- What is a Progressive Web App (PWA)
- Why PWA's are important for a more inclusive web
- How to build your own PWA app using Gatsby.

Performant Websites for All - How to Build Fast, Inclusive Applications using Gatsby

In this talk you’ll learn how to write React like its fiction and what you can gain by doing so.

You don’t know it but you are an author. You write stories every day. You build narratives, characters and plots — but you aren’t writing a novel, you’re writing components. 

I came to engineering from the world of creative writing and what surprised me the most is how similar code is to fiction. React itself follows tenants of creative writing and when you lean into those rules, you create solid component architecture. 

In this talk you’ll learn how to write React like its fiction and what you can gain by doing so.

React Is Fiction

Learn the principles that will increase your test confidence, when building React apps

Should we use react-testing-library or Enzyme? What about snapshot testing? What should be our code coverage? Those are questions we often hear when discussing testing. 

Those questions are easy to discuss but the answers won’t necessarily make us write more reliable and flexible code. 

Many developers struggle to write tests 1) quickly and 2) that increase their degree of confidence. Writing good tests requires writing good code. Writing good code that is easy to test requires a good understanding of programming principles and how they apply to the libraries of choice. 

Discussing principles is harder than discussing tools. 

In this talk, we’ll discuss the principles that will make developers increase their test confidence when building React apps. I’ll also use those principles to challenge some believes that the audience might have about certain testing libraries or methodologies.

Testing Is All About Principles

Dive into the architecture of a programmable UI platform, which both allows you to have a fully working UI out of the box and also be able to customize every functionality and user experience to your needs, using the full power of React.

For backend services having a flexible API is a common practice that allows you to combine them with different APIs as if they were LEGO blocks and solve almost any business need. At Twilio we’ve been building REST APIs for over 10 years. When we recently decided to ship Twilio Flex, a software that has a working UI out of the box, we still wanted to make sure that it was as flexible as the rest of our APIs.

In this talk we’ll dive into how we architected a programmable UI platform using React that both allows you to have a fully working UI out of the box but also be able to customize every functionality and user experience to your needs using the full power of React.

UI as API

Learn some of Firebase's best features for the web, and how to easily integrate them into your React app with ReactFire.

Whether you want to A/B test your new dark theme, stream live updates to users while seamlessly handling spotty mobile connections, or just make your site load faster, Firebase can help you develop and grow your app. 

You'll learn some of Firebase's best features for the web, and I'll demonstrate how to easily integrate them into your React app with ReactFire, a new Firebase library that uses React's latest and greatest APIs such as Hooks, Suspense, and Context.

Modern React apps with Hooks, Suspense, Context, and Firebase

Learn about errors in JavaScript, and modern ways to handle them in React.

Error handling is an important subject matter as it cuts across concerns from creating resilient code as well as improving user experience. 

The talk is broken down into the following structure:
- Modern ways to handle errors in React
- Mental models for determining which parts of the UI should handle their own errors.
- How error handling reduced our customer success workload.
- Some live coding full of errors.

How Many Ways to Say I'm Sorry, Error Handling in React

Using Expo you can build an app that runs natively for iOS, Android, and web. 

Using Expo you can build an app that runs natively for iOS, Android, and web. 

You’ll see how Expo and React Native for web enable you to use cutting-edge browser functionality to create progressive web apps that emulate the functionality of your native app as closely as possible. 

You’ll also learn what you can do with it, why you would use it, and how it works with other popular web development tools.

Build it Once with Expo for Web

See the new version of React Navigation and learn about navigation and routing in React and React Native apps.

Component based Navigation in React Native

The challenges to expect when transitioning from native to React Native and how to avoid/overcome those challenges. 

Rewriting an app is an exciting process, but it comes with its drawbacks. 

In this talk, I’ll focus on the challenges to expect when transitioning from native to React Native and how to avoid/overcome those challenges. 

I’ll share learnings from my team’s first-hand experience and cover:
- Factors to consider when deciding to use React Native
- Organizational and technical challenges that can arise and how to deal with these challenges
- Expectations post-release.

From Native to React Native

Working with contractually-sound REST APIs in a React application using powerful new tooling.

GraphQL is an incredible technology. It provides developers with concrete, solid guarantees at the API layer, preventing surprises when interacting with client-server applications. 

REST has been often criticized as weaker in this regard, since it is not a formal specification. 

This talk explores working with similar (if not better) contractually-sound REST APIs in a React application using powerful new tooling.

Strong RESTful Contracts in a GraphQL world

Real-world example of a typed functional language actually making your developer life better, in an existing Javascript code base. And it's something your team might not cringe at, either.

You've seen it all. You are not working on a ""green field."" You slay dragons.

This talk would like to show a real-world example of a typed functional language actually making your developer life better, in an existing Javascript code base. And it's something your team might not cringe at either.

ReasonML for Skeptics

This talk aims to eliminate the school of thought that React Native is mostly for small mobile applications.

Ever wondered how to use microservices approach in a FED\mobile application? hesitating to choose React Native for your big project? I’m here to eliminate the school of thought that React Native is mostly for small mobile applications.

React Native At Wix - Building an App for 150 Million Users

React Native is the best framework for rapid prototyping.

React Native is the best framework for rapid prototyping. In this lightning talk, I present a case study of how React Native was used to build three successful mobile prototypes, what tools we used to measure the effectiveness of those prototypes, and how React Native allowed us to test our product hypotheses faster

Successful rapid prototyping with React Native

An often-missing ingredient in many React Applications is a focus on accessibility best practices—especially when component libraries are part of the application. 

Building React applications has been fairly easy now, However, an often-missing ingredient in many React Applications is a focus on accessibility best practices — especially when component libraries are part of their application. 

Nothing in React prevents us from building accessible web apps, but we need to learn to harness its power in the right way while dealing with some unique challenges caused by creating web pages with JavaScript. 

This talk will focus on these issues and how to solve them in the real world, while also adding some a11y power to your development process. This talk will also focus on why it is important to build accessible web apps.

Building Webapps for everyone - a11y with React

Modern features like Web Workers, WebAssembly, Worklets, and Service Worker allow us to leverage multi-threaded computing to run tasks in parallel.

User is working with your application, suddenly, UI freezes and probably, one of the CPU cores is burning! They cannot do anything. The only perception you can feel is as hot as a hell metal case of the laptop. Although this sounds like a horror movie, this is your application that cannot leverage modern APIs to lift heavy computation to a different thread where consequently user suffers the pain.

Modern features like Web Workers, WebAssembly, Worklets, and Service Worker allow us to leverage multithreading computing to run tasks parallelly, which at the end, makes the user feel like in a rainbow paradise instead of a nightmare, even though JavaScript is a single-threaded programming language!

In this session, I am going to show my experience running jobs in parallel on a React.Js application that will provide a pleasant user experience and exciting development.

Parallel computing in ReactJS

Building complex user interfaces can be tricky if all you have is JS and CSS. That’s where React and SVGs come in.

Building complex user interfaces can be tricky if all you have is JS and CSS. That’s where React and SVGs come in. 

When it comes to exploring audio, creativity is key and SVGs in React enable endless design possibilities. 

So, in this talk, I’m going to show you a few powerful examples to inspire you and help you create amazing audio projects.

Exploring audio with React and SVGs

A microinteraction goal is to provide feedback based on the user’s action. This can help users visualize how the interface moves or behaves, even though it’s purely digital on a flat screen.

Microinteractions and Animations in React Native

Basic insights in how Bluetooth LE works and how to access it in React Native.

This talk will give you some basic insights in how Bluetooth LE works and how to access it in React Native. We will look at our motivation for doing this, which library to work with and how to use it. We will create a simple app and show some basic pitfalls. All code will be available via GitHub.

Event-Driven Bluetooth handling in React Native

Learn why and how to server-render components in React Native and how it works.

In this talk you will learn why and how to server render components in React Native and how it works!

Server Rendered React Native

Apify SDK - The scalable web crawling and scraping library for JavaScript

Want to create a companion CLI tool for the next big thing that you are working on? Build it with React!

Text-based CLI tools are great. They are fast, lightweight, and universally accessible. But what does CLI have to do with React?

In this lightning talk, we will have a look at Ink - a wonderful custom React renderer that allows us to use Flexbox to create excellent command-line interfaces with ease. 

Want to create a companion CLI tool for the next big thing that you are working on? Build it with React!

React for Command-Line Interfaces! (feat. Ink)

Ever tried to click a button or a link on a paper printout? Yeah, me neither! So why are these interactive elements included in the printout of most websites? 

Ever tried to click a button or a link on a paper printout? Yeah, me neither! So why are these interactive elements included in the printout of most websites? 

If your website has content, there will always be somebody who wants to print it - let’s be prepared! I will talk about common mistakes that lead to horrible printouts and how and why we should get rid of these.

Print-friendliness - Why should you care?

React has a functional nature, however, TypeScript has not. Fortunately, there is a rising library called fp-ts.

TypeScript is the main dialect developers use for writing React applications. React has a functional nature, however, TypeScript has not. 

It lacks some popular patterns and data structures we use and love in other functional languages like ReasonML, Elm, or PureScript. 

Fortunately, for the rescue, there is a rising library called fp-ts. Let me show you how it can help you.

Typed Functional Programming in TypeScript with fp-ts

Flow makes it possible to add types to already existed projects gradually, without the need to re-write a business logic part of an application to another language. 

Flow makes it possible to add types to already existed projects gradually, without the need to re-write a business logic part of an application to another language. 

Having a typing system in place is beneficial in many cases - from refactoring old code to onboarding new team members. 

However, in the attempts to increase coverage it is easy to shoot yourself in the foot and end up with a system that is not helpful enough or even slows down development time. 

Let’s figure out together, how spending the same amount of time on this task can lead to a more resilient and effective type system in your React projects.

Empowering your React application with types using flow

This talk will go through the Algorand JS SDK with examples in using standalone functions for generating accounts, signing transactions as well as client wrapper functions for sending transactions and querying the blockchain. 

We will also see examples on building React components.

Building Blockchain Applications with JS

How to continuously deliver design changes to the react design system?

In 2019, product design teams use a design system at the level of a graphic editor. Developers teams move this design system into code using the React component approach.

But there is a problem. The final version of the product does not exist. As there is no final iPhone.

Product teams work daily on product. But design layouts and components in the code live in different worlds, they need to be updated manually.

How to continuously deliver design changes to the react design system?

Figma is a new design tool that is gaining popularity. Unlike Sketch, Figma works in the web, the native environment of component design systems. It has an API. 

Sasha (designer) and Zar (developer) will show how to synchronize design systems from two worlds.

Figma to React: Efficient Delivery Design to the Code

The challenges of choosing self-taught route, how much time it took. How welcoming the industry is? Let me share the insights!

How I landed my first developer role after coming from a non-traditional background. 

The challenges of choosing self-taught route, how much time it took. How welcoming the industry is? Let me share the insights!

React Day Berlin 2019

Dec 6 | Berlin, Germany