Make sure to get in early.

Learn from the best with a 2-day workshop this May 15th and 16th from 8:45am to 5:30pm. This is not a repeat of last year’s workshop but a totally new workshop. This workshop will focus on helping you build more advanced and professional apps with a real native like experience. Core React Native contributor Brent Vatne and the expo team will guide you through this workshop on how to build great React Native apps. This workshop requires an intermediary level in React Native. Here are the full details:

• Animated: Review basics, native driver, and tracking.
• Gestures: react-native-gesture-handler, integration with Animated.
• Universal components: react-native-web, share code between iOS/Android/web.
• Camera: take photos, save to disk, upload. Read from photos already on disk.
• OpenGL: how to use shaders on React Native views.
• Offline support: keeping your app useful without connectivity.

…and other assorted topics of interest!

In this workshop we will dive into the basics and more advanced usage patterns of mobx-state-tree. It is a tool that helps you to model complex problem domains and combines the best features of the modern state technologies out there.

Click here to see covered subjects

1. The state tree philosophy.
2. Modelling your data structures and state
3. Views & actions
4. Asynchronous processes
5. Composing trees and types
6. Connecting to GraphQL
7. Writing your own middleware

This workshop requires an intermediary level in React.js.

This 2-day workshop will skip the basics and get straight to teaching patterns and techniques that apply directly to developing professionally with React. Using real-world examples, we will cover how to take advantage of React and some of its community packages’ features to build maintainable, performant applications.

Click here to see covered subjects

• Project Architecture
• Component Design
• Patterns for Props
• setState Master Class
• Using Context Responsibly
• HoC’s
• Routing
• Redux Patterns
• Forms
• SSR
• Perf & Optimization
• Scalable CSS-in-JS
• Testing
• Render Props
• Static Typing with Flow
• Universal Components
• Error Boundaries
• Portals
• Utilizing Developer Tools

Make sure to get in early.

Learn from the best with a 2-day workshop this May 15th and 16th from 8:45am to 5:30pm. This is not a repeat of last year’s workshop but a totally new workshop. This workshop will focus on helping you build more advanced and professional apps with a real native like experience. Core React Native contributor Brent Vatne and the expo team will guide you through this workshop on how to build great React Native apps. This workshop requires an intermediary level in React Native. Here are the full details:

• Animated: Review basics, native driver, and tracking.
• Gestures: react-native-gesture-handler, integration with Animated.
• Universal components: react-native-web, share code between iOS/Android/web.
• Camera: take photos, save to disk, upload. Read from photos already on disk.
• OpenGL: how to use shaders on React Native views.
• Offline support: keeping your app useful without connectivity.

…and other assorted topics of interest!

This one-day workshop will teach you everything you need to know to incorporate GraphQL into your application. First, we’ll start by building a GraphQL server, covering best practices for architecting your schema, error handling, and caching. You’ll also be exposed to some advanced backend topics such as schema stitching.

Next, we’ll connect our GraphQL server to a React application with Apollo Client. We’ll break down the modular architecture of the client and teach you how to customize your own network interface through Apollo Link. We’ll also dive into server-side rendering and building query components with React Apollo. Throughout the course of the workshop, you’ll learn practical tips for using GraphQL in production from the engineers at Formidable Labs.

This workshop assumes participants have basic knowledge of GraphQL and intermediate knowledge of React.

This workshop requires an intermediary level in React.js.

This 2-day workshop will skip the basics and get straight to teaching patterns and techniques that apply directly to developing professionally with React. Using real-world examples, we will cover how to take advantage of React and some of its community packages’ features to build maintainable, performant applications.

Click here to see covered subjects

• Project Architecture
• Component Design
• Patterns for Props
• setState Master Class
• Using Context Responsibly
• HoC’s
• Routing
• Redux Patterns
• Forms
• SSR
• Perf & Optimization
• Scalable CSS-in-JS
• Testing
• Render Props
• Static Typing with Flow
• Universal Components
• Error Boundaries
• Portals
• Utilizing Developer Tools

Make sure to get in early at 323bis Rue de Charenton, 75012 Paris https://goo.gl/maps/t4FKT93C25u

Your typical French breakfast with croissants, coffee and more.

A little intro before we start.

The state of React.

I’m a sucker for web apps that make me smile.

This talk explores various ways that we, as front-end developers, can make our products more delightful to use. While it’s design’s job to give us static mock-ups, it’s our job to bring those designs to life.

For example, at Khan Academy, we fill the user’s screen with confetti rain when they get 100% correct on an exercise. I’ll talk about how we drew on 2D physics to make the confetti feel real.

