ANGULAR INSPIRATION
The best of Angular: a collection of my favorite resources of 2022
Learn about what happened in the world of Angular last year
I collected the best Angular articles and videos of 2022, so if you are looking to develop your Angular skills or get up to speed with some of the newest solutions, check out these insightful pieces.
📰Every Repo is a Monorepo
Victor Savkin’s article an NX-based workflow suitable for smaller frontend development projects, enabling the gradual transformation of a standalone application into a monorepo. He demonstrates how to start out with a simple application and then progressively add new elements to the application’s structure for improved repo performance and a better-structured application.
📰Component-First Architecture with Standalone Components and Nx
“Component-First Architecture is a pattern for architecting our applications to fill the void left by the patterns that sprung up around NgModules.”
Colum Ferry explains the concepts behind this new architecture and provides some best practices and code examples.
🎞️NgRx Industry Best Practices
In this almost 2 hour long interview, Christian Lüdemann and Tomas Trajan talk about NgRx best practices in the industry, they cover the following topics:
- Using NgRx schematics
- How you can use the 80/20 rule (Pure functions should make up 80% of NgRx)
- When in doubt, move your logic one level up-
- View selectors
- Action as events
- Redux devtools
- Effects are for orchestration only, business logic should be moved to services
- Normalizing vs duplication of state
- When should you use NgRx?
- Store performance optimizations
- What state should be stored in the store
- Facades
📰How to turn an Angular app into standalone
Ayyash Ayyash converts a few Angular components into standalone components, then assesses in which situations the standalone components simplify application architecture and development. In the second article, he gets rid of all NgModule in his app and adds lazy-loaded routes to it.
📰How the Angular Compiler Works
In his comprehensive article, Alex Rickabaugh explains how the Angular compiler (ngc) translates Angular’s decorated-based API into more effective runtime instructions by utilizing the TypeScript’s compiler APIs.
📰Moduliths in Angular with Nx
Stefan Haas highlights the key differences between the Microfrontends and Modulith architectures. He explains that Moduliths are based on Domain Driven Design and how we can split a Monolith application into separate libraries by domain, and how to enforce the library boundaries with Nx and the Angular Architect’s DDD Plugin for Nx.
📰How to Mock a Backend Server with Angular In-Memory Web API
In his detailed tutorial, Aurélien Leloup explains the drawbacks of using hard coded mock data and how to set up the Angular In-Memory Web API in your project. He also provides source code examples.
📙The Complete Guide to Interceptors in Angular
In his article, Kagklis Vasileios explains the followings.
“In this article, we are going to study:
- what an Angular interceptor is and how it works
- how to implement and provide one or multiple interceptors to our application
- how to mutate requests and responses using an Angular interceptor
- how to bypass specific or all interceptors if needed
- other use cases as part of a demo application”
📰Configure Prettier and ESLint with Angular
In his article, Enea Jahollari walks us through how to configure ESLint and Prettier in an Angular project to reduce the number of possible bugs and maintain a consistent style. He also explains how to set up VSCode and WebStorm to automatically analyze and format the files before save.
📰Angular Developer Survey 2021 Results
Nearly 25k developers participated in the survey, Minko Gechev’s article summarizes the results and how these are reflected in the Angular roadmap.
📰Set up Tailwind CSS with Angular in an Nx workspace
Leosvel Pérez Espinosa’s insightful article summarizes the following topics.
“Doing a quick recap, we learned:
- How to add support for Tailwind CSS in existing Angular projects using an Nx generator
- How to create Angular projects with Tailwind CSS already configured using an Nx generator
- How to share Tailwind CSS configuration among an application and its dependencies using presets
- How to share Tailwind CSS configuration among multiple applications and their dependencies while still being able to have different styles
- How to create and distribute multiple themes in an Angular publishable library using Tailwind CSS”
📰Reactive programming in Angular
Jorge Solis highlights the key differences between functional and object-oriented programming, and explains what reactive programming is in Angular and gives useful advice on when you should use it.
📰Build a Beautiful TikTok Clone with Angular and Micro Frontend
Vitalii Shevchuk’s tutorial demonstrates how to build a TikTok clone: he creates a Micro Frontend skeleton, configures sharable libraries, then incorporates the design and business logic.
📰7 RxJS Operators You Should Know About in 2022
This is the second RxJS article written by DevJo. In this one, he focuses on the most overlooked RxJS operators that have a huge potential for making Angular applications better.
If you haven’t read it yet, you should also check out his previous RxJS article (Meet RxJS: Your Best Friend in Angular in 2022) in which he explains the most commonly used RxJS operators.
📰RxJS Testing — Write Unit Tests for Observables
In his in-depth tutorial, Denis Loh explains how Marble testing works and shares different techniques you can use for covering your RxJS code with unit tests.
📰How to write component harnesses in Angular
In his step by step guide, Kevin Kreuzer shows us how to implement a test harnesses for an Angular switch component.
📰Why Angular 14’s new inject() function is so amazing?
The inject() function was introduced in Angular 14.0, it takes an InjectionToken as a parameter and returns its value from the currently active injector. In his article, Vlad Gheorghita shows multiple different use cases for this new feature.
📢Conference reports
🎞️Nx Conf Lite 2022
Nx Conf Lite 2022 was held at the end of April, and its recordings are now available.
I really enjoyed Colum Ferry’s presentation: Supercharged Micro Frontends with Monorepos. I also highly recommend checking out this talk by Benjamin Cabanes and Philip Fulcher: Understanding Monorepos: What you need to know
🎞️ Google I/O: The state of Angular 2022
At the Google I/O developer conference, Mark Thompson (@marktechson) and Emma Twersky showcased the latest changes in Angular and some of the planned future updates.
Lorenzo Zarantonello wrote a summary of their presentation: 7 Key Points From State of Angular — Google I/O 2022.
Google’s Madleina Scheidegger also gave insights about the long-term plans of the Angular team in her article: Angular’s Vision for the Future.
📰ng-conf 2022 report
ng-conf 2022 was held at the beginning of September.
Lance Finney attended the conference in person and wrote a detailed report of his key takeaways:
Meziah Ruby also shared the notes she took during the conference:
Lorenzo Zarantonello wrote a short summary of the Angular Team Keynote:
💬 So that is my collection of the best Angular resources of 2022. I’m really grateful for these excellent resources, I’ve learned a lot of new tricks along the way. Please let me know in the comments section if you know some other great articles or other resources about Angular published in 2022!
Thanks for reading! 🙏
🙋♂️ My name is Gergely Szerovay, I work as a frontend development chapter lead. Teaching (and learning) Angular is one of my passions. I consume content related to Angular on a daily basis — articles, podcasts, conference talks, you name it.
I created the Angular Addicts Newsletter so that I can send you the best resources I come across each month. Whether you are a seasoned Angular Addict or a beginner, I got you covered.
More content at PlainEnglish.io. Sign up for our free weekly newsletter. Follow us on Twitter, LinkedIn, YouTube, and Discord.
Interested in scaling your software startup? Check out Circuit.
