<SOME OF OUR SPEAKERS>
Clement Hoang
Software Engineer
"Building on React @ CK (tbd)"
Building on React @ CK (tbd)
Progress is one of the core values at Credit Karma; we value the ability to iterate on our product quickly and incorporate our learnings through each iteration in order to enrich the member experience. To support the demands for increased velocity and iteration cycles, we developed Credit Karma Containers, a "Write Once, Deploy Everywhere" platform that enables us to quickly build personalized experiences in both Web and Native. This is the story of the problems that led to the development of Containers, how we used React and GraphQL in the architecture of Containers to solve these problems, and our learnings after using Containers for a year
Aman Sharma
Software Engineer
"Making web more native"
Making web more native
PWA have seen huge surge in recent years and business have been benifitting a lot from them. But many of them still struggle in making a better product experience, hence questioning the intent of a web app over native app in terms of user experience.

This talk is about decreasing the differnce between what is a PWA and a native app. We will see some design practices and patterns that can be helpful to remove this void ultimate providing an awesome user experience. This will include SPA, PWA, TWA , service workers, designing, native web api usages and more.
Konstantinos Leimonis
Software Engineer
"React Hooks and testing practices"
React Hooks and testing practices
React Hooks have been around and used for quite some time now. But how should we test React Hooks? This is a quite common question in the developer communities. We'll go through the do's and don'ts of react hook testing.
Håkon Krogh
Head of Engineering
"Our experiences with running Next.js in product. "No React for you""
Our experiences with running Next.js in product. "No React for you"
Crystallize.com was launched in 2017 and is our main tool for being discovered online. The 3 top requirements for the website have been crystal clear since the start:
- Performance
- Performance
- Performance
We'll dive into the story of how we started out with Next.js, how the framework has evolved and how the web industry with tools like Lighthouse have kept raising the bar for what's "killer" performance. Mistakes were made along the way, all leading up to where we are today, where React is used on the server and not in the browser (kinda).
Roei Berkovich
SW Engineer
"Same Code, Faster Application"
Same Code, Faster Application
A complicated React application usually consists of several components, utility methods, and third-party libraries.
The main problem that will affect the user, while shipping a large JavaScript payload is the loading time duration (especially on old devices and low network connections).
I will explain how we can split our bundle to multiple bundles with React.Lazy and React.Suspense and then ship it to the user only when he needs it
Gabriel Tosta
Frontend Engineer
"How (and why) to build an React app with RxJS"
How (and why) to build an React app with RxJS
RxJS is an amazing library to handle asynchronous code. It is very popular among Angular developers, but less known in the React world. In this talk, we will understand a bit better about the library and how we can create a modular, performant, and well-organized application using it, and also understand all the amazing things we can achieve from it.
Patrick Ullrich
Senior Software Developer
"The Refactor Lifecycle of a React Component"
The Refactor Lifecycle of a React Component
At Outpost we moved from razor pages to React as we were growing capacity and competency we made a lot of mistakes and improved our quality of code over time. In this talk I will take a "God Component" that I see a lot - a component that ends up being 1000 lines of code and does too much, and refactor it using different strategies that are important to know to write better react. This will include a bit of overall architecture as well as some refactoring patterns. I am thinking to go through 3-5 different tricks, 5 min each, with an introduction + life coding.
Nikhil Kumaran
Frontend Engineer
"UI component library with React + TypeScript + Tailwind CSS"
UI component library with React + TypeScript + Tailwind CSS
Developing a UI component library by following a design system, will not only make your code reusable but also have a consistent design language across your products. By integrating your component library with design tools like Figma we can improve the developer-designer collaboration.

