ReactEurope is coming back on May 2020 with a new venue this year to provide more comfort and a whole new experience. We've grown a lot these past 5 years along with the React community and our new venue will be more spacious and give people more room to socialize, learn, relax and have fun. We will bring 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.

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

ReactEurope

An approach to state management that scales from a single component to highly complex apps.

We present an approach to state management that scales from a single component to highly complex apps. This boilerplate-free system makes it easy to support browser history and URLs and to manage asynchronous data dependencies, and works with modern React features. We use as a case-study a sophisticated data analysis tool developed at Facebook which led us to create this system.

Recoil: State Management for Today's React

React-three-fiber is a reconciler that translates React components to Threejs to spice up frontend dev with some Canvas magic. 

This talk is about react-three-fiber, a reconciler that translates react components to threejs to spice up frontend dev with some canvas magic. we will get into the history of it, benefits, hooks and a small primer to get going.

Bringing webgl to react

Next.js 9.4:

◆ React Fast Refresh
◆ Incremental Static Regeneration (beta)
◆ New Environment Variables Support
◆ Built-in Fetch Support
◆ Web Vitals Reporting
◆ Absolute Imports and Aliases
◆ Configurable Sass Support
◆ Improved Log Output

The Latest in Next.js 9.4

Gatsby's roadmap and its future

Excalidraw: Cool JS Tricks Behind the Scenes

There is still some value that render props can provide, that hooks cannot. 

React has a long and storied past of abstracting away state management. First it was mixins, then HOCs killed mixins, then render props killed HOCs, and now hooks have killed render props. Or have they? There is still some value that render props can provide that hooks cannot. This talk explores that use case so that you can learn to recognize the scenario and deploy render props intelligently.

Render Props are Not Dead

A talk about love, pain, and lightsabers.

Rejecting bongo kittens, achieving 3D blooms, and other lessons learned

How can front end developers build experiences so good that it’s not always necessary to point the user to a native app? 

If you’ve browsed the internet on your phone recently, you’ve probably noticed a common phenomenon: mobile websites often try to get the user away from the site and onto an app as quickly as possible. 

How can front end developers advocate for the strengths of the mobile web, and build experiences so good that it’s not always necessary to point the user to a native app? 

This practical talk will review HTML & CSS best practices and then have a look at implementing some more advanced techniques in React.

Beyond Responsive Design: Building Mobile-Optimized Websites in React

Transforming GraphQL: Full Stack Infrastructure as Code

Watch Evan demo universal login, html elements, PWAs and more!

Expo: Universal React

Learn how BuilderX, a Design Tool in TypeScript and React that generates React & React Native code, was built.

I built a Design Tool in TypeScript and React that generates React & React Native code. It's called BuilderX.

The talk is going to cover how I built it and how any React dev can build it too. The architecture was rebuilt many times using famous libraries before we found a stable solution. The busy worker thread is decoupled from React and it is heavily based on Object-Oriented Concepts (Command Pattern).

Building a Design Tool for React in React

In this talk, Horacio will do a very broad dive into TailwindCSS, how he is using it and give you his honest advise about why you should (or not) use it on your next project.

In this talk, Horacio will do a very broad dive into TailwindCSS, how he is using it and give you his honest advise about why you should (or not) use it on your next project. We will cover many of its features and some techniques to accomplish a great design without writing a single line of CSS. see you there!

Hijacking CSS with tailwindCSS

Build a design system with accessibility, internationalization, cross device (mouse/touch) support and themeability in mind.

Devon will talk about building a design system with accessibility, internationalization, cross device (mouse/touch) support and themeability in mind.

Design system and accessibility

Flipper is Facebooks internal, extensible mobile devtool platform, used by the mobile devs that work on the Facebook, WhatsApp, Instagram and many more apps.

Are you a React Native developer? Have you always been longing for the rich ecosystem of developer tooling that exists for the web in e.g. Chrome and Firefox?

Flipper is Facebooks internal, extensible mobile devtool platform, used by the mobile devs that work on the Facebook, WhatsApp, Instagram and many more apps.

Recently the React Native and Flipper team have been working hard to add first class support for React Native as well. This means that monitoring network traffic and performance, using the React Devtools, inspecting device and application logs or even debugging JavaScript can now can now be conveniently done using one coherent tool.

