The Angular Plus Show

In this episode of the Angular Show, the panelists (Aaron, Brian, and Jennifer) have the esteemed privilege to be chat with Misko Hevery. In case you haven't heard, Misko is the creator (and sometimes lovingly referred to as the father) of Angular. Misko has spent the last 16 years building Angular at Google, and we have much to thank him and the team for. For some of us, we make a living from teaching, writing, speaking, and coding with Angular. We cannot thank Misko and the entire Angular Team enough!Now, don't get your feathers ruffled - Misko recently transitioned from the Angular team at Google to join the Builder.io team that is building (pun intended) Qwik - a DOM-Centric, resumable web-app framework. Does this mean that Angular is doomed? No, definitely not. This means that Misko continues to pioneer in the land of the web.What is Qwik and how is this framework any different than Angular (or Vue or React)? Join us as we learn about Qwik with Misko Hevery!Show notes:https://github.com/builderio/qwikFollow 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

Internationalization (i18n) and localization (l10n) can be critical for Angular applications that are used throughout a country, continent, or around the globe. As Angular developers, we have several tools at our disposal to accomplish i18n and l10n. As you might expect, since Angular is an opinionated framework that comes with batteries included, there is a solution provided by the Angular Team. We recently sat down with Kaitlyn Ekdahl to learn about the built-in solution to i18n provided by Angular. Kaitlyn taught us how to get started, some of the recent improvements, as well as the pros and cons of this solution. We also briefly mentioned that there are a few open-source community-led efforts at solving i18n with Angular, such as ngx-translate and Transloco.As engineers, the panelists for the Angular Show (Aaron, Jennifer and Brian) are always curious. We want to learn more, and we endeavor to share our learnings with you! We were excited to learn more about Transloco from Inbal Sinai, a member of the ngneat team, and a Senior Front End Developer at Datorama Salesforce. Inbal shares with us how Transloco works, how easy it is to use, and some of the runtime advantages that Transloco provides. Transloco also makes it easy to get started using the provided `ng add` command. And, if you're currently using Angular's i18n library, Transloco has documentation on how you can easily switch. Oh, did we mention docs? Yeah, they have that covered too (and quite well we might add).If you are considering supporting i18n and l10n in your Angular application we recommend you listen to this episode of the Angular Show, check out Transloco, and don't forget to subscribe so you can go back and listen to the show we did with Kaitlyn to learn about Angular's localization library.Show Notes:https://ngneat.github.io/translocoConnect with us:Inbal Sinai - @SinaiInbalBrian F Love - @brian_loveJennifer Wadella - @likeOMGitsFEDAYFollow 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

Angular is more than a JavaScript framework, it's a community of caring people who use Angular to build and deploy amazing products and solutions that enrich lives and improve organizational pursuits. For many of us, the community is more important than the technology. Sure, Angular is awesome, but not as awesome as you the community!So how can we connect as a community? We can connect, engage and learn through conferences, meetups, blogs, podcasts, and now, the new(ish) Angular Discord. The Angular Discord server is a free and safe way for you to connect with the Angular community, ask questions, and learn from others.If you haven't used Discord before, it's a bit like slack, or other chat messaging services. There are channels that range from questions and discussions about Angular, community topics and events, libraries and technologies, meetups, and more. You can connect with library authors and contributors, people in your local area, and people that speak your language.In this episode of the Angular Show, we get to hang out with Stephen Cavaliere from leading agile, and Rob Gant from LearnLux, who are a few of the moderators and people behind the Angular Discord. Stephen and Rob share with us about how the Discord server was started, why it exists, how to join, and some of their future hopes and plans.You can join the Angular Discord for free at discord.ng.show. It's free, safe, and inclusive.Connect with us:Stephen Cavaliere - @SteveCavaliereBrian F Love - @brian_loveJennifer Wadella - @likeOMGitsFEDAYAaron Frost - @aaronfrostFollow 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