In this talk, I'll walk you through the component library that I developed using React, TypeScript, Tailwind CSS, Storybook, and integration with Figma. I'll also emphasise on the pain points and gotchas that I faced along the way.
Neha Sharma
Software Development Manager
"Web for all"
Web for all
This talk is going to focus on the developers who are the builder of the web to understand why accessibility is important and not just limited to disable folks. We are in the world of Javascript based apps which is risk for the accessibility but still we devs can build the accessible apps while using reactjs. In this talk I will take them through the ways to fix the react app for accessibility eg: forms, page titles, image, dynamic content, localisation and few more such areas
Homer Gaines
Sr. UI Engineer & Accessibility Specialist
"The Four Principles of Accessibility"
The Four Principles of Accessibility
Within the WCAG 2.1, web-accessible content is broken into four principles collectively referred to as POUR. This acronym stands for Perceivable, Operable, Understandable, and Robust. These four areas specifically target areas where users have the most trouble when accessing digital content and provide guidelines for understanding how to think and approach accessibility.
Zachary Reece
Instructor
"Maximizing Productivity And Managing Complexity With Material-UI"
Maximizing Productivity And Managing Complexity With Material-UI
Having to code every single component from scratch for every application becomes exceptionally tedious. Keeping styles and functionality consistent between all those components is a whole other challenge in and of itself. What about implementing intricate designs that look perfect at every screen size? These are concerns that many developers have after getting started with React. Let's look at how we can address all of these concerns, and more, with Material-UI.

Material-UI is a robust library aimed at simplifying web development with React. It provides a complete toolset for building production-ready interfaces entirely from scratch. Taking full advantage of these tools will completely transform the way you think about and build React applications, allowing you not to be limited by technical capability but only by the extent of your imagination.

We'll see how Material-UI can maximize our productive output and reduce complexity for building incredible applications. We'll mitigate boilerplate and start working faster by using its vast component library, consisting of all the common elements found in most web applications. Then we can bring our designs to life with Material-UI's styling solution for completely customizing those components and its theming solution for consolidating the most commonly used styles. Helping us show off our hard work is the layout system for consistently arranging our components on the screen. Finally, the responsive design system ensures our designs look perfect on the largest screens down to the smallest mobile devices.
André Elmoznino Laufer
Software Developer
"Converting UR Play into React - a legacy rewrite case study"
Converting UR Play into React - a legacy rewrite case study
500.000 Swedes/month. \n\nI prefer giving this is as a semi-lightning talk of 15 minutes if possible (it was very appreciated when given at Stockholm ReactJS Meetup).\n\nOtherwise, I could make a general comparison to a project that was a total failure (although the client's name can't be disclosed) but since I haven't done that talk yet I'm not sure of its exact length (let's have a chat about it if you're interested). \nThe failed project needed 8-9 repos to run locally; had sessionstorage, Redux, MobX and the URL as state; and typically took a week to get setup locally.\n\nAlso, not sure if you want to classify this as a junior or senior talk."}" data-sheets-userformat="{"2":6588,"5":{"1":[{"1":2,"2":0,"5":[null,2,0]},{"1":0,"2":0,"3":3},{"1":1,"2":0,"4":1}]},"6":{"1":[{"1":2,"2":0,"5":[null,2,0]},{"1":0,"2":0,"3":3},{"1":1,"2":0,"4":1}]},"7":{"1":[{"1":2,"2":0,"5":[null,2,0]},{"1":0,"2":0,"3":3},{"1":1,"2":0,"4":1}]},"8":{"1":[{"1":2,"2":0,"5":[null,2,0]},{"1":0,"2":0,"3":3},{"1":1,"2":0,"4":1}]},"10":2,"11":4,"14":[null,2,0],"15":"Arial"}" style="font-size: 10pt; font-family: Arial;">This talk is a case study on how UR used react-rails with Cypress as a TDD tool to successfully convert their old Ruby on Rails app to React without breaking functionality.