And best of all: Flipper is extensible, so let's build our own extension while at it!

Flipper: The Extensible DevTool Platform for React Native

Turn your CI into an automated QA, identifying issues in your UI.

We all know this moment: when a bug we have never thought of before pops up right at the last moment in production.

Truth is, forecasting all potential bugs with our tests is barely infeasible. Yet, what if there was still a way?

Let's investigate together what can be improved and added to our test strategies to make them even more reliable thanks to property based testing. But contrary to classical talk around property based testing, we are going to go further by extending it to user interfaces and race conditions detection.

By the end of this talk, our CI will have been turned into an automated QA identifying issues in our UI.

Detecting the unexpected in React applications

A deep dive into how a bundler works, and how we can make our development process much faster.

We talk very often about how we should optimise production bundles, and rightly so. But we never talk about optimising our development bundles. While we don’t have to make our development builds smaller, we can generate them much faster than the current status quo.

During this talk Ives will take a deep dive into how a bundler works, and how we can make our development process much faster. We will take a look at recent devtool releases, and why they are groundbreaking for our development workflow of the future.

Let’s Make Development Fast Again!

Fullstack Javascript is too hard. There’s too many choices. Too much complexity. Blitz is a new Rails-like framework for fullstack React apps.

Fullstack Javascript is too hard. There’s too many choices. Too much complexity. So we created Blitz, a new Rails-like framework for fullstack React apps. 

It builds on Next.js and adds a new invisible data layer that removes the need to build your own API. It also brings conventions and development tooling like code scaffolding and an integrated code REPL.

Blitz.js & the Future of Fullstack

Jamstack + React Native

Relay Concepts

Learning React Hooks can be a little bit intimidating because it involves a different way of working with components than what most React developers may be used to.

Learning React Hooks can be a little bit intimidating because it involves a different way of working with components than what most React developers may be used to. Features that were previously exclusive to class based components can now be utilised with function components. With Hooks, function components can be used to manage state, make use of a component’s lifecycle events, as well as connect to the context of React apps.

In this presentation, I will give a walk through of some of the React Hooks such as:

- Use State Hook (useState)
- Use Custom Hook (use…)
- Use Context Hook (useContext)
- Use Effect Hook (useEffect)
- Use Ref Hook (useRef)
- Use Reducer Hook (useReducer)

We'll explore the rules around React Hooks and what each of the above has to offer by building a basic to do app with user authentication so we can see these features in a real world example.

Learn React Hooks By Building An Auth Based To Do App

Making of 2D games looks unpredictable. WebGL is the fastest rendering API in web but too hard to understand. How to start making games like interfaces using well-known JSX? How much time do you need to write one? Does it make sense to write render in JSX instead of using WebGL from scratch?

This talk is based on my research for making games for marketing purposes. Games for conferences, sales, ads, etc.

Key takeaways:

- Why React + WebGL is a better way to make production ready stack to make simple games.
- How to start draw something using WebGL to get faster result
- How to use shaders with canvas 2D api to make fancy render.

Gamedev on React + WebGL

Have you ever though using microservices approach in a FED\mobile application? hesitating to choose React Native for your big project? I’m here to eliminate the school of thought that React Native is mostly for small mobile applications.

Wix started the journey with React Native with 4 developers and a few hundred lines of code, but grown a lot since and in order to enable ~100 Wix mobile developers, from 15 different teams, to easily integrate their code into the app, we had to rewrite the app’s architecture, implement new framework and think more like an OS to allow each team integrate their mini-app ("module") into the main Wix’s React Native mobile platform (aka "engine").

A simple analogy to better understand the relation between “Engine” & "Module", would be the same as Chrome & Extensions or iOS & Apps. This "Engine" includes principles like: Memory management & modules lazy loading, Communication channels between modules, Dependency management and code sharing.

Scalability - React Native Architecture at @Wix.com

State of React (animations)

Get behind the scene of one of the most popular React UI framework.

Get behind the scene of one of the most popular React UI framework. Material-UI contains dozens of rich components, you might have already used some of them. 

In this talk, we explore how these components are built and maintained. We use the autocomplete as a case study. We will explore the answers to these questions, among others. When is a new component built? How is a new component built? What influences the design? What sustains the effort?

