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

The international React.js conference in Spain.

React Alicante

Since inception React has solved problems from first principles, choosing to create the best possible product instead of relying on what was possible with already existent technology. In order to achieve this, the React team has invented new languages and paradigms such as JSX, the React component model and unidirectional data flow.

This talk will review these inventions and the supporting changes proposed to web specifications. Community sentiment towards and adoption of React and related web standards will also play a role in this overview, along with efforts for integration and cooperation, such as the usage of web components with React components.

Looking ahead, future of the library will be examined, where more standards will be used in React in order to make it smaller and more performant.

The effect of React on web standards

Nowadays, lots of JavaScript frameworks and UI libraries are focusing on building UI components. With the rise of ES2015 modules and modern build tools, we are now able to split our JavaScript codebase into smaller pieces that encapsulate their behavior and logic.

Modular CSS

How many times have you heard that Redux can be an overkill for a simple application? How many times... your simple application ends up being a complex one? What can you do if you need to get into quick iterations cycles?

Is it possible to find a trade off between both approaches? In this session we will talk about the development workflow we follow at Lemoncode when we develop React / Redux applications.

React/Redux: a development workflow

Designing UI React components is not an easy task. They often rely on several states that are hard to reproduce when we are developing in the middle of an existing app. Worst, once a component is live, how do we make sure that its well documented.

React-Storybook: Design, Develop, Document and Debug your React UI components

Forms are hard in any framework, but they are extra complicated in React due to the recommended method of using "controlled inputs", inputs where all of their state is managed by the developer, not by the DOM or the React framework itself.

Related repo: https://github.com/erikras/reactalicante2017

A practical guide to Redux Form

Custom CSS is the simplest way to make the UI inconsistent, especially if we’re talking about spacing between UI elements, font sizes or colors. When developers have too much freedom in defining the UI, they will do things differently. The issue could be solved by avoiding any custom CSS on the app level and having a set of base components that allow developers to glue UI together in a consistent way. 

Custom CSS is the path to inconsistent UI

React Native, although still a really small part of the mobile development ecosystem, is growing really fast. A lot of "real native" developers dismiss it, because of their previous experiences with JavaScript - a language not easy to love. However, they're missing an important point - it's so much more than JS.

In this talk I will show how we can create React Native applications with various alternative languages. Starting with a typed version of JS: TypeScript, going through a dynamic functional language Clojure, up till statically typed options with 20-year old OCaml and 5-year old Elm. Expect fast pace, code, and weird syntax.

But, most importantly, we'll talk about why this freedom is so important and why this can make your applications better. 

Beyond JavaScript: The Real Benefit of React Native

React Native ecosystem is awesome, we have plenty of tools and libraries to start right away creating our own app. But where are those apps? How should we proceed to start building more apps and less tools?

In this talk, I will drive you through my journey in a personal project that went from a pure Android application to a cross platform React Native app where we can support both iOS and Android.

React Native case study: From zero to a super hero app

MobX or Redux? Mutable or Immutable? Why not do both? Lets discover together MobX-State-Tree, an ongoing experiment to create an opinionated state management library that mixes mutable and immutable, oop and functional programming, redux and mobx, trying to take the best of both world to create the next generation of state management!

Mutable or Immutable? Let's do both!

Why I Love Create React App

Functional Reactive Programming (FRP) gets a lot of hype nowadays. The JavaScript community provides us with excellent tools like RxJS, Bacon, and Kefir. But how do you use the power of FRP in your projects? How do you make your React application Reactive? 

How to make React applications really reactive with Focal?

Having a good testing setup, one that allows us to create meaningful tests and is not a painful process, is extremely important to produce quality code. In this talk we will explore the options that we have, and will explain how to leverage webdriver for end-to-end testing React applications.

Related repo: https://github.com/ForbesLindesay/end-to-end-testing-react-applications

End to End testing React applications

