React Alicante 2019

Our Speakers

Meet our awesome speakers

Kasia Jastrzebska

Frontend Dev by day and by night. Secret (or not) CSS lover. Mother of four (2 kids, cat and horse - in random order). Currently changing the world of freight forwarding at Twill :)

[...]

Marco Cedaro

Webmaster before it was cool, pixel pusher, javascript-something, conference organiser, father of two, but mostly known for yelling at clouds. Currently tech lead at Condé Nast International.

[...]

Forbes Lindesay

Creator of pug, cabbie and ESDiscuss. In the past, Forbes has worked on large scale React applications at Facebook. He now gives talks and runs training workshops to pass his experience on to other people.

[...]

Jared Palmer

Jared Palmer is the Engineering Lead at The Palmer Group where he builds software for companies, startups, and governments. He is author of open source libraries such as Formik, Razzle, After.js, React-fns, and Backpack. Based in NYC, Jared is also the organizer of the local ReasonML and Framer.js meetups.

[...]

Braulio Díez

Braulio Diez is a javascript developer (old hand coming from .net background), passionate about new front end technologies, and open source contributor. Cofounder of Lemoncode, Braulio is focused on building robust applications, and helping others to improve their skills.

[...]

Mattia Manzati

Mattia is a frontend developer passionate about frontend software architectures. A lover of TypeScript and React. My favourite hobby is to try out new and weird things in tech.

[...]

David Khourshid

David is a Florida-based software engineer for Microsoft, a tech author, and speaker. Also a fervent open-source contributor, he is passionate about JavaScript, CSS, animation, innovative user interfaces, and cutting-edge front-end technologies. When not behind a computer keyboard, he’s behind a piano keyboard or traveling.

[...]

Sergey Ryzhov

Sergey is JavaScript developer at komoot. He loves rewriting apps with hooks although Dan told him not to.

Preeti Wadhwani

Preeti is a programmer at heart, currently doing mobile development. She has worked on multiple tech stacks like React Native, React, PWA, but Android remains her passion. She recently started exploring how UX can improve products and provide the best experience. Preeti loves to speak and attend conferences, help organise meetups, promote girls in tech and in general be part of developer communities. When she isn't glued to her code, Preeti can be found experimenting with gourmet, playing her guitar or spending time with her family.

[...]

Nacho Martín

Nacho Martín is a developer, consultant and trainer at Limenius, company that he co-founded. He is an active open source contributor and is enjoying his work with <span class="collapse fade">React and React Native as if it was his first day in this profession. He has usually dreams in which he is programming, so he tries to do it well to avoid nightmares.

[...]

Glenn Reyes

Front-end Engineer, enjoys building apps and user interfaces with React & GraphQL, creator of Graphpack, co-organizer React Vienna meetups, John Mayer music enthusiast.

[...]

Flavio Corpa

Frontend Engineer. JavaScript and Functional Programming Enthusiast. OSS contributor in: React, Vue, Angular, Babel, Webpack, Styled Components and others!

[...]

Wouter van den Broek

Wouter is a Dutch web and mobile developer and consultant currently working at Synappz Mobile Health and as freelances for start-ups and big companies. Busy since 1996 with the web and with mobile since 2002. He has built more than 100 apps, from Symbian to BlackBerry to iOS and Android and now on an endeavor with React Native with which he already made more than 10 apps big and small. He is always interested in new technics to create the best apps.

[...]

Eugene Zharkov

Eugene is a software engineer who founded 0 startups, didn't create a new JS framework this morning, but genuinely loves programming and helps community by sharing his knowledges over the past 8 years.

[...]

Jeremias Menichelli

His interest for web development started back when he opened a website for the first time as a child and asked himself why it was so slow. Through his career he has worked in accessibility, rich animated experiences, tooling and scalability of apps. He’s currently working in Design Systems at Typeform.

[...]

Rui Araujo

Rui is beard fluid software engineer that enjoys making code dance mainly with latin rhythms. Previously very focused on mobile and frontend, he has been going down the stack slowly but surely.

[...]

Jesús Cuesta

Currently Technical Leader of the AT Systems Javascript Expert Center, Co-Organizer of the Cloud Developers and Smart Devices Meetups, OpenExpo Europe collaborator and the Hackathon Lovers meetup and fan of technological events, hackathons and digital marketing. Experiencing new technologies such as virtual assistants, blockchain, cognitive services and work methodologies and team management such as Scrum, Change Management, Safe ...

[...]

Radoslav Stankov

Web developer with 15+ years of experience, currently is head of engineering at Product Hunt (by Angel List). Lately, he is juggling between Ruby, Javascript, and Elixir projects, with the belief that it’s equally important to work both on the frontend and on the backend. Organizer of React.NotAConf conference and React.Sofia meetup,.

[...]

Denys Dovhan

