Full day conference of all things react.

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

Event will take place in the neighbourhood of abandoned shipbuilding factory in 10 minutes by ferry from Amsterdam Central station in the venue named Pllek (The Place in Dutch).

React Amsterdam

You love React. You want to rewrite your whole app in React right now. But you have millions of paying users, and maintaining a stable app is absolutely critical. How do you migrate now and optimise for future change?

Slides are here https://speakerdeck.com/reactamsterdam/jamis-charles-paypal-san-jose-migrating-safely-to-react

Migrating Safely to React

Sharing my experience building loveable UIs. Talking about presentational components and pattern types for build scalable web apps in React.

Slides are here https://speakerdeck.com/reactamsterdam/henrique-alves-dadi-plus-london-building-loveable-uis

Building Loveable UIs

Software Engineer at Facebook who works on React Native performance. He will talk about React Native architecture and best practices to get all the benefits of using the platform.

Slides are here https://speakerdeck.com/reactamsterdam/tadeu-zagallo-facebook-london-react-native-architecture-overview

React Native Architecture Overview

In this talk, I’ll introduce our efforts to design a reactive system to automatically re-run GraphQL queries when the underlying data changes. You will see how to make the collaborative parts of your app update in real time with little extra code, how to integrate with a SQL database or REST API, and how this works in concert with GraphQL’s best features to simplify your app’s data management while being predictable and maintainable.

Slides are here https://speakerdeck.com/reactamsterdam/martijn-walraven-meteor-amsterdam-building-reactive-graphql-apps-with-apollo

Building Reactive GraphQL Apps with Apollo

Creating a fully server-rendered app is perhaps the most intimidating challenge a React dev faces. This talk will show you how to wrap your mind around the React, Express, shared routing and data flow Redux and come out the other end with a fully realised server-rendered app.

Slides are here https://speakerdeck.com/reactamsterdam/sven-anders-robbestad-inmeta-consulting-as-oslo-mastering-server-rendered-apps

Mastering Server-rendered Apps

About the good parts of writing styles in javascript using JSS. Comparison to other existing CSS solutions and points about negative aspects got so far.

Slides are here https://speakerdeck.com/reactamsterdam/oleg-slobodskoi-chatgrape-berlin-javascript-style-sheets

JavaScript Style Sheets

Using React for game development may not seem like an obvious choice at first. With React itself being compared to the Doom 3 game engine at F8 2014, we may not find ourselves in such a bad spot. We will take a look at how games are usually structured. Then we will examine different concepts in game development such as the entity-component pattern, object pools, and how we can implement them in React. At the end, we'll put it all together into a React-powered game.

Slides are here https://speakerdeck.com/reactamsterdam/johannes-stein-freelance-berlin-react-for-game-development

React for Game Development

The React Native Playground breaks down barriers to mobile development by making it easy to write React Native apps right in the browser, and test them across platforms and devices.

Slides are here https://speakerdeck.com/reactamsterdam/joshua-sierles-freelance-sevilla-the-react-native-playground

The React Native Playground

At Coolblue we want to keep our employees as happy as possible. That means handing them tools that are fast and easy to work with. Last year we started building new tooling using React. How did we come to this decision and how does it suit a fast growing, dynamic organisation? In this talk I will take you on a trip through the research and decision making that was part of coming to our current development stack.

Slides are here https://speakerdeck.com/reactamsterdam/paul-van-dam-coolblue-rotterdam-introducing-and-implementing-react-at-coolblue

Introducing and Implementing React at Coolblue

