reactjsday 2022
21 Oct 2022 at San Marco Hotel

6

Directly inspired by John Ousterhout's great book about designing good software, this talk presents an opinionated take on the principles and patterns to follow when programming in React. We start first with an understanding of the nature of complexity, and then we proceed to evaluate how to best approach problems like component abstractions, API and composition. What should be included in a React component? How should we divide them? Which principles should we follow when designing the Component props? These are only a few of the everyday design decisions we have to make. This talk wants to provide opinionated guidance for these kinds of questions.

4

Build performant web apps with a full-stack framework, Remix. Remix focuses on the UI to enjoy fast & resilient UX. Experience the 'Remix magic' that enables no fetching & pre-fetch all in parallel before users make actions. As Remix focuses on UI & UX, why not share the 'Remix magic' with the business users? In this talk, we’re going to see together the combination of the new generation of a full-stack framework, Remix & a visual editor integrated headless CMS (Storyblok). Are you ready to explore a whole new level of experience?

6

Reading, understanding, and refactoring a TypeScript+React application can be challenging, even if it's small. I will tell you my story of when I jumped on the codebase of a small product to implement some last-minute changes before going live. I had an overall idea of what the product does, and the external team that worked on it received comprehensive documentation of our coding patterns and thorough code reviews. Despite that, being effective since the first day was hard for me. Why? Because four of the most important details that make a codebase immediately readable were missing, which are: - TypeScript' Discriminated Unions instead of optional properties (helpful to describe the domain) - Straightforward JSX code (ease reading and jumping through the code) - Explicit State Machines (describe what the app does from an internal perspective) - Cypress integration tests (tell what the app does from an external perspective) Apart from a long series of best practices, the listed ones are the most used in WorkWave RouteManager, a 250k-LOC front-end application.

Widgets are custom, interactive objects you place in a Figma or Figjam file to extend functionality and make everything a bit more fun. They are written in a declarative style similar to React components, which gets translated to become a node on the canvas. So can you go the other way, from canvas to code? Yes! We created Widget Code Generator that allows you go to from Design -> Widget interface in a button click. We’ll discuss how we used the public Figma plugin API to generate widget code from a design file, and make a working widget together using this.

Should you use a monorepo? Will it scale? In this talk you will learn if a monorepo can help you and give you all the tools to succeed. We will go through Subito’s journey to a scalable monorepo: we’ll cover why we chose a monorepo for our shared libraries and components, what challenges we encountered and what we learned from them.

4

Teams are getting bigger by applying micro-frontends using React, but complexity tracking production issues can become extremely confusing when no clear responsibilities are met. That’s when observability for teams and applications on a scale becomes even more important, in order to be able to identify potential issues in production, separate the concerns and the responsibilities among them. In this presentation we’ll learn how we can achieve this.

2

Stating that React Native’s mission is ambitious is an understatement. The promise of building applications for basically every platform is HARD. After using the framework for five years I think that React Native is superb. I love it. However, I must admit that is not flawless. I started using React Native in production in 2017. I will share with you what happened to the framework during my long journey. All the joys and the pains, what it definitely sucked and what makes me say today 'after all it was the right choice'. I’ll go through practical cases of apps that are used by hundreds of thousands of people, the mistakes you can avoid (because I already did it) and the A-HA! moments I had. I will walk you through React Native improvements during the years and what is the state of the art as today for developing an app starting from React. Spoiler alert: is not as simple as running a web app on a browser but it’s been dramatically improving year after year. At the end you will be able to start with the right tools and evaluate the new ones, thanks to my experience after all this years of developing with this framework.

Design System components are like guests at the Venetian Carnival — enjoying the festivities, and attending the Masquerade Balls. One guest in particular — the dropdown widget — is powerful yet elusive, and is known for wearing many distinct masks including the tooltip, dropdown, popover menus, and more. Their appearance at the party turns a simple masquerade into a Grand Ball. In this talk, you’ll learn the secret to creating a reusable — and accessible — component that can masquerade as many, and elevate your component library to the most exclusive of Carnival attractions.