React Amsterdam is a celebration of good things coming together: React that rocks and spring in Amsterdam that blossoms.

A full-day, two-track conference on all things React, gathering Front-end and Full-stack developers across the globe in the tech heart of Europe. We're coming back with a new gig on April 10-12, 2019. 

Mark your calendars for the biggest React community event.

Same as last year, days before (and after) the main event, we'll host a training day, with multiple workshops on advanced React, GraphQL, Testing, React Native and more. 


React Amsterdam

Kent talks about how important it is to understand the abstractions that we use (Hooks, Suspense, JSX, etc), if we want to level up our abilities, speed and skills. 

React is a brilliant JavaScript library for building simple and complex user interfaces. 

In our eagerness to apply React to our most complex of problems and ship solutions today, we can get lost in the 🌲🌲🌲 forest of abstractions 🌲🌲🌲. 

When it comes to leveling up our skills in anything, I find the most effective method is to take a step back and understand the foundational fundamentals. 

To strip away all abstraction until what we're left with is the bare bones. The better you understand an abstraction, the more effective you will be at using it. 

In this talk, we'll get more effective at using React Hooks, React Suspense, and JSX.

Requisite React

React Native is a great way to build native apps for iOS, Android and other mobile platforms. In this talk, we will look at the internals of React Native, and how code written in JavaScript can power a fully native mobile application. We will look at the various parts of the current system like the bridge, the UI manager and the plugins. We will also touch upon the rendering process and compare it to React’s rendering on the web.

We will look at some of the new and exciting improvements (like Fabric, TurboModules and JSI) and talk about how they significantly improve React Native. This talk stems from my experiences as a web-developer newbie on the React Native team, and is an attempt to document my journey in comprehending the code base. At the end of the talk, the attendees will not only be able to build React Native apps, but also understands how it all works together.

Building React Native

React on it’s own has a very small API surface. Most of the magic happens in user-land.

But, there's a lot out there: Higher order components, Render props, Compound components? Provider methods? Learn which component pattern will make your codebase better in which use case.

Refactoring React

There are quite a few theoretical concepts of writing good a 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)

Thanks to React's component-oriented architecture, the React community has been naturally gravitating towards design systems as a way of standardising our respective design languages into reusable components. When done successfully, it suddenly becomes trivial to translate standard designs into code. 

In fact, we may even find that this translation step starts to feel somewhat redundant. In a world of components, how should our design processes change? How should our tooling change? How should we, as React developers, better enable this change? In this talk, we'll look at the current state of design and development, and where we could go—if we're willing to push for it.

Designing with React

React and React-Native allow a learn once write anywhere paradigm. This is great, because one tech team can build both your web app and native mobile experience. The problem is developers hate writing things twice. 

There have been a couple of efforts to build a unifying technology to write an application once and have it work on both web and native. Yet this is not always the best approach. There is value in only sharing your business and state logic; keeping your render code separate.

In this talk I will give real examples from my work with MADE.COM, migrating their web and mobile application to React and React-Native with code sharing as a primary objective.

Sharing Code Between React and React-Native: What Not to Share

“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

React Native is great for mobile applications on iOS and Android but there is more in the world of native app development. React Native can be used to get your app on the Windows and Mac OS X platform. And why not Electron or even newer Marzipan to get your app to the other platforms or can you combine these technics to get a good app as result.

In this talk you wil see how to get React Native to the Windows and Mac OS X platform, what the advantages and disadvantages are with these setups and what you can do to get the best results for your App.

Building for a Bigger World Than Mobile

Spectrum is an open source chat app for large online communities and was recently acquired by GitHub. We are a team of three with a predominantly frontend and design background and have worked on it for close to two years. With the benefit of hindsight, let's talk about the technology choices I regret and the lessons I have learned.

Tech Regrets at Spectrum

Did you know React Native has accessibility rules? In this talk, I will show you why accessibility matters, what those rules are, accessibility standards your app falls into, common patterns to follow and how to get over your fear of voice-over.

By making our apps accessible, we provide a great experience for all our users. This talk is sure to leave you with actionable ways in making your apps accessible. Let’s make this native world a better and inclusive place for everyone.

Make Your React Native Apps Accessible

Once upon a time, you had one Single Page Application using a Monolith Backend that relies on a Database. Then you started getting some users and suddenly you needed multiple instances of your Monolith Backend and more replicas of your Database. Your user base kept growing and also your development team was growing, so you split your Monolith backend into Microservices with their own Databases.

You’re very happy about the situation until you realize that the same problem you had on the backend it’s now on the frontend. Multiple teams are working on the same codebase, it’s hard to do frequent releases and there’re a lot of cross-team communications that slow things down.

At DAZN we battle-tested the Microfrontends architecture leveraging feature like blue-green deployments in the frontend, framework agnostic teams and drastically reduced cross-team dependencies.

Scaling Applications with Microfrontends

