Avanscoperta
TypeScript and React Workshop for flexible web apps

TypeScript and React Workshop for flexible web apps

Learn how to use TypeScript and React to master complexity and to facilitate evolution and maintenance

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!

F.A.Q.

Are there any entry requirements for this workshop?

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

I’m a back-end developer: “can” I join this workshop?

Yes, if you have a working knowledge of JavaScript. We recommend you take a look at the resources linked below on React and TypeScript so that you can get ready to join the workshop and make the most out of it.

How can I get ready to join the workshop? Are there any suggested readings? Anything else?

React: If you’ve never worked with React, we recommend you take this official tutorial with all the basic concepts of the library https://beta.reactjs.org/learn. This intro will be enough to join the workshop.

Typed languages: If you’ve never worked with a typed language, take a look at this intro: https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html, which was created especially for JavaScript developers.

TypeScript: If you’re experienced with typed languages (Java, C# or similar) but you’ve never seen JavaScript, we recommend this article: https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes-oop.html

What should I have in order to join this workshop in terms of software and tools?

A computer with a development environment to create a web application (NodeJS 16+, terminale, editor/IDE). We recommend having Visual Studio Code as the editor, the same used by the trainer. You’ll get detailed instructions on what to do 10-15 days before the workshop date.
Is there anything I must do before I buy a ticket for this online workshop?
If you have a computer/tablet, a stable connection (at least 20 Mbps in download and 10 Mbps in upload), earphones, a microphone, and a webcam, then you’re ready to join the workshop.
You’ll get detailed information on what tools we’ll be using and how to get ready a couple of weeks prior to the workshop.
Check out your connection’s speed.
The workshop will keep its highly interactive and hands-on spirit despite being online.

N.B.

This workshop will be confirmed upon reaching the minimum number of participants. We’ll send an official confirmation to all registered attendees 10-15 days weeks prior to the workshop dates.

About the workshop

Language: English.
Laptop: Yes, check out the FAQ section.
Maximum number of attendees: 10 participants.
Tools and Workstation: The workshop will take place online and in live streaming by using digital tools. You’ll get detailed information on how to join the online workshop, how to get ready for it and how it will work once the workshop will be confirmed.
It is highly recommended that each participant joins the workshop from their own workstation: not sharing one same laptop and/or room with other people will improve the remote experience.

Testimonials

Gabriele Petronella

Gabriele is the co-founder of buildo, a software consulting company based in Milan, where he works as a lead software engineer. Passionate about front-end and back-end architectures, he has extensive experience with react, TypeScript and Scala.

About us

Avanscoperta is a growing community of professionals learning together, exchanging experiences and ideas, exploring uncharted territories.

We carefully select the most relevant topics and the best trainers and thought leaders worldwide with an eye to the most engaging teaching techniques.
Are you ready to learn with us?

Are you interested in this course?

If you have any specific questions, or if you want to receive more information on dates, content or offers about this course, drop us a line. We'll gladly get back to you!







    NEWSLETTER

    Get exclusive content from experts in software development, technology, business and design!

    SUBSCRIBE TO OUR NEWSLETTER! :-)

    Subscribe to our newsletter!