Talks 2017

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.

One of the most popular ways throughout the React community is my library, Redux Form (500k monthly downloads), which dispatches actions on form events to save form state in the Redux store.

In this talk we will explain how to set up a simple form, initialize values, run validation, and submit the values. Time permitting, more advanced techniques, like async validation, submit validation, or field arrays will be discussed.

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.

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.

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 case study of Lucentum: the first (but not last) React component library born and raised in Alicante!

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 little code as possible. But how?

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

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.

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 we use it at OpenTable and how we allow 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.

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.

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?

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.

And yet many projects are still putting generic class names and selectors into a huge CSS file. The fact is, styles are a part of components and deserve to be treated same way we treat JS. CSS deserves to be scoped and modular and have better tools that improve the developer experience.

This talk does a short retrospective of the problems we have with how we write, organize and bundle CSS and how we can improve it by using a better folder structure, naming conventions and local scope, post-processors like PostCSS and bundlers like webpack.

We’ll see how, by combining the power of JavaScript and AST, we can avoid CSS’s bad parts, embrace good ones and even use it to create a better tooling for CSS.

MobX or Redux? Mutable or Immutable? Why not do both? Let’s 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 worlds to create the next generation of state management!

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.

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.

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.

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 in order to let any new dev know easily how to use it and what behaviour expect from it?

React-Storybook provides a complete isolated environment with hot reloading that let you design and develop iteratively your UI React components. On top of that, by building your components this way you will ensure almost for free the creation of a nice living documentation and you will have a perfect entry point when we'll became the time to experiment things or solve issues.

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.

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.

In this talk, you will learn about the basics of ReasonML, an 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.

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