Single Page Applications (SPA) have many advantages, including increased interactivity, responsiveness, and user experience. However, a SPA often requires sending large chunks of JavaScript code to the client. This code must be downloaded and parsed by the client, not to mention the execution time required. There are many strategies to achieve a highly performant single-page application. One of the most commonly used strategies is to lazy-load as much of the application as possible. It's likely that the client does _not_ need the entire application's code upfront, rather, we can deliver a minimal amount of code to the client to bootstrap the application. We can then either prefetch and preload the remaining chunks or wait until the user interacts with a specific feature or module of our application, and then fetch and load the JavaScript that is necessary to render and execute.As Angular developers, you are likely familiar with the built-in router's ability to lazy load child modules via routing. This is a big win for all of us. But, what if you could dynamically load modules and components at runtime? The Angular Show panelists (Aaron, Jennifer, and Brian) sat down with Jay Cooper Bell to learn more about this solution and the approach that he has used. Jay is the CTO and co-founder of Trellis, a fundraising platform for non-profit organizations, and a frequent contributor and speaker in the Angular community. Jay, and the team at Trellis, created rx-dynamic-component, an open-source library that enables Angular developers to dynamically load and mount a component at runtime using RxJS Observables. Jay teaches us about what he learned building the library along with the advantages of lazy-loading components using an Observable's next notification as the observer.Don't forget to subscribe so you can continue to hang out with the Angular Show panelists as we learn from the Angular community!Show Notes:rx-dynamic-component source code:https://github.com/trellisorg/platform/tree/master/packages/rx-dynamic-component rx-dynamic-component demo:https://github.com/trellisorg/platform/tree/master/apps/rx-dynamic-component-demo https://blog.angular.io/ivys-internal-data-structures-f410509c7480Video about Memory Management: https://www.youtube.com/watch?v=Zs-d6_FPfMY&t=1sArticle: https://www.nytimes.com/interactive/2021/05/24/us/tulsa-race-massacre.htmlConnect with us:Jay Bell - @JayCooperBellBrian F Love - @brian_loveJennifer Wadella - @likeOMGitsFEDAYAaron Frost - @aaronfrostFollow 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

How long does it take to build your application? When you build your application are you rebuilding the entire universe, or are you using incremental build caching? For some applications, build times are perfectly acceptable, and there are no major complexities around building the application. For others, the build time is unacceptable, is impacting the developer experience, and perhaps most importantly, it is causing your organization money. So, what is your organization to do?There are a few organizations that manage development scale at the largest level, and one of those organizations is Google. All source code at Google is part of the google3 monolithic repository, and further, building applications can be complex. Google set out to solve this problem and built Blaze, and then released Bazel as an open-source project in 2015. In this show, we learned from Zack Gray, from Flare.build, about how Bazel is an automated tool for building and testing. Bazel is language and framework agnostic, meaning, it can be used to build and test not just TypeScript and JavaScript, but any language. Further, Bazel leverages parallelization, enabling the tool to build multiple aspects/modules of your application simultaneously. This also leads to building and testing across many machines. Finally, Bazel is smart enough to only build the artifacts that need to be re-built. This leads to incredible performance and reliability.If Blaze sounds like a potential solution for you, then this is an episode of the Angular Show that you will want to listen to. Finally, if you need help with building, running, configuring, and extending Blaze, then be sure to reach out to Zach and the team at Flare.build.Connect with us:Zach Gray - @zachgray_ioBrian F Love - @brian_loveJennifer Wadella - @likeOMGitsFEDAYAaron Frost - @aaronfrostFollow 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