Make no mistake; while this talk straddles the line between engineering and UX design, this is very much a React talk. I’ll show how to abstract motion and whimsical behaviour into reusable components, and how to do SVG/canvas animation in a React-friendly way. I’ll tear down some of my favourite examples from across the web, and show how to implement them in React.

Socialize, have some coffee or other drinks.

Let’s play a game. What’s the biggest difference between type systems for JavaScript and an ML inspired language like OCaml or Haskell? Subtyping! Subtyping allows runtime values of some type to be used as a different type, and how a language designer chooses to address subtyping deeply affects every other design decision in the language. From the way values are represented in the runtime, to how effective type inference algorithms are, to the supported polymorphic code patterns. Implicit runtime subtyping is common in today’s most popular languages like JavaScript, Java, C#, and Ruby but the tradeoffs aren’t well understood. Subtyping is useful, but in today’s programming environment subtyping is overrated.

Animations and touch related interactions are the secret ingredients that can make a good app an awesome app. Apparently, they are also the elements most sensitive to frame drops, which degrades the great experience they ought to provide. We will learn what the challenges are when building performant and responsive UI on mobile, and get to know how declarative APIs let us deal with these problems.

Lunch time! Socialize while eating at our delicious buffet.

nc

Redux’s reified events, serializable actions and state, middleware, side effect free functional reducers and time travel super powers make it well suited for building simple, networked, testable decoupled simulations. This talk shows how to put those pieces together to build networked ReactVR applications and how it might be useful in a wide variety of other domains.

Socialize, have some coffee or other drinks.

React Native has come a long way since its announcement 3 years ago, but what if its future meant looking even further into its past?

In 2017, Airbnb supported 27 languages and had developed robust translation tools that made it easy to add more. We launched Croatian in May with little overhead beyond setting up the new domain and translating phrases. However, this was not true for all new languages; our next most requested language, Hebrew, posed a unique challenge. Because it reads right-to-left, the entire Hebrew UI must be flipped. Browsers only handle reversing the DOM structure, but styling and interactions must be coded manually.

This talk covers the journey of enabling right-to-left languages on airbnb.com. Recently, Airbnb has moved to a React frontend and away from Sass to a CSS-in-JS paradigm. We developed a performant and cross-browser solution for RTL that leveraged a CSS-in-JS abstraction layer to isolate the logic from our codebase. Our efforts led us most of the way to launching in Arabic and Hebrew while requiring little effort from our product engineers and with minimal disruption to their work.

Socialize, have some coffee or other drinks.

The React prop-types package is a simple runtime type system that is used for property validation. But runtime type systems can do many more things than just data validation. Because they are very flexible (as you can basically reuse the entire hosting language to express your types) it will be much less likely that you will run into structures that cannot be expressed in the type system. You can generate runtime types on the fly from other sources (json-schema, graphql etc) or compose them together.

In this talk I will walk you through some runtime type systems, like prop-types, tcomb and mobx-state-tree. But also show you how runtime- and compile-time typesystems like TypeScript or Flow can co-exist and leverage each other.

If you thought so far Higher Order Components or render callbacks where cool, in this talk I will show you that these patterns can be applied in general to any datastructure you have.

Creating universal components isn’t just about reusability. Its about creating a development strategy. Without careful planning, your team can quickly end up in some pretty nasty spots. Join Samantha and Kurt as they walk through what universal components are, some best practices, and most importantly, some pitfalls to avoid!

• Declarative Data Fetching in React by Charles Mangwa
• React Interface for Ledger Hardware Wallets by Anastasia Poupeney
• Web performance - All in one by David Boyne
• Design meets Code with BuilderX by Sanket Sahu
• React-admin, build an admin like you play Legos by Francois Zaninotto
• Introducing Backstage: deploy individual branches of your front-end app by Jesse Pinho

Drinks, food, socializing, music.

Make sure to get in early.

Your typical French breakfast with croissants, coffee and more.

The talk introduces ReasonReact and the way it operates on the state of React components. This is illustrated by introducing the notion of local state presented via a series of examples. State is changed by means of reducers, that can operate directly on the current component, or on distant components via remote actions. Further examples illustrate how certain animations can be considered instances of local state that can be easily composed.

Navigation works in a wildly different way on Mobile apps than it does on the web. Why is that? We will explore how navigation state and URL handling tends to vary between the environments, and introduce a model that manages the complexity of both use-cases. Then, we will dive into the API of React Navigation to see how easy it can be to implement an app with fully-featured navigation on iOS, Android, browser apps, and server-rendered React sites!

