DEV Community: khizerrehandev

Object.GroupBy functionality

khizerrehandev — Tue, 19 Sep 2023 06:45:52 +0000

Still Experimental Feature

Following Browsers has supported this feature in Chrome, Edge, Safari 117 version.

Before it was Introduced in browser following implementations were done using:

Using Array.reduce method

function groupBy(array, callback) {
  return array.reduce((result, item) => {
    const key = callback(item);
    if (!result[key]) {
      result[key] = [];
    }
    result[key].push(item);
    return result;
  }, {});
}

const people = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 25 },
  { name: 'David', age: 30 },
]

// Using Reduce Method
const groupByAge = groupBy(people, ({age})=> age);

Using Object.prototype method

 Object.groupBy(people, ({age})=> age);

Benefits:

Implementation is more Abstracted and provided by browser API's
Noise reduction from developers POV and reducing adding custom support for this method

Important Notes:

The return value of groupBy is an object that does not inherit from %Object.prototype%.
groupBy calls callbackfn once for each element in items with callbackFn(groupItem, index) just like normal callback functions e.g map, filter.
Make sure browser supports this method and it is not recommended for production env as it still needs to be supported by major KEY players by web browsers
It is still not supported in Firefox, Opera, IE refer always caniuseto see supported versions.

Let me know your thoughts via comments and feedback. 💬

Happy coding and Happy Learning! 🎉

