The international React.js conference in Spain. Join our international conference about React and React Native in one of the sunniest cities in Europe.

NOTE: The audio quality in most talks of this event is not good.

React Alicante

React 16.8 introduced hooks, a concept that will change the way we write React components and apps. 

This talk will walk you through the refactoring of an existing React app with hooks: we will go through the theory as well as seeing the available hooks in a real world scenario.

Refactoring off the hook(s)

The TypeSystem is our friend when coding, and it saves us from innumerable hidden bugs. When we encounter functions with a very dynamic nature, our types may not be enough, and we end up having to perform countless casts by hand, introducing human errors.

Can we improve our types? Can we teach the compiler how our data structures behave at type level? In this talk we will see together what type-level programming is, and how to introduce it in our codebase helps us to reach more exact type definitions, thus reducing the bugs in our code. Starting from a practical example we will see the basic patterns, limits and potential.

Type-level Programming ƒun in TypeScript

With react we have a lot of freedom when it comes to choose our tools. We make a pick based on developer experience, rating on github ;), performance. 

I would like to talk a little bit about how different ways of applying CSS to our code (css classes,
inline styles, css-in-js) impact browser behaviour. Lets deep dive into DOM and CSSOM building processes and actually check it out.

CSS. Under the hood.

While most of the world is excited about all the newest and coolest technologies you’re stuck maintaining a legacy application. It’s not glamorous, but it works and pays the bills. What if you could have the best of both worlds? Keep your legacy application and use the latest and greatest tools?

This dream can be your reality. I’m here to share some of the techniques, ideas, and code I’ve used to make this dream come true. While the task may seem daunting, if you come to this talk you’ll learn strategies you can use to slowly migrate your legacy application to become evergreen.

Evergreen Legacy pplications

In Product Hunt we have been using React for more than 4 years. In this talk, I'm going to showcase what is our React architecture. What we learned among the way. 

Topics includes will be designing reusable React components, GraphQL, routing, application
lifecycle, optimizing for SEO.

React architecture in Product Hunt

How I built a live transport map for my hometown

React and Auth0 working together to get more secure apps

Optimising React TTI

Tracking promises or how to avoid showing infinite loading indicators

Voice is the next frontier for input on (mobile) devices and the web. You can use it for inputting text instead of a keyboard but better use it to do actions on your mobile or website. This can be opening a task or screen in your app or even process it with NLP (natural language processing) to get the users intention and create a magical experience.

In this talk you will see how to get voice input ready in React and React Native, how to react on voice input and how to process it to get the intent from the user voice.

Giving voice an action in React and React Native

Every day we write a hundred, thousand lines of code to build products in the aim of impacting the lives of people in a positive way. But how can we make sure that the key features the user uses do not stop working with every new deployment? How can we get confidence that when refactoring code the existing feature still works as expected?

This talk I am going to share with you my experience of dealing with these in React Native by moving towards TDD. Also how writing unit and e2e tests helped me write better code and build beautiful apps.

Testing in React Native: Unit & E2E

"Micro Frontends" is the new buzzword in the Frontend world, but too many times people use it in the wrong context or with different things in mind.

Micro Frontends can refer to different kinds of solutions that solve different types of problems - starting from using different UI frameworks on the same app or letting different teams work on separate parts of the code independently.

In this session, we'll go over the different problems we have when building a big app and how different micro-frontends solutions can help with this. 

Micro Frontends - You Keep Using That Word, I Don’t Think It Means What You Think

When it comes to UX, one size doesn't fit all. What if you could predict user behavior and create custom-tailored, smart UIs? 

In this talk, we will explore how we can make adaptive and intelligent user interfaces that learn from how individual users use your apps, and personalize the interface and features just for them, in real-time. 

With predictive analytics, probability-driven statecharts, decision trees, reinforcement learning and more, UIs can be developed in such a way that it automatically adapts to the user's behavior.

Mind-Reading with Adaptive and Intelligent User Interfaces