Robert is a passionate developer, evangelist, automation geek and open source enthusiast. Apart from broad front-end development skills, his current main expertise is focused on isomorphic SPA development, automation, style guides and component libraries. He maintains an open source Living Style Guide Platform called SourceJS (http://sourcejs.com) and lead the product development team at Liberty Global. Apart from organising the React Amsterdam conference himself, he is representing his development team at Liberty Global and in a short speech will introduce you the UI storytelling processes they follow organising own React components library.

Slides are https://speakerdeck.com/reactamsterdam/robert-haritonov-liberty-global-amsterdam-the-developers-guide-to-the-react-component-libraries

React Component Library

We'll discuss the best tooling and approaches for building ReactJS applications in the NodeJS environment and in the browser using React TestUtils and other third party libraries that make it easy to test your components. We'll see how to build components in a way that makes them more maintainable, testable and easier to work with.

Slides are https://speakerdeck.com/reactamsterdam/jack-franklin-pusher-london-testing-react-applications

Testing React Applications

Unfortunately, React Native, being open-sourced last year, still suffers from the lack of great unified tooling. Managing native dependencies, adding custom fonts, just to name few, are the most common things that require you to know a lot of Objective-C and Java. This talk addresses to solve React Native tooling problems.

Slides are https://speakerdeck.com/reactamsterdam/wroclaw-solving-a-tooling-problem-for-react-native

Solving a Tooling Problem for React Native

A story about connecting, discovering, be free to choose between ‪WebGL‬ / ‎Canvas‬ / ‪‎DOM‬ / ‪#Native‬ or any other UI renderer that will help you learn and better do your projects

Slides are https://speakerdeck.com/reactamsterdam/denis-radin-liberty-global-amsterdam-connect-discover-be-free

React WebGL in Liberty Global

State is the heart of each application and there is no quicker way to create buggy, unmanageable applications then by producing inconsistent state. Hence many state management solutions try to restrict the ways in which you can modify state, for example by making state immutable. But this introduces new problems; data needs to be normalised, referential integrity can no longer be guaranteed and it becomes next to impossible to use powerful concepts like prototypes.

At Mendix these restrictions where unacceptable and so MobX was born. MobX makes state management simple again by addressing the root issue: it makes it impossible to produce an inconsistent state. This makes state management simple and scalable again.

Slides are https://speakerdeck.com/reactamsterdam/michel-weststrate-mendix-rotterdam-state-management-is-easy

State Management is Easy

2016

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

React Amsterdam is a full day two-track conference on all things React, gathering Front End developers across the globe in the tech heart of Europe. React 

Amsterdam is a heir to the biggest React community in BeNeLux and we have our priorities straight: only the highest quality content with careful balance of practical and visionary talks. 

React Amsterdam 2017 will take place in the Kromhouthal - former shipbuilding factory at a waterfront of Amsterdam City center. 

Official aftermovie from React Amsterdam Conference 2017

React Amsterdam 2017 Official Aftermovie

Mood video from React Amsterdam Conference 2017 

React Amsterdam 2017 Mood Video

Wix has been about cutting edge web development for a while, and we're all about TDD. When we started mobile with RN, we struggled to replicate our test-heavy workflow that we'd grown to love. We lacked tooling, best practices, and general know-how. 

In this talk, you'll hear about what works and what doesn't. You'll find out what methods we tried and rejected so you won't have to make the same mistakes, and you'll get pointers toward approaches that we've found work so you can get started on the right foot.

Testing & React Native: Lessons from the Battlefield

React popularized a new way of building user interfaces – components. By splitting our app into small, digestible parts the system as a whole becomes a lot easier to understand.

CSS was made in an era where documents were the height of the web. It doesn't fit easily into component-based systems, making styling one of the pain points of building React applications.

What if we took the best of JavaScript and the best of CSS, and combined them together to create the ultimate solution? Glen Maddern (CSS Modules co-creator) and I sat down and starting thinking about styling in this new paradigm. Let's talk about what we thought about and why we arrived where we did – 💅 styled-components.

Styling React/ReactNative Applications

React Native opens up the world of mobile development for many of us, front-end engineers. 

It not only allows us to use technologies we know already, like React, to provide first-class native experience to our users, but also to support many platforms, like Android and iOS at once, from within the same codebase.

This talk will explore various patterns that turned to be useful over the course of few projects I did. It will also demonstrate techniques that can be used to write truly universal apps, ie. ones that share core across web, native and more.

Universal React

"Reactive programming" still sounds scary to many developers. As if it is an elevated way of thinking, only accessible to the chosen few. Nothing is less true! It is the most natural way to look at programming problems. 

You just might not realize it yet! In this talk, Michel will demonstrate that many complex UI problems, such as form validation and routing, can all be seen as '*actions* that change *facts* which leads to *reactions*'. And as soon as we start distinguishing those concepts in our applications; our code will become more declarative, more concise and less imperative.

Complexity: Divide and Conquer!

A deep dive into how Pinterest migrated their web infrastructure to serve React pages, which required moving a huge amount of code without breaking the site. 

Details on the legacy stack (Django web server and Nunjucks/Jinja template rendering) moving to Node and migrating our templates to React.

How Pinterest Switched Their Template Rendering Engine to React

Javascript has provided us with amazing ways to handle asynchronous logic to provide the best user experience possible. 

React Native is today the best tool to build mobile apps fast, but require extra care when managing asynchronous & offline logic: most people are often going to use your app with weak to no network. 

Get ready to get your app to the next level when you learn how to handle these edge cases

Asynchronous & Offline Magic Tricks on React Native

Adding type checking to your code can be a frustrating experience at first. 

In this talk, Forbes will help you through that initial stage by identifying some of the problems you're likely to experience and giving you the tools to work through them. 

We'll cover adding types to code that initially looks too dynamic to type, adding runtime type checking (and whether that's a good idea) and finally, how you publish your type checked modules to npm.

