The Angular Plus Show

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 onX: @DevLifePodcastX: @AngularShowBluesky: @theangularplusshow.bsky.socialThe Angular Plus Show and The DevLIfe Podcast are 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        ReadWatchStock 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 onX: @DevLifePodcastX: @AngularShowBluesky: @theangularplusshow.bsky.socialThe Angular Plus Show and The DevLIfe Podcast are 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        ReadWatchStock 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 onX: @DevLifePodcastX: @AngularShowBluesky: @theangularplusshow.bsky.socialThe Angular Plus Show and The DevLIfe Podcast are 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        ReadWatchStock 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 onX: @DevLifePodcastX: @AngularShowBluesky: @theangularplusshow.bsky.socialThe Angular Plus Show and The DevLIfe Podcast are 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        ReadWatchStock 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 onX: @DevLifePodcastX: @AngularShowBluesky: @theangularplusshow.bsky.socialThe Angular Plus Show and The DevLIfe Podcast are 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        ReadWatchStock 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 onX: @DevLifePodcastX: @AngularShowBluesky: @theangularplusshow.bsky.socialThe Angular Plus Show and The DevLIfe Podcast are 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        ReadWatchStock 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 onX: @DevLifePodcastX: @AngularShowBluesky: @theangularplusshow.bsky.socialThe Angular Plus Show and The DevLIfe Podcast are 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        ReadWatchStock 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 onX: @DevLifePodcastX: @AngularShowBluesky: @theangularplusshow.bsky.socialThe Angular Plus Show and The DevLIfe Podcast are 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        ReadWatchStock media provided by JUQBOXMUSIC/ Pond5

How many domains do you currently own? One for your blog, maybe one for your email, a family website or two, oh, and of course a bunch of domains for those awesome side projects and ideas you have. Side projects can be fun, challenging, and rewarding. Have you ever thought about what it might take or look like to bootstrap your own side project and successfully launch a new startup?Join the panelists of the Angular Show as we have the opportunity to spend some time with Niall Crosby, the founder, and CEO of AG Grid. Niall shares with us the story of how he got started building AG Grid, some of the early decisions he made, and how he was able to bootstrap and launch a successful startup. AG Grid is the best JavaScript grid in the world. And, as such, it wasn't built in a day (kinda like Rome, which we think is quite promising). If you're not familiar with AG Grid, head over to thinkster.io or check out some of the free workshops that our very own Brian Love has delivered for teaching you AG Grid, from the basics to the most advanced use cases. This is an episode of the Angular Show that you don't want to miss, especially if you're eager to be an entrepreneur or if you're considering launching your own company.Show notes: Article about a story of ag-Grid https://medium.com/ag-grid/why-the-world-needed-another-angularjs-1-x-grid-17e522a53bc8Connect with us: Niall Crosby - https://www.linkedin.com/in/niallcrosby/?originalSubdomain=ukBrian F Love - @brian_loveAaron Frost - @aaronfrostFollow us onX: @DevLifePodcastX: @AngularShowBluesky: @theangularplusshow.bsky.socialThe Angular Plus Show and The DevLIfe Podcast are 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        ReadWatchStock media provided by JUQBOXMUSIC/ Pond5

Let's be honest, most engineers are not good designers. Working closely with product and design teams improves our applications, and is necessary for building a successful product. So, what are design systems and what role do they play to solve this challenge?In this episode of the Angular Show, we sit down with our friend Bill Odom. Bill loves Angular and his passion is to share his knowledge with the community, through speaking and teaching. Bill is a trainer at Oasis Digital that provides the popular Angular Bootcamp training. The panelists learn from Bill that design systems enable effective communication, planning, implementation, and ongoing maintenance of user interface and experience between engineering, design, and product development teams.You can expect to learn what a design system is, how they are valuable to organizations, some widely used design systems today, integrating design systems with tooling to develop components in isolation such as Storybook, and how design tokens fit into the model. Angular is well-positioned for developing applications using modern tooling, including design tokens, design systems, and more. Don't forget to subscribe so you can follow along with the panelists as they learn from community members like Bill.Show Notes:Oasis Digitalhttps://oasisdigital.com/https://oasisdigital.com/traininghttps://oasisdigital.com/code-talk-teach/Angular and CSS Grid: Get ready to fall in love - ng-conf 2019 - https://youtu.be/lh6n0JxXD_gStorybookhttps://storybook.js.org/Angular and Storybook, Oasis Digital - Nathan Kerr - https://www.2021.ng-conf.org/workshops/angular-and-storybook,-oasis-digitalThe benefits of a design system - Angular Berlin - Kai Röder - https://youtu.be/mWsNQB0fV38Design tokensWTF are Design Tokens? - Jina Anne - https://youtu.be/q5qIowMyVt8Theo - SalesForce - https://github.com/salesforce-ux/theoStyle Dictionary - Amazon - https://amzn.github.io/style-dictionary/Why Angular is the best framework for a design system - Jan Greger Hemb -https://youtu.be/yERBKsNVE60Connect with us:Brian F Love - @brian_loveAaron Frost - @aaronfrostJennifer Wadella - @likeOMGitsFEDAYBill Odom - @wnodomFollow us onX: @DevLifePodcastX: @AngularShowBluesky: @theangularplusshow.bsky.socialThe Angular Plus Show and The DevLIfe Podcast are 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        ReadWatchStock media provided by JUQBOXMUSIC/ Pond5