React is a wonderful tool to write reusable ui components but it takes no decisions on how they should be styled. This leads to a huge amount of different styling approaches, most of them based on CSS in JS, that usually introduce some coupling with your code.

Is it possible to skip this dependency and to write components that doesn't depend on style? In this talk we will go through some of the most interesting approaches made by styling libraries, analyzing what should they cover to make components highly reusable and customizable. Eventually we will see a technique that the upcoming React Toolbox Core is going to use to ship complex components agnostic from style. We will see how really complex components like DatePickers can be reused and re-styled even for React Native.

Writing highly reusable React components

React is awesome! We probably all here agree on that. You have heard of all types of driven development but react emerged a new type, styleguide driven development became a reality with components. This type of development focuses on Developer/Designer collaboration and on assertive components. With the use of React, CSS Modules, Flow and Snapshot testing we were able to almost remove style regressions. 

In this talk you get a glimpse of you can start styleguide driven development and how you can sell this dream to your project managers.

Related repo: https://github.com/SaraVieira/styleguide-driven-development

The Dream of Styleguide Driven Development

GraphQL is getting increasingly popular and many big companies like GitHub, Twitter and Shopify are already using it in production. In this talk, I want to demonstrate one of the newer and less-known GraphQL features: Realtime Subscriptions. 

After a quick introduction to the basics of GraphQL, we'll build a realtime messenger app with React and Apollo Client. I'll highlight the requirements for building a subscription server that works with Apollo and introduce best practices for implementing subscriptions on the frontend.

Related repo: https://github.com/nikolasburk/graphql-chat

Building a Realtime Chat with GraphQL Subscriptions

Dynamic imports have arrived! With the new import() proposal we have got a convenient capability to load React components whenever rendered. Our mission now is to build faster web apps and deliver as less code as needed. But how?

In this talk we will leverage code-splitting with minimal effort and discuss the page speed impact.

Code-splitting in React apps

Redux solves brilliantly the state management of our React Apps, but leaves open the choice of how to manage side-effects (communicating with external APIs, or anything that deals with the outside world). Redux-Saga is a popular and clever solution that comes to our help, leveraging the shiny ES6 generators for controlling the async flow. 

In this talk we will explore what is the problem that Redux-Saga solves, we will provide an introduction to ES6 generators and we will see how to work with Sagas with practical cases.

Redux Saga, the Viking way to manage side effects

 In this talk, you will learn about the basics of ReasonML, a OCaml-based language with a more familiar syntax for JavaScript developers specifically targeted to React developers.

You will see how Reason’s type system will help you write terser, more functional and more runtime-safe code and how you can leverage this language to write strongly typed React applications.

We will discover the Reason ecosystem, specific syntactical differences to JavaScript and up- and downsides of this technology while doing live-coding examples. This is going to be a highly interactive “look-and-feel” experience in Reason with some insights in my development workflow. 

The Road to a Statically Typed Future

About a year ago, we faced the challenge of creating a whole new React ui-kit with a completely custom look & feel to unify the styles of all the web apps for some public European institution. What challenges did we face? How did we overcome them?

How have we contributed to the React community? This is the study case of Lucentum: the first (but not last) React component library born and raised in Alicante!

Case sudy: Lucentum, creating our own React component library

While microservices is a common architecture for the backend, most frontends are still running as a monolithic application. Therefore building, deploying and consuming frontend components across a diversity of teams and web applications can be a daunting task, especially at scale. To address this issue, at OpenTable we enable fast-moving teams to easily build and deploy front-end components using OpenComponents, an open-source, battle tested, front-end microservice architecture for painless component delivery.

Usually, micro-service architectures are unopinionated by nature, leaving tech-stack decisions to service owners. During this session I'll explain how OpenComponents works, how do we use it at OpenTable and how we allows teams to build ship and consume React components at runtime across teams and web applications with the ultimate goal of delivering atomic design system at scale.

Related repo: https://github.com/opencomponents/oc

Deploying atomic design system at scale

2017

