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.
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!
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!
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.
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!
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!
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).
The second part of our four-part series on testing in Angular focuses on Jest. Younes Jaaidi joins panelists Aaron Frost, Brian Love, Shai Reznik, and Jennifer Wadella to talk about why you might want to consider Jest for unit testing in your Angular project.
While the Angular CLI ships with the ability to scaffold unit tests using Jasmine as well as the Karma test runner, Younes teaches us some of the benefits of Jest, including performance, the ability to run Jest in multiple environments, presets, re-running failed tests first, easier-to-read test failure output, a virtual file system, parallelization, snapshot testing, and many more optimizations for the developer experience. Further, the ability to run Jest in multiple environments means that you can run Jest outside of the browser, either with Node or with jsdom.
Younes and the panelists also discuss the pros and cons of snapshot testing. Snapshot testing with Jest enables you to compare template snapshots to prevent unexpected changes to the UI of your application. While snapshot testing can be incredibly powerful, it can be overused and result in false positives, so we should consider other testing solutions such as visual regression testing and end-to-end testing.
In this four-part series, the Angular Show breaks down testing in Angular. Do you test? Should you have automated tests? And if you do test, what types of tests should you implement? Should you unit test? Should you have end-to-end tests? What about integration tests? This series tackles all of these questions and more.
In part one, panelists Aaron Frost and Jennifer Wadella invite Joe Eames, CEO of Thinkster.io and Pluralsight author, along with Shai Reznik, founder and author of testangular.com, to share their knowledge and love of unit testing in Angular.
While you are most likely performing manual testing, you may not be leveraging automated testing. Automated testing enables us to prevent regressions, increasing the quality of our applications. While many of us may not be leveraging automated testing, it can be extremely valuable when moving fast, when we have multiple developers on a team or in the code base, and perhaps even multiple teams in an organization that is sharing the same code and repository. The end result is confidence. Having a high level of confidence in shipping quality software provides significant value. Of course, implementing an automated testing strategy comes at a cost. Weighing the benefits with the cost is critical and should not be missed in your organization or team.
Don't forget to subscribe so you can be notified when Testing Series Part 2 on using Jest for unit testing in Angular is available for download!
Hot off the press is the newly released roadmap for Angular. You may not be aware, but Angular has been missing an official roadmap since version 2 was shipped in September of 2016. A roadmap serves many purposes for both the Angular Team & Google and for the community that contributes to and has invested in the platform. A roadmap:
🎯 Provides some insight into the future direction of Angular and allows stakeholders to offer feedback.
🤝 Shows the commitment to the platform from Google and the Angular Team.
✅ Provides decision-makers an opportunity to evaluate not only the current status of the platform but to also consider the potential future status of the platform.
Join Angular Show panelists Aaron Frost and Brian Love as they go through the roadmap, breaking down each item and discussing what it means from both a technical and community perspective. Aaron and Brian are highly committed to both the Angular product and the community at large and were thrilled to see the roadmap released.
Join us as we explore the rich and vast ecosystem of component libraries for Angular!
As software engineers and programmers, we work and live in an environment that is ever-expanding. Staying current in technology is not only a necessity in our career but often a challenge as well. As a result, entire industries have sprung up to assist us in meeting these challenges, the education sector being at the forefront of those industries. But then the question arises: Of all the options, which modality of learning is best? The answer is often a combination of your personal preference, how much time you have, and the required effectiveness.
In episode 23 of The Angular Show, panelists Aaron Frost, Brian Love, Shai Reznik, and Jennifer Wadella invite Joe Eames, author at Pluralsight & CEO of Thinkster.io, to share his knowledge and love for teaching and learning. Joe has taught many of us on topics ranging from the Fundamentals of Angular to unit and end-to-end testing. Listen in as Joe teaches us about the modalities of learning and the advantages and disadvantages of each, and how we can effectively choose tools that will put us on effective learning pathways for achieving optimum success.
One of Angular's core tenants is building reusable, testable, and maintainable pieces of code known as components. While most applications have varied features and components, there are some common threads among web and mobile applications. While you can build out these common elements, or components, for your application, it's often easier and faster to rely on a component library that provides these elements or widgets. For example, imagine building a cross-browser compatible and accessible tooltip component, or perhaps a date picker. What do you think? Do you want to ship your app or do you want to build out a date picker? I'm guessing the app.
In this episode of the Angular Show we invited our friends from Progress (Alyssa Nicoll and Carl Bergenhem), VMWare (Jeremy Wilkin), GrapeCity (Joel Parks), and UI Bakery (Nikita Poltoratsky) to share their insights into component libraries and tooling that's available to Angular developers. Progress provides the popular Kendo UI component library for Angular, VMWare's Project Clarity is an open-source component library, GrapeCity provides the Wijmo component library for Angular, and UI Bakery is an open-source tool for building Angular application visually.
Join us as we explore the rich and vast ecosystem of component libraries for Angular!
The Angular Show panelists (Aaron Frost, Brian Love, Alisa Nicole, and Shai Reznik) chat with the co-founders of Narwhal Jeff Cross and Victor Savkin about Nx and Nx Cloud. But first, we check in with Jeff, who you may not know, has and cuddles with pigs, and Victor, who is a new father.
Nx Cloud is a way for you to enable distributed computation cache such that you, your team, and your Continuous Integration (CI) can share build artifacts. Practically speaking, this results in saving you and your organization time when building and testing your application.
You might be wondering, what exactly is computation cache? Victor breaks this down for us and shares how Nx tackles this, and further, how we can use Nx cloud to distribute the computation cache across a team, including CI.
To get started, you'll need to be using Nx, which not only tackles computation cache, but is a tool for implementing a monorepo strategy. Then, set up Nx Cloud with an access token in your config for distributing the cache.
Angular is not just a product, it's also a community. We firmly believe that a community is one in which everyone is welcome, and, further, one in which everyone has the right to feel comfortable and accepted. This is what makes a community.
There's been a lot of unrest in the community as former Angular team members have shared perspectives and as community members question the future of Angular. In this episode of the Angular Show, panelists Aaron Frost, Brian Love, & Jennifer Wadella talk with Stephen Fluin, head of developer relations on the Angular Team at Google, and ask the hard questions that we've heard are on your minds.
If you've been reading Twitter or blogs recently you may have been wanting to ask what team member departures mean for the future of Angular, the future of your Angular-dependent projects and clients, what is being done to address team attrition, where the Angular roadmap is, or what is the status of the backlog of Angular issues. In an effort of transparency, growth, and healing, we voiced your concerns and asked your questions. While we love the Angular product, we love the Angular community equally as much and know that healthy conversation, and sometimes criticism, is the path towards a thriving ecosystem. So now, it's your turn to listen. We covered a lot, but if we didn't ask a question that you think we should have, let us know.
This episode features Sani Yusuf, a Google Developer Expert and comedian (but not a dancer) who is currently located in London, England, but is originally from Nigeria. Sani teaches us about component inheritance in Angular. Join panelists Aaron Frost, Brian Love, Alyssa Nicoll, and Jennifer Wadella as we tackle the complexities, advantages, and disadvantages, of using class inheritance in Angular.
While you may be familiar with class-based inheritance in TypeScript, or potentially other object-oriented programming languages, it is often rare for Angular developers to leverage inheritance in their projects. Sani and the panel surface how Angular developers can leverage inheritance, abstractions, and composition for efficient strategies for solving challenges in our projects.
A key takeaway that Sani teaches us is that we should not be chasing after the use of inheritance in our Angular projects, rather, inheritance opportunities will announce themselves in your projects. When you find yourself duplicating code, or needing to manipulate data or behaviors in components, this could be a potential use case for abstraction or inheritance.
Finally, the panelists share some of their favorite streaming shows that they are loving when staying at home. Plus, as as an added bonus, Jennifer shares with us a recipe for gooey butter cake.
In this episode, Kseniya Lifanova from Upstate Interactive joins panelists Aaron Frost, Alyssa Nicol, Brian Love, and Shai Reznik to share her insights on Women in Technology. Kseniya's background is in business and finance, and after about 7 years in accountancy and finance, she found her passion for technology.
She attended an introduction to web development night-school and fell in love with building things. But, one of the first things she noticed in tech, was that it was mostly men. She decided to co-found a women-in-tech coding group in Syracuse, NY to teach other women about technology, coding, and the web. You might be wondering, why are there women-specific groups? Kseniya shares with us the intimidation that some women feel when attending events that are predominantly attended by men. She also shares how she wanted to learn with and be around other women.
If you're an organizer for a meetup, event, conference, or other event, this episode is critical to listen to. Join us as we learn from Kseniya how we can lower barriers to entry, make women feel comfortable and invited, and lift up women in technology.
In this episode, Jeff Whelpley, Google Developer Expert in Angular, shares his expansive knowledge of Search Engine Optimization (SEO) with panelists Aaron Frost, Alyssa Nicol, Brian Love, and Jennifer Wadella. We talk about some of the basics of on-page optimizations such as Time to Interactive, First Meaningful Paint, etc. and the implications for Angular applications.
Angular applications, in the context of the browser, are client-based and are built in the browser at runtime. While this provides many benefits to the user experience, it also comes with several challenges for SEO. Aaron and Jeff share some insight into these challenges, as well as the current solutions, including Scully for static prerendering and Angular Universal for server-side rendering.
Finally, Jeff shares with us what Angular developers can do to optimize their applications for improved search engine result page rankings, including duplicated content, meta information, interlinking pages, crawl budgets, indexing, inbound links to leaf pages, and more.
In this episode, Sam Julien, Google Developer Expert in Angular, Auth0 developer advocate, and expert (blue belt 🥋) in authentication, shares best practices for authentication and security in Angular.
Panelists Aaron Frost, Jennifer Wadella, & Brian Love then segue into recapping ng-conf: Hardwired 2020, which you can enjoy in its full talk-by-talk entirety at https://videos.ng-conf.org/.
In this episode, panelists Aaron Frost, Brian Love, and Jennifer Wadella cover the details on the recently released version 10 of Angular, plus, why you should always wear an aluminum foil hat. At this point, you might be asking yourself, wait, what? Yeah, we did the math and summed the even character ASCII codes from the changelog, and it all pointed us to this revelation. You're welcome.
On a more serious note, this episode is jam-packed with fun and knowledge. While Angular 10 contained a few features, some deprecations, and a future-looking focus on resolving issues and maintaining dependencies, the panelists walk through the details that we should know as Angular developers.
Finally, the panelists review some feedback on previous episodes and talk through becoming a Google Developer Expert (GDE) in Angular as well as imposter syndrome. Thank you for listening, and don't forget to subscribe!
Aaron Frost and the panel discuss ngx-element and web components in Angular.