Have you heard of Stackblitz? If not, have you ever clicked the button in the Angular docs to launch a demo of the code and you are instantly transported into an environment that is running the Angular code alongside a slick code editor that resembles VS Code? We're going to assume that you answered yes to both of these questions. If not, go check out stackblitz.com and start-up an Angular application to see just how fast and easy it is to create a demo application running in the browser. Stackblitz is building incredible tooling for developers to use in the context of the browser, and to do so, they are pushing the envelope of building a web application. So, how do they do it?In this episode of the Angular Show, we are thrilled to sit down with Eric Simons, the co-founder, and CEO of Stackblitz to discuss the future of JavaScript and to learn how the team at Stackblitz is building an OS in the browser. Crazy - we know! Join the panelists as they ask Eric just how they are going about this. As you might guess, they are leveraging web APIs that some of us have probably never touched, like WebAssembly, to accomplish this task.What is the future of JavaScript? None of us know for sure, but we can take a look at cutting-edge solutions like Stackblitz to get a glimpse into what the future might look like.Show notes:https://www.chromium.org/teams/web-capabilities-fuguhttps://stackblitz.com/v2Connect with us:Eric Simons - @ericsimons40Aaron Frost - @aaronfrostBrian F Love - @brian_loveJennifer Wadella - @likeOMGitsFEDAYFollow 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

Internationalization (i18n) and localization (l10n) can be critical for Angular applications that are used throughout a country, continent, or around the globe. As Angular developers, we have several tools at our disposal to accomplish i18n and l10n. As you might expect, since Angular is an opinionated framework that comes with batteries included, there is a solution provided by the Angular Team. What you might know is that the Angular Team made some big improvements in the localize package when Ivy, the new compilation and rendering pipeline for Angular that was released in version 9, was released that improves the development of Angular applications that support i18n and l10n. There are also a few community-driven open-source solutions for i18n with Angular, including Transloco and ngx-translate. With all of these options, which one should you choose?Thankfully, as loyal subscribers and listeners to this very podcast, we want to help you make an informed decision. And to do that, as usual, we turn to an expert in the community. Please welcome, Kaitlyn Ekdahl, a Senior Software Engineer at Narwhal Technologies, to the Angular Show to teach us about i18n and l10n with Angular. Kaitlyn shares her experience and in-depth knowledge of using Angular's localize solution, Transloco, and ngx-translate. We discuss the pros and cons, and why you might choose one over the other.Whether or not your current Angular applications require i18n and l10 today, this is an episode of the Angular Show that you do not want to miss. Share this with your colleagues and other Angular developers so that we the community can be educated, informed, and ready to build applications that can be used throughout our communities and throughout the world.Show Notes:i18n vs l10n - https://blog.mozilla.org/l10n/2011/12/14/i18n-vs-l10n-whats-the-diff/Locl - https://www.locl.app/Introducing Transloco - https://netbasal.com/introducing-transloco-angular-internationalization-done-right-54710337630cRuntime i18n with Ivy by Olivier Comb: https://www.youtube.com/watch?v=miG-ghJhFPcAngular Athens: https://www.meetup.com/Angular-Athens/events/277017190/Connect with us:Kaitlyn Ekdahl - @kaitlynekdahlAaron Frost - @aaronfrostBrian F Love - @brian_loveFollow 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 invited Minko Gechev to come on the show and talk through some of the big Angular-related announcements, namely, Angular version 12, IE11 deprecation, and the shiny new Angular DevTools. Minko Gechev is a longtime contributor to Angular, a member of the Angular Team, a good friend of ours, and an all-around wonderful person to spend time with. To kick things off, Minko takes us through some of the big changes as part of the Angular version 12 release, including Ivy (no not the plant, the new-ish compilation and rendering pipeline in Angular) libraries and the final sail-off of ViewEngine (the thing that Ivy replaces), updates to the Language Service (VS Code plugin) to use Ivy, strict mode as the new default for new Angular projections, webpack 5 support, nullish coalescing operator in templates, and inline Sass. Phew!! That's a long list. I guess the team has been a bit busy. Hopefully, they got a break to attend Minko's amazing talk at Google I/O.And that's just the Angular version 12 content we cover in this episode! We also talk about DevTools, the new Chrome extension for Angular developers from the Angular Team, its features, how it works, the integration with the Chome DevTools, and how you should never touch an internal Angular API with three theta symbols (joking, but, seriously, no touchy)! The new DevTools are available in the Chrome Web Store to download and install today, and will soon be available for Firefox.Oh, we almost forgot! In the midst of all of these amazing technical accomplishments, the team snuck in some easy-peezy Tailwind CSS support for those of you that love to add dozens of classes to your HTML elements and are afraid of CSS (we get it, CSS is, like, really challenging). We're speculating that future versions of Angular might even write your CSS for you.Angular as a platform continues to grow and thrive. Want to be a part of the journey? Go ahead and subscribe so you can listen to this info-packed episode with Minko, and you'll be sure to not miss a future episode. Subscribe today!Show notes: Article about a Introducing Angular DevTools https://blog.angular.io/introducing-angular-devtools-2d59ff4cf62fConnect with us: Minko Gechev - @mgechevBrian F Love - @brian_loveAaron Frost - @aaronfrostJennifer Wadella - @likeOMGitsFEDAYFollow 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