Rendering is not a common performance bottleneck in React applications. It’s more about large bundle sizes or slow network requests. At the same time rendering problems can be challenging to discover and mitigate. So when user experience gradually becomes more and more janky most of us just use an old-school debugging technique “comment out this line of code, refresh and see if something changed”. This is not optimal and there are better approaches to performance profiling.

We are going to use Chrome Perfomance Tab and new React DevTools Profiler plugin to profile a real application. We will learn how to use these tools to identify rendering problems and make user experience really smooth. We are going to explore different React optimization techniques that allow us to avoid unnecessary rerenders or doing heavy computations on every render (memo, useMemo, useCallback).

We are also going to touch how experimental Profiler component can be used to collect timing information and measure the "cost" of rendering.

Profiling React rendering performance

Design systems are popping up in all companies to help developers build interfaces faster while staying consistent with the design of the product. It might happen that your company has one, but your teams are not using it or they are stuck in an old version of it.

Not all design system codebases are created in the ideal context and conditions. I’m going to show you how in Typeform we are battling tech debt, building straight forward processes and infrastructure, to help our teams move forward as our design system evolves.

Paving the adoption path of your Design System for engineers

How do you know your feature is working perfectly in production? And if something breaks in production, how will you know? Will you wait for a user to report it to you? What do you do when your staging test results do not reflect current production behavior? 

In order to test proactively as opposed to reactively, test in production! By testing in production, you will have increased accuracy of test results, your tests will run faster due to elimination of mock and bad data, and you will have higher confidence before releases. You can accomplish this through feature flagging, continuous delivery, and data cleanup. Only when your end-to-end tests pass in production will you know that your features are truly working. 

I will show you how to mitigate risk, improve your understanding of the steps to get there, and shift your company’s testing culture to provide the best possible experience to your users. I will talk about the way to run tests in the production environment of a system, how to do it without disrupting real end users, and how to exclude testing data from data and analytics. 

I will also talk about the tools that help in this process, the benefits of testing in production and why the pros outweigh the cons, over doing it in staging or other testing environments, why its more reliable, and sometimes even easier.

Testing in Production

Those examples about how to customize the theme of your app or that toggle component sample are fine to see the basic use case of new React patterns and features, but they are not enough to see how powerful these techniques are. 

In this talk we will see in depth how to put together most of the recent React advanced patterns and features (Compound Components, High-Order Components, State Initializers, Context API, Refs and -of course- Hooks!) to solve complex real-world problems in a simple, yet elegant way, including proper automated tests for them.

Resolving real-world problems by mixing several advanced React patterns and features

React Native, your UX superhero

Using React with JAMstack

Compiling GraphQL to Blazing Fast JS

In this talk, Karan will share his learnings from working on the React Native infrastructure at Skyscanner. 

These are concepts, issues and roadblocks that a developer would encounter in their journey of integrating React Native in a brownfield app.

Knowing these ahead of time would help folks take the right decisions when building their own React Native infrastructure.

React Native at Skyscanner: The Good Parts

There are cases when product has a lot of business logic and wants to share it across web and mobile platforms, especially when the web part uses React and mobile - React Native. 

Shareable code adds development speed, simplified communication between teams, removes behavior differences between web and mobile. 

At the same time there are a lot of things which can increase a solution complexity and add some limits to the final product.

Monorepo: React Web & React Native

At Threads we needed to add video editing to our mobile web app, including advanced overlays and filters. We thought there would be an open source project we could use as a foundation, but it turned out that every project we tried was either far too slow, or had a fraction of the feature set we needed.

By combining a canvas rendering strategy with invisible React UI for manipulating video overlays on the client side, and ffmpeg on the backend, we were able to build a video editing experience in a matter of weeks that supports near pixel perfect previews that can be edited in real time, and highly optimised mp4 output for the fully rendered videos.

In this talk, I'll take you through our approach, and why we arrived at the method we chose. You'll see some of the techniques that were required to scale our canvas solution, both managing the growing complexity, and keeping a lid on our memory usage.

This talk will be especially useful to anyone considering building high performance graphics for the browser, but it will also give any developer some new ideas about how to approach technical challenges.

React Alicante 2019

Sep 26 - Sep 28 | Alicante, Spain