How does Material-UI build components?

See the optimizations that JavaScriptCore uses to speed up JavaScript execution, and perhaps counterintuitively, how the same optimizations are also being applied to speeding up WebAssembly.

In this talk we will look at some of the optimizations that JavaScriptCore uses to speed up JavaScript execution, and perhaps counterintuitively, how the same optimizations are also being applied to speeding up WebAssembly.

JavaScript ∩ WebAssembly

Learn about the recently released expo-updates library that allows you to use Expo’s OTA updates in any React Native app.

This talk will focus on the recently released expo-updates library that allows you to use Expo’s OTA updates in any React Native app. We’ll discuss how to set up and use the module, configuration options, and other important things to be aware of when using OTA updates.

Using Expo OTA Updates in your React Native app

A deep dive on how we built Amplify DataStore using GraphQL.

Data synchronization is a natural part of life for modern applications. This could be via standard fetching techniques, realtime using websockets, or offline transitions with shared data. 

This talk will be a deep dive on how we built Amplify DataStore using GraphQL to handle these situations, including details of storage mediums across web and React Native platforms, local vs network serialization of types, and conflict resolution. 

The talk will go through both theory and practical guidance on how we built this solution over several years with production AWS customers that run React and React Native apps at large scale.

Data sync for realtime or offline apps with React and GraphQL

2020

Tech Conferences, reinvented. We want to bring an unheard-of, TED-like level of quality to tech conferences. 

dotJS

A decade after Node was first announced, JavaScript and the web platform have evolved. Deno is a new JavaScript/TypeScript runtime—the evolution of Node.

A decade after Node.js was first announced, JavaScript and the web platform have evolved, and TypeScript has changed the way JS applications are developed. 

Deno is a new JavaScript/TypeScript runtime that was designed with all those new capabilities in mind.

Deno

Pros and cons of creating class and function components in React vs Vue vs Svelte.

For a period of time, most of the mainstream frontend frameworks have converged on a class-or-semi-class-based model for declaring components. However, in the past year, we are seeing some new ideas emerging regarding how stateful logic inside components are declared, managed and composed.

Evan examines three different approaches: React Hooks, Vue Composition API, and Svelte 3. They share a common departure from the class-based models, but also have fundamental differences due to the trade-offs in their respective designs, which he discusses in this talk.

State of Components

What do CRDTs and frontends have to do with each other?

What do CRDTs and frontends have to do with each other? 

James talks about how CRDTs finally deliver on the promise of local-first apps, which provide superior user experience, and explains how simple CRDTs can be and how to leverage them to create robust local-first apps.

CRDTs for Mortals

WebAssembly, the new low-level bytecode format for the Web, could seem like a complicated topic to some. Vlad provides you with required WebAssembly knowledge.

WebAssembly, the new low-level bytecode format for the Web, could seem like a complicated topic to some. 

Vlad provides you with required WebAssembly knowledge, so you can use the power of WebAssembly to optimize your own JavaScript web applications. 

He also takes a glance at the future of WASM and how it can improve the speed and security of the software we write on a daily basis.

Into WebAssembly

When building apps, we focus on minimizing costs, time to market, bugs, bundle size, application speed, SEO, but we spend almost no effort trying to minimize the damage our applications are making to the environment.

Data centers produce about 3% of the world's greenhouse gases and this is set to treble in the next 10 years. 

When building apps, we focus on minimizing costs, time to market, bugs, bundle size, application speed, SEO, but we spend almost no effort trying to minimize the damage our applications are making to the environment.

Asim discusses how to build a green sustainable web application with NestJS and Serverless.

JavaScript Saves the World

Svelte is a new generation of web framework, it compiles your code to vanilla JS and CSS instead of evaluating it at runtime.

Svelte is a new generation of web framework, it compiles your code to vanilla JS and CSS instead of evaluating it at runtime. 

This new approach opens new possibilities, especially for writing reactive web app. Bertrand explains how Svelte changed his mind on frameworks.

Svelte

Before being a web developer, we are all users of the internet which is a jungle of UX patterns, some bad, some good and some terrible.