Flow Typing a React Codebase

At Balsamiq we are rolling out our new web-app to production. A real-world application with real-time collaboration, built using Relay, Redux, node.js, Redis, etc., running on AWS using Convox. 

Even at small/medium scale, if you're serious about building a good product you will eventually have to build a complex stack. 

I will share a few lessons learned in the process: how to structure the code, implement reactivity, writing tests.

A Real-World GraphQL Application in Production

Many web developers haven’t explored WebVR yet. Building 3D Worlds was an intimidating endeavour. Especially with ReactVR there is no reason for that anymore. 

The talk kicks off with the basics of WebVR, shows how to build and navigate rooms using panos in ReactVR. 

Next it shows how to create a couple 3D meshes and how put together a small world using them.

Introduction to ReactVR

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.

Make Linting Great Again

When you start out on React Native project, there is a certain sense of awe as the package manager delivers the first bundle to the simulator. You quickly add some hello world text and maybe even a Pokemon image. Things are really starting to look up… 

And then you need to add another view and you realize that you need to navigate somewhere. So you check out the React Native Docs and are quickly greeted by IOSTabBar, Navigation, and NavigationExperimental modules. 

With so many different options in the core codebase you realize that it’s still a bit of an unsolved problem. Now you’re looking at 3rd party integrations… and you start to wonder, just how should you implement navigation? 

This talk will outline the different approaches to navigation available in React Native and in the RN eco-system, and the pro’s and con’s of each solution.

Navigating React Native Navigation

Find out how choosing a GraphQL client can impact development. From Relay to template strings, we will explore topics such as modularity, schema checking, and static analysis.

Demystifying GraphQL Clients

In this talk I will be detailing how to create custom renderers using the new Fiber architecture, and showing examples exploring some fun things you can do with them.

Fun With Fiber Custom Renderers

Sequencing Audio Using React and the Web Audio API

Generating your client validation rules

Using React to write a decision-making tool for the production studio at Netflix. 

Our application interacts with a large number of data models. We have to take very complex information and distill it so it can be more easily understood. 

Design challenges and solutions. How we developed the various components of our UX toolbox. 

Development process that includes writing unit tests in parallel with application development. How automated testing alongside application development informs our development process.

Building Applications for the Studio in the Cloud at Netflix

The question is not how to avoid bugs when building software. There will always be bugs. 

The question is how quickly can you recover from them. 

Let's go through some ways you can give your app the ability to notify you of these bugs before your users do using React and Redux. 

Start pushing bugs to prod responsibly.

Pushing Bugs to Prod Responsibly with React and Redux

Testing UIs has always been a hard job. In the components era, there are new tools and solutions available that transform completely the way we approach testing. 

From snapshots, through end-to-end frameworks, to style guide testing. In this talk, we'll see some modern (and creative) testing solutions.

Test Like It's 2017

React Native mobile just got easier. Learn how to tap into rapid development by using what the pros are ready to give you!

Coding Mobile with the Pros

