ReactEurope brings you the best and most passionate people from the very core teams to the coolest people from the community we love.

After changing the way we think about state management in JavaScript applications, the way we write native mobile apps with React Native, how we interact with remote data with GraphQL or even how we manage CSS, the React community keeps innovating and its ecosystem growing.

At this conference, you will learn how new projects such as ReasonML will bring web and mobile React Native apps to the next level and how projects such as React Native Web, React Primitive and Expo make it easy to write, deploy and share code on all platforms quickly. The conference aims to give talks that inspire and explore new futuristic ideas dealing with all the techs we enjoy from the React ecosystem such as React.js, React Native, GraphQL, Relay, Universal apps, ReasonML, Webpack, inline CSS and more.

ReactEurope is also a great occasion to socialize, meet new people and old friends, hack together, taste delicious food and have fun in the beautiful city of Paris.

For more than a year now, React.js has changed the way we think about client-side applications through concepts such as the virtual dom, one-way data flow, immutable data structures and isomorphism.

ReactEurope is the occasion to meet the core team and other awesome members of the community to learn, socialize and have fun in the beautiful city of Paris with great food, entertainment, connectivity, prizes and more!

ReactEurope

Keynote

React allows you to write styles inline and bypass a host of CSS shortcomings. Scope, dependency management, dead code elimination, these problems go away when adding your styles directly to components. But it's not all rainbows and unicorns. Things like theming and media queries become much more difficult when all your styles live directly on components. In this talk, we'll look at how to solve these problems with contexts and plain old JavaScript. We'll also look at the role of container-components and when it's better to "just use CSS."

Inline Styles: themes, media queries, contexts, & when it's best to use CSS

Flux is most often used to implement shared state within a single window. But done properly, this architecture can be used to implement real-time, multi-user shared state between many users of the same web applications. Using HTTP requests to dispatch stores, and Websocket to broadcast updates, Flux over the Wire has the potential to trivialize several hard problems. While the idea of using Websockets to back Flux is rather straightforward, doing it in a way that scales up to tens of thousands of concurrent viewers can prove challenging. In addition, Flux over the Wire offers an interface which considerably eases server-side rendering, as it completely abstracts data fetching and data syncing from the React views that tap into its stores and dispatch its actions. 

Flux over the Wire

React Native's architecture has opened up many possibilities for re-inventing the clunkier aspects of UX construction on traditional platforms, making it easier and faster to build world-class experiences. This talk will walk through building an advanced gestural UI leveraging the unique power of the React Native layout and animation systems to build a complex and fluid experience.

React Native: Building Fluid User Experiences

At React.js Conf last January, we introduced the idea of GraphQL: a data fetching language that allows clients to declaratively describe their data requirements. Let's explore more of GraphQL, it's core principles, how it works, and what makes it a powerful tool.

Exploring GraphQL

Your front and back ends are already successfully in production but you don't have to miss out on the productivity that React brings. Forget the rewrites, this is brownfield!

Don't Rewrite, React!

React’s unique strength is bringing to JavaScript development some of the benefits previously exclusive to more radically functional languages such as Elm and ClojureScript, without forcing you to completely eschew local state or rewrite code with exclusively immutable data structures. In this talk, Dan will demonstrate how React can be used together with Webpack Hot Module Replacement to create a live editing environment with time travel that supercharges your debugging experience and transforms the way you work on real apps every day.

Live React: Hot Reloading with Time Travel

Relay is a new framework from Facebook that enables declarative data fetching & updates for React applications. Relay components use GraphQL to specify their data requirements, and compose together to form truly modular applications. This talk will explore the problems Relay solves, its architecture and the query lifecycle, and how can you use Relay to build more scalable apps. We’ll also see examples of how Relay powers applications as complex as the Facebook News Feed.

Relay: An Application Framework For React