Before being a web developer, we are all users of the internet which is a jungle of UX patterns, some bad, some good and some terrible. 

Sara explores the complex paths of this jungle to understand together how we can plan and develop ways to make our applications be a more enjoyable experience for both our users and us.

The complexity in simplicity

Learn regular expression features like non-capturing groups, named capture groups, the dotall flag, and Unicode property escapes.

Stefan covers regular expression features like non-capturing groups, named capture groups, the dotall flag, and Unicode property escapes.

Regular expressions my secret love

In the past few years, UI libraries have taken the web development world by storm, however, this shift in how web applications are built has also increased the complexity of tooling needed to be productive.

In the past few years, UI libraries have taken the web development world by storm, however, this shift in how web applications are built has also increased the complexity of tooling needed to be productive.

In reality, it has gotten easier as new a new segment of tooling was created to aid in creating scalable and performant web applications. These “Web Frameworks” focus on providing great end-user experience while also making developers more productive.

Tim explores what web frameworks are, why they exist, and how you can immediately improve your end-user experience and developer experience by applying low-level concepts from web frameworks in your application.

What to expect from a modern web framework?

With modern development tools, it’s easy to locate the exact code that’s slowing down your application, but what do you do next? Why exactly is it slow, and how do you make it fast?

We’ve learned to rely on sophisticated frameworks and fast engines so much that we’re slowly forgetting how computers work. With modern development tools, it’s easy to locate the exact code that’s slowing down your application, but what do you do next? Why exactly is it slow, and how do you make it fast? Time to regain the lost art of algorithmic performance optimization!

Software performance is all about recognizing and eliminating unnecessary work. You can learn to do this intuitively, and eventually you’ll be able to write code that’s fast from the start, by default. Vladimir shows you how — on practical, real-world cases of optimizing popular open-source libraries, PR by PR.

Fast by default: algorithmic performance optimization in practice

We are obsessed with coding and creating automated workflows and optimizations. And yet our final products aren't making it easy for people to use them.

We are obsessed with coding and creating automated workflows and optimizations. And yet our final products aren't making it easy for people to use them. Somewhere, we lost empathy for our end-users and other developers. Maybe it is time to change that. Here are some ideas.

Develop, Debug, Learn?

Testing the front end shouldn't be that hard! There are ways to achieve a healthy testing strategy for our front-end applications.

Testing the front end shouldn't be that hard! There are ways to achieve a healthy testing strategy for our front-end applications.

Adrià discusses, explores, and showcases some of the best practices around what to test, and also how to test it.

The pragmatic front-end tester

Sven talks about how WebAssembly looks like from a JavaScript developer perceptive.

The WebAssembly Community Group is actively working on improving the interoperability, allowing a seamless integration in our JavaScript projects!

Sven talks about how WebAssembly looks like from a JavaScript developer perceptive.

More WebAssembly in your JavaScript

See the design and architecture that went into creating a component compiler which generates framework agnostic components. 

Adam reviews the design and architecture that went into creating a component compiler which generates framework agnostic components. 

First, he goes over "why" a compiler, then dives into how we're able to take advantage of TypeScript and Rollup to generate web-standard components, while also focused on developer experience.

Architecting A Component Compiler

When we develop a Single Page Application, we have to use a Router. It's a common use case, yet every single framework has its own router, but they all share quite a few principles.

When we develop a Single Page Application, we have to use a Router. It's a common use case, yet every single framework has its own router, React even has multiple ones you can choose from. And even though each framework is different and every router takes a different approach, they all share quite a few principles. 

Understanding those helps us handle routing in our SPA because behind all those simple, different APIs provided by framework-specific routers, a more complex architecture is hidden from us.

Eduardo dives into the architecture of a Router and some of its implantation details.

Modern Routing

Aftermovie dotJS 2019

Ziad shares some guidelines for using TypeScript types as precisely as possible.

Typing correctly matters

Testing native JavaScript web components can be tricky. Andrew walks through the basics needed to test native JS web components without a browser.

Testing native js web components

Learn all about the TC39, the committee working on evolving the JavaScript language standard.

Daniel presents the TC39, the committee working on evolving the JavaScript language standard. Because JavaScript is both programmed by a diverse set of people and deployed in diverse settings, it is essential that its development be governed in a way that is inclusive to these various requirements. 