Code Push for React Native brings web like release agility to mobile apps by enabling developers to update apps instantly. 

This talk will cover the next iteration of Code Push and how it fits into a complete suite of DevOps services built for called Mobile Center, built for React Native.

Web Like Release Agility for React Native Apps

React Native allows for building great native apps by utilising native mobile components. Apparently handling touch and gestures is quite tricky as it often needs to interact with the application code which runs asynchronously in the javascript VM. 

This talk is going to be about how the gesture system has been designed and implemented in React Native and how to use it to stay out of trouble.

React Native Touch & Gesture

Advanced SSR Caching with React

React Native holds great promise in terms of excellent developer experience with JavaScript and code reuse between platforms. 

The big question is  - do these benefits come at the price of performance? How well can React Native hold its own against purely native implementations?

Performance Limitations of React Native and How to Overcome Them

2017

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 13, 2018.

Mark your calendars for the biggest React community event.

What if your components' state was deterministic?

Learn about implementation of State Machines to manage React Components' state - from the basics of the Automata theory to autogenerated tests.

setState Machine

There will always be a new JavaScript framework to learn. Technology will continue to evolve and change, and developers will continue to rewrite applications. Wouldn't it be amazing if we could just copy paste 90% of our code from framework to framework?

Well, you can. Reactive programming enables just this AND the ability to future proof your code.
Not only can reactive programming help with your solutions to JavaScript fatigue, but the concepts and technology remain consistent from framework to framework.

Learn how to create a more composable application architecture and an arsenal of lego bricks with RxJS, a push based primitive and domain specific language that sits on top of JavaScript.

Reactive Programming Demystified: Drink the Kool-Aid

Get a deeper understanding on the difference between state and data. A deeper understanding of JavaScript itself.

Many teams have been discussing on whether to go the immutable or mutable state route. Flux or MVC or MVVM? Redux, MobX or Apollo? 

Instead of answering the question, in this talk we will look at JavaScript code on a more fundamental level: How do data structures work in JavaScript. What assumptions can be we make if we treat them to be immutable? Or mutable? How can we express concepts like identities, references, collections, mutations, derivations in either case? And can we bent the rules between the two? 

This talk will provide you a deeper understanding of the difference between state and data. A deeper understanding of JavaScript itself. Which will help you to improve the state you manage, regardless of the library you use to implement that.

There and back again: grokking state and data

As apps begin to scale, many developers find themselves asking the question - but where does all the hard stuff go? The complicated data manipulation, the validation, the process flow of our apps. In other words, the business logic. 

If React is designed for the view layer, and we’re using Redux or something similar for the state, then where does the business logic go? 

This talk looks at the different options and tries to answer that question.

Structure Your App's Story With Sagas and Selectors

You start using React Native. Styling? Got it. Animations? A little different, but sure. Now let's add a navigation bar and another screen that we transition to...

This is where you hit a fork in the road. You can either use a library that wraps the native navigation APIs for the platform or a re-implementation of those APIs using the same React Native primitives (View, Text, Animated, etc) that you use throughout your app. 

The former is commonly called “native navigation" because most of the implementation is in "native" and the latter is called "JavaScript-based navigation" because most of the implementation is in JavaScript. 

React Navigation is a "JavaScript-based" navigation solution and React Native Navigation is a "native" navigation library. The choice you make has a significant impact on your app, and it's something you will live with every day while you continue to work on the project.

I lead the React Navigation along with the creator of the project, Eric Vicenti. I'll explain why we think that building a JavaScript-based navigation library is important, what the limitations are (why there is room for both categories of solutions), and I'll show you how to take full advantage of it.

React Navigation

React as an idea and a paradigm is interesting in its own right, and should not be tethered to its JavaScript roots. 

Ever consider whether or not React would be possible in other languages? Other platforms? What are the pros and cons of doing so? 

If we had React in multiple languages, would it make sense to change the architecture of React Native?

Cross-Language React

D3 and React, who should control the DOM? After all, React’s whole purpose is managing updates to the DOM so we don’t have to. 

D3, on the other hand, is a library for building data visualizations, and it too needs access to the DOM. And stepping back, when should we even use D3 and React together? 