Zalando's tech department has built most of their platform in-house, using open source and cutting-edge technologies such as React, Scala, Python, Cassandra, Clojure, AWS, and Docker. We work in small, agile, autonomous teams and build our systems around five key principles: API First, REST, SaaS, cloud, and microservices.

Zalando

Paradoxically that today it is easier to create GUI than Text UI. Developer has an arsenal of different GUI libraries and layout engines. When one decides to write Terminal Text UI app he faces obstacles of Text UI DSL Library, imperative layouts, constantly increasing complexity and underdeveloped approaches. In this talk I will show you how to ask browser layout engine for help, how to avoid slavery of DSL and build declarative Text UI using only web-technologies like HTML, JS, CSS and React.

Back to Text UI

React has always been about the Virtual DOM. A nice way to render HTML (and some of SVG and maybe some Web Components). Although there's also react-art, react-three, react-canvas, react-curses... Oh, and react-native! Even if you bottom out at HTML, most of what React does really well is rendering to OTHER React components. Meanwhile most projects still try to retrofit our needs into HTML and CSS primitives. I'll talk about why the DOM is flawed and how it is becoming a second-class citizen in the land of React apps.

DOM as a Second-class Citizen

Rangle.io

Automattic

Thinkmill

Red Badger

Soon after React Native's release, I started working on this tool to help share and test React Native apps: the React Native Playground (https://rnplay.org). Soon after, a team build around it and made it awesome in a matter of weeks: picking up sponsorship from Appetize.io and building an iOS app with React Native itself.  This talk is a quick overview of how it was built, highlighting the importance of early adopters and runnable examples.

Building the React Native playground

Why does it become difficult to create and maintain components as your single page app ages?
What if components were completely decoupled from other components and the global app state?

How to design components that are truly encapsulated?
This talk walks you through the development of Cosmos[0], a one year journey to create an elegant tool for designing encapsulated React components. How it started, the milestones and insights along the way, and what you can do with it today (live demo of Flatris[1] components insideComponentPlayground).

[0] http://github.com/skidding/cosmos
[1] http://skidding.github.io/flatris

Cosmos

Este.js is the most complete React/Flux dev stack. The perfect cure for developers already tired with mainstream frameworks  like Angular or Ember.

It ships with lots of goodies including immutable single app state, top-down data passing and intl translations out of the box!  So let's use all these features to start building native apps!

In this lightning he is walking you through the process of transitioning Este.js dev stack to the native world  outlining the most common problems and pitfalls we needed to face, including:
  - Project setup - preparing the native application ecosystem and reorganising the folder structure
  - Migration - moving the codebase to React Native, deciding what files can be just dropped in and what needs to be rewritten
  - Styles - replacing stylesheets and mixins with StyleSheet showing good-to-use patterns we can use to make it all maintainable
  - Routing - handling lack of the React Router with custom navigation on top of Navigator

http://github.com/grabbou

Going native with Este.js

Rule number 1 of context-club, is don't talk about context. It's undocumented and subject to change, but lots of libraries need it and use it. This talk promises to be a humourous look at context, and will go through the concepts and APIs, whilst attempting not to mention the word "context".  Some things are due to change in 0.14, and there's plenty of discussion going on about how to move forward with it, so let's get prepared.

https://github.com/bruderstein

Everything they don't tell you about context

Sunil works as a UI architect for myntra.com, which famously shut down its website earlier this, year to go app-only. He talks about how he dealt with the situation personally / professionally, he wrote some thoughts about this https://myntra.github.io/2015/05/17/personal-thoughts-on-the-shutdown-of-the-myntra-website/,  how React saved his career and sanity, and what their new stack is starting to look like.
    
Featuring disto, his flux framework with full record / replay, dev tools, hot loading, etc, and cortex, myntra's in-house native 'content system', to be open sourced later this year.

Disto

d3 has been the de facto standard when it comes to data visualisations for a while now and React has recently emerged as the go-to library for building user interfaces. d3 and React are both data-centric libraries, making them a natural fit; d3 takes a data-driven approach and React aims to solve the problem of data changing over time in the context of building large applications.
    
