Angular Rocks

RxJS with Ben Lesh

Lex Kuncevic — Wed, 10 Aug 2022 20:00:00 +1000

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 started
A quick history or RxJS
What 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 promise
When to use observables, when to use promise
Tips and tricks for newcomers
What is the future of RxJS
Observable TC39 proposal
Observables as a part of ECMAScript standard

People mentioned

Eric Meyer
Bart De Smet
Matthew Podwysocki

More from Ben

Twitter

Other Links
RxJS Docs

The RxJS Library
ECMAScript Observable Proposal

ReactiveX

RxViz
ThinkRx

Aliaksei's mailing list

kuncevic.dev

Reactive Angular

Lex Kuncevic — Wed, 11 Aug 2021 21:00:00 +1000

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

Links
The RxJS library

Proposal: Input as Observable

Angular Getting Started Workshop
ngstart.dev

Aliaksei's mailing list
kuncevic.dev

Designing Reusable Components with Tomas Trajan

Lex Kuncevic — Wed, 04 Aug 2021 20:00:00 +1000

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 composition
Shared folder, Shared library, ngModules
Template context
Custom component libraries
Designing components for scale
Best practices, tips and tricks and common pitfalls

Articles

Custom Angular Component Library (Best practices)
Angular Library Architecture (sub-entries)
Angular Application Architecture

More from Tomas
Twitter

Github
Website
Omniboard

Angular Self-Paced Workshops from Aliaksei

ngstart.dev

Web Components and Angular Elements

Lex Kuncevic — Wed, 28 Jul 2021 20:00:00 +1000

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 Components

Can I use Web Components

Polymer

Lit

Polymer vs Lit
Angular Elements

Angular Self-Paced Workshops from Aliaksei

ngstart.dev

Developer Tools with Minko Gechev

Lex Kuncevic — Wed, 21 Jul 2021 20:00:00 +1000

I split up the developer tools into multiple categories

Development and productivity
Debugging
Performance
Testing

In 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 CLI
Angular language service (vscode extension)
Codelyzer
Prettier
Ngrev
Angular state inspector (chrome extension)
Angular DevTools (chrome extension)
Jest
Cypress

People mentioned
Misko Havery
John Papa

Ward Bell

Alan Agius
Douglas Crockford

More from Minko

Twitter

Blog

Angular Self-Paced Workshops from Aliaksei

ngstart.dev

Angular multi-project workspace

Lex Kuncevic — Wed, 14 Jul 2021 21:00:00 +1000

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 false
cd my-solution

ng g application my-app

ng g library my-shared-library

Links
Multi-project workspace

Angular Getting Started Workshop
ngstart.dev

Aliaksei's mailing list
kuncevic.dev

Angular Change Detection with Wassim Chegham

Lex Kuncevic — Wed, 07 Jul 2021 20:00:00 +1000

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 mentioned

John Papa

Misko Hevery

Elon Musk

Twitter Discussion
Angular Change Detection Edge Cases

Links
Angular Change Detection Infographic
ChangeDetectorRef
ApplicationRef
NgZone

More from Wassim
Twitter

Blog

Website

Aliaksei's mailing list
kuncevic.dev

Keeping Angular Projects Up To Date

Lex Kuncevic — Wed, 30 Jun 2021 20:00:00 +1000

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 releases
Angular update guide
Deprecated APIs and features
ng update
Angular, Angular CLI, NodeJS compatibility list
Angular CLI diff

Animations with William Juan

Lex Kuncevic — Wed, 23 Jun 2021 20:00:00 +1000

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.

Links
angular.io/guide/animations
auth0.com/blog/get-better-angular-ux-using-animation-techniques
indepth.dev/posts/1285/in-depth-guide-into-animations-in-angular
williamjuan027.github.io/angular-animations-explorer

Popmotion
lottie
Tailwind

More from Juan
Twitter
Website

Responsive Design

Lex Kuncevic — Wed, 16 Jun 2021 20:00:00 +1000

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

Links
Angular Flex Layout
Angular CDK Layout
Tailwind Responsive Design
Bootstrap Layout Utilities
CSS Media Queries

Twitter Pool
Angular Flex Layout / CDK vs Tailwind / Bootstrap Utilities vs Media Queries

Angular Material with Jeremy Elbourn

Lex Kuncevic — Wed, 09 Jun 2021 20:00:00 +1000

Angular Material is the most popular UI library available for Angular. It contains a set of high-quality components implementing Google Material Design specification, built by the Angular Team.

Think of Angular Material as a foundation that you can use to build your own custom components.

Jeremy touched on a quick history about Angular Material, its continuous evolution and what to expect in the future.

Links
material.angular.io
guides

More from Jeremy
twitter

Angular CDK

Lex Kuncevic — Wed, 02 Jun 2021 20:00:00 +1000