We are not there yet, but the TC39 is working on it, and this can be seen in the development of various new language features that are coming to JavaScript. The TC39 needs your help in bringing JavaScript to the next level, and Daniel explains how you can get involved.

TC39: How we work, what we are working on & how you can get involved

Acoustic activity recognition can create new interactions and better smart systems. See how you can experiment with JS, Machine Learning, and Tensorflow.js.

Even though we don’t really think about it, sound is a very rich source of information.

Leveraging the properties of sound with machine learning, we can gain insights about an environment or an activity performed.

Acoustic activity recognition has the potential to create new interactions and better smart systems, and in this talk, Charlie explores how to experiment with this technology in JavaScript, using the Web audio API and Tensorflow.js.

Exploring the hidden potential of sound data

A deep dive into the specific features of Web Workers that aid in making it possible to perform tasks typically reserved for cloud computing jobs, in the browser.

Jana covers how to bring multi-dimensional computing power to the browser using Web Workers. She focuses on one particular dimensionality reduction algorithm—UMAP—used more and more frequently these days to visualize high-dimensional datasets. She deep dives into the specific features of Web Workers that aid in making it possible to perform tasks typically reserved for cloud computing jobs in the browser, albeit on smaller samples from data sets.

These features include transferable objects, which allow for efficient, zero-copy passing of computed results back to the browser from the Worker and OffscreenCanvas, a bleeding edge browser feature that can let us even perform the visual rendering of the UMAP result in a non-blocking Worker.

Escaping flatland: a romance of data science in the browser

Kas discuss the MIDI communications protocol, how we can create and augment music with JavaScript, and will hopefully make you think about how your apps communicate with each other.

MIDI, communications, and music in JavaScript

When developing applications with states which require some effort to make them consistent, we can either accept that and write many unit tests to make sure things are consistent, or we can model domains in a better way.

When developing applications with states which require some effort to make them consistent, we can either accept that and write many unit tests to make sure things are consistent, or we can model domains in a better way, leveraging the type system to eliminate as many inconsistencies as possible.

Modeling your way to consistency

2019

dotCSS

Progressive enhancement, accessibility, internationalization, and performance as it relates to writing CSS in 3019 (and, of course, today).

It’s 3019, how has writing stylesheets changed? Ire covers topics such as progressive enhancement, accessibility, internationalization, and performance as it relates to writing CSS in 3019 (and, of course, today).

Writing CSS in the year 3019

Writing CSS that scales is hard, even when you're great at it. There's one methodology made for change, called utility-first CSS.

Writing CSS that scales is hard, even when you're great at it. It often starts well, but soon, unforeseen requests start coming in, the layout is being moved around, and you have to undo most of what you've done. 

Soon, you realize that your component-based architecture isn't as resilient as you thought, and it feels like the best thing you can do is to start over.

There's one methodology made for change. Instead of being tied to your project, it's tied to your style guide. This is called utility-first CSS.

In Defense of Utility-First CSS

Explore innovative ways of organizing styles, adding complex interactivity and meaningful transitions.

As web apps and user interfaces become increasingly more dynamic and complex, structuring stylesheets for every possible state can be a challenge. 

David explores innovative ways of organizing our styles, adding complex interactivity and meaningful transitions, and comprehensively test UIs through a decades-old concept – finite state machines. 

With ARIA, data-attributes, and CSS variables, state machines can bring a new level of maintainability, testability, and interactivity to your styles.

Crafting Stateful Styles

Get a deeper knowledge of how to design a public API for components, how theming works, and common pitfalls one might come across when trying to scale a design system across an organization.

Authoring performant, scalable & accessible CSS is difficult and requires specialist knowledge. 

Emily covers why design systems can help enable organizations to ship well-written CSS. 

She also covers what design systems are, the history of design systems at GitHub, and why we decided to abstract styles into reusable React components.

You will walk away with a deeper knowledge of how to design a public API for components, how theming works, and common pitfalls one might come across when trying to scale a design system across an organization.

CSS, Design Systems & Developer Experience

Using CSS with SVG is a great adventure full of magic, friendship and sometimes… creepy villains!

Using CSS with SVG is a great adventure full of magic, friendship and sometimes… creepy villains! 