In recent months, there have been various approaches documented on how to effectively use d3 and React together. In this talk, I will be going through what I have learned from all those approaches and how I go about creating reusable chart components with some examples of things I have already built.
    
All reusable components that I make use of and present during my talk will be open sourced.

http://ansavvides.github.io/
https://github.com/AnSavvides

D3.js with React

In the first wave of Flux frameworks we built our own (it seems everyone had).

However, we don't like the amount of boilerplate code we have to write, and we haven't found any Flux library that would solve that.

There's a light at the end of the tunnel, and it's called Relay. Two problems. Relay is not here yet. And it's not designed to work with REST. Our entire platform is built as a collection of REST services, and we have JS SDKs that wrap around the endpoints.

So the question is, can we have *something* that is as simple to integrate with React components as Relay is, and lets client-side models deal with data persistence?

We have a POC and a plan. At this point I'm not sure if the plan will work out, which makes this talk proposal really interesting - either it's going to be about a brand new library, or it will be a reflection on what went wrong / why it can't be done. (But hey, we're engineers, it *has* to work. Trust me.[0])

[0] http://cdn.mothership.sg/wp-content/uploads/2014/11/engineering-meme-3.jpg

http://petrbela.com
https://github.com/petrbela
https://github.com/chute/turbine

Relay-like REST-friendly Immutable-based data lib

Most React developers already use a build pipeline to transform their JSX into vanilla JavaScript. This is usually under-utilised only doing basic transformations such as concatenation, minification and linting. In this talk, Sebastian will go over how this already existing infrastructure can be further utilised to perform even more significant code transformations such as transpilation, optimisation, profiling and more, reducing bugs, making your code faster and you as a developer more productive and happy.

Improving Your Workflow With Code Transformation

A talk on the past, the present and the future of animation, and the place React can potentially take in this. I will be focusing on a few experiments on animation I've done, specifically: react-tween-state, react-state-stream and some unreleased transition-group related thoughts and work.

Make sure to checkout react-motion demoed in this video: https://www.npmjs.com/package/react-motion

The State of Animation in React

At Twitter, teams have starting adopting React because it’s enabled UI engineers to forget about time when writing rendering code. And we've started exploring similar simplifications in the data layer, embracing the UI’s role as part of a distributed system. First, we'll share how user experience choices are a primary influence on how we design the data layer, especially for teams developing new products with full-stack capabilities. Working with data from multiple backend services has powerful benefits, and shapes the problem space for UI engineering. Next, we'll look at how React and Flux approaches can help in our problem scenarios. Yet even after the advances in React’s component model, the data layer is still an important source of complexity as an app grows and changes over time. Finally, we'll look at new approaches we’ve been exploring, and how designs like decoupling 'recording facts' from 'computing views of those facts' have influenced UI engineering. These designs nudge teams towards simplicity when creating impactful user-facing improvements like real-time updates, optimistic commits, and graceful handling of network outages.

Simplifying the data layer

React.js is changing the way developers think about mobile app development, especially with the recent announcement of React Native. However, in many ways hybrid (web + mobile) app development is here to stay for a large number of mobile apps. Everyone's heard "you can't build a native experience in a web view". We disagree. You just have to know the right tricks. And when you do, the web becomes an incredibly powerful platform for delivering amazing user experience using the technology you know. At Thinkmill in Sydney, over the course of developing several commercial apps, we've experienced the power of using ReactJS for mobile apps built on web technology, and developed a framework we call TouchstoneJS (which Tom Occhino called "the best looking and feeling implementation of this that I've seen" during the Q&A session at React Conf) to share this capability with developers around the world. In this talk I'll share what we've learned and how we've approached the unique challenges of mobile web apps - with tools that are useful to all developers building touch interfaces with React, as well as a walkthrough of our development process and framework. I'll also talk about what you can do with the web platform that you can't with native apps, and even React Native.

Going Mobile with React