Socialize, have some coffee or other drinks.

There will be two lightning talks at the end of this break at 11:20am:

• Running JS on Paper + A Programming atelier by Sam Gwilym
• GraphQL API stitching with Apollo by Christoffer Niska

CodeSandbox recently turned one year old, I will tell about what happened along the way and what I’ve learned from building CodeSandbox.

• Refactor. The hard part by Kasia Jastrzebska
• redux without boilerplate Jan-Jan Van Der Vyver
• React in Battlefield 1 by Markus Thurlin
• GatsbyJS — building fast modern websites with React Kyle Mathews
• Powerful declarative apps with State Machines Bhargav Ponnapalli
• React: smiling while you’re styling! by Bruce Lawson

Lunch time! Socialize while eating at our delicious buffet.

I want to talk about building apps (of all kinds), the kind of problems we often confront, and how we can embrace immutability to rethink established best practices. This is a sort of sequel-in-spirit to my 2015 talk about Immutable.js. Come for the gifs and over-eager ravings of a bowtie-wearing know-it-all; stay for the deep-dive on algorithmic techniques, musings on the origins of architecture and the human psychology of people who make things; leave with a new way of building high quality apps.

WebAssembly is still very young but is very promising. It outperforms the current web in many ways. Some says that it will replace JavaScript, but don’t worry it will not happen.

Socialize, have some coffee or other drinks.

There will be two lightning talks at the end of this break at 3:20pm:

• Funny code and how to write it by Charlie Jackson
• Redux over the wire by Nicolas Barray

React fundamentally changed how we build UI in JavaScript, yet the principles behind React are equally powerful outside the JavaScript ecosystem. What if we could build a design tool based on these principles, allowing us to design flexible, composable component systems? What if we could transpile these components into any language on any platform, such as a Swift components on iOS, or Kotlin components on Android?

In this talk, he ll demonstrate how React could fundamentally alter design and native development, just like it did for JavaScript.

nc

Socialize, have some coffee or other drinks.

There will be one lightning talk at the end of this break at 4:55pm:

• Static Analysis Tools for Components Era by Andrey Okonetchnikov

In this expo symposium (exposium) 🎙 we shall cordially discuss the usage of recreational cyber-gaming frameworks and their place in the native development environment.📱👾

Two months ago, I was working on a React project with a lot of SVG icons. I started to convert them into React components. I quickly figured out that it was a bot job and I started to look for a solution to do it. I found tons of projects but none of them matched my needs, so I decided to create my library.

I called it SVGR. The goal was simple, transforming a SVG into a React component. I coded it and I solved my problem, I saved a lot of time! I wanted to make it open source so I took the time to make a “beautiful” logo with a lion emoji and a good README. I also integrated Prettier in the project, I wanted to have a nice React code output out of the box. I tweeted it and got 40 stars and one contribution, I was happy.

Two weeks ago, Christopher Chedeau tweeted about my library, two hours later React Europe also tweeted it, later that day I got a star from Dan Abramov. Next thing you know I was trending on GitHub, getting 1K stars in one day!

What is the future for SVGR?

Types can be invaluable when working on a large project, by making refactoring less error-prone, enabling better coordinating between teammates, and improving readability. Reason gives you a powerful, battle-tested type system with cross-file inference, macros, and excellent JavaScript interop. Learn how you can start using Reason right now to bring more safety and maintainability to your React Native codebase, and catch a glimpse of a future where Reason can bypass JavaScript entirely to make your react app truly native.

This is your opportunity to ask questions to the team and speakers.

Have a last drink before saying good bye.

Our official ReactEurope Hackathon at Mozilla office in Paris from 9am to 9pm on May 19th. IMPORTANT: The address is “16 Boulevard Montmartre, 75009 Paris, France (https://goo.gl/NLbvX1)". Make sure to bring your own laptop and French AC adaptor. Registration now open.

The schedule of the hackathon is:

• checkin and breakfast start at 9:00am
• lunch at 12pm
• people start presenting their projects at 7pm

Join the comparethemarket Team for this interactive agile workshop centred around the importance of product ownership, continuous improvement and communications in an agile development environment.

You need to register here

09:30 - 09:45 - Welcome refreshments

09:45 - 10:00 - Ice Breaker

10:00 - 11:00 - Innovation and customer centric design workshop

11:00 - 11:30 - Break

11:30 - 12:30 - Communications in an agile development environment

(This workshop is not organized by ReactEurope)

Hacakthon demos and lightnings