[RFC: #50719]: Angular new Built In Control Flow Syntax 🚧 📢

khizerrehandev — Sun, 23 Jul 2023 12:45:54 +0000

Angular teams has been working hard to introduce some cool features in upcoming releases and before going getting things into production. Team has opened a new RFC to provide new control flow syntax to support zone/zoneless based applications.

Newly proposed syntax is just SYNTACTIC SUGAR* it will provide common Interface to * structural directives in order to avoid awkwardness syntax underlying for **each
structural directive.

As per RFC
"...technically internals of the new control flow will use the same concepts as the structural directives, including s and view containers."

Why do we need `NEW` control flow syntax?

In current implementation *ngIf, *ngFor, [ngSwitch] which are just sugar coated over ng-template therefore adding complex conditional logic will add/require multiple ng-template under the hood based on nesting level.
Current syntax not handle if/else if/else in convenient way which adds a-lot of boilerplate code wrappers under the hood by framework which adds more complexity while reading code and maintaining templates.
No strict template checking is done for ngSwitch
You can't add multiple directive within same element instead either you have to use either special element called ng-container or use normal HTML element.
To stay relevant with Javascript or Other framework syntax to have less steep curve.

Lastly existing directives not able to function for zoneless application e.g signals implementation therefore angular team has proposed a new built-in control flow syntax for templates in order to support zone (<v16) / zoneless (v16+) applications

New proposed control flow syntax

Conditional Control flow

Keywords
- if/else if/else

Old Syntax

New Syntax

Switch Control flow

Keywords
- switch/case/default

OLD Syntax

New Syntax

Note: No break statement required 🎉

👉 Interesting way to support multiple cases within a switch.

Loop Control flow

Keywords
- for/empty

Old Syntax

New Syntax

Keynote:

All structural directives are (proposed) syntax is introduced in the form of block { ... }
Each structural directive has # sign before starting block {#<NAME_OF_DIRECTIVE>} in order to differentiate from HTML elements and Angular directives and ends with </<NAME_OF_DIRECTIVE>.
New proposed syntax may/mayn't require parenthesis(optional( (<condition) for conditions due to surrounding braces of blocks.

Benefits:

Code is much clear and compact compare to old syntax.
Multiple conditions with keywords can be applied.
Improves DX and helps to improve and maintain code from future perspective.

Conclusion: 📝

The proposed built-in control flow syntax for Angular templates represents a major step forward in improving DX by addressing the weaknesses of the existing micro-syntax.

Therefore Angular team as proposed new CFS syntax for template to support the zone/zoneless(signal) based applications and also trying to achieve better Developer Experience (DX) and try to be as close to JS/TS/Framework syntax to avoid confusion and cluttering in templates.

Hopefully RFC will be closed and final summary would be posted before it gets out in Angular v17

Let me know your thoughts via comments and feedback. 💬

Happy coding and Happy Learning! 🚀🚀

How do you differentiate Junior/Mid/Senior developer?

khizerrehandev — Sun, 23 Jul 2023 12:03:32 +0000

After talking to many experienced Engineers from all ranges varies from 2-14 years of experience and based on response that has
been received i have compiled the characteristics that is the
major differentiater between 3 roles.

Questions?

Q1: Do you think having n number of years of experince makes you an SENIOR Software engineer?
Q2: Do you think having enough technical knowledge is what makes you an SENIOR Software engineer?
Q3: Do you think becoming a manager and lead what make you SENIOR Software engineer?
Q4: Do you think getting job done and JUST shiping code to production is what makes you SENIOR Software engineer?
Q5: Do you think getting attending meetings with (Stakeholder/PM) what make you SENIOR Software engineer?
Q6: Do you think just delegating your work to juniors make you SENIOR Software engineer?

then IMHO, you can't say that you are SENIOR.

Personally, i believe and even asking from smart engineer almost 80% SE has said the good characteristics
for senior engineer/lead/manager (irrespective of role) is

He/She should be good communicator and listener.
He/She been able to understand business requirements very well and translate those requirements down in the hierarchy to get things done what is required.
He/She keeps himself up-to date with technical/non-technical knowledge.
He/She should develop a habit to mentorship, knowledge sharing session with teams. Documenting things should be done and making sure things should be understood by person in his/her team.
He/She should get knowledge of other domains in case leading teams with people having diverse tech background and level of understanding should be done to such extent that you can able effectively discuss/understand their technical jargons.
Try to keep meeting short avoid unnecessary meetings because TIME is very important for your team.
He/She should foster the culture to ask questions in order to bridge the gap between junior/senior (interms of technical debt).
He/She motivate the team member in their job. Irrespective how small/large work is accomplished. It not only gives respect to his member but also build a relationship to do things better way next time.
He/She should take ownership with big roles their is big responsibility so utilize it in proper way and showcase your abilities through output.

let me know your thoughts and comments. What do you think what are the characteristics that a make a developer a senior?

Understanding ng-template, ng-container, *ngTemplateOutlet directive in Angular (ng-🚀)

khizerrehandev — Sat, 15 Jul 2023 16:14:14 +0000

It's always valuable to understand a few technical jargons and understand how multiple components can be combined or put together to build larger applications that have complex functionalities.

What is EmbeddedView

As per Angular docs states "An embedded view can be referenced from a component other than the hosting component whose template defines it..."

A embedded view is basically a way of dynamically showing a template of another component within another component's template OR It it allows to create a template as a part of host component's template.

I am sure you might be confused at this point let's divide into 2 parts:

part-1: "within another component's template..."

Let's have 2 components Child-A and Child-B as separate angular components (ts/html/css|scss). So In order to create embedded view (dynamic creation) of a component template conditionally it can be achieved via structural directive.

So It is as simple to embed a template or dynamically create template view into another component template e.g Parent component template. Yes that's it 🎈🎉🥳

Template defined as part of another component.



<!-- Parent component template -->
<section>
  <header>Header</header>
</div>

<!-- Content Section -->
<section class="content">
  <app-child-A *ngIf="<condition-1>"></app-child-A>
  <app-child-B *ngIf="<condition-2>"></app-child-B>
</div>

part-2: "template as part of host" template..."

Defined independently by a TemplateRef with in Host component.



<!-- Parent component template -->
<section>
  <header>Header</header>
<ng-container *ngTemplateOutlet="logoTpl"></ng-container>
</div>

<!-- Content Section -->
<section class="content">
    ...
</div>

<footer>
  <ng-container *ngTemplateOutlet="logoTpl"></ng-container>
</footer>


<!-- Embedded View Template -->
<ng-template #logoTpl>
  <img src="path" alt="logo image" />
</ng-template>

Here it was defined as part of Hosting component template using "TemplateRef" variable without being tied to specific another component template.

ℹ️

TemplateRef is denoted via #pound/hash sign on ```html

...
</ng-template

- TemplateRef can be accessed via ViewChild and can be programatically create embedded view with in Host container ref. [Playground Stackblitz](https://stackblitz.com/edit/angular-create-embedded-view-6gfcn7b?file=src%2Fapp%2Fapp.component.ts)

Embedded View basically promotes building complex and interactive features by composing smaller, reusable building blocks by referencing **reusable** templates defined either in host component or tied to separate component.

Here's a basic example to illustrate the concept:

- [`*ngFor`](https://angular.io/api/core/EmbeddedViewRef#usage-notes)

```html


Count: {{items.length}}
<ul>
  <li *ngFor="let  item of items">{{item}}</li>
</ul>

The *ngFor directive represents an embedded view, and it is responsible for generating and managing the repeated HTML markup.

ngSwitch Examples



<container-element [ngSwitch]="switch_expression">
  <!-- the same view can be shown in more than one case -->
  <some-element *ngSwitchCase="match_expression_1">...</some-element>
  <some-element *ngSwitchCase="match_expression_2">...</some-element>
...
  <!--default case when there are no matches -->
  <some-element *ngSwitchDefault>...</some-element>
</container-element>

The *ngSwitchCase directive represents an embedded view, and it is responsible for generating and managing the dynamic HTML markup.

Advantages of embedded view:

Flexibility for customisation by passing context data
Reusability to avoid code duplication
Code Clarity/Clean helps to keep template clear, concise
Easy to Maintain from future perspective.
Structural directives can play role to show/hide based on conditional rendering to make customised UI based on conditions

ng-template

Have you heard about template tag in HTML5. The purpose of tag is if you have some HTML code you want to use repeatedly but not rendered until you ask for it to to create view.

Similarly Angular provides powerful built in tag exported from CommonModule called ng-template

Think of ng-template as a blueprint for creating something. It's like a mold or class from OOP perspective that you can use to make multiple copies of an object within a document.

It act as placeholder where static/dynamic reusable HTML markup can placed and based on context passed to ng-template dynamic content + based on condition blueprint copies view can be created.

Static content ```html

Success message!

Default message.


- Passing context to ng-template
```ts


const data = {
 name: 'Khizer'
 title: 'Web Developer{% raw %}`
}
```

```html
<!-- Syntax-1 -->
<ng-container *ngTemplateOutlet="customTpl; context: {$implicit: data}"></ng-container>

<!-- Syntax-2 -->
<ng-template [ngTemplateOutlet]="customTpl" [ngTemplateOutletContext]="{$implicit: data}"

<ng-template #customTpl let-data>
  <div>{{ data.name }}</div>
  <p>{{ data.title }}</p>
</ng-template>

```

**ng-container**

A special element that is provided by Angular to group or bind HTML markup together. Think it as **Imaginary box/container** which groups HTML element together

**Key Benefits/Usages of ng-container**

- **Grouping Element:** in order to apply structural directives `ngIf`, `ngFor`, or `ngSwitch` in order to render content based on conditions + It doesn't Produce any **extra** DOM element HTML markup DOM which serve the best purpose and hold things togther without adding something and creating chaos in DOM

- **Multiple directives can be applied:**

⚠️ _Angular docs: Multiple structural directives cannot be used on the same element [Read here](https://angular.io/api/core/ng-container#combination-of-multiple-structural-directives). If you need to take advantage of more than **one** structural directive, it is advised to use `<ng-container>` per structural directive._

Note: nesting containers are used to apply conditional logic

```html
<div *ngFor="let group of groups">
  ...
  <ng-container *ngIf="<condition-1>">
      <ng-container *ngFor="<condition-2>">
         <ng-container *ngFor="<condition-3>">
          ... These nesting conditions can be applied ... 
         </ng-container>
      </ng-container>
  </ng-container>
</div>
```

- **Creating container scope:**
`ng-container` creates a new variable scope, meaning any variables or context defined within an `ng-container` are only accessible within that container or immediate children HTML markup. Think like a functional scope
when you declare/define a function anything defined there is respect to that scope so Global scope variables can be accessed inside but not the **vice-versa**

Here's an example usage of `ng-container`:

```html
<div *ngIf="condition">
  <ng-container *ngFor="let val of values">
    <p>{{ val }}</p>
  </ng-container>
</div>
```

**ngTemplateOutlet**

`ngTemplateOutlet` is a directive used to render the content of an `ng-template` at a specific location in the template. It allows you to dynamically render a template referenced by its template variable or template reference.

**1. Template declaration/definition:**

_Note:_ By default it is not rendered you need to explicitly need to inject or render the dynamic embedded view through multiple ways in order to create and stamp HTML markup in DOM.

```html
<ng-template #myTemplate>
  <p>I am a template and can be rendered any place!</p>
</ng-template>
```
**Template Rendering**

In order to render the template, you use the `ngTemplateOutlet` directive on an element within the template where you want the content to be rendered.
You reference the `ng-template` by its template reference `#variable`

```html
<div [ngTemplateOutlet]="myTemplate"></div>

or

<ng-container [ngTemplateOutlet]="myTemplate"></ng-container>
```

**2. Pass Contextual data:** You can also pass contextual data to the template being rendered by using the 

You can even pass context to template to the template by using `[ngTemplateOutletContext]` input. It allows you to provide additional variables or data that can be accessed within the template.

`ngTemplateOutlet`.It provides a powerful mechanism for creating flexible and customizable components and enhancing code modularity and reusability.

**4. Repeating/Reusability:** You can use to create embedded view multiple times e.g 5 instance are created 

```html
<ng-container *ngTemplateOutlet="repeatTpl"></ng-container>
<ng-container *ngTemplateOutlet="repeatTpl"></ng-container>
<ng-container *ngTemplateOutlet="repeatTpl"></ng-container>
<ng-container *ngTemplateOutlet="repeatTpl"></ng-container>
<ng-container *ngTemplateOutlet="repeatTpl"></ng-container>

<ng-template #repeatTpl>
 <h2> Repeatable content </h2>
</ng-template>

```

I am sure there is something you have learned tutorial and understanding these complex terms. Which i am sure it will be clear and hopefully will help you to build more modular templates and making your code much less cluttered. 

Let me know your thoughts via comments and feedback. 💬

Happy coding and Happy Learning! 🚀🚀

Demystifying Reactive Programming with RxJS

khizerrehandev — Thu, 06 Jul 2023 15:08:56 +0000

Introduction

Reactive programming has become increasingly popular in modern web development due to its ability to handle complex asynchronous operations and provide a more declarative approach to managing data streams. At the forefront of this paradigm is RxJS, a powerful library that implements reactive programming principles in JavaScript. In this article, we'll dive into the world of RxJS, explore its core concepts, and demonstrate how it can revolutionize your codebase. So let's get started!

Understanding Reactive Programming

Reactive programming is centered around the idea of modeling the flow of data and events as observable sequences. These sequences can be created from various sources such as user inputs, HTTP requests, or even timers. RxJS provides a set of tools and operators that enable developers to compose, transform, and manipulate these sequences effortlessly.

Observable and Observer

The fundamental building blocks of RxJS are observables and observers. An observable represents a stream of values over time, while an observer is responsible for subscribing to an observable and reacting to the emitted values. Let's take a look at a simple example:

import { Observable } from 'rxjs';

const observable = new Observable((observer) => {
  observer.next('Value 1');
  observer.next('Value 2');
  observer.complete();
});

const observer = {
  next: (value) => console.log(value),
  error: (error) => console.error(error),
  complete: () => console.log('Complete'),
};

observable.subscribe(observer);

In this example, we create an observable that emits the values 'Value 1' and 'Value 2' and then completes. The observer object defines three methods: next, error, and complete. When we subscribe to the observable, these methods are invoked accordingly.

Operators

RxJS provides a rich collection of operators that allow you to transform, filter, combine, conditional, and control the behavior of observables. These operators enable you to build powerful data pipelines with concise and readable code. Let's see an example that demonstrates the map and filter operators:

import { of } from 'rxjs';
import { map, filter } from 'rxjs/operators';

const numbersObservable = of(1, 2, 3, 4, 5);

numbersObservable
  .pipe(
    map((value) => value * 2),
    filter((value) => value > 5)
  )
  .subscribe((value) => console.log(value));

In this example, we create an observable numbersObservable with values 1 to 5. Then we apply the map operator to double each value and the filter operator to only keep values greater than 5. Finally, we subscribe to the transformed observable and log the resulting values (6, 8, 10).

Benefits of RxJS

Using RxJS in your projects brings several benefits:

Simplified Asynchronous Programming: RxJS allows you to handle complex asynchronous operations with ease. It provides a consistent and unified approach to dealing with event-driven systems, making your code more maintainable and less error-prone.
Declarative Programming: With RxJS, you can express complex data flows using a declarative style. The powerful operators enable you to easily compose and transform data streams, resulting in code that is more readable and expressive.
Efficient Data Handling: RxJS optimizes the processing of data streams by providing built-in techniques for managing backpressure and concurrency. This ensures efficient memory usage and prevents overwhelming your system with excessive data.

DEV Community: khizerrehandev

Object.GroupBy functionality

Still Experimental Feature

Using Array.reduce method

Using Object.prototype method

Important Notes:

[RFC: #50719]: Angular new Built In Control Flow Syntax 🚧 📢

Why do we need NEW control flow syntax?

New proposed control flow syntax

Benefits:

Conclusion: 📝

How do you differentiate Junior/Mid/Senior developer?

Questions?

Understanding ng-template, ng-container, *ngTemplateOutlet directive in Angular (ng-🚀)

Demystifying Reactive Programming with RxJS

Why do we need `NEW` control flow syntax?