As a Consultant, I’ve had the privilege to work with many teams and projects in a relatively short amount of time.
This not only allowed me to learn a lot from the existing codebases and team members but also to understand the biggest mistakes committed by the teams who weren’t very familiar with Rx and Angular.
1) Not Unsubscribing
I and many others have talked at length about the subject, but this is still the most common mistake I normally see — i.e. not unsubscribing from a stream at all.
This has various consequences such as:
- Causing memory leaks
- Causing unwanted callbacks being…
Auxiliary Routes can be helpful for both technical and UX reasons: learn why and how to use them with Angular
Auxiliary Routes are independent, secondary routes that can be added to a page along with a primary route. As an example, we can have a side-menu that lives within the primary route with its own router-outlet: that’s an auxiliary route.
Why are Auxiliary Routes useful?
Why would you want to add auxiliary routes to your application? Well — I would argue there are two good reasons for doing it: auxiliary routes are helpful for both technical and User Experience reasons.
- In terms of UX, we use them for providing our users the ability to access or toggle portions of the page via the URL. That…
Six concepts every Angular developer should explore in-depth in order to master Angular and design well-architected applications.
Angular is one of the biggest frameworks around: it provides a lot of features out-of-the-box, which means there are quite a few concepts to be able to master if from top to bottom.
There are six specific concepts I think every Angular developer should explore in-depth in order to master Angular and be able to be proficient with writing well-architected applications.
No, knowing its source code is not what’s I think it’s required — although I’ve personally had to explore in a small number of situations.
An Architecture for Cloud Component Hubs
Cloud component hubs like Bit.dev are commonly used to publish, document and organize Angular…
A step-by-step guide to building and distributing a design system built with StencilJS
I’ve recently written an article about the fundamentals of StencilJS and how to get started with it to write reusable Web Components.
In this article, instead, I want to deep-dive on the use-case that led to the creation of Stencil by the Ionic team: creating reusable design systems.
While it’s entirely possible to build fully-featured apps with Stencil alone, this toolchain makes an ideal companion for bigger frameworks for creating truly reusable components.
Indeed, it allows us to build components that are:
- extremely small
- performant out-of-the-box
- reusable with any framework, or no framework at all
- future-proof
In this article, we…
Learn how to implement the Intersection Observer API using Rx and Angular, and the use-cases where it can help your code be more performant and efficient.
Introduction
The Intersection Observer API is a relatively new functionality in web browsers that can dispatch events when an element’s visibility status changes.
This API allows for a variety of different use-cases that can help with creating more efficient and more performant applications.
In this article, I want to explain how to use it and one of the use-cases that helped me improve efficiency and performance in one of my projects using Angular.
Use-Cases
From a performance-related perspective, here are a few of the many things we can achieve:
- lazy-loading images
- lazy-rendering children components or heavy content
- lazy-loading scripts/stylesheets associated with a…
An internal style guide for writing code is an important decision that any development team should define and agree on at some point, ideally early on in the project.
An internal style guide for writing code is an important decision that any development team should define and agree on at some point, ideally early on in the project.
If you’ve been writing code professionally, you know very well how important style is for many, many developers. Countless hours in my career have been spent arguing about style.
Why is it so important, though? Programmers read code way more than they write: it’s crucial that we simplify this task as much as possible for us but especially for our fellow teammates.
The consensus is to define a style guide before…
An overview of the available techniques to render large lists of items with Angular
Frameworks in 2020 got better, more efficient and faster. With that said, rendering large lists of items on the Web without causing the Browser to freeze can still be hard even for the fastest frameworks available.
This is one of the many cases where “the framework is fast, your code is slow”.
There are many different techniques that make rendering a large number of items in a non-blocking way for the users. In this article, I want to explore the current techniques available, and which ones are best to use based on particular use-cases.
Although this article focuses on how…
An introduction to StencilJS: A compiler that generates web components.
What is StencilJS?
StencilJS is a library for generating web components, built by the team behind the Ionic Framework.
As you may know, when Ionic was initially released, it was built specifically for Angular. Then, other frameworks started to emerge and take a large chunk of the frontend community — and Ionic wanted its tools to be used by anyone regardless of the framework of choice.
Rewriting the same components for every major framework would have been an impossible (and probably wrong) task. Web Components allow us to solve this issue — but not without limitations, that are all well-documented.
Stencil attempts to…
Is your app slow? Learn what to watch out when debugging poor performance in your Angular apps!
Introduction
Angular is, by default, a fast and performant framework. While it leaves ample space for improvement by opting out some of its magic, we almost never have to do anything special to write extremely performant code for the average app.
With that said, some difficulties will eventually arise when we are writing either performance-critical apps, apps with large and complex content, or apps updated extremely frequently.
There are loads of resources and popular advice out there about improving performance with Angular apps. …
Top favorite Angular libraries and tools you should definitely try.
Introduction
Angular is a framework that boasts an incredibly rich ecosystem — with tooling built not only from the core team but also from the community.
In this post, I want to list my favorite tools that I’ve had the pleasure to work with and that I would recommend anyone to give a try.
I split the following list into three categories:
- Development Tools
- Libraries
- Testing
Let’s start!
Development Tools
1) Angular State Inspector
Compared to the more famous Augury, this component does one thing, and it does it well: it allows to inspect the state on the scope of each DOM element.
By right-clicking on a…