Jump in and discover why you should tell the world that CSS and SVG are forever best friends.

SVG & CSS

While everyone is talking about CSS in JS, what if we look at how to do JS in CSS? Because yes it is possible! Is that a good idea?

While everyone is talking about CSS in JS, what if we look at how to do JS in CSS? Because yes it is possible! Is that a good idea?

Jean-François is not sure about that, but why not come and relax on this technical and fun session.

JS in CSS

See how reinventing the wheel is a great way to learn and improve as a front-end developer. 

Hakim tries to give people tools for finding unexpected ways to improve UI elements. He talks about how reinventing the wheel is a great way to learn and improve as a front-end developer. 

The talk covers three specific UI improvements that he’s deep-dived into, complete with hands-on examples of how to implement them.

What breaking interfaces taught me about building better interfaces

In this Darwin-themed talk, you'll learn how CSS came to be, and how the language's simplicity and flexibility still make it stand out today.

It's been 25 years since the first people proposed a language to style the web. Since the late nineties, CSS lived through years of platform evolution. 

The cascade, specificity and the enormous choice in values and units set the language up for success. But not everyone liked to use these features everywhere. Some began to adapt the language to meet their needs.

In this Darwin-themed talk, you'll learn how CSS came to be, and how the language's simplicity and flexibility still make it stand out today.

On the origin of cascades

We used to avoid inline styles, considering them a “bad practice”. But what if most of the known pitfalls could be avoided by using modern CSS features like custom properties?

We used to avoid inline styles, considering them a “bad practice”. But what if most of the known pitfalls could be avoided by using modern CSS features like custom properties?

Roman shows how we can use CSS variables to recreate a utility-first approach by using them as an API from our HTML style attributes.

Utility of Inline Styles

Modern developments in CSS make it easier than ever to create robust, scalable, elegant typographic systems on the web. Add variable fonts and the design, technical, and performance benefits are really exciting. 

Modern developments in CSS make it easier than ever to create robust, scalable, elegant typographic systems on the web. Add variable fonts and the design, technical, and performance benefits are really exciting. 

Jason looks at how to combine them with other CSS capabilities like custom properties, calculations, and grid to create a whole new way to think about design and development. 

He also shows how they work together by using some variable fonts in layouts that work across screen dimensions, accessibility needs, design requirements, and even network speeds—better than you thought possible.

Dynamic Typographic Systems with Variable Fonts

Every code line can be tested, even CSS. Learn how to test SASS functions and master SCSS update impact on generated CSS.

Every code line can be tested, even CSS.

Fabien shows you how to test SASS functions and master SCSS update impact on generated CSS.

CSS tests

CSS can be wonderful or dreadful, for accessibility, depending on how you use it. 

Aurélien shows how CSS can be wonderful or dreadful for accessibility depending on how you use it and how small details can open doors to everyone or destroy all your efforts to do it.

The double faces of CSS

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.

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

The State of React

Most developers agree that performance is super important, but it is a broad topic, and discussion tends to focus on the initial load experience. 

Most developers agree that performance is super important, but performance is a broad topic, and discussion tends to focus on the initial load experience. But what about everything that comes after that? Once the product is fully-interactive, what’s the experience like?

This talk is a deep-dive into building smooth, jank-free web experiences with React. We’ll look at how we can use Hooks and modern browser APIs to build incredible, delightful products that run great across devices.

Saving the Web, 16ms at a Time

React-spring is a popular React animation library that explores physics based UI animation. This talk will be about the state of React animation in general, the methods and techniques employed, the journey we took with react-spring, and how Reacts new hooks feature can change the way animation is supposed to work for the foreseeable future. Animated hooks can mend the gap between the declarative and the imperative and express intent more clearly, which has big implications on not only the moving thing itself but also with how we combine it with all the other things going on around it, from the data-model to user interaction.

React-spring: on animations and hooks

How WordPress built its own brand new visual editor experience from the ground up with React. The talk will include an introduction of WordPress and how the Gutenberg Editor project started, details of how it works and how we incrementally improved the block editor over two years, and what our plans are for the future.

Designing a Rich Content Editor for 1 Third of the Web

