Insights into NGXS with Joaquín Cid

Summary of episode #40 of the Angularidades podcast

Alejandro Cuba Ruiz
Angularidades

--

Listen to the entire conversation in Spanish with Joaquín Cid on Spotify, YouTube, and other podcast platforms.

Episiode #40 on YouTube

This episode of the Angularidades podcast welcomes Joaquín Cid, a core team member of NGXS and full-stack developer from Rosario, Argentina.

Joaquín holds an engineering degree in systems and has additional studies in business, entrepreneurship, and innovation. In addition to his open source contributions, he is a co-organizer of the Ng-Rosario meetup.

Topics covered

  1. Joaquín’s personal journey to the NGXS development team.
  2. State management in web applications.
  3. Signals in the upcoming NGXS versions.
  4. Recommendations for keeping state management practices updated and efficient.
  5. Importance of establishing software development patterns.
  6. Integration of NGXS with Firebase.
  7. Evolution of state management on the client and server.
  8. Recommended tools for debugging and monitoring state.

The conversation kicks off with Joaquín sharing his journey to joining the core development team of NGXS. He recounts how he initially used NGXS in a project where he was evaluating various state management libraries. His proactive approach in contributing to NGXS documentation and suggesting new features eventually led to an invitation to join the core team. Joaquín emphasizes the importance of engagement and curiosity for developers who aspire to contribute to high-adoption open-source projects.

Then we jump into the basics of the mathematical finite state machine definition and state management in Angular. He highlights the complexity of maintaining application state across multiple components and over extended lifecycles. Libraries like NGXS provide predictable state mutations and align with the Angular evolving ecosystem.

On this regard, we cover how NGXS aims to stay up-to-date with Angular, including the upcoming adoption of standalone components and Signals, and the anticipated alignment with Angular 18.

When comparing NGXS to other state management solutions such as NgRx, Joaquín points out that asynchronous action's support in NGXS without needing effects simplifies code readability and reduces boilerplate. He discusses how NGXS leverages the CQRS pattern, and the overall library is designed to be ergonomic and intuitive.

The episode also touches on the integration between NGXS and Firebase. Joaquín describes how he developed the NGXS Firestore plugin to connect NGXS with Firebase’s real-time database, enabling seamless synchronization of state changes between Firebase and Angular applications.

The conversation then shifts to recent advancements like Angular Query, an experimental implementation of TanStack Query, which simplifies server-client state synchronization. Joaquín appreciates the ease of use of the powerful developer tools provided by TanStack, while cautioning against over-standardizing state management approaches. He advocates for a balance between providing guidance and allowing flexibility in application-specific implementations.

Finally, Joaquín offers advice for maintaining efficient state management practices in Angular, and encourages everyone to explore NGXS, especially with the upcoming version 18, which will align with Angular’s latest features.

Takeaways

  • NGXS is working to align with the new versions of Angular and offer support for new features.
  • The incorporation of Signals in NGXS will enable a more performant global state and facilitate the transition toward Zoneless.
  • It’s important to keep state management practices updated and efficient, regardless of the library used. Establishing development patterns can simplify future changes and modifications.
  • The facade pattern is a useful tool in state management as it consolidates state interactions in one place, providing clear separation between application logic and third-party libraries to minimize dependency risks and maintain flexibility.
  • NGXS integration with Firebase allows to take advantage of real-time feature and sync with local state in a simple way

Stay tuned and check out who is getting interviewed for future episode releases at https://twitter.com/angularidades or LinkedIn.

Screenshot of episode #40

--

--

Alejandro Cuba Ruiz
Angularidades

<front-end web engineer />, Angular GDE, traveler, reader, writer, human being.