Web Components and Angular Elements

RxJS (Reactive Extensions for JavaScript) is a complex and very interesting topic. The Rx (Reactive Extensions), originating from Microsoft, has been around for a very long time migrating from one platform to another. These days every programming language has its own native implementation of Rx. This episode is fully dedicated to RxJS.In this episode we are discussing:What is RxJS and what problem does it solve?Ben’s personal story with RxJS and how it all startedA quick history or RxJSWhat companies are using RxJS and how does it help them?RxJS and Angular (RxJS on Google scale)Reactive Programming and how RxJS related to that.RxJS vs another Reactive Programming libraries (BaconJS, KefirJS, etc)    Observable vs promiseWhen to use observables, when to use promiseTips and tricks for newcomersWhat is the future of RxJSObservable TC39 proposalObservables as a part of ECMAScript standardPeople mentionedEric MeyerBart De SmetMatthew PodwysockiMore from BenTwitterOther LinksRxJS DocsThe RxJS LibraryECMAScript Observable ProposalReactiveXRxVizThinkRxAliaksei's mailing listkuncevic.dev

There is a lot of buzz around reactivity and reactive programming these days.All reactive Angular API is built on top of RxJS library so there is a lot of reactivity built-in within Angular. What do you think, should Angular have First-class RxJS support, should it be optional or may be Angular should support both options?Lets discuss   👉 Twitter thread LinksThe RxJS libraryProposal: Input as Observable Angular Getting Started Workshopngstart.devAliaksei's mailing listkuncevic.dev

Component is the central piece in Angular. Sometimes you want to generalize a particular component, to make it shareable across your application or to move into a custom component library to share it around multiple applications. It is important to understand how to approach shareable components in your particular use-case.In this episode we are discussing:Components and Components compositionShared folder, Shared library, ngModulesTemplate contextCustom component librariesDesigning components for scaleBest practices, tips and tricks and common pitfallsArticlesCustom Angular Component Library (Best practices)Angular Library Architecture (sub-entries)Angular Application ArchitectureMore from TomasTwitterGithubWebsiteOmniboard Angular Self-Paced Workshops from Aliakseingstart.dev 

Web Components are also known as Custom Elements. Custom Element is a web standard for defining new HTML elements in a framework-agnostic way.There are a set of different techniques that allow you to build Web Components or Custom Elements. Being an Angular Developer you can easily get into Web Components by using Angular Elements.Links:Web ComponentsCan I use Web ComponentsPolymerLitPolymer vs LitAngular ElementsAngular Self-Paced Workshops from Aliakseingstart.dev

I split up the developer tools into multiple categories Development and productivityDebuggingPerformanceTestingIn this episode we discuss each category in details as well as answering the following questions:Why do we need developer tools?Can you imagine a dev life without modern tooling?What are the modern Tools for Angular developers?How to debug a memory leak?Also we talk about some cool insights about what Angular Team is working on right now to improve the Angular developer experience even more.Tools Angular CLIAngular language service (vscode extension)CodelyzerPrettierNgrevAngular state inspector (chrome extension)Angular DevTools  (chrome extension)JestCypressPeople mentionedMisko HaveryJohn PapaWard BellAlan AgiusDouglas CrockfordMore from MinkoTwitterBlogAngular Self-Paced Workshops from Aliakseingstart.dev 

Every time you scaffold a new project with Angular CLI ng new command, the CLI, by default, produces an Angular CLI workspace for that project. In some cases when you are working on multiple Angular projects under the same solution you may want to try out a Multi-project Workspace. This approach is also suitable for many enterprise projects.ng new my-solution --create-application falsecd my-solutionng g application my-appng g library my-shared-libraryLinksMulti-project workspaceAngular Getting Started Workshopngstart.devAliaksei's mailing listkuncevic.dev

Change Detection is a mechanism built into Angular that allows Angular to decide what actions to be performed when the state of the app changes. Most of the time developers do not have to deal with change detection manually.In this episode we are talking about a quick history of change detection and what problem it solves. We also discuss change detection strategies, when you should tap in to change detection manually and tips and tricks. People mentionedJohn PapaMisko HeveryElon MuskTwitter DiscussionAngular Change Detection Edge CasesLinksAngular Change Detection InfographicChangeDetectorRefApplicationRefNgZoneMore from WassimTwitter BlogWebsiteAliaksei's mailing listkuncevic.dev

Angular is continuously evolving together with the entire web ecosystem. Therefore, it is a recommended best practice to keep up your Angular projects up to date with the latest Angular version.In this episode, you will learn why updating to a new Angular version is a good idea. Also, I will provide some tips that will help you to achieve that.Links:Angular versioning and releasesAngular update guideDeprecated APIs and featuresng updateAngular,  Angular CLI, NodeJS compatibility list Angular CLI diff

Animation is a great solution to improve the application experience.You can add animations to your web applications using CSS animations, browsers web animations API or by using third-party libraries.Juan talking bout different aspects of animations, how it works and how to get started.Linksangular.io/guide/animationsauth0.com/blog/get-better-angular-ux-using-animation-techniquesindepth.dev/posts/1285/in-depth-guide-into-animations-in-angularwilliamjuan027.github.io/angular-animations-explorerPopmotionlottieTailwindMore from JuanTwitterWebsite

These days, people use different devices to access the web. Therefore, every web application should be adapted to all screen sizes.Responsive Design is a technique that allows screens to adjust to different sizes accordingly.There are a few techniques to make your Angular Apps responsive. You can choose from several libraries specifically built for that purpose or just do plain CSS by writing CSS Media Queries.Lets discuss that  👉 Twitter thread LinksAngular Flex LayoutAngular CDK LayoutTailwind Responsive DesignBootstrap Layout Utilities CSS Media QueriesTwitter PoolAngular Flex Layout / CDK vs Tailwind / Bootstrap Utilities vs Media Queries