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

React Alicante 2017

Sep 28 - Sep 30 | Alicante, Spain