Can React and web technologies compete with native toolkits when it comes to making super complex, rich desktop apps? Can we go further and create better-than-native applications? 🤔 Sounds like a good challenge!

This talk introduces how React, JavaScript and WebAssembly can be used to write new ambitious apps, or port existing ones - with real world examples! I'll show how to leverage the React ecosystem to create performant applications: architecture, patterns, typing, useful open-source modules and tooling... and how to go one step further and provide a better user experience as well as a better developer experience.

These apps are not web apps, they are not native apps, they are hybrid 'Native Web Apps' and can provide the best of both worlds.

Native Web Apps: React and WebAssembly to Rewrite Native Apps

Developers and designers don’t often use all SVG superpowers in their React applications.

This way, to drive your inspiration, I am going to tell you the story of an SVG image that one day made a very special friend - ReactJS. Alone and despised by its family, SVG yelled Enough! Now you’ll see what I’m all about!. And with this epic scream, little SVG unveiled all its superpowers. She took her friend React and they showed the world how to come up with creative solutions together.

An SVG’s Tale

Netflix changed their frontpage a while back to only serve HTML, CSS and a small amount of Js. Let’s have a look on how you can do the same with Next.js, and if the principles still apply today. Is the user getting a better perceived experience when we turn off the client side JavaScript?

Lightning fast SSR React apps with top perceived performance and no (client side) JavaScript

During this lightning talk, let's walk through the pros and cons of server-rendered applications, when you want to have it and what you can expect.

Demystifying server-rendered React apps: Performance & Security

Next.js is one of the most convenient and powerful ways of developing React apps on the web. With powerful features out of the box such as code-splitting, server-side rendering and powerful optimizations, this talk discusses the exciting next steps for Next.js.

Next for Next.js

React is a hugely popular frontend framework that revolutionized the frontend development world. React is built primarily for the browser, while Node has fundamentally different operational constraints to the browser. 

As a Principal Architect and Consultant it has become painfully clear that React’s Server Side Rendering (SSR) is a performance bottleneck for web backends around the world. 

This talk demonstrates a very simple solution that can be dropped into pre-existing React applications to vastly improve the throughput of an SSR Node server (around 20-40x+).

Speeding up React SSR

Panel discussion with Advice Lounge members

With the emergence of more & more powerful & sophisticated managed services like Algolia, AWS AppSync, Cloudinary, Auth0, Amazon Rekognition & Firebase it's now completely possible for front-end engineers to build full-stack web & mobile applications while with almost no back-end code, relying on these services to do the heavy lifting for features like data layers, search, authentication, & authorization & using serverless glue functions to handle what’s left.

In this talk, I'll talk about this philosophy in depth, discuss the options available from different service providers, & then show how (live-code) to build a full-stack React Native application in just a few minutes by using React & AWS Amplify React Native to quickly build a real-world app complete with a GraphQL API, analytics, search, authentication & authorization.

Full-stack React Native in the Era of Serverless Computing

Data fetching makes up a large part of our React apps, yet it's also some of the most complex code we write. GraphQL can help us reduce this complexity, especially when it's combined with intelligent tooling. 

In this talk, we'll explore how to achieve a friction-free state management experience with GraphQL and Apollo right inside your editor.

The GraphQL developer experience

While Animations can be created in React Native pretty easily, real world mobile apps require a combination of several layers of animations, gestures and micro interaction animations to make user experience stand out. 

In this talk we will walk through the process from defining complex animation, to implementing it by going through all stages of animation creation process.

Demystifying Complex Animations Creation Process in React Native

WebGL lets you unlock the power of your GPU. In principle, you can paint almost anything you can dream of. In practice, WebGL is hard, and though projects like three.js make it easier, there are still a lot of hurdles to integrating it into your site in a practical way.

Let's explore how Hooks can make it easier to integrate powerful GPU-driven visuals into our React apps, giving us the best of both worlds: the power of WebGL with the ease and expressiveness of a React component tree.

Painting Pixels with WebGL with React Hooks

Building an app destined for production is a daunting task, especially to replace existing legacy apps available for download in the App and Play Store. We could have pursued a typical release strategy—instead, we got creative with React Native.

We built a strangler-style architecture, a technique commonly reserved for web services, to release our greenfield React Native product user-by-user. The effect was some pretty unique and awesome advantages to how we built and tested our new app—but software is never perfect.

Strangling Legacy with React Native

The biggest React conference worldwide hosted the second annual edition of React Open Source awards, gathering community leaders and top contributors from around the world.

React Open Source Awards 2019 Ceremony

04:54 Gert Hengeveld - Fetch Like a Boss with React Async
10:54 Vicenzo Ferrari - Microjob
15:36 Andy Richardson - URQL: Powerful and Simple GraphQL
20:57 Rodrigo Pombo - Git History

GitNation Open Source Stage

Official aftermovie from React Amsterdam Conference 2019

React Amsterdam 2019

Apr 10 - Apr 12 | Amsterdam, Netherlands