The Angular Plus Show

As a follow-up to Ep. 020 - Building Communication Between the Angular Team & the Community - we sat down with Stephen Fluin and Jules Kremer of the Angular team to continue the conversation on the present and future of Angular. You can check out Ep. 020 right here 👉 http://bit.ly/AngularShowEp20Show Notes:► https://blog.angular.io/a-roadmap-for-angular-1b4fa996a771Follow us on X: The Angular Plus ShowBluesky: @theangularplusshow.bsky.social  The Angular Plus Show is a part of ng-conf. ng-conf is a multi-day Angular conference focused on delivering the highest quality training in the Angular JavaScript framework. Developers from across the globe converge  every year to attend talks and workshops by the Angular team and community experts.JoinAttendXBluesky        ReadWatchEdited by Patrick HayesStock media provided by JUQBOXMUSIC/ Pond5

State management is hard. Why? First, some engineers may not consider the state of their apps. This can lead to apps that are buggy, difficult to test, and often face regressions when attempting to fix issues. Second, if you're managing control flow and state in your application, state in some applications can be complex and fast-moving. Determining what solution to use, whether to build your own solution or to grab an existing off-the-shelf solution can be a difficult decision. Third, state management libraries can be difficult to learn. Entire courses are devoted to managing state in Angular applications, whether you choose NgRx, NGXS, Akita, MobX, Redux-Observables, etc.We get that. Why? We've seen a thing or two. In this episode, panelists Jennifer Wadella, Aaron Frost, & Brian Love share some of their own struggles with state management, decisions that went awry, and some horror stories that they've lived through. Then, Brian sits down with Mike Ryan, core team member for NgRx, and Google Developer Expert in Angular. Mike shares with us some stories and some key takeaways for managing state, control flow, and code volume in your Angular application using NgRx.And that's a wrap! We hope you've enjoyed our 6-part series on State Management in Angular. What topics interest you that you'd like us to dive into on the Angular Show? Let us know! Follow us on Twitter, our DMs are open, and don't forget to subscribe! Follow us on X: The Angular Plus ShowBluesky: @theangularplusshow.bsky.social  The Angular Plus Show is a part of ng-conf. ng-conf is a multi-day Angular conference focused on delivering the highest quality training in the Angular JavaScript framework. Developers from across the globe converge  every year to attend talks and workshops by the Angular team and community experts.JoinAttendXBluesky        ReadWatchEdited by Patrick HayesStock media provided by JUQBOXMUSIC/ Pond5

While NgRx is the most widely used and adopted platform for state management in Angular, there are several other solutions that are available to Angular developers. In this episode, panelists Aaron Frost, Brian Love, and Jennifer Wadella are 'buzzing' with details on MobX, Akita, and NGXS. All three of these solutions can be used in Angular, are open-source, and are free to use. MobX is widely used with React, perhaps the second favorite after redux, for state management. Akita, from the team at Datarama, takes a slightly different approach from the redux pattern for providing a state management solution. Akita is popular within the Angular community, but can also be used with both React and Svelte projections. Finally, NGXS is inspired by redux and NgRx and makes heavy use of TypeScript decorators to achieve similar goals as NgRx with a potential lower code cost.Join us in part 5 of our series on state management in Angular and come along with the panelists and learn about various solutions that you might want to consider for your Angular application.Follow us on X: The Angular Plus ShowBluesky: @theangularplusshow.bsky.social  The Angular Plus Show is a part of ng-conf. ng-conf is a multi-day Angular conference focused on delivering the highest quality training in the Angular JavaScript framework. Developers from across the globe converge  every year to attend talks and workshops by the Angular team and community experts.JoinAttendXBluesky        ReadWatchEdited by Patrick HayesStock media provided by JUQBOXMUSIC/ Pond5