In this talk, I will give guidelines on when React should have ownership of the DOM, and when D3 should instead. More importantly, I will cover the interactions and applications that will benefit the most from using D3 and React, together.

D3 and React, Together

This talk will focus on the creative exploitation of React component architecture to render not only to DOM elements, but other targets as well, at the same time. 

We will explore techniques you can use to achieve this, common pitfalls, useful applications of these patterns and not so useful, but wildly entertaining applications of these patterns.

Mixed Mode React

Now that GraphQL takes care of managing data in our apps, is an external state-management library even needed? 

Let's explore all the possibilities and compare the combinations of React, Apollo, Redux, MobX, and Next.js.

React State Management In a GraphQL Era

Stuck in a jungle of inaccessible code? This swiss army knife of tips and tools gives you what you need to slice through the challenges and make your apps inclusive for all users.

Inclusive React: A Survival Guide

React is a component-based UI library that doesn’t provide any built-in components. 

Over the years companies and developers have invested a lot of time and money in development of UI components based on VanillaJS or various frameworks. 

Building components is time consuming, has integration and maintenance risks, and worst of all, distracts developers from the task at hand - actually building the application. 

In this presentation, you will learn how to quickly and easily “Reactify” your existing JavaScript components to use them in React applications.

How to “Reactify” Your Existing UI Components

As the popularity of GraphQL grows, many hard questions are being asked by companies adopting it as an API standard. 

What databases or search engines can I use it with? How do you aggregate data from multiple sources globally? Can GraphQL fetched data be available offline, and if clients mutate it how are conflicts resolved? 

Is there a secure way to control data access based on user authentication? Do subscriptions scale to thousands or millions of users? How do I use it with content like images or video? 

We’ll learn about AWS AppSync, a managed GraphQL service with offline and realtime features, and see the latest features and functionality that have just been released to market.

GraphQL at scale with AWS

React v16.0 comes with some major changes and an update to the core algorithm. With React v16.0 Facebook has completely revised the internals of React while keeping the public API essentially the same.

Learn about what’s new in React 16 which would include a brief explanation of the new algorithm along with focus on few of the new features like Error Boundaries, Portals, Fragments and SSR with React 16.

Rethinking With React 16

React Native provides us with a set of primitives for building mobile applications. A few of these can be aggregated into a "networking" layer that manages the transfer of data. 

This layer was designed to mimic an API we have in the Web, but despite all the similarities, it has its own *qualities* and caveats every good React Native developer should know about. 

In this talk I'll try to guide you through the networking layer in React Native and share some tips and tricks I've learned along the way.

Network Layer in React Native

The React ecosystem has given developers the opportunity to target platforms that were once thought out of reach for JavaScript developers. 

Now, the Viro platform opens the door to developing both AR & VR on both iOS & Android as well as GEAR VR and Google Daydream. 

In this talk, I will quickly go over how to get up and running with the framework and demo an app that allows user to upload images from the conference into a virtual room, as well as walk around and interact with them in Augmented Reality.

React Native VR + AR Made Simple

In this talk we’ll discuss the design philosophy of Elm by doing a comparative analysis between architecture and software development, to understand not only how to get started with Elm, but also why.

Making Programming for People

One of the benefits of React is its declarative interface and the fact that you can describe any advanced UI pattern with a set of components to have a predictable behavior. 

That is, completely different from what we have used to be doing - when writing imperative code. In fact, imperative itself is often blamed on Twitter for being highly dangerous and an anti-pattern. 

In this talk, we will explore different ways of building reusable libraries with React Native (like APIs and higher order components). We will see that imperative code is actually there at low-level and is what makes communication with native world possible.

Imperative is the new black

Push notification is a crucial feature for any app. It helps in engagement and retention of the user. Most users will not return to an app after installing it, and that is where push notifications come into play. 

In my talk I'll be talking about how to achieve this feature with React Native for both iOS and Android.

Push Notification With React Native

The Wix app is a large operation involving ~40 developers from 6 different product groups and a pretty big amount of features. Scaling this project requires code architecture that enables each module to be developed separately, but easily fit the big puzzle.