Components are hot. Every view library or framework seems to be based on components these days. But when you write your React component you can't share it with an Angular developer. Your Vue components can't be used in Preact. The result: fragmentation. The cost: reinventing the wheel for every library.

We've had the answer for years, though. Web components are the standards based solution, but they've never seemed ready for the big time. Until now.

In this talk we'll look at why 2018 is finally the year of web components, the tools and libraries that we can use to build with web components and how you can get started building shareable, compatible, standards based components.

2018 - The Year of Web Components

CSS is hard !I made a living out of it being hard but when React was introduced we had a whole new level of fighting over CSS, there are so many ways to approach it and so many trade-offs one can do when choosing the better approach that a talk that will go over these options is more than necessary.

Let's walk this road thogheter and I promise it will all be fine and you will leave with an ideia of type of styling is better for each project.

Hint: There is no perfect way...

The Lonely and Dark Road to Styling in React

This past year, I released React Final Form, a next generation form library for React, based on everything I had learned from managing React's most popular form library, Redux Form. My talk will explain the decisions made in designing this new library as well as an explanation of how to build some common types of forms.

Repo: https://github.com/erikras/reactalicante2018

Next Generation Forms with React Final Form

Teams today are facing similar problems: How do we encourage the reuse of existing components? How do we raise awareness for them? How do we keep them stable while keeping maintenance efforts low? How do we ensure a coherent branding without exploiting our designers?

If you are worried by these questions fear no longer. I aim to show you a way out of this self-made jungle into a brighter world of coded style guides. We will explore together how we can tear down walls between design and development and how everyone can benefit from introducing living component directories into their project.

The ABC of Coded Style Guides

Santa Clause, The Free Lunch, and JS Testing - All myths? We all know Testing is key, but it's not easy. What are your options, what exists, and what works? Let's talk about it all. What tools exist, and what matters in testing React and React Native.

Testing, Testing, 1, 2, NaN

We all know how awesome React is and how functional patterns influenced its creation. But how can we make the most of it using purely functional programming!? What tricks/patterns can we use to make React even more functional? Come with me to Fantasy Land... the Lambdas are Awaiting! 

Lambdas, lambdas everywhere

Building chrome extension is an area in which many of us are interested in and planning to do side project with investigating how to do it ... one day. Why do not do it using beloved React then? In my talk I will highlight most interesting parts in creating simple and useful chrome extension that will show at Chrome starting screen random explanation from Urban dictionary. 

Building a Chrome extension with React

Modeling errors in Now CLI

Repo: https://github.com/tlakomy/react-alicante

It's time to leave the 2D world of a browser window and venture into the world of enhanced reality JavaScript applications. During the talk we'll see how to make great VR and AR experiences using just your browser and a bit of React, with live demos included, so we'll get to see them in action!

Journey through VR and AR with React

We come from a time where javascript was kept in different files, loading them in the right order in the html. Module loaders came to life, RequireJS and Browserify being the first of them. Webpack and Rollup followed them, which are truly amazing. But... have you ever configured them for a real-world app?

New tools started to appear tagged as zero-config tools: Parcel, Poi, Microbundle, Rollit... What's the deal with this zero-config trend?

This talk dives deep in this zero-config evolution, explaining its reasons and benefits.

The new era of zero-config tools

React’s sophisticated reconciler (aka the “Virtual DOM”) makes updates to the UI feel fast because it optimizes interactions with the DOM. As a result, we no longer have to worry about how to transition our UI from one state to the next. However, the reconciler is not a silver bullet; even the new Fiber Reconciler. Our React apps can still get sluggish, especially as they grow in size and data. 

Let’s discuss some causes for slow-downs and tools to diagnose problems so that we can speed up our apps.

Help! My React app is slowwwww!

In this talk, we'll go through the journey of building a fully fledged Music Player using React Native. Given the player specifications, we were challenged to prove that React Native has no limits when it comes to build mobile applications, no matter how complex they are and having performance and cross-platform in mind. 