In part 4 of our series on State Management in Angular, panelists Aaron Frost, Brian Love, and Jennifer Wadella spend some time with Deborah Kurtata & Dan Wahlin, two well-known and loved experts on using RxJS for managing the state of your application.Deborah is a Pluralsight author and speaker who has taught many of us the basics of RxJS and how we can effectively use RxJS for state management.Dan is also a Pluralsight author and speaker, as well as the author of the observable-store library that provides a guided approach to state management with RxJS.In this episode, you can expect to learn strategies for using RxJS, observables, subjects, and more, as both data streams and state management solutions for Angular applications. Deborah and Dan share their approaches and what they have learned with the community. Join us as we further unpack state management in Angular using RxJS!Dan Wahlin:@DanWahlinDeborah Kurata:@deborahkurataShow Notes:► Dan’s talk Mastering The Subject https://www.youtube.com/watch?v=_q-HL9YX_pk► Deborah Kurata’s talk Data Composition w/ RxJS https://www.youtube.com/watch?v=Z76QlSpYcck► Observable Store: https://github.com/danwahlin/observable-store► Deborah's RxJS Pluralsight course: https://app.pluralsight.com/library/courses/rxjs-angular-reactive-development► https://ngrx.io/guide/data► Angular Architecture and Best Practices: https://www.pluralsight.com/courses/angular-architecture-best-practices► Stepping Up: Observable Services to Observable Store: https://www.ng-conf.org/2020/sessions/stepping-up-observable-services-to-observable-store/► http://shouldiusegraphql.com/► Thinking Reactively Talk by Mike Pearson https://www.youtube.com/watch?v=-4cwkHNguXE► Angular Denver '19 talk by Frosty: https://app.pluralsight.com/library/courses/angular-denver-2019-session-27► https://medium.com/@thomasburlesonIA/ngrx-facades-better-state-management-82a04b9a1e39► Musical Theatre Coach Reacts (Hamilton): https://www.youtube.com/watch?v=hLrSFd9OVh8► https://www.learnrxjs.io/► https://www.youtube.com/watch?v=_dzqrdHVE2gFollow us on X: The Angular Plus ShowBluesky: @theangularplusshow.bsky.social  The Angular Plus Show is a part of ng-conf. ng-conf is a multi-day Angular conference focused on delivering the highest quality training in the Angular JavaScript framework. Developers from across the globe converge  every year to attend talks and workshops by the Angular team and community experts.JoinAttendXBluesky        ReadWatchEdited by Patrick HayesStock media provided by JUQBOXMUSIC/ Pond5

The Angular Show's panelists (Aaron Frost, Brian Love, and Jeniffer Wadella) sit down with Brandon Roberts to learn from the master, and contributor, of the popular NgRx platform and the elegant, efficient, opinionated, and performant solution to state management in Angular.The NgRx platform includes several libraries. The most popular and widely used library is the store, often used alongside the effects and entities libraries. The NgRx store library (often referred to as just "NgRx") is inspired by Redux. Redux's core principles are: a single source of truth, state is read-only, and changes to the state of the application are only made through pure functions referred to as reducers. NgRx is an Angular library that is open-source, adheres to these core principles, and is widely adopted in applications that often have complex state that necessitates the structured approach to state management utilizing indirection.Join us as we dive further into state management in Angular!Show Notes:► https://medium.com/@unicodeveloper/2018-in-review-shattering-expectations-9418f2d720cc► https://ngrx.io/guide/component-storeFollow us on X: The Angular Plus ShowBluesky: @theangularplusshow.bsky.social  The Angular Plus Show is a part of ng-conf. ng-conf is a multi-day Angular conference focused on delivering the highest quality training in the Angular JavaScript framework. Developers from across the globe converge  every year to attend talks and workshops by the Angular team and community experts.JoinAttendXBluesky        ReadWatchEdited by Patrick HayesStock media provided by JUQBOXMUSIC/ Pond5

Part 2 of our series on State Management in Angular focuses on the use of RxJS in order to leverage Observables, Subjects, and BehaviorSubjects in Angular applications.First, Aaron Frost and Jennifer Wadella talk through how RxJS is used by Angular developers to persist state in singleton services using Subjects. This is a common approach to implementing a single source of truth with the observable pattern in Angular. Another benefit of the approach is a path to implementing a state management library such as NgRx in an Angular application when necessary.Then, Ben Lesh joins Brian Love and the other panelists to share his story of how he personally got started on the RxJS project. One of the major drawbacks of using promises is a lack of a cancellation feature. While at Netflix, the team resolved this by using the Observable primitive. Ben also shares the story of how he was tasked with refactoring RxJS to follow the then-to-be approved TC39 proposal for the Observable primitive. We then learn from Ben about the current work that is being done by the RxJS core team and the future of RxJS.Finally, Ben drops some knowledge on a simple philosophy: if the code you write works, can be maintained, and is testable, then it's good code. The end.Show Notes: https://github.com/ReactiveX/rxjs/blob/8dacf256be307ba3b8b2e9c94badb4b398e1ec47/docs_app/content/guide/glossary-and-semantics.mdFollow us on X: The Angular Plus ShowBluesky: @theangularplusshow.bsky.social  The Angular Plus Show is a part of ng-conf. ng-conf is a multi-day Angular conference focused on delivering the highest quality training in the Angular JavaScript framework. Developers from across the globe converge  every year to attend talks and workshops by the Angular team and community experts.JoinAttendXBluesky        ReadWatchEdited by Patrick HayesStock media provided by JUQBOXMUSIC/ Pond5

