The international React.js conference in Spain.

React Alicante

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.

React Alicante 2018

Sep 13 - Sep 15 | Alicante, Spain