Side note: UR Play is a free streaming service of educational content (much like UK's BBC or US PBR) used by >500.000 Swedes/month.

I prefer giving this is as a semi-lightning talk of 15 minutes if possible (it was very appreciated when given at Stockholm ReactJS Meetup).

Otherwise, I could make a general comparison to a project that was a total failure (although the client's name can't be disclosed) but since I haven't done that talk yet I'm not sure of its exact length (let's have a chat about it if you're interested).
The failed project needed 8-9 repos to run locally; had sessionstorage, Redux, MobX and the URL as state; and typically took a week to get setup locally.

Also, not sure if you want to classify this as a junior or senior talk.
Syed Ali
Senior Software Engineer
"Server-side React rendering using Next.js"
Server-side React rendering using Next.js
This talk will cover the getting started part of Next.js and also compare the difference between SSR and CSR and when we should use either.
Colby Fayock
Developer Advocate
"Adding a Second Pair of Eyes with Visual Testing"
Adding a Second Pair of Eyes with Visual Testing
Testing is a hard, but critical part of a development workflow. Without it, bugs can easily sneak through to production, costing us money or worse, costing our customers money! But setting up those tests can be a pain as you typically need to add very specific code to test very specific things, meaning, those tests are specifically fragile and easy to break with new code.

Visual Testing is a way to cover your project using screenshots from your web or native app allowing you to perform real-world actions and make sure they behave as you expect.

In this talk, we'll walk through what visual testing is and how we can take advantage of Applitools Eyes visual testing powered by AI to make sure we're maintaining a high level of quality of our apps.
Eric Bishard
Developer Advocate
"From Context API to RecoilJS"
From Context API to RecoilJS
Recoil JS was recently debuted from Facebook Open Source at React Europe and many developers are wanting to know how they can get started using it in their existing React applications. One of the easiest ways to get started is by converting an existing app from Context API to use Recoil JS for basic global state management. This talk will walk through the many Recoil JS Hooks API's that make it easy to make this transition. If you are familiar with React's Context API, using Recoil JS can be a breeze to get started with.

Demo Application Starting Point:
https://github.com/httpJunkie/react-app-base
Mohamad Shiralizadeh
Senior Full Stack Developer & InstructorDeveloper Advocate
"How choosing a wrong form library can affect your project efficiency?"
How choosing a wrong form library can affect your project efficiency?
If you choose a wrong form library for your project it is going to effects your project efficiency. So we are going to see how I choose my next project form. And what happened to my previous projects that I went for a wrong form library.
Milad Heydari
Tech-Lead & Co-founder
"Simple way to build an awesome product"
Simple way to build an awesome product
Imagine you want to build a product, you need to know how to lead the challenges, Pick the right technology stack which depends on the team's knowledge, communicate with the team, keep the team's spirit up, meet the goals, deadlines and move your project to success.
Roy Derks
Leading the Engineering Teams
"Using GraphQL for a faster React Development Cycle"
Using GraphQL for a faster React Development Cycle
Handling data fetching is one of the biggest (and most duplicated) topics in web development. We developers often need to write a lot of imperative code to retrieve data to display in our applications. With GraphQL you can improve the development cycles of web development and I'll show you how (even without a GraphQL server)!

Writing code for data fetching and handling state afterwards, is one of the biggest and most duplicated topics in web development. When working with frontend libraries and frameworks, you often have to use tools like RxJS, Vuex or Redux to combine responses from multiple APIs when using *traditional* REST services. GraphQL (and the surrounding ecosystem) can help you solve this.

In this talk I'll show with live demo's and coding how GraphQL can help you improve the development cycles and improve the DX for the developers that write the code. Also, I'll show how a more declarative way of handling data fetching reduces code complexity and gives more freedom to developers. Something that saved me and my company lots of time and development hours.
Salvador Ribas Mas
Leading the Engineering Teams
"Case Study: SCRUM multinational, multicultural team"
Case Study: SCRUM multinational, multicultural team
There is no denying that SCRUM has revolutionized the way projects are delivered.

However, when it comes to implementing Agile in a multinational, multicultural team, organizations have faced some friction points and setbacks. One of the key reasons is that agile is experienced and interpreted differently in different national cultures.

For example, expecting all members of the team to speak up in daily scrums and take the tasks yourself is natural to certain nationalities, but comes across as a new way of working for many others.

An Agile transformation is culture-specific and to have an effective set up, teams need to know how to turn these differences into strengths rather than a source of misunderstandings and frustrations.

During this talk, I will share a real case where an extremely talented but multinational, multicultural team using the SCRUM methodology just could not breakthrough because of intercultural friction.

And I will explain the training intervention and how we, all together transformed the obstacle of cultural differences into the advantage of cultural differences.
Saeed Ahmad
Senior Software Engineer
"Performance and Scalability in Web Applications built using ReactJS"
Case Study: SCRUM multinational, multicultural team
There is no denying that SCRUM has revolutionized the way projects are delivered.

However, when it comes to implementing Agile in a multinational, multicultural team, organizations have faced some friction points and setbacks. One of the key reasons is that agile is experienced and interpreted differently in different national cultures.

For example, expecting all members of the team to speak up in daily scrums and take the tasks yourself is natural to certain nationalities, but comes across as a new way of working for many others.

An Agile transformation is culture-specific and to have an effective set up, teams need to know how to turn these differences into strengths rather than a source of misunderstandings and frustrations.

During this talk, I will share a real case where an extremely talented but multinational, multicultural team using the SCRUM methodology just could not breakthrough because of intercultural friction.

And I will explain the training intervention and how we, all together transformed the obstacle of cultural differences into the advantage of cultural differences.
Andrey Okonetchnikov
Independent Consultant
"The good, the bad, and the ugly of design systems"
The good, the bad, and the ugly of design systems
So a manager says your organization needs to adopt a design system so you can finally make all buttons look consistent. As an engineer, you create a repository called "design system", add storybook as a dependency, and start writing components. Life is great and you feel like you're fulfilling your purpose in life. After weeks or months in working, you're ready to roll up your shiny new design system to the product (or products?). And this is there you realize the reality is so much different as your expectations.

Issues and bugs are stacking in the project's backlog, adoption rate is slow, designers don't really care about your effort, and developers are questioning the whole idea of the design system since "design says it should be 23px why can't I just write it like this?".

Welcome to my world! In this talk I want you to guide you through a year of my work as a design system consultant showing your problems that the design system team has to deal with on a day to day basis and some possible solutions.
Elad Tzemach
Software Engineer
"Error Handling for a Better UX"
Error Handling for a Better UX
In an ideal world, we would expect to see our app working smoothly all of the time. Unfortunately, we do not live in an ideal world, and so it is inevitable that we will sometimes encounter unexpected runtime errors in our app.
When this happens, our beautifully crafted app comes crashing down like a house of cards.

But why should one JavaScript error in a part of our UI break the entire app?

In this talk, i will discuss how we implemented better error handling to provide our customers with a better UX, and how we used that strategy to log our production errors which enabled us to be more proactive when handling UI issues.
Gagik Arustamyan
Lead Frontend developer
"Building admin portal: the fun way"
Building admin portal: the fun way
Using React and Apollo to make building admin portals with tons of data a bit more fun.
Sendil Kumar
Sr.Software Engineer
"Lessons learnt with Visual Tests and Snapshots"
Lessons learnt with Visual Tests and Snapshots
How confident are you with your tests? Does it work only on your machine?

Do you have thousands of snapshot files and don't know what is happening in them? Or do you have MegaBytes of images and that slows down your development?

Either way testing components is not an easy task. There are numerous factors out there that will break your component and it will be hard to justify, find, and address them.

Let us explore how to efficiently test and what will work and will not work in your component testing.
Claudia Bressi
Frontend & Mobile Developer
"Boost up your React app performance"
Boost up your React app performance
Time is a valuable resource for us and this applies even more for web app users. It's really important to improve the performance of our web applications and thus providing a good quality in the user experience we provide. In this talk I'll present the foundation of performant React applications and then we'll dive deeper in concrete code scenarios analyzing best practices and the main React features dealing with UI performance.
Charly POLY
Senior Software Engineer
"A year on managing technical debt on multiple React SPAs"
A year on managing technical debt on multiple React SPAs
Working on real world React SPAs is quite different from examples and tutorial found on the web, most of the time involving dealing with existing code, sometimes "bad one" that we qualify as technical debt.
On a personal return of experience and use-case of working 1 year on migrating multiple React SPAs to modern technologies (GQL, TS), we will see concrete example of architecture and organizational issues linked to technical debt and how to cope with them with some tips and best practices.
Roderick Hsiao
Staff Engineer
"Building Large Scale Web App"
Building Large Scale Web App
Modern front end framework provides an easy and delightful way to build UI and web applications.

However, when the app starts to scale and getting complex, it might be hard to keep the same simplicity and maintain the initial performance.

In this talk you will learn some key method we used at Tinder to keep our web app high performant and in the same time extendable for product features and framework optimizations.
Inga Pflaumer
QA Chapter Lead
"BUILDING A TESTING CULTURE"
BUILDING A TESTING CULTURE
We all heard a lot about the importance of testing, TDD or automation. But even though everyone agrees that a project can use more tests and automated tests would solve a lot of issues with re-occurring bugs or stability inconsistencies, it never goes further than a couple of new tests that go from green to red in a month and never get updated afterwards. In this talk I will walk you though a process of adding automation into your project, building priorities and culture around tests.

The talk will show:
* Where to start with writing tests
* How to support your automated test systems
* How to make sure your team is aware of the value automation brings
* How to avoid your tech debt being a place where inspiring automation plans come to die.
Imran Sayed
Full Stack Developer
"Building OpenWeb with decoupled WordPress & Gatsby using GraphQL"
Building OpenWeb with decoupled WordPress & Gatsby using GraphQL
OpenWeb's rebranding for SpotIM was focused on implementing a modern design with no compromises. This meant implementing not just a blazing fast website, but also a fully featured and powerful editing experience. The open source combination of React with Gatsby & WordPress using GraphQL perfectly fit the bill.

This talk will share the story of how rtCamp built a statically optimized front-end in React by sourcing the data from a decoupled WordPress backend using GraphQL, that delivered a time-to-first-byte of less than 0.3 seconds and a first paint at less than a second.


Key Take aways:
In this talk, the audience will know about the real world experience of using React and GraphQL in a decoupled WordPress + Gatsby architecture. They will learn about the challenges, and best practices when implementing React and GraphQL for data heavy site at an enterprise level.

https://rtcamp.com/case-studies/openweb-decoupled-wordpress-gatsby/
Nader Dabit
Senior Developer Advocate
"Next.js on AWS"
Next.js on AWS
With dynamic routing, API routes, static site generation, server rendered routes, and more, NextJS is becoming more and more powerful and popular. On the back end, we often need an easy way to integrate features like authentication, APIs, storage, and machine learning but do not want to build these ourselves from scratch.

In this talk I'll show you how to take advantage of everything NextJS has to offer combined with the scalability of Serverless AWS as an all-in-one cloud solution focused on front-end developers and leveraging our existing skillet to build full stack serverless applications.

This talk will cover:

Deploying Next.JS to Lambda at edge
Server-rendered routes
API Routes
Dynamic routes
Automatic pre-rendering
Client assets in static / public folders
Authentication (server & client)
SSR and SSG API calls
Authenticated SSR calls
Putting it all together
Container deployment on AWS Fargate

By the end of the talk, you should have a good understanding of how to deploy a NextJS app to AWS and add these features using just JavaScript and your existing front-end skillset.
Mathieu HATON
Developer
"Refactoring All the Way"
Refactoring All the Way
In the era of modern websites, the notion of design system has become mainstream. As many teams, we chose to build one for arte.tv replay website.
It brings multiple advantages such as visual consistency or better communication and it improves development efficiency.

In the life of a project, UI requirements changes and they do often. Changes request can have a high impact depending on the way the project has been designed.
Sometimes you end up being stuck in a dead-end, updating the code might be too complicated because of the lack of time, context or simply because you are scared to introduce new bugs.

We faced all of these issues at ARTE. And oftentimes, by simplicity, we preferred to add tiny patch here and there to fill the need. Adding code is great when creating new features. But when it comes to make changes on existing functionalities, it increases complexity. The more lines of code you have, the more context developers need and the hardest it is to maintain.

After a few months, it became clear that the project didn't scale as required and that we have lost the benefit of a Design System. We decided to take a few steps back, re-think our stack and the way we would like to approach the project in an ideal world.

After many exchanges and technical learnings, we decided to make a big move. This talk is about the way we rewritten the Design System with ReasonML and ReasonReact and how we made the codebase scalable to get confidence in shipping new changes.
Krystal Campioni
Senior Frontend Developer
"Battle-tested Data Viz with D3 and React-Spring"
Battle-tested Data Viz with D3 and React-Spring
Even though there are lots of plug-and-play data viz libraries out there, they can only get you so far. In order to create amazing experiences that stand out, you should have the skills to build custom experiences from scratch.

In this talk we will discuss how to combine the power of D3 as a math library with React rendering capabilities. How can we build custom charts with SVG or Canvas? How can we spice them up with react-spring animations? How to approach performance issues when there are multiple animated elements on the screen? These are some of the questions that will be addressed as we dig deeper into techniques applied to real-world examples.