CDK stands for Component Development Kit. CDK is something that not every Angular developer knows about.

CDK contains a set of building blocks for creating your own UI components that could be great foundation for your custom components of any sort or a custom component library.

Links
Angular CDK

The History of Angular with Misko Hevery

Lex Kuncevic — Wed, 26 May 2021 21:25:23 +1000

Angular has been around for many years now. There are a lot of decisions that were made within the Angular team that made Angular so successful today.

AngularJS referring to v1 - the first version of the framework
Angular referring to v2 and up, which is the new modern framework which is completely different to AngularJS

This time Miško Hevery, the creator of Angular will tell about Angular history and share insights on his journey working at Google creating one the coolest front-end framework!

Links:
angular.io

People mentioned
Adam Abrons
Igor Minar

More from Miško:
builder.io
twitter

Component Communication Techniques

Lex Kuncevic — Wed, 19 May 2021 20:00:00 +1000

Component communication is the most common challenge developers face building single page applications.

There are several techniques that you can use to approach components communication building Angular applications.

In this episode I am discussing basic component communication techniques.

Links
Inputs and Outputs
Async Pipe
Reactive Services Technique
Rx-service

Angular Router with Justin Schwartzenberger

Lex Kuncevic — Wed, 12 May 2021 20:00:00 +1000

Angular router solves a lot of problems in client facing single-page web applications.

The router helps to control the page content by dynamically displaying the components without a need to request pages from the server.

Without an Angular router the user navigation experience in Angular application would be hard to achieve.

Links
Angular Router
Revisiting a Reactive Router with Ivy

People mentioned
Mike Ryan
Brandon Roberts
Victor Savkin
Michael Karén

More from Justin
Twitter
Website

Aliaksei's mailing list
kuncevic.dev

Application Folder Structure

Lex Kuncevic — Wed, 05 May 2021 20:00:00 +1000

Have you ever asked yourself the following question, what is the best way to structure an Angular application?

In this episode you will find out why you should care about the folder structure and what are the benefits of the proper folder structure.

Links
Feature modules

Error Handling with Michael Karén

Lex Kuncevic — Wed, 28 Apr 2021 20:00:00 +1000

Error handling is a fundamental part of any real-world web application.

In this episode, you will find everything you need to know about error handling in Angular and more.

Fun fact: That is literally the first ever episode of Angular Rocks, recorded on 21 Jan 2021

Links

Error Handler Class
Angular Errors List
Angular Debugging Guides
Best practices for Error handling in Angular

People mentioned
David Herges

More from Michael
Twitter
Blog

Aliaksei's mailing list
kuncevic.dev

Interacting with Backend API

Lex Kuncevic — Wed, 21 Apr 2021 20:00:00 +1000

Every real-world web application has to communicate with backend API.

Developers building web applications with Angular usually interact with the backend API using HttpClient.

In this episode I am explaining the basic HttpClient features and HTTP methods.

Links

Angular HttpClient
HTTP Methods
Top 10 ways to use Interceptors in Angular

Dependency Injection with Dmytro Mezhenskyi

Lex Kuncevic — Thu, 15 Apr 2021 08:00:00 +1000

Dependency Injection is a design pattern that creates objects and provides them to consumer classes that depend on those objects.

Dependency Injection is widely used in Angular.

In this episode you will find everything you need to know about Dependency Injection and how it works in Angular

Links
Dependency Injection
Dependency Injection YouTube Series by Dmytro Mezhenskyi

Angular Lifecycle Hooks

Lex Kuncevic — Wed, 07 Apr 2021 20:20:00 +1000

Lifecycle hooks allow you to tap into the Angular lifecycle events to get more control.

In this episode I am explaining the nature of lifecycle hooks in Angular and walking through the essential lifecycle hooks like ngOnInit and ngOnDestroy.

Links

Angular Lifecycle Hooks

Angular CLI with Alan Agius

Lex Kuncevic — Thu, 01 Apr 2021 22:00:00 +1100

Angular CLI is the most important piece of Angular ecosystem.

In this episode you will find everything you need to know about Angular CLI:

Brief history
Top features
Monorepos
Tips and tricks
The future

Links
Alan Agius on Twitter
Setup Multi Project Workspace
Angular Package Format (APF) Spec

ng-packagr
ng-packagr with David Herges on ngAir
Optimizing Apps with Resource Inlining

Bonus
Angular CLI Cheat Sheet

Angular Template Syntax

Lex Kuncevic — Wed, 24 Mar 2021 20:00:00 +1100

Angular template syntax powered by Angular built-in directives helps to do a lot of things within a component template.
In this episode I am talking about the main features of an Angular template syntax.

If you want to learn more, have a look in to Angular Cheat Sheet and the Demo App I created specifically for this episode

Links

Cheat Sheet