Convoyr

Once you set up an HTTP client on a web app then sooner or later, you will need to extend its capabilities in order to handle different topics like User Experience (e.g. pending requests indicator), performance (e.g. caching), resilience (e.g. automatic retry), and security (e.g. authentication). Luckily, most HTTP clients can be easily extended using interceptors so you won’t have to wrap them or implement your own client.

Even though implementing an interceptor can sound quick and easy, handling edge cases, testing and maintenance can get expensive. Wouldn’t it be better if someone else could handle these issues for us?


Life is too short. When searching for something, we can’t afford to type a whole word or sentence in a search field, or filling all the fields then hitting our old keyboard’s half-broken enter key to finally be able to see the first results… or nothing at all because our search criteria were too restrictive.

Don’t look at me like that! We can probably agree that most of us, if not all, are used to features like typeahead and live search results. We get frustrated every time we have to submit a search form.

TL;DR:

  • if you are using NestJS, you…


A beautiful but yet fragile project structure

The ideal project structure is something that keeps moving.

So, a good project structure is something easy to refactor.

Few hours ago, I published this article about SCAM modules:

And this Angular schematic called @wishtack/schematics:scam:

… then the annoying side of my brain was like:

The annoying side of my brain

OK! … and now, how do you regroup related components? And how do you handle routing?

Proxy Modules

In order to regroup related components & modules, I use what I call “proxy” modules.

A proxy module is a module that doesn’t declare anything, it just exports other modules in order to…


Analysis Paralysis

Every time I am about to add a component to an Angular application, I feel like there is a bunch of people arguing in my head.

  • Does it deserve a new NgModule?
  • Will we re-use it soon?
  • Who cares, we will refactor that when needed anyway.
  • Yeah! But even with a great IDE, how straightforward is the refactoring?

TL;DR

There’s a new schematic to generate Single Component Angular Modules.

yarn add @wishtack/schematics
yarn ng g @wishtack/schematics/scam hello-world

Where It All Started

A while ago, I caught this Pull Request https://github.com/angular/angular/pull/27481


Angular Templates & Time To First Commit

One of my favorite things about Angular is how the template is just a simple HTML file.

This is really great; especially if you care about Collective Ownership. With some basic HTML knowledge, anyone can contribute to the application’s development: other teams, external web designers… or even the Product Owner! Why not!?

In other words, using HTML templates reduces the TTFC (Time To First Commit) which is the average time it takes for someone new in your team to make his first change.

Tired of Importing Modules

Now, the thing that I don’t like that much about Angular is how the template is just…


… using JSON Generator, JSON Server & Zeit’s Now.

During some of the trainings we deliver, we need some operational mock ReSTful API with CRUD operations support and filtering features.

Generate JSON data

JSON Generator is an original online tool that allows us to generate a bunch of resources using a specific but yet intuitive syntax.

JSON Generator

You can now download or copy the generate JSON array.

Setup the server

First, let’s create a NodeJS module!

mkdir api
cd api
yarn init # or npm init

JSON Server

JSON Server is an easy to setup ReSTful API mock server that uses a JSON file as a database for storing…


Let your components decide when to (lazy)load their children!

Lazy loading is a key performance optimization feature in Angular.
In few words, lazy loading will allow your application to start faster by only loading the modules which are required by the view (or route) you are visiting.

One of the main limitations of Angular’s lazy loading is that it is quite coupled to the router but in some specific use cases you might want to lazy load components imperatively without changing the route.

Why?

Dynamic Component Injection

You might have some heavy components that you only display in some conditions.
E.g. : a component on…


Rx-Scavenger — RxJS Garbage Collector

If you are an Angular or RxJS user, you are probably tired of handling subscriptions and being worrying about race conditions, memory leaks and CPU time.

You are probably used to one of the following common approaches :

  • Keep subscriptions in properties and unsubscribe manually (i.e. : in ngOnDestroy):
  • Angular’s async Pipe:
  • RxJS takeUntil operator :

Limitations

In some cases, the different approaches described above need a significant amount of boilerplate code and in other cases they can get tricky and error-prone.

For example, calling startCounting() method multiple times will create a race condition and will not produce…


Hi,

In some cases, with Angular 2+ or any similar library or framework, using components inputs and outputs to share data doesn’t answer all use cases.

This mainly happens when you have two distinct and unrelated Angular 2+ components that manipulate the same data (Ex.: Session, Current user, Cart, User Settings, A component’s state like a bottomsheet or sidenav etc…).

You may want to use ngrx or any redux-like pattern but you will still have to handle all the logic to persist data on your API or anywhere else.

In order to handle communication between components, I use a special pattern I call “Reactive Stores”. It is a simple Angular 2+ service using rxjs‘s ReplaySubject to propagate changes.

Here’s the blog post that covers the whole subject.

https://blog.wishtack.com/2017/05/06/angular-2-components-communication-using-reactive-stores/


During Wishtack’s coachings and trainings, we noticed that when using modern web frameworks and libraries like Angular / React / Vue, developers are not mostly struggling with the syntax or the features.

The main issue is how to split code and responsibilities between components. How many components do I need, what should they do, how, when etc…
Of course, there’s no generally applicable answer for these questions… but there are some best practices and that’s exactly what we are talking about on our latest blog post.

Younes

Google Developer Expert for Angular & Web Technologies | eXtreme Programming Coach | Tech Advisor

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store