We’ll discuss the way we do both unit and E2E testing, the way we scale our CI, the way we deploy and how we fix issues in production when they arise.

We’ll also share our plans to how we’re going to scale our app and dev process to support 100 developers a year from today.

Continuous Workflow for a Large React Native App

Smart homes become more and more popular. With this we still use applications that come with smart products to control them. 

In this talk I will show you an alternative how you can create your own apps with React Native, that control smart home appliances.

Controlling Smart Homes With React Native

Well, my first conference talk didn't go exactly like planned.

Public Speaking: How Bad Can It Be

Reprocessing is a new library for Reason, a rather new programming language building on the OCaml + JavaScript ecosystems. 

It’s a lean wrapper around OpenGL and WebGL and allows truly cross-platform games to be written rather easily.

Reason is great for a whole lot of things, but let me take you through a story of trying to write a 2D physics engine in just under 8 hours (Mistakes were made), what strongly typed languages don’t protect you off, and a vision of what you could build with Reason or Reprocessing. 

The universal future is coming, and Reason is orienting itself just right with projects like bsb-native.

Wonky Game Physics in Reason and Lessons Learned

A harrowing tale of tragedy and misfortune: how a year-long attempt to crowbar a React SPA front-end into a monolithic mobile platform serving many millions of users almost plunged over the precipice into failure. 

Prepare yourself for all the thrills, chills and linting errors anyone could ever hope for. Warning: tale may rhyme.

The Tell-Tale Metric: Replatforming with Edgar Allan Poe

I will show you how to use React components approach while creating music with Ableton Live. This talk will inspire you to connect two independents worlds, Music and React.

Music of React

The story is about how we DDOS ourselves at Product Hunt for about an year because of the way we've built our SSR React server.

How We DDoS Ourselves with SSR

First annual React Open Source Awards, where our MC's will name the winners and present prizes to project representatives. Check out the nominees here https://react.amsterdam/awards.html

React Open Source Awards 2018

2018

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. 


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 Official Aftermovie

2019

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 engineers across the globe in the tech heart of Europe. 

Next to the main conference day, be prepared for a number of hands-on workshops, pre-party meetups, and mini conferences throughout the week of the event.

My experience working both on free and paid tools, and which type of tool makes sense depending on your team and needs.

In this talk I’m going to convince you that paid UI components will solve all your problems, and that you should immediately give me all of your money. Maybe. Or perhaps I’ll draw on my experience working both on free and open source tools (jQuery, jQuery UI, NativeScript), as well as paid tools (Kendo UI, KendoReact), and discuss which type of tool makes sense depending on your team and needs. In any case the talk will go fast because lightning is in the title.

Why Paid UI Components Aren’t Evil

2020

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

In addition to the offline event on September, there will be an alternative FREE virtual conference on April 17, with the attendees with valid September tickets getting exclusive access to the online conference content via a streaming platform.

React Summit

Get a glimpse into the future where we will control apps with our thoughts.

What is the future of user interactions? Will we continue using web and mobile or will we switch into VR and AR completely? What is our UX today on web and mobile and how it will change when the digital world will bridge into new dimensions. Would we still use keyboard and mouse or gestures or will we use something else? 

In this talk we will get a glimpse into the future where we will control apps with our thoughts. Literally. It’s not a thought experiment, but a journey into our brainwaves with consumer EEG headset. We will explore how we can use them and AI to create futuristic experiences, which will lay a foundation stone to our future interactions with the digital world.

Controlling Apps with Your Mind and AI

Learn how you can improve a codebase by applying and creating abstractions more thoughtfully.

Are you the kind of programmer who prefers to never see the same code in two places, or do you make liberal use of copy/paste? Many developers swear by the Don't Repeat Yourself (DRY) philosophy while others prefer to Write Everything Twice (WET). But which of these produces more maintainable codebases? 

I've seen both of these approaches lay waste to codebases and I have a new ideology I would like to propose to you: Avoid Hasty Abstractions (AHA). In this keynote, we'll talk about abstraction and how you can improve a codebase by applying and creating abstractions more thoughtfully as well as how to get yourself out of a mess of over or under-abstraction.