Angular πŸ‡ΊπŸ‡¦ - practical notes
1.63K subscribers
1.6K photos
1 file
532 links
Angular - practical notes

This group is for posting practical notes for Angular developers. Mostly all posts are for quick implementation https://t.me/angular_practical_notes (Commenting on posts only in ENG and UA langs here). Welcome!
Download Telegram
πŸ“„ 2/8 JS Reactive Patterns: Custom Event Targets

#js #patterns #customEvent

If you prefer not to dispatch events globally on the window object, you can create your own event target.

By extending the native EventTarget class, you can dispatch events to a new instance of it. This ensures that your events are triggered only on the new class itself, avoiding global propagation. Moreover, you have the flexibility to attach handlers directly to this specific instance.
πŸ‘4
πŸ“„ 3/8 JS Reactive Patterns: Observer

#js #patterns #observer

The Observer pattern is really similar to PubSub. You subscribe to the Subject and then it notifies its subscribers (Observers) about changes, allowing them to react accordingly. This pattern plays a significant role in building decoupled and flexible architecture.
πŸ‘1
πŸ“„ 4/8 JS Reactive Patterns: Reactive Properties With Proxy

#js #patterns #proxy

If you want to react to changes in objects, Proxy is the way to go. It lets us achieve reactivity when setting or getting values of object fields.
πŸ‘1
πŸ“„ 5/8 JS Reactive Patterns: Individual Object Properties and Reactivity

#js #patterns #defineProperty

If you don’t need to track all the fields in the objects, you can choose the specific one using Object.defineProperty or group of them with Object.defineProperties.
πŸ“„ 6/8 JS Reactive Patterns: Reactive HTML Attributes With MutationObserver

#js #patterns #MutationObserver

One way to achieve reactivity in the DOM is by using MutationObserver. Its API allows us to observe changes in attributes and also in the text content of the target element and its children.
πŸ“„ 7/8 JS Reactive Patterns: Custom Events as a Browser Version Of PubSub

#js #patterns #CustomEvent

The browser offers an API for triggering and subscribing to custom events through the CustomEvent class and the dispatchEvent method. The latter provides us with the ability not only to trigger an event but also to attach any desired data to it.
πŸ“„ 8/8 JS Reactive Patterns: Reactive Scrolling With IntersectionObserver

#js #patterns #IntersectionObserver

The IntersectionObserver API enables reacting to the intersection of a target element with another element or the viewport area.
πŸ“„ Angular Design Patterns: Factory Pattern

#angular #patterns #guide

⚠️ The example is for presentation purposes only and can be refactored.

βœ… Article link
πŸ‘2
πŸ“„ Composite Design Pattern

#js #patterns #composite

Composite: Basic Idea
The first thing we need to look at is the definition offered by the book from the Gang of Four:

β€œCompose objects into tree structures to represent part-whole hierarchies. Composite lets clients treat individual objects and compositions of objects uniformly.”


βœ… Article link
πŸ“΅ DOM Events and Pub/Sub

#js #patterns

Pub/Sub, which means Publish-Subscribe, uses a more structured approach. Instead of depending on DOM components, it uses a central message bus, similar to an events message board. Here is the summary:

- Publishers: These are the event announcers who broadcast messages (events) via the messaging bus.
- Subscribers: These are the visitors who registered to receive specific announcements (events). When a relevant interaction comes, subscribers get notified and can take action.


βœ… Article link
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ‘2
🚱 Interview Questions: Function currying

#js #interview #deepClone #patterns

Analysis: Currying of the add function is achieved by recursively calling a function that continues to accept parameters.
Please open Telegram to view this post
VIEW IN TELEGRAM
❀️ Angular Design Patterns: Composite

#angular #patterns #composite

The Composite pattern defines two basic types of elements sharing the same interface: simple leaves and complex containers. A container can consist of both leaves and other containers. This allows for the construction of a nested, recursive structure of objects resembling a tree.


βœ… Article link
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ“„ Implement the Chainable Utility Type

#ts #types #patterns

βœ… Article link
πŸ“΅ JavaScript Design Pattern β€” Facade

#js #patterns

βœ… Article link
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ‘4
🚳 JavaScript Design Pattern: Builder

#js #patterns #ui_element

βœ… Article link
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ‘1
πŸ“„ The Adapter Pattern in TypeScript

#ts #patterns #adapter

The Adapter Pattern is a structural design pattern that allows incompatible interfaces to work together by providing a "wrapper" or "adapter" around an existing class. Below is a real-world example of the Adapter Pattern in TypeScript, where we want to integrate a new payment gateway into an existing e-commerce application.


βœ… Article link
πŸ‘1
πŸ’™ Angular: Design Patterns

#angular #patterns

Why Design Patterns are important

1. Scalability

Design Patterns help break your app into small, reusable pieces. This makes it easy to add new features later without messing up existing ones.

2. Maintainability

Following design patterns ensures your code has a clear, organized structure.

For example using patterns like the Singleton Pattern makes the app more maintainable because you only have to change one piece of code in the service, and all the components that depend on it will automatically adapt.

3. Testability

Design patterns promotes the separation of concerns which makes it easier to mock and test components

4. Code Reusability

Patterns encourage writing reusable code.

For example, patterns like Factory and Singleton help you organize similar tasks in one place, so you can easily reuse them without rewriting the same logic.


βœ… Article Link
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ‘4
πŸ“„ Advanced TypeScript Patterns

#ts #patterns

βœ… Article Link
πŸ‘9
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ‘5