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.
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
… then the annoying side of my brain was like:
OK! … and now, how do you regroup related components? And how do you handle routing?
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…
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.
There’s a new schematic to generate Single Component Angular Modules.
yarn add @wishtack/schematics
yarn ng g @wishtack/schematics/scam hello-world
A while ago, I caught this Pull Request https://github.com/angular/angular/pull/27481 …
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.
Now, the thing that I don’t like that much about Angular is how the template is just…
During some of the trainings we deliver, we need some operational mock ReSTful API with CRUD operations support and filtering features.
JSON Generator is an original online tool that allows us to generate a bunch of resources using a specific but yet intuitive syntax.
You can now download or copy the generate JSON array.
First, let’s create a NodeJS module!
yarn init # or npm init
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.
You might have some heavy components that you only display in some conditions.
E.g. : a component on…
You are probably used to one of the following common approaches :
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…
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.
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.
Google Developer Expert for Angular & Web Technologies | eXtreme Programming Coach | Tech Advisor