Reader small image

You're reading from  Mastering TypeScript - Fourth Edition

Product typeBook
Published inApr 2021
Reading LevelIntermediate
PublisherPackt
ISBN-139781800564732
Edition4th Edition
Languages
Right arrow
Author (1)
Nathan Rozentals
Nathan Rozentals
author image
Nathan Rozentals

Nathan Rozentals has been writing commercial software for over 30 years, in C, C++, Java and C#. He picked up TypeScript within a week after its initial release in October 2012 and realized how much TypeScript could help when writing JavaScript. He was one of the first people to start blogging about TypeScript, discussing early frameworks such as Backbone, Marionette, ExtJS and AngularJs. He knew he'd hit the mark when Microsoft staff started to reference his blog posts in their CodePlex discussion forums. Nathan's TypeScript solutions now control User Interfaces in IoT devices, run as stand-alone applications for Point-of-Sale solutions, provide complex application configuration web sites, and are used for mission-critical server APIs.
Read more about Nathan Rozentals

Right arrow

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

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

Building a micro front-end application

In this section of the chapter, we will go ahead and build our micro front-end application, and combine our Angular, React, and Vue front-ends into an application that behaves like a single store front. We will also integrate our front-ends with the REST API that we built in Chapter 15, An AWS Serverless API. This will ensure that both the React Product List front-end and the Vue Shopping Cart front-end work off the same list of products, as exposed by the /products endpoint.

In a production front-end, the general idea is that each application is a "silo," and therefore has its own REST endpoints and databases, in such a way that each team has the freedom to modify any piece of their architecture without affecting other front-ends. In reality, though, there will always be some sort of shared data that all front-end applications may need access to. As an example, a store of registered users might be shared across front-ends, or a...

Summary

This book has been an exploration of all things TypeScript, starting with basic language constructs, and moving into more and more advanced features. In the first part of this book, we covered the language itself, integration with JavaScript, unit testing, and data transformation. In the second part of this book, we explored a number of popular JavaScript frameworks, including Angular, React, Vue, Express, and AWS Lambda, and finally integrated some of these into a micro front-end application. Hopefully you have enjoyed this journey, and have learned a little bit about how TypeScript can be used to successfully develop, test, and integrate a wide range of JavaScript applications.

...
lock icon
The rest of the chapter is locked
You have been reading a chapter from
Mastering TypeScript - Fourth Edition
Published in: Apr 2021Publisher: PacktISBN-13: 9781800564732
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
undefined
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $15.99/month. Cancel anytime

Author (1)

author image
Nathan Rozentals

Nathan Rozentals has been writing commercial software for over 30 years, in C, C++, Java and C#. He picked up TypeScript within a week after its initial release in October 2012 and realized how much TypeScript could help when writing JavaScript. He was one of the first people to start blogging about TypeScript, discussing early frameworks such as Backbone, Marionette, ExtJS and AngularJs. He knew he'd hit the mark when Microsoft staff started to reference his blog posts in their CodePlex discussion forums. Nathan's TypeScript solutions now control User Interfaces in IoT devices, run as stand-alone applications for Point-of-Sale solutions, provide complex application configuration web sites, and are used for mission-critical server APIs.
Read more about Nathan Rozentals

Share your experience

Thank you for taking the time to read this book. If you enjoyed this book, help others to find it. Leave a review at https://www.amazon.com/dp/1800564732.