Learn Angular for free: top online resources you shouldn’t miss (2/2)
The “Learn Angular for Free” series comprises carefully curated free resources that assist you in acquiring proficiency in various programming techniques with Angular. The final segment of the article primarily emphasizes reactive development, forms, testing, and architecture. If you haven’t had the opportunity to read the first article, I highly recommend giving them a thorough read.
RxJS
RxJS plays a vital role in Angular, enabling us to handle asynchrony, reactive programming, state management, and the composition of operations within our applications. While there is a perception that mastering RxJS can be challenging, I believe that learning RxJS itself is not overly complex. However, it does require a significant investment of time and patience. With a vast array of operators available in RxJS, it can be overwhelming initially, and choosing the right solutions may not be intuitive at first.
I have curated a selection of five videos that serve as excellent introductions to RxJS. The first video by Joshua Morony explores three different approaches to learning RxJS. Next, Mike Person’s speech at ng-conf demonstrates the distinction between an imperative and reactive approach through a practical example. Laith Academy offers a comprehensive hour-long course that explains the fundamentals of RxJS from scratch. While the measures in this course are implemented in vanilla JavaScript, the knowledge gained can be directly applied in Angular. Lastly, I recommend a conversation conducted by ng-conf with Brian Love, where he shares practical strategies for learning RxJS.
By exploring these video resources, you can gain valuable insights into RxJS and enhance your understanding of this powerful tool within the Angular ecosystem.
Video – 3 Levels of Learning RxJS Operators by Joshua Morony
Video – Thinking Reactively: Most Difficult | Mike Pearson by Mike Pearson
Video – RxJS Crash Course by Laith Academy
Video – Hot vs. Cold Observable in RxJs (2021) by Dmytro Mezhenskyi
Video – A Guided Approach to Learning RxJS with BrianLove by Brian Love
source: RxJS Reactive Extensions Library for JavaScript
RxJs Operators
As mentioned earlier, the number of operators in RxJS is extensive, totaling over 100. However, we typically rely on a selected set of operators in everyday programming. Nonetheless, the more familiar we are with the capabilities of RxJS, the more effectively we can produce high-quality code. I have curated additional materials in this section that delve into RxJS operators.
The first featured resource by Joshua Morony focuses on the most commonly used RxJS operators. In the second material, Mike Brocchi and John Niedzwiecki shed light on 20 lesser-known operators that are often overlooked. Subsequently, the following three videos explore the distinctions between various transformation operators. Dmytro Mezhenskyi also discusses the zip operator and provides insights into RxJS schedulers. Lastly, Wojciech Trawiński’s article series showcases practical use cases for RxJS operators.
By exploring these resources, you will better understand specific RxJS operators and their applications. Remember that while a vast array of operators is available, focusing on a core set and mastering their usage will significantly benefit your coding skills.
Video – I only ever use these RxJS operators to code reactively by Joshua Morony
Video – 20 RXJS Operators in 20 minutes | Mike Brocchi & John Niedzwiecki
by Mike Brocchi & John Niedzwiecki
Video – I switched a map, and you’ll never guess what happened next – Pete Darwin, Shai Reznik, Mike Brocchi by Pete Darwin, Shai Reznik, and Mike Brocchi
Video – RxJs Operators – ExhaustMap vs. concatMap (2021) by Dmytro Mezhenskyi
Video – RxJs switchMap vs mergeMap – Intro to Flattening Operators (2021)
by Dmytro Mezhenskyi
Video – RxJs Zip – Real-Life Analog of ZIP operator (Reactive Dürüm, 2021)
by Dmytro Mezhenskyi
Video – RxJs Schedulers – Why do we need them? (Advanced, 2021)
by Dmytro Mezhenskyi
Article – RxJS hint [first, take(1)] by Wojciech Trawiński
Article – RxJS hint [filter, takeWhile] by Wojciech Trawiński
Article – RxJS hint [retry] by Wojciech Trawiński
Article – https://medium.com/javascript-everyday/rxjs-hint-repeat-2a834ff85dc3
by Wojciech Trawiński
RxJS best practices
As we explore the capabilities of RxJS, it is crucial to also familiarize ourselves with the best practices associated with it. I recommend watching Michael Hladky’s presentation at the ng-conf conference to gain insights into these practices. In his workshop-style talk, Michael demonstrates advanced patterns that can be applied in business applications. Additionally, Deborah Kurata’s presentation highlights that not all best practices are universally applicable, offering valuable insights into their context-dependent nature.
To further delve into best practices, I have included a video from NG-BE 2023 where Brecht Billiet proposes Reactive Patterns tailored explicitly for large business applications. Additionally, I have curated two articles on the subject. The first article, authored by Tomas Trajan, explores RxJS best practices, while the second article, by Brecht Billiet, offers valuable insights into practical methods for utilizing RxJS.
By engaging with these resources, you will better understand the best practices associated with RxJS. It is essential to consider both general guidelines and context-specific recommendations to make the most of RxJS in your applications.
Video – RxJS Advanced Patterns – Operate Heavily Dynamic UI’s | Michael Hladky
by Michael Hladky
Video – RxJS Best Practices Aren’t Always Black and White | Deborah Kurata | ng-conf 2022 by Deborah Kurata
Video – Reactive patterns for Angular Enterprise Solutions – Brecht Billiet – NG-BE 2023 by Brecht Billiet
Article – The Most Impactful RxJs Best Practice Of All Time by Tomas Trajan
Article – RxJS best practices in Angular by Brecht Billiet
RxJS Testing
Testing RxJS code is often considered a challenging aspect to master, but there are valuable resources available to aid in understanding this process. Kevin Kreuzer’s video provides insights into using marble tests for testing reactive code, offering a helpful approach in this regard. Furthermore, Joshua Morony’s comprehensive material demonstrates various techniques that can be employed to test reactive code in different components, such as dumb components, smart components, services, and more.
Video – Marble testing with RxJS testing utils by Kevin Kreuzer
Video – Is reactive code with RxJS too hard to test? by Joshua Morony
Signals – new feature Angular 16
In recent months, signals have emerged as a highly discussed topic among Angular developers. This feature was introduced as a developer preview in Angular version 16. I recommend starting with the first two videos created by Angular’s official YouTube account to delve into this exciting development. In these videos, members of the Angular Core Team share insights about the reactivity approach with Signals, the advantages they offer, the roadmap ahead, and the anticipated changes in upcoming Angular versions. Additionally, the second video demonstrates the practical usage of Signals within an application.
For further exploration, I suggest watching two speeches from the NG-BE 2023 conference, delivered by Paweł Kozłowski and Michael Hladky. These talks provide valuable insights and perspectives on Signals. Lastly, I have included a noteworthy post by Sander Elias that perfectly explains the reasons behind Angular’s introduction of Signals, their nature, and how they can be utilized. It’s important to note that the post was created shortly after the announcement of the Proof-of-Concept (PoC) of Signals, so there may be differences in content compared to the final version of Signals implementation.
Video – Rethinking reactivity with Angular Signals by Angular
Video – Getting started with Angular Signals by Angular
Video – Reactive Angular. At its core. – Pawel Kozlowski – NGBE 2023 by Pawel Kozlowski
Video – Signals & fine grained reactivity in Angular – Michael Hladky – NG-BE 2023
by Michael Hladky
Article – Angular Signals WWW by Sander Elias
source: Wikipedia
Forms
Mastering forms is a crucial aspect when it comes to building major business applications. In this section, I have curated a selection of videos and articles that will introduce you to various aspects of forms in Angular.
Fireship and Decoded Frontend have created informative videos covering the basics of reactive and template forms, providing a solid foundation for understanding form handling in Angular. Joshy Morona’s video showcases the creation of dynamic forms based on JSON, offering insights into building dynamic and customizable form structures.
Additionally, I recommend two articles that delve into advanced form features. The first article discusses Typed Reactive Forms, a powerful feature from Angular version 14 that allows for type-safe form handling. The second article, written by Netanel Basal, demonstrates how to create multi-step forms using the Dependency Injection and Routing mechanisms in Angular, providing a structured approach for building complex form workflows.
Video – Reactive Forms – The Basics by Fireship
Video – Advanced Angular Forms – Free Mini-Course (Template-Driven) by Dmytro Mezhenskyi
Video – Create a Dynamic Reactive Angular Form with JSON by Joshua Morony
Video – Control Value Accessor in Angular [Advanced, 2020] by Dmytro Mezhenskyi
Article – Angular Typed Reactive Forms by Preston Lamb
Article – Typed Reactive Forms in Angular — No Longer a Type Dream 💭 by Netanel Basal
Article – Create a Multi-Step Form in Angular by Netanel Basal
Testing
I once came across a tweet stating that testing Angular applications is often more challenging than writing the code itself. To delve deeper into the mechanics of writing effective tests, I recommend watching the following videos:
Reiner Hahnekamp delivers a speech showcasing various testing techniques in Angular. He discusses their advantages and disadvantages and intertwines practical examples with testing theory, providing valuable insights into the subject. Shai Reznik’s two presentations focus on Angular’s Test-Driven Development (TDD) approach. Of particular interest is his ng-conf 2022 presentation, which showcases Conference Programming—a unique twist on Pair Programming involving the entire conference audience.
Maria Korneeva’s video explores the use of Jest in Angular’s unit tests. She provides practical guidance on harnessing the power of Jest for efficient unit testing in Angular applications. Jordan Powell’s material delves into Component Testing using Cypress.
Video – Testable Architecture in Angular | Rainer Hahnekamp | Reliable Web Summit 2021 by Rainer Hahnekamp
Video – Angular Testing In TDD | Shai Reznik | AngularConnect 2018 by Shai Reznik
Video – Angular TDD Like You Never Seen Before | Shai Reznik | ng- conf 2022 by Shai Reznik
Video – Angular + Jest: Testing Titbits | Maria Korneeva | Reliable Web Summit 2021 by Maria Korneeva
Video – Getting Started with Angular Component Testing by Jordan Powell
State management
The resources provided below will assist you in exploring the concept of state management and determining whether the usage of libraries like ngrx or rx-angular is necessary. It’s important to note that this is a vast topic, and definitive answers may be elusive as the decision relies on various factors, such as the application’s scale and the complexity of the state.
Video – My go to way to manage state in Angular applications by Joshua Morony
Video – State Management in Angular – Do I need Redux & NgRx? (2021, Advanced) by Dmytro Mezhenskyi
Video – How to use NgRx ComponentStore? – Alex Okrushko | NG-DE 2022 by Alex Okrushko
Video – RxAngular State, The Component Reactive Store by Younes Jaaidi
Article – Managing State in Angular Applications by Victor Savkin
Architecture
In the first video, Manfred Steyer explores lightweight architectures using the latest innovations in Angular. It provides valuable insights into designing scalable and efficient Angular applications. Tomas Trajan’s article presents a quick guide on building an epic Angular application with clean architecture. It offers practical tips and techniques to architect your Angular projects effectively. Then three books that talk about the use of Nx to create scalable Angular applications, about the use of monorepo in business solutions and the use of the Micro Frontends approach.
Together, these resources offer a well-rounded exploration of lightweight architectures, clean architecture principles, using Nx, monorepo strategies, and applying Micro Frontends in Angular. They serve as valuable references for developers seeking to enhance their architectural skills and design robust Angular applications.
Video – Lightweight Architectures with Angular’s Latest Innovations – Manfred Steyer – NG-BE 2023 by Manfred Steyer
Article – How to architect epic Angular app in less than 10 minutes! ⏱️😅
by Tomas Trajan
Book – The Angular Developer’s Nx Handbook by Lars Gyrup Brink Nielsen
Book – Enterprise Monorepo Angular Patterns by Nitin Vericherla & Victor Savkin
Book – Micro Frontends and Moduliths with Angular by Manfred Steyer
“Learning by reading is good, but learning by doing is better.“
Engaging in problem-solving is an incredibly valuable approach to learning Angular. Thomas Laforge has developed a project that offers a hands-on experience, enabling you to enhance your Angular skills by tackling real-world challenges commonly encountered in your professional journey. Remember, learning by doing is an effective way to consolidate your knowledge and skills in Angular development.
Angular Challanges by Thomas Laforge
Angular 16
Angular 16 has brought us a lot of good, many new opportunities. Make sure to explore the dedicated Signals section mentioned earlier. In addition, I wanted to put here some materials prepared by Minko Gechev, Angular Team, and Manfred Steyer, in which they listed all the news from the new version of Angular 16. These materials serve as valuable references to stay updated on the latest developments in this version of Angular.
Article – Angular v16 is here! by Minko Gechev
Video – New framework features in Angular v16 by Angular
Article – What’s new in Angular 16? – Signals, Hydration, esbuild and More! by Manfred Steyer
Acknowledging the incredible contributors
I would like to thank all the creators who made this list possible. Each of you creates amazing content that allows us to become better programmers. In the second part of the article, the creators of the materials are (in alphabetical order):
Content creators
- Alex Okrushko
- Angular
- Brecht Billiet
- Brian Love
- Deborah Kurata
- Design Course
- Dmytro Mezhenskyi
- Fireship
- John Niedzwiecki
- Jordan Powell
- Joshua Morony
- Kevin Kreuzer
- Laith Academy
- Lars Gyrup Brink Nielsen
- Manfred Steyer
- Maria Korneeva
- Max Koretskyi
- Michael Hladky
- Mike Brocchi
- Mike Pearson
- Minko Gechev
- Netanel Basal
- Nitin Vericherla
- Pawel Kozlowski
- Pete Darwin
- Preston Lamb
- Rainer Hahnekamp
- Sander Elias
- Shai Reznik
- Thomas Laforge
- Tomas Trajan
- Wojciech Trawiński
- Victor Savkin
- Younes Jaaidi
Their dedication and hard work deserve our appreciation and gratitude. I encourage everyone to follow these talented authors, engage with their content, and support their ongoing efforts to empower and educate Angular programmers.
