The Easiest Way to use Angular Elements with Tomas Trajan - AIA 413

In this episode of Adventures in Angular Tomas Trajan, an angular elements expert, breaks down how to use angular elements for the panel. Tomas explains that angular elements are great for very specific use cases.

Tomas starts by describing a scenario with a large enterprise with tens of developer teams and hundreds of developers, they have a few choices on how to organize their applications. The first option is a messy monolith. The second option is using monorepos and Nx. The final option is to use a multi-spa solution.

Tomas explains how the multi-spa solution works. This solution consists of 80 stand-alone applications, on the same page and share components. Tomas outlines the common problems when using the solutions and how using angular elements combat those problems.

The panel moves on to considers how you know if you should use angular elements in this way. Tomas provides two questions to ask yourself when deciding whether or not to use angular elements. The first question is, are you in a multi-spa scenario? The second question is, are components shared across applications? If the answer is yes for both of those questions then angular elements can only help the situation.

In last week’s episode of Adventures in Angular the panel interviewed Victor Savkin about using monorepos and Nx. The panel asks Tomas to compare the strategy of using monorepos and Nx to his strategy of using multi-spa with angular elements. He explains why an enterprise might choose multi-spa over monorepos. He also gives the reasons the organization he is working with chose to work with multi-spa.

Aaron asks for clarification for using elements in these multi-spa projects. Tomas goes into great detail, breaking down the way multi-spa and angular elements work together. They walk through it together using consumer profiles as an example.

Tomas explains that using his approach all the applications update components all at once using angular elements. The panel considers the benefits of using Tomas’s approach and which scenarios it would work best for. Aaron expresses his appreciation for all the work Tomas did and the problems he overcame then bundling his solution in a library together so developers can just use it without all the pain.

The library can be found on Github. Tomas tells the panel that there has already been some community contribution to the library. He describes some of the pull requests they have received along with the plans they have for angular elements.

The topic turns to mismatched versioning and how the bundle will work. Tomas explains that the only problem they have seen with mismatched versioning is with zone.js. He shares some workarounds to the problem and promises that they are working on a solution.

The episode ends with the panel listing all the major benefits that an enterprise can gain from using the multi-spa and angular elements approach. It will save them money, allow teams to work together, create and isolation. Tomas also shares some of the new features available in angular elements today.


Links

• AiA 256: Debunking Monorepo Myths with Victor Savkin
• https://angular-extensions.github.io/elements/
• https://twitter.com/tomastrajan
• https://www.facebook.com/adventuresinangular
• https://twitter.com/angularpodcast

Picks

• Brain - https://node-atl.org/
• Shai - https://netbasal.com/
• Aaron - How to Be Less Stupid About Race: On Racism, White Supremacy, and the Racial Divide
• Tomas - Slipknot EX

Become a supporter of this podcast: https://www.spreaker.com/podcast/adventures-in-angular--6102018/support.