November 2021, seems that pandemic situation is still not getting better but on the other hand several frontend or javascript focused conferences provide online attendance. So, why not visit the Italian one and meet several known and impressive people from the dev community :-)

AngularDay

This Italian Angular international conference was organized by GrUSP community on November 12th 2021. The event happened online, on Hopin easy-to-use web platform for conferences.

There were various known speakers from the Angular community and also the official Angular Core Team joined (Emma Twersky, Mark Thompson, Jessica Janiuk) in the last part.

The atmosphere of the conference was easy going and was moderated by Giulia Tosato, Tomas Trajan and also Tracy Lee joined in the last part.

I decided to highlight the top points per talk which impressed me and I’ll briefly explain why.

State of Angular, Maxim Salnikov

Maxim talked about the current status and future roadmap of the Angular framework. He summarized highlights of the improvements in Angular v13 that was released on November 5th 2021.

The top improvements which impressed me were following topics:

“Ivy Everywhere”

View Engine renderer is no longer available. In the case of our project, it means faster compilation and eventually faster builds.

Component API updates

• Better forms - Enable/disable validators dynamically (maxlength example)
• Simpler API for creating dynamic components

End of IE11 support

Solution for old school clients would be to run MS Edge and set IE11 mode.

Angular CLI improvements

• Big improvement in build cache - basically faster builds
• Typescript v4.4 support
• RxJS 7.4 support
• Automatic cleanup with Testbed - we can expect faster, less memory intensive and more optimized tests

What’s next topic

• Standalone components
• Strongly typed forms

Resources:
The Status of Angular Slides

Angular v13 is now Available

NoSQL Data Modeling for FE Developers, Stanimira Vlaeva

This topic was mostly about data modeling in the context of MongoDB, a NoSQL document database. That was quite a different topic from Front-end, but for someone who is also interested in server side technologies that could be also beneficial.

While this topic had nothing to do with front-end I would highlight following points which impressed me:

• NoSQL document database approach in general, which is non-relational nor tabular
  • no tables, different data model from relational DB approach
  • Documents - js or json object. Additional types in json, schema is flexible, every doc has own schema
• When to use Referencing and when Embedding - pros and cons
• Managing duplication and staleness with batch updates

Create Smart Angular Apps Using Azure Computer Vision - Ankit Sharma

Very interesting topic about integration of Microsoft Cognitive Services Computer Vision APIs with Angular app. While there was no talk about some specific Angular techniques, this speech showed how easy it could be to implement a text recognition feature by using easy-to-use services provided by Azure Cloud. I was impressed. Now I am familiar with following aspects:

• Computer Vision, OCR API, Image Analysis API, Spatial Analysis
• How to set up easily Smart Angular app that has ability to recognize text from pictures

Resources:

Smart Angular app Github

Ankit Sharma Blog

Betterer: Incremental Improvement, Craig Spence

Craig spoke about something that was completely new for me. And that was a tool called Betterer. Wow wow I was so fascinated how he explained topics like Genetic Algorithms, Evolutionary Architecture, which inspired Betterer to make incremental improvement to our codebases easier.

Betterer

It’s basically a test runner that is similar to Jest or Mocha. But output from Betterer tells you if your new implementation made the codebase/workspace better, worse or of whether this state is the same in comparison with the stored state in your main branch.

That tool enables you to lock the quality of your codebase and what you can do is to go just in one direction and move closer towards a better solution.

Betterer possible use cases

The typical use case would be when you want to introduce some stricter rule to your codebase - for example migrate JS to TS, replacement of an old component with a new component or just check if the number of eslint warnings is not increasing.

So if you’ve introduced new errors/warnings that are bad and it will throw an error, if you’ve fixed some it keeps letting you fix them until eventually there are none.

Betterer comes with many built-in tests, and of course Angular tests are supported, let's check others.

Resources:

Meetup with Craig at AngularNation

Betterer site

The best way to Architect Your Angular Libraries, Tomas Trajan

