Abstract
React is one of the best-known technologies for front-end software development. TypeScript is a language that adds static typing to JavaScript.
Both technologies promise “scalability”, but what does this mean exactly? We believe an app can be defined as scalable if it allows one to do the following:
- add new functionalities without carrying extra complexity over time;
- refactor existing functionalities without a high risk of adding new bugs;
- easily onboard new people to the team.
Building scalable apps isn’t easy: it’s very common for a codebase to “explode” in complexity, and it can be difficult to maintain and evolve, especially when it relies heavily on a few specific team members.
React and TypeScript are great tools for scalability, and during this workshop with Gabriele Petronella we’ll see how to use them so that 2 + 2 = 5; this means being able to use these tools to the fullest and taking advantage of their collaborative ability, rather than just having them working side by side.
Target Audience
This workshop is aimed at front-end developers or architects with a professional knowledge of JavaScript, who have started working with React and TypeScript and want to learn how to take full advantage of the combination of the two.
The entry requirements for this workshop are as follows:
- professional knowledge of JavaScript and web software development;
- basic understanding of React and how it works;
- basic knowledge of statically-typed languages (ideally TypeScript, but Java, Go, C#, or similar ones work too).
Program
This workshop aims at understanding how to build front-end apps so that they’re easily maintainable over time and resilient to refactoring, making it easy to add new people to the team.
In 4 half-days together, we’ll build a web app that stresses some of the most common issues that can compromise scalability in real-world scenarios.
We’ll explore several approaches to manage complexity for each of these problems, and we’ll create practical and working solutions within the app itself.
These solutions will be extremely concrete (e.g., we’ll use specific libraries), but there’ll be space for exploring the concepts behind the solutions, so as to understand the underlying principles. This way, you’ll also be able to apply these ideas and concepts in other contexts and with other tools.
Agenda
Module 1
- Connecting to an API and visualizing data
- How to reconcile type-safety and data coming from external sources 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 get it right
Module 3
- How to modify data using mutations in react-query
- Multi-language apps: how react-i18n-next and TypeScript can help eliminate entire categories of bugs from apps
- Techniques for avoiding some of the most common mistakes, such as forgetting to translate something and maintaining consistency in different languages/translations.
Module 4
- Lean coffee
- Discussions about (including but not limited to):
- – Routing and navigation
- – Pattern matching in TypeScript
- – Functional programming in TypeScript with fp-ts
– Full-stack type-safety.
Learning Objectives
The main goal of this workshop is to provide tools and methodologies to build scalable apps 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 them, 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 encountered during the app development so that you’ll be able to reason and understand what solutions to offer based on concrete cases. We’ll always start with realistic scenarios to ensure the advantages of a proposed solution are clear and not too abstract.
Each participant will need their own chosen editor and all the tools necessary 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 with a front-end app, 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?
This online workshop will accommodate up to 10 people so that the trainer will be able to provide the appropriated level of attention to each participant. It will be livestreamed, with the trainer and the participants taking part in a videoconference. Group members will in the same room (whether physical or digital), and each person will be working on their own laptop.
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. Instead, you’ll be engaged in real-time activities for the majority of the time… as if you were in a real classroom!
