The June 2022 edition of the workshop is sold-out. The next edition will be in English. Join the waiting list and receive an update once we publish the new dates.
Abstract
React is one of the best-known apps for front-end software development. TypeScript is a language that adds static typing to JavaScript.
Both technologies bring a promise of “scalability”, but what does this exactly mean? We believe an app can be defined as scalable if it allows to:
- add new functionalities without carrying extra complexity over time;
- make refactor of existing functionalities without the risk of adding new bugs;
- easily add new people to the team.
Building scalable applications is not easy: it’s very easy for a codebase to “explode” and it can be difficult to manage as it relies so heavily on some specific team members.
React and TypeScript are great tools when it comes to scalability, and during this workshop with Gabriele Petronella we’ll see how to use them in such a way that 2 + 5 = 5; this means being able to use these tools in full and taking advantage of their union, rather than just having them working side by side.
Target Audience
This workshop is aimed at front-end developers o architects with a professional knowledge of JavaScript who have started working with React e TypeScript and want to learn how to take advantage of the combination of the two fully.
The entry requirements for this workshop are:
- professional knowledge of JavaScript and web software development;
- basic knowledge of React and how it works;
- basic knowledge of typed languages (best if TypeScript, but Java, Go, C# or similar ones can work too).
Program
This workshop aims at understanding how to build frontend applications so that they’re easily maintainable over time they’re resistant to refactoring, making it easy to add new people to the team.
In this 4 half-day workshop together, we’ll build a web application in order to stress some of the most common issues that can compromise scalability in a real-case scenario.
We’re gonna explore one of more approaches to manage complexity for each one of these problems, and we’ll create practical and working solutions within the application itself.
These solutions will be extremely concrete (e.g. some specific libraries), but there will be space for some explanations to better understand the underlying principles. In this way, you’ll be able to apply these ideas and concepts in other contexts and with other tools too.
Agenda
Module 1
- Connecting to an API and visualizing data
- How to reconcile type-safety and data arriving from external sources by using io-ts
Module 2
- How to manage loading and errors in React by using react-query
- Sum types vs product types: how TypeScript can help us getting it right
Module 3
- How to modify data by using mutation react-query
- Multi-language apps: how react-i18n-next and TypeScript can help us eliminate entire categories of errors from our applications
- Techniques for avoiding some of the most common mistakes, such as forgetting to translate something and keeping consistency over different languages/translations.
Module 4
- Lean coffee
- Let’s talk about (including but not limited to): Routing and navigation, Pattern matching in TypeScript, Functional programming in TypeScript con fp-ts, Full-stack type-safety.
Learning Objectives
The main goal of this workshop is providing tools and methodologies to build scalable applications in React and TypeScript.
By the end of the workshop, we’ll have learned some specific technologies as well as some of the theoretical notions behind such technologies so that we can work in different contexts too.
Expect to get your hands dirty
You’ll get “your hands dirty” by joining this workshop: you’ll face the problems we’re gonna encounter as we develop our app and so we’ll be able to reason and understand what solutions we want to offer based on concrete cases. We’ll always start from realistic situations: here’s how we aim at making the advantages of a proposed solution clear and not abstract.
Each participant will need their own chosen editor and all the tools needed for the implementation.
Why should you join?
By the end of the workshop you’ll have seen how to solve the most common problems of scalability of a frontend application, and you’ll have the tools to design apps in React and TypeScript that will help you keep the apps under control.
How does it work
The workshop will accommodate up to 10 people: in this way the trainer will be able to give the needed level of attention to each participant. The group will be in the same room (whether physical or digital) and each person will be workin on its laptop.
The workshop will happen online and in live streaming: the trainer and all other participants will be in a video conference. You’ll be interacting and working together in real-time thanks to a variety of tools you’ll have at your disposal.
The workshop will keep its highly interactive and hands-on spirit despite being online. You won’t be sitting at your desk watching slides and videos, and you’ll be engaged in real-time activities for the majority of the time… as if we were in a real classroom!