Very helpful and useful tips from Tomas about this topic. Great live coding, during which he demonstrated how useful Angular Schematics are and how it could generate output without writing any code. He focused by showing an example of how to architect the library and how to get the smallest possible bundle size by avoiding specific mistakes.

Everything is well described in the youtube video or in his article about this topic.

CommonJS dependencies

Tomas showed how CommonJS dependencies in our library module could affect our final bundle size. In specific cases Ivy just doesn’t know if it should tree-shake it, even though it has not been consumed in our code.

Destroying code splitting in lazy loaded modules

There was an example of how easily we can break code splitting of our lazy loaded modules. The library module that was consumed just in the lazy loaded module finally landed in main.js file. It is described in this scenario.

Using Sub-Entries architecture

This technique solves the problem with code splitting of used library modules across our lazy loaded modules. Then everything is tree-shaken properly even though we use CommonJS dependencies in our library modules.

Resources:

Tomas Trajan - The Best Way To Architect Your Angular Libraries

Tomas Trajan Medium - Angular In depth articles

The Best Way To Architect Your Angular Libraries

Destructuring frontend monoliths with Micro Frontends, Trishul Goel

Trishul explained the general architecture behind Micro Frontends. That tells you how a common enterprise app monolith can be broken into smaller micro front-end parts. He showed an example in Angular which uses the Module federation approach.

I summarized the basic concepts of it in the following points.

AppShell

• load and serve the specific Micro Frontend, for example loading the home page micro front-end
• can encapsulate header, footer, global config or shared business logic which could be shared among Micro Frontends

Communication

How the communication is handled between Micro Frontends and AppShell will rely on your tech stack. It will be easy in Angular with Angular cases, but worse in Angular using other frameworks. We can communicate by the following techniques

• passing data as an argument of the function
• as a route parameter or pass the function and data as an argument of the module
• custom DOM events

Module federation

Webpack 5 feature allows you to reference remote modules which are not available or known to the compiler at the compile time. These modules are known only at the run time. Let’s say that we can split our architecture and our AppShell module will encapsulate some remote Micro Frontend modules, then the deployment of them is decoupled.

Angular side

We have to set the host and remote module federation configuration file (each per remote). It is done via ModuleFederationPlugin. Where we say which dependencies will be used from the host, what should be shared between remotes and also remotes references.

Tenpureto

As each individual Micro Frontend has its own setup, Trishul’s team uses Tenpureto templating engine for initializing new Micro Frontend. Whenever they need a new Micro Frontend it wraps up a new repository according to the specified template with all settings and scripts.

Resources:

Destructuring frontend monoliths with Microfrontends - By Trishul Goel

Tenpureto

Who needs Inheritance and composition, when you can copy paste the same code in every class!, Kate Sky

This talk focused on identifying

• when to use composition
• how to apply Decorator Pattern
• how to take dynamic behavior of the components and refactor them into directives

Kate emphasized that custom directives are another way of refactoring things out of our components. And this idea is based basically on Angular code in itself, wherever the Decorator Pattern can be used.

The goals of these concepts are to make our Angular code

• well-organized and maintainable
• cleaner, easier to change and easier to read
• with great design that minimizes the duplication of code

Resources:

AngularDay demo app

AngularAir - Using composition over inheritance in building Angular Components with Kate Sky

Summary

… aaaand summary. As I gather my impressions and learnings from that conference, the best talks, from my perspective were

• Maxim Salnikov where he clearly explained what's new and where it goes
• Tomas Trajan, that cool guy who always does live coding and so far was the only participant to try that during a conference. So I appreciate his courage, despite that he had some connection problems. That was a really beneficial introduction to sub-entries architecture in the angular libraries. I will head straight for that in future
• Craig Spence - the creator of Betterer. It's amazing what this guy has done for the whole community. This tool is worth consideration in every project. It tries to solve problems of Angular projects (at least from my experience). Betterer has so much potential