Buckle your seatbelt folks, this is going to be one heck of a ride. Get ready for episode one of a six-part series on State Management in Angular. That's right, there was no way we could fit the topic into a single episode. Panelists Aaron Frost, Brian Love, and Jennifer Wadella start with defining what exactly is "state" in a client application and why it matters. We then jump into a time machine and travel back to the (good?) ole' days of state management in AngularJS. Remember $scope? What about those long digest cycles? But, have no fear, we'll then race forward in time to the pending release of the modern-framework that is Angular (version 2+).The panelists then welcome Googler Alex Rickabaugh to share how he made his way onto the Angular Team through an internal data fetching/caching project called Streamy. His experience with building Streamy led to working on a PoC Angular project, "Tactical", in an attempt to provide Angular with a State Management+ solution. Tactical aimed to manage data flow, offline, validation, caching, conflicts, and more. While Tactical was never released as an official part of the Angular platform, Alex shares insight into the complexities of state management and building abstract tools to solve the oft-encountered programming problem.But wait, wait... there's more. The panelists then scrub forward in time to hearing about state management evolutions in other frameworks, such as Flux and then Redux. Then, zooming forward even more into the land of Promises and then the revelation (and struggle) of Observables. With all that history and information, you definitely don't want to miss this episode! Come join us on the journey, and definitely don't forget to subscribe to stay caught up on all our future episodes as well!Alex Rickabaugh: @synalxFollow us on X: The Angular Plus ShowBluesky: @theangularplusshow.bsky.social  The Angular Plus Show is a part of ng-conf. ng-conf is a multi-day Angular conference focused on delivering the highest quality training in the Angular JavaScript framework. Developers from across the globe converge  every year to attend talks and workshops by the Angular team and community experts.JoinAttendXBluesky        ReadWatchEdited by Patrick HayesStock media provided by JUQBOXMUSIC/ Pond5

In the conclusion of our four-part series on testing in Angular, we sat down with Keen Yee Liau. Keen leads the tooling team as part of the Angular Team at Google. Externally, the tooling team ships the Angular CLI, which includes the out-of-the-box end-to-end testing tool called Protractor. Join panelists Aaron Frost, Brian Love, and Jennifer Wadella as we learn from Keen about the current direction of Protractor.The recently released version 7 of Protractor focused solely on security issues, resulting in the necessity to update dependencies, leading to a major release bump. If you've been using Protractor for some time, you might be asking, "Wait, what happened to version 6?" Well, v6 was a release-to-evaluate webdriver version 4 (still in alpha) and was never released, and likely won't ever be released. It goes down as a fun bit of history along with Angular version 3.Keen shared with the panelists how the tooling team (and the Angular team at large) is reflecting on the strategy and direction of Angular and the tooling infrastructure. Keen and his team are evaluating the landscape of testing, both within Google and broadly within the ecosystem. Given the current evaluation, make no mistake, Protractor is widely used within Google, and the tooling team is committed to supporting and improving Protractor for the 1,100 + Angular applications at Google as well as the thousands of applications in the community that use Protractor for end-to-end testing. The Angular Team is committed to not leaving anyone behind in the story of Angular. Rest assured, this includes projects that use Protractor. But Keen is also looking for feedback from YOU! His DMs are open at @liauky. We look forward to the future of testing Angular applications!Follow us on X: The Angular Plus ShowBluesky: @theangularplusshow.bsky.social  The Angular Plus Show is a part of ng-conf. ng-conf is a multi-day Angular conference focused on delivering the highest quality training in the Angular JavaScript framework. Developers from across the globe converge  every year to attend talks and workshops by the Angular team and community experts.JoinAttendXBluesky        ReadWatchEdited by Patrick HayesStock media provided by JUQBOXMUSIC/ Pond5

The third part of our four-part series on testing in Angular focuses on end-to-end testing with Cypress. Cypress provides fast, easy, and reliable testing for Angular applications. Panelists Aaron Frost, Brian Love, and Jennifer Wadella have the privilege to learn about end-to-end testing with Cypress from Martina Kraus (Google Developer Expert in Angular), Dave Muellerchen (Google Developer Expert in Angular), and Cecilia Martinez (Success Engineer at Cypress).Show Notes:►https://webdave.de/blog/cypress►https://www.youtube.com/watchv=MiHcYL6huoY&list=PLdLZVBn48n_Du1Q80B1VMqnvH4xgXMDm0&index=3&t=33s►https://www.slideshare.net/ladyleet/inclusive-architecture-introducing-the-pamstack-refactrtechFollow us on X: The Angular Plus ShowBluesky: @theangularplusshow.bsky.social  The Angular Plus Show is a part of ng-conf. ng-conf is a multi-day Angular conference focused on delivering the highest quality training in the Angular JavaScript framework. Developers from across the globe converge  every year to attend talks and workshops by the Angular team and community experts.JoinAttendXBluesky        ReadWatchEdited by Patrick HayesStock media provided by JUQBOXMUSIC/ Pond5

Younes Jaaidi joins panelists to discuss the benefits of Jest for unit testing in Angular, including performance, running in multiple environments, and easier-to-read test failure output. They also explore the pros and cons of snapshot testing and discuss other testing solutions like visual regression and end-to-end testing. The chapter descriptions highlight different topics discussed in the podcast, including an introduction to Jest, running slowest test first, and learning resources for testing with Jest. The podcast ends with a discussion on becoming a better anti-racist and ally in supporting racial equality.