ReasonReact recently got a major overhaul. In this talk we explore the next version writing blazing fast, statically typed components using React Hooks. Once thrilled we add a little bit of genType’s magic on top of it, in order to compile our components to TypeScript, Flow or untyped JavaScript. Your co-workers won’t even believe they are compiled from a different language!

A Hitchhiker’s Guide to the new ReasonReact

Revery is a high-performance, React-inspired, native application stack built on top of the Reason programming language. 

This talk will explore how Revery, along with Reason, enable you to leverage your ReactJS skills to build “totally native” applications. We’ll discuss the motivation behind Revery, explore the technology stack, and showcase the native Reason toolchain. 

We’ll dive into what “totally native” means - and how it differs from React Native. We’ll also highlight several other developments in the “totally native” React space.

Totally Native React with Revery

Tools and strategies for growing your state-of-the-art React PWA to a global scale.

Move fast with confidence

Learn more about Skip http://skiplang.com/

Skip

Since the early 2000’s the name DJ Fresh has been synonymous with innovation. The cutting edge drum and bass sounds of drum and bass outfit Bad Company served as a backdrop to his early 2000’s tech startups, the award-winning forum Dogsonacid.com, and anti-piracy startup Darkstar LLC. But after 20 years of success in the music industry including signing acts like Pendulum and Chase and Status to his label Breakbeat Kaos and having the UK’s first ever Drum & Bass and Dubstep Number 1 records, Dan Stein contracted cancer, and after a narrow brush with death realised that he needed a change of pace. In 2017, he attended a Ruby boot-camp and two years later is a Machine Learning Developer at leading education research company HT2 Labs in Oxford, where his work has helped to win innovation awards. Stein believes that as our lives become more and more intertwined with technology that there are roles for everyone to be passionate about in the world of Tech. He’s here to tell us his story and explain why he thinks that developers are ‘Hot Right Now’.

Coders are the new Rock Stars

Doing cross screen shared-element transitions can be difficult to do, if possible at all. Both the router and the view have an important role to play to make these delightful effects possible. In this presentation Hein will dive further into shared element transitions (aka magic-moves), how you can achieve them using react-native-magic-move; and what additional work needs to be done to make this is a first class feature in react-native.

Magic Move transitions in React-native

GraphQL and mobx-state-tree are match made in heaven; both are a model first oriented technologies. GraphQL optimizes data fetches and mutations. Adding mobx-state-tree to this mix, makes this model even richer: It allows client only state, actions and derived data to be mixed into our data models. We can go even further and mix in different behavior for different types of clients, while still using our GraphQL models as source of truth. Finally we can have the best of both worlds: straightforward data propagation, over the network and in the client. Leveraging the DX convenience and performance optimizations of both technologies.

Combining GraphQL + mobx-state-tree

Writing UI that can be accurately translated often comes with tradeoffs. If the text is sufficiently complicated, engineers have to take great pains (write conditionals, which are often error-prone) to ensure it is accurately rendered in other languages. Additionally, engineers are often either required to (a) keep strings separate from UI, or (b) keep translatable text simple enough to be extracted from UI source.

Fbt is an explicit markup language that tackles complexity and keeps UI text bundled with the relevant source code. This has the added benefit of keeping UI source self-documenting. This markup is parsed at build-time with text collected and sent to translators. The framework enables engineers to write text that would normally be tedious and error-prone in a succinct and accurate way.

FBT: An i18n Framework for Complex Grammar & UI

A year of CodeSandbox, tech edition

Raw speed is good, but not enough. A scheduler allows us to improve the perceived performance of our apps, despite its overhead. 

With Fiber, React has embraced a scheduling-first approach. This has enabled features like time slicing and Suspense–but at what cost? Is scheduling just a workaround for React being too slow? 

This talk will dive into the answers to those questions (and more), outlining the importance of scheduling not just to React but to the web in general.

Scheduling is the Future

Security and privacy are more important than ever in modern apps yet still continue to be an afterthought during the development and test cycles. Concepts around authorization, signing, and fine grained access control can be tackled and modern patterns such as GraphQL give us powerful tools to accomplish these requirements. This session will give details on lessons learned and solutions the AWS Amplify team encountered over the past year when working with customers building applications, and the differences implementing across React and React Native.

France