Since May 2014 over 100 people have contributed code to React Router and many, many more have filed issues, given talks, and used the router in both server and client environments. It has been mine and Ryan's privilege to work with and learn from these wonderful people and to guide the direction of a library that we hope will help us all build amazing products and tools with React over the next few years.

This year we are introducing support for React Native and we are working closely with the Relay team to ensure the router meets the needs of React developers everywhere React runs. More importantly though, we are focused on bringing great experiences to consumers of applications built using React Router. In this talk, we will discuss how your users can benefit from the many tools the router provides including server-side rendering, real URLs on native devices, and much, much more.

React Router

In this talk, we'll take a deeper dive into putting GraphQL to work. How can we build a GraphQL API to work with an existing REST API or server-side data model? What are best practices when building a GraphQL API, and how do they differ from traditional REST best practices? How does Facebook use GraphQL? Most importantly, what does a complete and coherent GraphQL API looks like, and how can we get started building one?

Creating a GraphQL Server

Flux provides a good framework for building rich client applications, but did you know you can reuse the flux architecture for server rendering? In this talk, I'll walk you through an isomorphic Flux architecture to give you the holy grail of frontend development. With this architecture you'll be able to reuse all of your application code on the server and client without worrying about server-side concurrency issues that you may see with stock Flux. Once the concepts have been explained, I will introduce the open source libraries that we have open sourced and are powering many of Yahoo's high-traffic web applications.

Isomorphic Flux

React provides us with a lot of tools for building components, but isn't prescriptive about how we use those. Objects can have props, state, and instance fields. When is it best to use each? We've heard a lot about pure components, but how do we make pure components when we have to deal with the realities of a stateful world? How do we make more complex components whose props actually represent them? We'll cover how we've answered these questions at Khan Academy, including techniques and patterns to make dealing with large pure components simpler, as well as current open questions.

Building submarines that don't leak

Chrome is great, but 3rd party extensions make it better. The iPhone is great, but apps make it better. You React-app may be great, but imagine if you could safely and robustly allow 3rd party extensions to enhance it. We'll talk about specific features of React & Flux, React CSS, programming design patterns, and custom libraries, which can turn a static application into a dynamic platform that an ecosystem of developers can build on top of. We've built a highly-extensible desktop email client with React & Flux on Atom Shell, and we'll also show concrete examples of where these tools enabled a 3rd party ecosystem of email plugins. Our goal is for you to take away how to use React to be more than just great application developers, but now great platform developers as well.

How React & Flux Turn Apps Into Extensible Platforms

Q&A session

2015

ReactEurope is back on 2-3 June 2016 to bring you the best and most passionate people from the very core team to the coolest people from the community we love. 

The conference aims to give talks that inspire and explore new futuristic ideas dealing with all the techs we enjoy including React.js, React Native, GraphQL, Relay, Universal apps, inline CSS and more.

ReactEurope is also a great occasion to socialize, meet new people and old friends, hack together, taste delicious food and have fun in the beautiful city of Paris.

Join us at ReactEurope Conf to shape the future of client-side, mobile and universal applications!

A year ago, Dan introduced Redux as an experiment in making the Flux architecture support hot reloading and time travel. Since then, Redux eclipsed the classic Flux in popularity, found converts in React, Angular, and Meteor communities, and spawned a rich ecosystem of libraries and tools. In this talk, Dan reflects on the past, present, and future of Redux.

The Redux Journey

Navigation on native mobile apps can be very tricky. Unlike the browser, mobile apps have no built-in navigation system, and the navigation state is often deeply nested. Animations and gestures are critical for mobile apps, and are tricky to get right. To help the community address these concerns, I will introduce and demo our new navigation system for React Native, and show what innovations we can bring back to the web.

Native Navigation for Every Platform

Everyone talks about how performant React is... but why? What makes people talk about how speedy React is? In this talk, you'll learn *why* people talk about React being fast, and what you can do to make it faster.