I'm R&D Engineer at Wix, speaker, Open Source addict, JS & Shell scripting fanboy, founder of Chernivtsi JavaScript Community and a Ukrainian community for developers called ƛ LambdaBooks.

[...]

Noemi Rozpara

Absolute extraversion and need of talking constantly involve her into weird projects. It started with graphics, then happened some presentations, interface design, back-end and small team management. Currently React Native developer. Considerates projects as products inseparable from economics and psychology. Her dream is to show the world human face of IT and make programmers interested in UX and user-centered design.

[...]

Shem Magnezi

Shem has a decade of experience in developing in various domains: client and server side, real-time systems, Big Data, mobile, and web. After a couple of years developing mobile apps, in the last 2 years, he's been trying to figure out what it means to be a web developer. Currently, Shem is a staff engineer at WeWork, previously he was the first employee in MyRoll (acquired by AVG).

[...]

Daily Miranda

Daily is a senior frontend developer, with 3 years of experience using React.

Karan Thakkar

Karan works as a Mobile Engineer at Skyscanner, building the React Native infrastructure enabling other teams within the org to use it. Previously, he lead the Web team at Crowdfire.

[...]

Talia Nassi

Talia is a quality-driven Test Engineer at WeWork with a passion for breaking and rebuilding software to be the highest possible quality. She started interning in QA when she was studying at UC San Diego and immediately knew that she had found her calling. From UCSD she was recruited to work at Visa, where she tested the payment processing system for the Prepaid Cards. After Visa, Talia started at WeWork, where she continues to innovate and do what she loves—deliver high quality software!

[...]

Victoria Quirante

Full-stack software developer and co-founder at Limenius. Building projects with Symfony, React and React Native. Speaker, trainer, and dedicated amateur football player.

[...]

Erik Rasmussen

American expat javascript developer in Spain, author of Redux Form and React Final Form.

Harry Wolff

Harry is a Lead Engineer at MongoDB. He blogs, hosts a weekly YouTube show, and founded a podcast called The Console Log that talks about the latest JavaScript and web news. He's located in NYC and loves discovering and playing with new software. He's very active on Twitter and has a very loud laugh.

[...]

Mario Beltrán

I love electronic music festivals, Metal Gear saga videogames, beer and web development, not necessarily in that order tho.

Luis Felipe Roman

Luis is a Colombian living in Prague, working as a Senior Frontend Developer at STRV. He loves to play with fun technologies like React, Next.js & Flow, always seeking for the next great thing to add to his workflow and share his knowledge with the developer’s community.

[...]

Event Schedule 2019

Are you ready for it? :-)

Thursday 9:00 - 13:00 Room Terra Mítica

TypeScript for React Developers

Forbes Lindesay

In this workshop we'll take a simple React application written in JavaScript, and convert it into TypeScript. You'll see how TypeScript lets you work faster, with fewer bugs making it to production.

- We'll start configuring our app to build using TypeScript
- We'll add types to our codebase to both catch errors and better document our code
- We'll enable strict mode to catch even more errors
- We'll see how to use generics to add types to functions without reducing their flexibility
- We'll enable tslint and fix some of the issues it throws at us

During the workshop, you will learn how to interpret the errors TypeScript throws, and how to build the most robust type system possible.

[...]

Thursday 9:00 - 13:00 Room Terra Lucis I

Functional Programming concepts in JavaScript

Flavio Corpa

This workshop will walk you through many concepts from functional programming brought to javascript, starting easy with curry, compose and map and slightly increasing the difficulties to Maybe, Either, Task monads, etc... hope you enjoy the journey!

[...]

Thursday 9:00 - 13:00 Room Almirante

React and GraphQL – From zero to production

Glenn Reyes

In this workshop we will build a production-ready React app with GraphQL backend from the ground up. This workshop is targeted to engineers who want to learn to build a complete and full stack React app with GraphQL.

## Topics covered

- Fundamentals & GraphQL core concepts
- Setting up the GraphQL Server
- Exploring the GraphQL API
- Setting up the GraphQL Client
- Querying and rendering data in your React app
- Creating, updating & deleting data using GraphQL Mutations
- Access control patterns using Context

[...]

Thursday 9:00 - 13:00 Room Terra Lucis II

Introduction to React Native

Victoria Quirante

In this workshop you will learn the fundamentals of React Native, understanding all the main concepts and discovering a new way of developing your mobile apps, taking profit of the philosophy "learn once, write anywhere". You will create your first React Native project and get ready to make the most of this technology.

[...]

Thursday 13:00 - 14:00 First floor

lunch

Thursday 14:00 - 18:00 Room Terra Lucis I

Building Modern Forms in React

Erik Rasmussen

A two-time React form library author will teach you how to start building robust forms in React, where the pitfalls are, and what the best practices are, including when React Hooks are useful for building forms. Students will be guided through building small forms, like a login form, all the way up to editing a complex "Account" form.

