Mastering TypeScript

Build enterprise-ready, modular web applications using TypeScript 4 and modern frameworks, 4th Edition

Nathan Rozentals

• Verlag: Packt Publishing
• Jahr: 2021
• ISBN:
  9781800561601
• Auflage: 4
• Thema: Computer Science
• Thema: Programming

Learn all you need to know to work with TypeScript, explore modern web application frameworks, and build modular systems using industry standard architectural principles and design patterns

Key Features

• Explore TypeScript 4's key elements and advanced language features
• Use TypeScript with modern frameworks such as Angular, Vue, React, RxJS and Node
• Understand TDD, serverless techniques, micro frontends, and other industry-standard best practices to create high-quality and modular apps

Book Description

TypeScript is both a language and a set of tools to generate JavaScript, designed by Anders Hejlsberg at Microsoft to help developers write enterprise-scale JavaScript.

Mastering Typescript is a golden standard for budding and experienced developers. With a structured approach that will get you up and running with Typescript quickly, this book will introduce core concepts, then build on them to help you understand (and apply) the more advanced language features. You'll learn by doing while acquiring the best programming practices along the way.

This fourth edition also covers a variety of modern JavaScript and TypeScript frameworks, comparing their strengths and weaknesses. You'll explore Angular, React, Vue, RxJs, Express, NodeJS, and others. You'll get up to speed with unit and integration testing, data transformation, serverless technologies, and asynchronous programming. Next, you'll learn how to integrate with existing JavaScript libraries, control your compiler options, and use decorators and generics.

By the end of the book, you will have built a comprehensive set of web applications, having integrated them into a single cohesive website using micro front-end techniques. This book is about learning the language, understanding when to apply its features, and selecting the framework that fits your real-world project perfectly.

What you will learn

• Gain insights into core and advanced TypeScript language features
• Integrate with existing JavaScript libraries and third-party frameworks
• Build full working applications using JavaScript frameworks, such as Angular, React, Vue, and more
• Create test suites for your application with Jest and Selenium
• Apply industry-standard design patterns to build modular code
• Develop web server solutions using NodeJS and Express
• Design and implement serverless API solutions
• Explore micro front-end technologies and techniques

Who this book is for

If you are keen to learn TypeScript, this book will give you all the necessary knowledge and skills to tackle any TypeScript project. It will also give you an understanding of what application frameworks are out there, and which one to choose for your next project. If you are already an experienced JS or TypeScript developer, then this book will take your skills to the next level. No JS experience is required to get started — we'll teach you all you need to know.

16

Micro Front-ends

In recent years, the programming community has been exploring and implementing micro services architecture. The goal of this architecture is to split up monolithic applications into smaller-sized chunks, such that a group of smaller services now work together to provide application functionality. The benefit of doing things this way centers around the idea that each micro service can be independently deployed, can have a completely independent build and release cycle, and multiple copies of these services can be easily spun up to provide scaling capabilities. Each micro service becomes independent of any others, and can therefore use its own choice of technology stack, deployment pipeline, and testing regime. A micro service can also evolve its functionality over time, without impacting other services, as it is an independent unit that does a particular job within a larger community of services.

An extension of the micro-services architecture is the concept of micro front-ends, where a single application can be made up of several user interfaces that are built independently of each other. In other words, if a micro service is responsible for providing a specific set of functionality, then a micro front-end is a front-end that surfaces this data and functionality to a user. If we think of "silos" of functionality, complete with services, data storage, and user interfaces, then this "silo" is a micro front-end. This micro front-end can be owned by a specific team, and the act of isolating the services, data, and front-end has certain benefits. They can be deployed independently of other front-ends, they can follow their own development cycles and release cycles, and they would have no impact on other "silos" of functionality. Most importantly, though, is that the application itself is not a monolithic application; it is built up of independent component parts, and becomes more modular and easier to change.

Thus far in this book, we have built three different web applications, using Angular, React, and Vue. The Angular application that we built was centered around a user logging in, and handled the login screens and associated logic. The React application that we built showed a list of products, and also showed the details of a product when selected. The Vue application that we put together was centered around a shopping cart, allowing a user to view and update products in their cart, and also generate a summary view of their items.

In this chapter, we will bring each of these applications together into a single application, and treat each existing application as a micro front-end. Specifically, we will cover the following topics:

• Micro front-end design concepts:
  • How do we build a micro front-end?
  • How do front-ends communicate with each other?
  • Domain events
  • An Event Bus
• Building a micro front-end application:
  • A global Event Bus
  • React updates
  • Vue updates
  • An Angular micro front-end
  • Micro front-end summary

Design concepts

So what exactly is a micro front-end application? In theory, it involves breaking down our websites into smaller functional pieces, which are independently deployed and managed. Breaking up a website in this way means thinking about "silos" of functionality that are self-contained and are able to function as if completely independent of other areas of the site.

Designing an application using micro front-ends has its benefits, but it will also present us with a few unique challenges. It is best suited to websites where a number of different teams are working together to produce a single user experience. There may be a team that is solely focused on products and product management. This team would be responsible for building a front-end that shows what products are available on the site.

They may need to implement a search algorithm, for example, or need to show current specials that are available to a certain geographic region. The team that handles all things related to products should be able to build, test, and deploy functionality in their own rhythm, and without affecting other areas of the site.

We may have another team that is solely responsible for handling payment for goods on the site. This team may take all things shopping cart, including integration with credit card payment providers, and calculation of shipping costs and taxes. An update of the site from this team may revolve around the integration...