A cartoon guide to performance in React

Animations are one of the most important elements of modern, well-crafted mobile apps. Animation effects possible to achieve using native SDKs exceed by far the capabilities of mobile browsers, hence based on the quality of animations it is easy to tell the difference between truly native apps and ones that run in a webview. React Native provides several APIs for handling animations (layout animations, native navigator, Animated.js library). Some of them lets you directly leverage native SDK capabilities, others require round-trips over native-to-JS bridge. We will dive a little into implementation details of each of those methods to explain their limitations. I will also discuss native-animated-driver (the project I've been recently working on), and give some tips on how to make your React-Native app stay at 60FPS.

React Native ❤ 60FPS -- Improving React Native

I've been directly involved in the open source process of many Facebook projects such as React, React Native, css-layout, mention-bot and Jest in the past 3 years. We've tried a lot of different things in order to grow a community around those projects and I want to take this opportunity to share what worked for us and can likely be applied to other projects.

Being Successful at Open Source

Facebook has been using GraphQL in production for almost four years; today, it serves over 300 billion queries a day and its schema has nearly 10,000 types. In building this API, we’ve developed a set of best practices for designing an understandable and scalable GraphQL schema. Based on real examples in Facebook’s production GraphQL API, we'll discuss common GraphQL patterns, how they differ from other best practices, and their implications on server and client design.

GraphQL at Facebook

Many have heard about Flow and some are using it a lot already, but what is it that makes Flow so powerful? I'll dive deeper into Flow, how it works, and why we're using it at Facebook to improve the quality of our code at scale.

A Deepdive Into Flow

We have brilliant tools and highly efficient practices for developing and debugging flux applications. But it’s not that easy when it comes to deal with troubles in production, especially with bug reports like “nothing works”. The predictable states could help a lot, but user actions along with API calls are not that predictable. 
This talk will dive into how to firmly debug client-side state for web and native flux applications, how to reproduce the exact state despite of diverse factors, track the original cause and get fixes out to users. You’ll push development to the next level and improve user experience.

Debugging flux applications in production

JavaScript and the React community have evolved over the years through all the ups and downs. This talk goes over the tools we've come to recognize, from Angular, Ember and Grunt, all the way go Gulp, Webpack, React and beyond, and captures all these in a unifying mental framework for reasoning in terms of abstraction levels, in an attempt to make sense of what is and might be happening.

On the Spectrum of Abstraction

The Lean Startup advocates an iterative approach to finding the right product and market, with a constant cycle of building, measuring and learning. Lean Analytics is a new approach which dives deeper into the measurement component of this process. With Lean Analytics we can measure the state of the application and make informed decisions about the product and its vision based on end user interactions. Redux allows us to maintain our application state in a single store, and provides a single location for state changes. By hooking analytics into this event loop we can infer a lot about end user behaviour. Our Redux Segment middleware allows you to draw deep and rich analytics from your Redux application with minimal configuration. In this talk, we will walk through the process of adding analytics to your existing Redux application and share our implementation which works with segment.io.

React Redux Analytics

Leveraging React and Redux to Make Your App Write Tests For You

Automated Test(Writ)ing

Nuclide as a React IDE

Understanding Your Component Ecosystem

Going from 0 to full-time software engineer in 6 months: How I did it and how you can do it too (at any age)

Going from 0 to full-time software engineer in 6 months

Redux and Web Workers on the Frontend

CSS in JS without Compromise

Solving a tooling problem for react-native

Making Javascript Initialize Faster

Subdivide: User Defined UI

Shallow Rendering All The Way Down

Cross-platform charting with React & React Native

Tools shape our thinking. The "React Way" of thinking has already found many applications beyond building user interfaces. Particularly, React's functional, component-based design makes it an ideal candidate for building a better Visual Programming Environment. We'll examine how to overcome challenges such as lack of standardized APIs and limits of composition, and show how we can drastically improve the way humans create digital artifacts today.

Evolving the Visual Programming Environment with React

Remember when React Native beta access was shared illicitly via flash drives behind closed doors? Since its first release in January 2015, React Native has experienced incredible growth and adoption. We'll discuss the evolution of React Native over the last year, looking at the maturation of the library as well as the ever-increasing community around it. From the release of Android support to the focus on better build systems and asset management, to the influx of interest from "traditional" mobile developers, there's a lot to take in. Understanding how we reached the present will help us see where we're going next. What problems remain to be solved? How will React Native continue to evolve and grow?

React Native Retrospective

Hot reloading makes for a great Developer Experience, but we can do even better. Using interactive style guides that show our components in a variety of different states we can test their look and feel in diverse situations.
Collaborate with designers and marketers on testing them and pushing them to their limits. UI fuzz testing can help us discover combinations of props we haven't even thought of so we catch potential UI issues early on.
In the future, we might be able to detect styling and layout issues. Integrating these checks into our Continuous Integration system means we could catch potential problems with our components before any user can see them.

The Evolution of React UI Development

Recompose is a functional utility library for React components. It provides a suite of higher-order components that encapsulate common React patterns. In this talk, I’ll describe the history and rationale of the library, and discuss strategies for building React apps for scalability and reuse.

Recomposing your React application

With React Native, some of your applications core functionalities, that would previously be written in native code, are now implemented in JavaScript. And that's great! Now you can use things like Hot Module Reloading and ship updates to your app whenever you want. But what about performance and User Experience? Is JavaScript fast enough to replace native code? I'm going to talk about some of the challenges we are working on at the React Native Performance team.

JavaScript, React Native and Performance

Imagine how easy building your web application would be if all of your data was available in-memory on the client. Falcor lets you to code that way.

Falcor is the open-source, JS data access framework that powers Netflix. Falcor lets you represent all of your cloud data sources as one virtual JSON model on the server. On the client, Falcor makes it appear as if the entire JSON model is available locally and allows you to access data the same way you would from an in-memory JSON object. Falcor retrieves the model data you request from the cloud on-demand, transparently handling all the network communication and keeping the server and client in sync.

Falcor: One Model Everywhere

li.st for Android is likely one of the largest pure React Native codebases around at this time. The only native modules that we use are generic and included in Exponent because they would apply to many other apps (social login, image picker, push notifications) -- otherwise it's JavaScript all the way down. The functionality that li.st provides covers a wide range of common patterns that you'll find in most apps, which is one of the reasons why we wanted to build it in the first place: to test the limits of Exponent and React Native with in real world scenarios. Living on the edge with both React Native and Exponent, you'd be right to guess that we ran into our fair share of problems. You're going to encounter most of these problems if you are building a big React Native app (possibly some for React DOM apps) in the next year and I'm here to let you know that you're not alone and arm you with some knowledge you'll want when building a large app.

Building li.st for Android with Exponent and React Native

GraphQL was open sourced last year at ReactEurope. Since then, great progress has been made in the open-source ecosystem. Within Facebook, we've experimented with several ways to extend GraphQL beyond a simple request/response model to solve some common problems that product developers face. In this talk, we'll provide a brief review of the open-source work from the past year and then describe several of our internal experiments that will determine the future of GraphQL.

GraphQL Future

GraphQL was conceived almost four years ago to serve the needs of Facebook's iOS developers. Outside of Facebook however, non-JavaScript GraphQL clients haven't received as much attention. In this talk, I will explore the use of GraphQL to build native mobile apps. I will discuss some of the design decisions faced when developing a native GraphQL client, and illustrate these with examples from a Swift client. Among other things, I will show how to exploit code generation and the strongly typed nature of GraphQL to present a typed interface to query results.

Building native mobile apps with GraphQL

This is the Q&A that took place at the end of the 2016 conference with members from the core team of react.js, react native, graphql, flowtype, babel.js, reason and more.

Question and Answers

Shoutem Rangle.io

Redbadger

Coursio

http://djcordhose.github.io/react-intro-live-coding/2016_react_europe.html#/

Checking React with Flow

BlueKit

Manage side-effects efficiently with Redux Saga

Choosing the right framework

http://bruderste.in/talks/unexpected-react-lightning/#1.0

Testing React Components

A cool thing you can do with redux

http://olegilyenko.github.io/presentation-implementing-graphql

Implementing GraphQL

GraphQL Backend as a Service

Higher Level GraphQL

2016

ReactEurope is back on 18-19 May 2017 to bring you the best and most passionate people from the very core team to the coolest people from the community we love. 

The conference aims to give talks that inspire and explore new futuristic ideas dealing with all the techs we enjoy from the React ecosystem such as React.js, React Native, GraphQL, Relay, Universal apps, Webpack, inline CSS and more.

ReactEurope is also a great occasion to socialize, meet new people and old friends, hack together, taste delicious food and have fun in the beautiful city of Paris.

Join us at ReactEurope Conf to shape the future of client-side, mobile and universal applications!

Dominic tals about what makes inferno’s so fast and how he and the team are bringing this experience to react.

What I Learned Benchmarking React

Jest was adopted widely across 100s of companies recently and provides an immersive testing experience. We’ll take a deeper look at JavaScript Testing with Jest and what it takes to turn a tool into a product with a delightful experience.

Building High-Quality JavaScript Tools

The new wave of frameworks won’t be frameworks at all.
In this talk, Sunil will explore how compilers and bundlers will replace certain runtime dependencies, without degrading the development experience that we all love and depend on. We’ll discover strategies of incorporating these ideas into any regular app, how we can leverage component models from react/vue/ember etc to enhance these ideas, and my own take on tooling in this framework-less world.

La nouvelle vague

Worse is Better: The Upside of JavaScript Fatigue

There’s a big push to improve React’s perceived performance. And WebAssembly is fast. Could WebAssembly be part of the solution? In this talk, code cartoonist Lin Clark will look at what WebAssembly could mean for React’s performance, and how the new Fiber architecture makes that even more of a possibility.

What WebAssembly means for React

Imperfection

Practical Confidence: Using Types to Help Your Computer Help You

If only React Native apps could be highly extensible- such that a single experience within an app could be published and installed into other apps. If your screens are built with sufficient isolation, they can be portable between apps, platforms, and navigation implementations. In this talk, we will discuss how this ultimate modularity can be achieved simply by utilizing reducers and single-directional data flow. Then we will use React Navigation to quickly build a new experience with these techniques, and see how portable it really is.

Maximally Modular Apps with React Navigation

React’s server-side rendering speeds up page load times, but it’s far from the only performance boost we can get on the server. In this talk, I’ll discuss how exploiting streaming and parallel processing on the server and browser can get us faster time to first byte, faster time to first paint, and faster time to full interactivity.

How Streaming Can Supercharge React

The Rise of Low Configuration Tooling

Detox — Graybox End-to-End Tests and Automation Library for React Native

Serious graphics on React Native

Expo Snack

return null;

Thousand ways to navigate in React Native

Devtools for GraphQL

Creating apps from scratch is stupid!

Leveraging code-splitting in React

Smarter code-splitting & preloading for React apps

Quantifying Best Practices

How to create a React Native reusable component for existing Android apps without knowing a thing about npm or node_modules

Last years there have been great developments in state management libraries. Both Redux and MobX sprung from the React community and provide stand-alone, generic state management solutions. Both have gained big in popularity, and both have their own strengths and weaknesses. What can we learn from both approaches? Can we get the best of both worlds? Can we add a little Boabab and Cerebral to the mix? Is it possible to create a transparent reactive, snapshotable state container. With support for JSON patches, replayable actions, serialization, complex object graphs. With Redux & MobX compatibility, strong typing and runtime type checks out of the box. Get a glimpse of what next-gen state management might look like with mobx-state-tree. Largely designed by the MobX community and enforcing many best practices that have evolved over the last year.

Next generation state management

Composition

Twitter Lite is a complex PWA built with Node.js, React, Redux, Service Workers, and Webpack. This talk will cover how our team designs and builds one of the world’s most visited web apps. You’ll also hear about React Native for Web; how we approach network and render performance challenges; and how we use new web platform features.

The making of Twitter Lite

Authoring VR content is time consuming and technically challenging, I’ll be providing an overview of how we are using the core strengths, merits of React Native and building on it to drive and improve app development within Oculus. I’ll go into more detail about the runtimes of both the native Android version and WebVR versions and how we utilize the improved engineer workflow the technology gives us access to.

The runtimes of React VR and use at Oculus

With the advent of libraries like React, Redux and Immutable.js, it’s clear that there’s a shift away from imperative and object-oriented in the front-end towards a more declarative and functional approach. Meanwhile, libraries like RxJS and Mobx are spreading the use of Reactive Programming to model UIs via discrete, asynchronous event streams. How can we combine the best of both functional and reactive paradigms to model and build predictable UIs that control themselves?
In this talk, Preethi will explain what “Functional Reactive Programming” is, how close React / Redux / Mobx / RxJs and others come in realizing Functional Reactive Programming, and what’s still fundamentally missing from these tools to achieve a true implementation of FRP. Lastly, she’ll describe when and why FRP is suitable (or not suitable) for building predictable and scalable UIs.

Functional && Reactive

Relay Modern

React provides an abstraction between the description of a UI and the details of how it’s rendered on a given platform. The problem is that div and span are a hidden dependency on react-dom, and similarly, React Native’s View is an explicit dependency on Native, making both not quite as “cross-platform” as we want them to be. Learn how we as a community can get around these issues, and what we can unlock by doing so.

React as a Platform: A path towards a truly cross-platform UI

We are biologically trained to notice motion: evolutionarily speaking, our survival depends on it. For this reason, animation when done well can guide your users. It can aid and reinforce spatial maps of our interfaces, and give us a sense that we understand interactions more deeply. For this reason, animation is incredibly powerful to convey meaning, but only when done well.
But animating the virtual DOM comes with some intricacies that affect our implementations. In this talk, we’ll go over animating in React with a variety of methods, comparing and contrasting each. We’ll cover add-ons like ReactCSSTransitionGroup, using external libraries like GSAP, React-Motion, motion using RxJS, and transitioning state with D3. We’ll look inside some real systems, breaking down how we can create reusable components of animation principles for interchangeable yet cohesive patterns.

Animating the Virtual DOM

Animations can make your app more pleasing to use and help the user understand state changes. This talk will give best practices on when to use them and an introduction of how to implement them in React Native with a deep dive into a new strictly declarative approach similar to CSS animations and transitions.

A Novel Approach to Declarative Animations in React Native

With React, Redux, ImmutableJS and friends, frontend development strive towards the functional approach proving to yield increased readability and maintainability. However, working in JavaScript, we never truly commit to the paradigm, but what if we did? The Elm language goes fully functional and as suspected, it comes with an ocean of benefits!

Putting the fun in functional with Elm

This talk will go over our approach of incremental React Native adoption within an already established native app. We will discuss the various problems that arise from using React Native in such a “hybrid” app model and in particular, discuss inter-app navigation and embedding React Native views into native shells and vice-versa.

Integrating React Native with Native Infrastructure

Each video has a comment with the code snippets being used. To get started, you just need to install "yarn add global create-react-native-app" and generate your first app. You can also find more info here https://reacteu.xyz/

React Native Workshop - Getting started

Q&A Panel

code posted at 55:22 https://gist.github.com/patcito/b76e4a1fe2549ef2c750c4ba6cb28d80

Each video has a comment with the code snippets being used. To get started, you just need to install "yarn add global create-react-native-app" and generate your first app. You can also find more info here https://reacteu.xyz/