[...]

Thursday 14:00 - 18:00 Room Almirante

Hooked on React Hooks

Braulio Díez

Hooks have been introduced in a React minor version update, but they have become a fundamental change in the way of developing react components, they let you use state and other React features without writing a class.

- Learn the core concepts
- Learn how to use standard hooks (useEffect, useContext, useReducer...).
- Learn how to create custom hooks.
- Deal with component life cycle.
- Provide guidance on how to migrate a class components to functional components.
- Cover unit testing + hooks.

[...]

Thursday 14:00 - 18:00 Room Terra Lucis II

Advanced Async Flows with Redux Saga

Nacho Martín

The simplest case for asynchronous data flow (make a request to an API, process the response), can be handled very well out of the box, but what happens when we face more complex scenarios? Redux Saga is a powerful that, that once tamed we can use to model all kinds of scenarios. In this workshops we will see how take advantage from it to orchestrate side effects, avoiding callback hells or complex promise chains, in a readable and declarative way.

[...]

Thursday 14:00 - 18:00 Room Terra Mitica

React Native performance and best practices

Eugene Zharkov

Are you familiar with things like code bloat, computation speed and platform limits which are blocking application UI? You want to run your code as fast as you can, because user counts each second to have a positive experience. We will take a look under the hood of React Native, application performance issues, learn how to analyze and measure. Consider common application architecture patterns and component building mistakes and will apply best practices, as well as non-standard solutions to fix those issues.

[...]

Friday 08:00 - 08:50 Ground floor

badges pick-up

Friday 08:55 - 09:00 Room Europa

conference opening & welcome

Friday 9:00 - 9:45 AM Room Europa

Refactoring off the hook(s)

Marco Cedaro

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.

[...]

Friday 9:45 - 10:30 Room Europa

Type-level Programming ƒun in TypeScript

Mattia Manzati

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.

[...]

Friday 10:30 - 10:55 First floor

coffee-break

Friday 11:00 - 11:45 Room Europa

CSS. Under the hood.

Kasia Jastrzebska

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.

[...]

Friday 11:45 - 12:30 Room Europa

Evergreen Legacy Applications

Harry Wolff

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.

[...]

Friday 12:30 - 13:15 Room Europa

React architecture in Product Hunt

Radoslav Stankov

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.

[...]

Friday 13:15 - 14:25 First floor

lunch

Friday 14:30 - 15:30 Room Europa

Lightning Talks

Denys Dovhan - How I build live transport map for my hometown

Daily Miranda - React and Auth0 working together to get more secure apps.

Luis Felipe Roman - Optimising React TTI

Braulio Díez - Tracking promises or how to avoid showing infinite loading indicators

Friday 15:30 - 16:15 Room Europa

Giving voice an action in React and React Native

Wouter van den Broek

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.

[...]

Friday 16:15 - 16:40 First floor

coffee-break

Friday 16:45 - 17:30 Room Europa

Testing in React Native: Unit & E2E

Preeti Wadhwani

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.

[...]

Friday 17:30 - 18:15 Room Europa

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

Shem Magnezi

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

[...]

Friday 18:15 - 19:15 First floor

refreshments & networking

Saturday 9:00 - 9:45 AM Room Europa

Mind-Reading with Adaptive and Intelligent User Interfaces

David Khourshid

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.

[...]

Saturday 9:45 - 10:30 Room Europa

Profiling React rendering performance

Sergey Ryzhov

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.

[...]

Saturday 10:30 - 10:55 First floor

coffee-break

Saturday 11:00 - 11:45 Room Europa

Paving the adoption path of your Design System for engineers

Jeremias Menichelli

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.

[...]

Saturday 11:45 - 12:30 Room Europa

Testing in Production

Talia Nassi

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.

[...]

Saturday 12:30 - 13:15 Room Europa

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

Mario Beltrán

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.

[...]

Saturday 13:15 - 14:25 First floor

lunch

Saturday 14:30 - 15:30 Room Europa

Lightning Talks

Noemi Rozpara - React Native, your UX superhero

Jesús Cuesta - Using React with JAMstack

Rui Araujo - Compiling GraphQL to Blazing Fast JS

Saturday 15:30 - 16:15 Room Europa

React Native at Skyscanner: The Good Parts

Karan Thakkar

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.

[...]

Saturday 16:15 - 16:40 First floor

coffee-break

Saturday 16:45 - 17:30 Room Europa

Monorepo: React Web & React Native

Eugene Zharkov

There are cases when product has a lot of business logic and want's to share it across web and mobile platforms, especially when the web part uses React and mobile - React Native. Sharable code adds development speed, simplified communication between teams, removes behaviour 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.

[...]

Saturday 17:30 - 18:15 Room Europa

High performance video editing for the mobile web

Forbes Lindesay

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.

[...]

Saturday 18:15 - 19:15 First floor