We’ll break down the player architecture, covering the different approaches to the problem (Declarative vs Imperative), as well as unveiling all the player elements in a top-down fashion, starting with the music service and the score visualization and moving further along to smaller pieces such as time progress, progress bar, seeking and replay.

Pushing React Native outside the comfort zone

This talk will cover one of the open questions of modern development: when a pattern is a pattern? How do we reuse one in a slightly different use case? Not a recipe for success, more of a way to frame the problem, identify some ideas we tried and rediscuss the way we approach componentisation.

Components, patterns and sh*t it’s hard to deal with

When starting out with a new project, people wonder what their stack should look like, what frameworks to use, what are best practices, etc.  *That’s* exactly the problem we’re tackling with the GraphQL boilerplates we are building at Graphcool where Frontend can be React, React Native.

GraphQL Boilerplates

In this talk, we're going deep on forms in React. I'll explore managing validation, error messages, and working with 3rd-party inputs and introduce you to Formik, a tiny form helper that lets you do all the fun stuff I just mentioned and more.

This talk will be mostly live coding. I'll start with the simplest input with just plain React. After discussing what's hard, I'll introduce Formik, gradually building a complex "invite friends" form with add/remove, autocomplete inputs, and human readable error messages--all in about 60-100 lines of code.

Taming Forms in React

I work on React Navigation, one of the most widely used React Native packages and one that tackles a problem that is central to all apps - navigating between different screens. It sounds simple when phrased like that, but it is deceptively complicated when you get into the details. React Navigation works on web, iOS, and Android, and can be extended to work on any platform that React renders to. 

We'll talk about the design, show you how to extend it, discuss the challenges of mobile navigation, and compare React Navigation to related tools and examine the trade-offs.

Mobile Navigation

You may have heard of CSS in JS, but what alternatives are there for implementing interactive motions in JS? This talk will be a comparison of several approaches from using vanilla Javascript to libraries like Popmotion, as well as ones in React ecosystem like React Transition Group and React Motion. 

Motion in React

Redux is a great library to manage application state. Updating a state synchronously is done with a pure function (a so called reducer) - which is easily testable and maintainable. But unit testing reducers doesn't include: - async actions using a middleware - creating a redux store with middleware 

Because there was no solution for that at that time, I developed chai-redux. A small chai extension which simplifies integration testing a redux store. 

In my talk I will explain what a redux integration test needs to cover. And how chai-redux helps simplifying them significantly. 

Testing a Redux store

React's context API has always been labelled as experimental, but from the advent of Redux it has been used in all the most exciting react libraries. It's about to become a stabilised feature so now is the perfect time to learn the new context API. Combining the context API and render props lets gives you unprecedented power to cleanly reuse code across components. It even plays well with TypeScript and Flow. 

This talk will explain how context and render props work and give you some ideas of how to use them to simplify your own code. 

Powering Code Reuse with Context and Render Props

In this talk we are going to explore how to manage background tasks within your React Native application. Background tasks are essentially tasks that run when the app is not in the foreground (visible). 

React Native: The dark side of Background tasks

My day job is to design and architect projects at my workplace and soon I realized that there were many common modules required across projects and I always end up copy-pasting those modules to newer as well as existing projects over and over again.

This was tearing me down. Setting up the tools for a library seems to be such a basic task that you may be surprised that it has numerous nuances. In fact, even the authors of well-known libraries often don’t do this right, and there is no single exhaustive go-to source.

In this talk, I’ll get practical and demonstrate a dummy project to discuss the best library building practices.

An unknown land of creating libraries

The obsession to always move on to the latest and greatest, and the fear of missing out while working with something that's older than few months is currently dominating the dev world. In my previous talks, I always included a short bit about this topic, and it resonated well with the audience. This time, I want to do a full talk on it, because I think everyone is struggling with this problem.

Navigating the hype-driven frontend development world without going insane

2018

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 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.