Ever wonder about being in Developer Relations (aka DevRel)? Or starting a meetup? Or building a technical community? In this episode, the panelists have the pleasure to sit down with Ana Cidre, a Developer Advocate at Auth0, and learn about how she got started with being a part of, and building, communities. Ana shares a bit of her story about how she got started, was mentored by Sherry List, and began engaging with technical communities, the JavaScript community, and of course, the Angular Community. Ana's story is both inspiration and education, and we know you will enjoy this special episode from the Angular Show.Ana shares how being a DevRel is not about selling, rather, developer relations is about building tools and education so that developers will remember a specific product or solution when they need it. She also shares with us about the Avocado Labs initiative that she pioneers at Auth0. Avocado Labs provides educational online content for developers, focusing on frontend engineering technologies, and of course, security and identity management. Avocado Labs hosts online presentations and panels. They have upcoming events that you can sign up for, as well as recordings from past events.In a rift with Ana about online communities, our beloved panelist Brian proposes an (according to Jennifer "cute") community idea called "async/await" where attendees consume some educational online content asynchronously on your own, and then gather later in-person, or online, to discuss, ask questions, or have a panel. It's an idea, and you hear it here first. Finally, Ana shares with us the Auth0 Ambassador program, how it works, the perks, and more. You can learn more about the Ambassador program using a link in our show notes.Show Notes:https://www.goodreads.com/book/show/30121783-social-architecturehttps://avocadolabs.dev/Links:https://javascript-conference.com/https://twitter.com/joshsimmons/status/1236060608153280513 https://www.ted.com/talks/celeste_headlee_10_ways_to_have_a_better_conversationConnect with us:Brian F Love - @brian_loveJennifer Wadella - @likeOMGitsFEDAYAna Cidre - @AnaCidre_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 this episode of the Angular Show, we wanted to learn about workspaces. What exactly is a workspace? Why do we have this angular.json file? What is a builder? How does this all fit together with building Angular applications, both small, and at scale? What about Nx from the team at Nrwl?Join us as we spend some time learning from Benjamin Cabanes, an expert on Angular workspaces, and a senior engineer at Nrwl. Ben clearly defines what a workspace is, and what it is not. We learn from Ben how the Angular Workspace is configured, the primary components, and how it all fits together and integrates with the Angular CLI. Ben also teaches us about the benefits of a workspace over simply code colocation, and how we can use the power of Nx to improve the developer experience in our organizations.Be sure to subscribe so you can continue to learn from experts like Ben and the amazing Angular community.Show Notes:Node Rockets - https://www.node-rockets.com/Connect with us: Benjamin Cabanes - @bencabanesBrian F Love - @brian_loveAaron Frost - @aaronfrostFollow 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