Avanscoperta
TypeScript and React Workshop for Flexible and Evolvable Apps

TypeScript and React Workshop for Flexible and Evolvable Apps

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

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!

FAQs

Are there any entry requirements for this workshop?
The entry requirements for this workshop include the following:

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

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 on React and TypeScript in the links below so that you can get ready to join the workshop and make the most of it.

How can I get ready to join the workshop? Are there any suggested readings? Anything else?
If you’ve never worked with React, we recommend you take the official tutorial https://beta.reactjs.org/learn with all the basic concepts of the library. This intro will be enough to join the workshop.

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

If you’ve got experience 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 software and tools should I have to join this workshop?
A computer with a development environment to create a web app (NodeJS 16+, terminale, editor/IDE). We recommend having Visual Studio Code as the editor, which is used by the trainer. You’ll get detailed instructions on what to do 10-15 days before the workshop date.

Is there anything else I have to do before buying a ticket for this online workshop?
If you have a computer/tablet, a stable connection (at least 20 Mbps for download and 10 Mbps for 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 FAQs 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.

How our tickets work

Tickets

Under_Cover_Learner Discount SAVE 20%

If you’re paying the ticket out of your own pocket and you don’t have a VAT number, you can get a 20% discount on any tickets and on any ticket tiers!

How? Just enter the Under_Cover_Learner promotional code on the field "Enter promo code" in the section above (before hitting the button "Checkout").

Please note: this code cannot be used in conjunction with any other offers/discount codes, and it applies to any ticket tier.

Testimonials

If you already know TypeScript and React but you’re looking for a boost… this workshop is for you!Matteo Tortelli

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!