DEV Community: V.D

Atomic Design Unleashed: Building Consistency through Design Systems

V.D — Mon, 21 Aug 2023 14:07:41 +0000

Photo by Clark Tibbs on Unsplash

Hi Folks, Today we are going to learn and explore about what are design systems, what is your role as an engineer to know about design systems, is it really useful to use a design systems or it is mere a proof of concept to be used? and also how it will be beneficial for a team to have a design system across various projects while developing application.

What is a Design System?

A design system is a comprehensive collection of guidelines, components, patterns, and assets that are used to create consistent and cohesive user interfaces across a product or organization. It serves as a single source of truth for design and UI-related decisions, making it easier to maintain a unified and polished look and feel across different parts of an application.

That is it ?

Really , Let me break down for you, A design system is nothing but a collection of style guidelines, components(Atoms), assets, combination of components(Molecules) ex: Header section, navbar etc. which consists of different types of components(atoms). It is something like a LEGO bricks which constitutes to a whole new structure when being joined together.

So, think about design systems as a magic recipe book for making websites and apps. Inside, there are secret ingredients called “design tokens” that give colors, fonts, and spaces their special flavors. These ingredients help designers and builders speak the same language, so everything they create looks like they belong together.

Imagine a box of building blocks. Design systems give you those blocks, but they’re not just ordinary blocks — they’re smart blocks. They know how to make buttons, menus, and other cool things that people use on screens. This means that instead of starting from scratch every time, we can use these smart blocks to build things faster and better.

So, there is concept of Atomic Design system, when we talk about design system, it is the basic and more foundational one to understand the design system as a whole.

Atomic Design System(Methodology)

Atoms, molecules, organisms, templates, and pages

Welcome to the Atomic design system, a dynamic toolkit that empowers designers and developers to build interfaces that are not just visually appealing, but also functionally robust. Think of it as a LEGO set for creating stunning user experiences! 🚀

Atoms

Photo by Shubham Dhage on Unsplash

The elemental building blocks of your interface. These atoms are like the tiny particles that form the foundation of everything, from simple buttons to intricate navigation bars. They’re your UI’s DNA , defining colors, typography, and spacing that ensure consistency across the board. Imagine them as the primary hues on your painter’s palette, ready to splash vibrancy onto your canvas.

But atoms alone don’t tell the whole story.

Molecules

Photo by Terry Vlisidis on Unsplash

Atoms come together to form ‘molecules’ — charming clusters of atoms that fulfill specific functions. Think of a search bar: it’s not just a button or an input field, it’s a fusion of both that serves a distinct purpose. Molecules are the quirky puzzle pieces that snap together seamlessly, forming the framework for your user interface landscape.

Organisms

Photo by CDC on Unsplash

Zoom out a bit more, and you encounter ‘organisms’ — dynamic ecosystems composed of molecules and atoms working in harmony. Consider a navigation menu: it’s more than just a collection of buttons; it’s a thoughtful arrangement of components that guide users on their digital journey. Organisms are like mini worlds where UI elements collaborate to create delightful user experiences.

Templates

Photo by Tim Arterbury on Unsplash

Crafting Consistent Layouts with Purpose. Templates are the blueprints that guide the arrangement of organisms , molecules , and atoms across various sections of your application. Think of them as the architectural plans for your digital spaces. Templates establish the structural framework, ensuring that your user interface maintains a consistent and visually pleasing layout.

Just as architects design floor plans for different rooms in a building, templates define the structure of your application’s different screens or sections. They dictate where specific elements should go, such as headers, sidebars, content sections, and footers. By adhering to template guidelines, you ensure a seamless transition between different areas of your app, creating a sense of familiarity for users.

Templates also play a crucial role in responsiveness. With the prevalence of various devices and screen sizes, templates help you design interfaces that adapt gracefully to different contexts.

Pages

Photo by Olga Tutunaru on Unsplash

Pages are where the magic happens — they’re the dynamic culmination of templates populated with real content and data. Just as a movie’s script comes to life on the big screen, your design system’s components come together on pages to tell a compelling digital story.

Pages showcase how various elements interact with each other in real-world scenarios. They demonstrate how different organisms, molecules, and atoms collaborate to create meaningful user journeys. Imagine a product page on an e-commerce site: it’s not just about displaying images and text; it’s about crafting an experience that entices users to explore, engage, and ultimately make a purchase.

The beauty of the Atomic design system shines through on pages. By assembling pre-designed components into coherent layouts, you save time and effort in the development process. Consistency and harmony reign supreme, as the building blocks you’ve meticulously designed and tested fit together seamlessly.

In essence, templates and pages complete the narrative of your Atomic design system. Templates establish the guidelines that ensure cohesion and adaptability, while pages breathe life into your design vision, showing how your UI components come together to deliver exceptional user experiences. This approach empowers you to create interfaces that not only dazzle the eye but also guide users through delightful journeys in the digital realm.

Benefits of Design Systems:

Consistency: Design systems ensure that UI elements and patterns remain consistent throughout the application, reducing confusion for users and making the design process more efficient for developers.
Efficiency: By providing reusable components, design systems speed up development time. Developers can focus more on implementing functionality rather than reinventing the wheel for common UI elements.
Scalability: As an application grows, a well-structured design system can accommodate changes and new features without sacrificing design integrity.
Collaboration: Design systems foster collaboration between designers and developers. Both parties work with the same set of components and guidelines, reducing miscommunication and promoting teamwork.
Accessibility: Design systems can enforce accessibility standards, ensuring that UI components are usable by a wider range of users.

Design System Components:

Design Tokens: These are design-specific variables that define things like colors, typography, spacing, and more. They provide a consistent foundation for design decisions.
UI Components: Reusable building blocks that make up the interface. Examples include buttons, forms, navigation bars, and modals.
Guidelines and Documentation: Clear documentation helps designers and developers understand how to use each component, the intended behavior, and when to use it.
Patterns and Best Practices: Design systems often provide guidance on how to combine components to create larger UI patterns. This ensures a cohesive and consistent user experience.

What is your role as an engineer to know about design systems

Photo by ThisisEngineering RAEng on Unsplash

As a developer/engineer, while crafting an application or a project, you should be well aware of the building blocks you are using while creating the project. As an engineer, understanding design systems plays a crucial role in ensuring the successful development and maintenance of user interfaces.

While your primary focus might be on the technical implementation, your awareness and involvement in design systems contribute to a more holistic and efficient product development process.

Here’s how your role intersects with design systems:

Consistent Implementation : Design systems provide guidelines and specifications for UI elements. By understanding these guidelines, you can implement UI components consistently, ensuring that the design vision is faithfully translated into code.
Reusability : Design systems promote the reuse of UI components. As an engineer, you’ll be responsible for creating and maintaining these reusable components, which not only saves time but also ensures uniformity across the application.
Efficient Development : By using pre-designed components and following established patterns, you can streamline your development process. This allows you to focus more on the logic and functionality of the application rather than spending time on designing individual UI elements.
Collaboration with Designers : Understanding design principles helps you communicate effectively with designers. You can discuss technical constraints, propose solutions, and ensure that the components can be implemented within the given specifications.
Component Libraries: Engineers often build and maintain libraries of UI components. These libraries are integral to design systems as they house the building blocks of the user interface. Familiarity with design systems aids in creating well-structured and cohesive component libraries.
Adaptation and Flexibility: Design systems can evolve over time. As an engineer, your understanding of the design system’s principles allows you to adapt to changes and updates while maintaining the intended user experience.
User-Centered Development: Design systems emphasize user-centered design. By understanding the design system’s user-centric approach, you can ensure that the UI components you implement align with the needs and expectations of the users.
Testing and QA: Your knowledge of design systems can help you conduct more accurate testing, ensuring that the implemented components align with the expected behavior and design standards.
Accessibility: Design systems often include accessibility guidelines. As an engineer, you’ll need to ensure that the components you build adhere to these guidelines, making the application usable for a wider audience.
Problem Solving: Design systems might not cover every scenario. In cases where a specific component or interaction isn’t defined, your understanding of the design system principles can help you make informed decisions that maintain consistency.

In essence, your role as an engineer in understanding design systems extends beyond coding; it involves collaborating with designers, translating design into code, maintaining consistency, and contributing to the overall user experience of the product.

To understand more on design systems, I would highly recommend to check this site, it contains the whole sole knowledge of the design systems, why we should always considered design systems while crafting or architecting any application, it resolves the purpose of having the design systems while building application from small scale to enterprise level application or project.

Link — https://atomicdesign.bradfrost.com/table-of-contents/

Please check out this one, it will be very helpful to understand the concept and start using it.

Thanks for your time, will be back with more interesting content.

“🌟 Embark on a journey of knowledge and creativity with me!

Join my circle to stay updated on insightful content that fuels inspiration. Let’s explore, learn, and write our stories together! 🚀✍️ #FollowForIdeas #CreateAndConnect”

Thanks for reading

👏 Please clap for the story and follow me 👉
📰 View more content
🔔 Follow me: LinkedIn| Twitter| Github

Future-Proof Your JavaScript Code

V.D — Tue, 30 May 2023 18:07:23 +0000

Future-Proof Your JavaScript Code: The Game-Changing Immutability Revolution

In this article, we will explore a set of new array methods that offer a fresh approach to achieving immutability.

The methods under discussion are with, toSorted, toReversed, and toSpliced.

Immutability ensures that the original array remains unchanged, and modifications are made on a new copy. While there were existing techniques for achieving immutability, such as utilizing the spread operator, these new array methods present more convenient alternatives.

These methods offer improved code readability and performance benefits, making them advantageous for developers.

with() Method

The with() method of Array instances is the copying version of using the bracket notation to change the value of a given index. It returns a new array with the element at the given index replaced with the given value.

array.with(index, value) — will return a new array with the element at index replaced with value.

const arr = [1, 2, 3, 4, 5];
console.log(arr.with(2, 6)); // [1, 2, 6, 4, 5]
console.log(arr); // [1, 2, 3, 4, 5]

2. toSpliced()

splice() — is method that will work on your original array, rather that on their copy.

For eg: — in below example, splice has replaced the start and end index with the new value i.e. ““mango””

what toSpliced() will do, it will not update the original array, rather than work on its copy and original array remains intact. It returns a new array instead of modifying the original array.

3. toSorted()

Normally, we do sort by adding sort() after any array, and it will sort the original array, there is a change in original array.

To remain intact with original array, you need to introduced spread operator and create a separate copy of that like this.

To remove this step, javascript has a new array method, there is no need to use the spread operator ie. toSorted()

4. toReversed()

This method is working same as array.reverse(), but rather than changing original array, it will create a new copy and original array remains intact.

Before using, any of these methods, please check their browser compatibility as many of them is not supported in Firefox, so make use if required. https://caniuse.com/?search=array.with

Also please make sure to check MDN Websiteto check for upcoming features in Javascript.

Thanks for reading

👏 Please clap for the story and follow me 👉
📰 View more content
🔔 Follow me: LinkedIn| Twitter| Github

Angular —Adapter Pattern: Simplify Data Integration(Kanban Board)

V.D — Fri, 19 May 2023 11:18:43 +0000

Simplifying Integration and Enhancing Flexibility

Introduction

A common requirement in modern web development is the integration of data from multiple sources. However, working with various data formats and APIs can be complex, and code can be tightly coupled to specific data sources. To overcome this problem, the adapter pattern provides a solution by acting as a bridge between incompatible interfaces. In this article, we’ll showcase the adapter pattern, using the Kanban board as an example. Will also provide code examples and practical use cases to illustrate the benefits.

Understanding the Adapter Pattern:

The Adapter pattern is a structural design pattern that allows objects with incompatible interfaces to work together. It acts as an intermediary between two incompatible classes, translating requests from one to the other. This pattern provides a way to reuse existing code and promotes loose coupling between components.

The main components of the Adapter pattern are:

Target : The interface that the client interacts with.
Adaptee : The existing interface that needs to be adapted.
Adapter : The bridge between the Target and the Adaptee that implements the Target interface and internally uses the Adaptee to perform the desired operations.

Real world use cases:

To better understand the practical use of the adapter pattern, let’s look at a real world scenario. Imagine building a project management application with Angular and deciding to implement a Kanban board to visualize tasks and progress.

Kanban boards integrate with various task management systems such as Jira, Trello, and Asana, each with its own API and data structure. Without the adapter pattern, you would have to write custom code for each task management system to tightly couple your application to these external services.

However, the adapter pattern allows you to create an adapter for each project task management system by abstracting the details of the underlying API and data structures. This allows you to switch between different task management systems without changing the core logic of your application.

Implementing the Adapter Pattern in Angular:

Now let’s dive into the implementation of the Adapter pattern in an Angular application. We’ll focus on integrating a Kanban board with two different task management systems: Jira and Trello.

Define the Kanban Board Component: First, let’s create the Kanban board component, which will be responsible for rendering the tasks and their corresponding status columns. Here’s a simplified example of the KanbanBoardComponent in Angular:

import { Component, OnInit } from '@angular/core';
import { Task } from './task.interface';
import { TaskManagementAdapter } from './task-management-adapter';

@Component({
  selector: 'app-kanban-board',
  template: `
    <div class="kanban-board">
      <div class="column" *ngFor="let statusColumn of statusColumns">
        <h2>{{ statusColumn }}</h2>
        <div class="task" *ngFor="let task of getTasksByStatus(statusColumn)">
          {{ task.title }}
        </div>
      </div>
    </div>
  `,
  styleUrls: ['./kanban-board.component.css']
})
export class KanbanBoardComponent implements OnInit {
  statusColumns: string[] = ['To Do', 'In Progress', 'Done'];
  tasks: Task[] = [];
  taskManagementAdapter: TaskManagementAdapter;

  constructor(private adapter: TaskManagementAdapter) {
    this.taskManagementAdapter = adapter;
  }

  ngOnInit(): void {
    this.loadTasks();
  }

  loadTasks(): void {
    this.tasks = this.taskManagementAdapter.getTasks();
  }

  getTasksByStatus(status: string): Task[] {
    return this.tasks.filter(task => task.status === status);
  }
}

2. Create the Task Interface and Adapters:

Next, let’s define the Task interface, which represents a task on the Kanban board. We’ll also create adapters for Jira and Trello, implementing the TaskManagementAdapter interface. Here’s an example:

export interface Task {
  id: number;
  title: string;
  status

: string;
}

export interface TaskManagementAdapter {
  getTasks(): Task[];
}

export class JiraAdapter implements TaskManagementAdapter {
  getTasks(): Task[] {
    // Implement Jira-specific logic to fetch tasks
    // and map them to the Task interface
  }
}

export class TrelloAdapter implements TaskManagementAdapter {
  getTasks(): Task[] {
    // Implement Trello-specific logic to fetch tasks
    // and map them to the Task interface
  }
}

3. Implement the Adapters:

Now, it’s time to implement the JiraAdapter and TrelloAdapter. These adapters encapsulate the logic of interacting with the respective task management systems’ APIs and converting the data into the Task interface format. Here’s a simplified example:

export class JiraAdapter implements TaskManagementAdapter {
  getTasks(): Task[] {
    // Use Jira API to fetch tasks
    // Convert and map the fetched data to the Task interface format
    return jiraAPI.getTasks().map(task => ({
      id: task.id,
      title: task.name,
      status: task.status
    }));
  }
}

export class TrelloAdapter implements TaskManagementAdapter {
  getTasks(): Task[] {
    // Use Trello API to fetch tasks
    // Convert and map the fetched data to the Task interface format
    return trelloAPI.getTasks().map(task => ({
      id: task.id,
      title: task.title,
      status: task.status
    }));
  }
}

4. Wiring Everything Together:

Finally, we need to provide the appropriate adapter to the KanbanBoardComponent. In your Angular module, you can configure the dependency injection to provide the desired adapter. Here’s an example using the JiraAdapter:

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { KanbanBoardComponent } from './kanban-board/kanban-board.component';
import { TaskManagementSystemAdapter } from './adapters/task-management-system.adapter';
import { JiraAdapter } from './adapters/jira.adapter';
import { TrelloAdapter } from './adapters/trello.adapter';

@NgModule({
  declarations: [
    AppComponent,
    KanbanBoardComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [
    { provide: TaskManagementSystemAdapter, useClass: JiraAdapter }, // Using JiraAdapter
    { provide: TaskManagementSystemAdapter, useClass: TrelloAdapter } // Using TrelloAdapter
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Explanation

In the above code, both the JiraAdapter and the TrelloAdapter are provided as implementations for the TaskManagementSystemAdapter token. By doing this, Angular’s dependency injection will be able to inject the appropriate adapter based on the context.

Now, when the KanbanBoardComponent is instantiated, Angular will inject both the JiraAdapter and the TrelloAdapter as separate instances of the TaskManagementSystemAdapter. You can then use these adapters based on your specific requirements within the KanbanBoardComponent.

This approach allows you to integrate and work with multiple task management systems simultaneously within your K anban board application. You can handle different tasks and operations with each adapter , providing a comprehensive solution that caters to diverse needs.

// kanban-board.component.ts
import { Component, OnInit } from '@angular/core';
import { TaskManagementSystemAdapter } from '../adapters/task-management-system.adapter';

@Component({
  selector: 'app-kanban-board',
  templateUrl: './kanban-board.component.html',
  styleUrls: ['./kanban-board.component.css']
})
export class KanbanBoardComponent implements OnInit {
  tasks: string[] = [];

  constructor(
    private jiraAdapter: TaskManagementSystemAdapter,
    private trelloAdapter: TaskManagementSystemAdapter
  ) {}

  ngOnInit() {
    this.loadTasks();
  }

  loadTasks() {
    // Use the JiraAdapter to fetch tasks from Jira
    const jiraTasks = this.jiraAdapter.getTasks();
    this.tasks.push(...jiraTasks);

    // Use the TrelloAdapter to fetch tasks from Trello
    const trelloTasks = this.trelloAdapter.getTasks();
    this.tasks.push(...trelloTasks);
  }

  addTask(task: string) {
    // Use the JiraAdapter to create a new task in Jira
    this.jiraAdapter.createTask(task);

    // Use the TrelloAdapter to create a new task in Trello
    this.trelloAdapter.createTask(task);
  }

  removeTask(index: number) {
    this.tasks.splice(index, 1);
  }
}

Explanation

In the above code, the KanbanBoardComponent has two dependencies injected: jiraAdapter of type TaskManagementSystemAdapter and trelloAdapter of type TaskManagementSystemAdapter. These dependencies are provided by the AppModule , where we configured the dependency injection to use both the JiraAdapter and the TrelloAdapter.

The addTask method allows you to create a new task. Using the jiraAdapter and trelloAdapter , we can call the createTask method on each adapter to create the task in both Jira and Trello simultaneously.

The removeTask method removes a task from the tasks array when it is completed or deleted, as per your implementation.

By using both adapters in the KanbanBoardComponent , you can seamlessly integrate and work with multiple task management systems, such as Jira and Trello, within the same Kanban board application. This provides the flexibility to manage tasks across different platforms without writing separate code for each system.

Furthermore, the Adapter pattern promotes a modular and extensible architecture. We can extend our application to support additional task management systems simply by creating new adapters that adhere to the TaskManagementAdapter interface. This flexibility is especially beneficial in scenarios where we may need to integrate multiple external systems or switch between different providers over time.

Conclusion

By applying the Adapter pattern in our Angular application , we have successfully decoupled the Kanban board component from s pecific task management systems. The adapters act as intermediaries, enabling seamless integration with different APIs and data structures. This approach promotes code reusability, flexibility, and maintainability.

The Adapter pattern is a powerful tool in Angular development when dealing with disparate data sources. Whether you’re integrating with external APIs, databases, or other systems, the Adapter pattern provides an elegant solution to manage the complexities of data integration.

Start incorporating this pattern into your angular projects and experience the benefits firsthand. Happy coding!

Thanks for reading

👏 Please clap for the story and follow me 👉
📰 View more content
🔔 Follow me: LinkedIn| Twitter| Github

14 Tips for Enhancing Angular Performance

V.D — Fri, 19 May 2023 06:41:55 +0000

Practical Techniques to Boost Angular Application Performance

Introduction:

Angular is a powerful framework for building powerful web applications, and optimization is key to providing a great user experience. In this post, we’ll go over some practical tips to improve Angular performance. Each tip is accompanied by code examples to illustrate the implementation.

Lazy Loading Modules: Lazy loading helps reduce the initial load time by loading modules on-demand. Use the **loadChildren** property in the route configuration to specify which modules should be lazily loaded.

const routes: Routes = [
 { path: 'lazy', loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule) },
];

2. Ahead-of-Time (AOT) Compilation:

Enable AOT compilation to generate optimized and smaller bundles. AOT compilation reduces the bundle size and improves the application’s startup time.

3. Change Detection Strategy:

Optimize change detection by using OnPush strategy for components that don’t require frequent updates. This strategy reduces unnecessary checks and improves overall performance.

@Component({
 selector: 'app-example',
 templateUrl: './example.component.html',
 changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ExampleComponent { }

4. TrackBy Function in ngFor:

When using ngFor directive, provide a trackBy function to track item changes efficiently. This reduces the re-rendering of elements that haven’t changed.

<ul>
 <li *ngFor="let item of items; trackBy: trackByFn">{{ item }}</li>
</ul>

Typescript

trackByFn(index: number, item: any): any {
 return item.id; // Replace with a unique identifier for each item
}

5. Unsubscribe when not in use:

Manually unsubscribe from subscriptions to prevent memory leaks. Use **takeUntil** operator and a subject to manage subscriptions and unsubscribe when the component is destroyed.

private destroy$ = new Subject();
ngOnInit(): void {
 someObservable$
 .pipe(takeUntil(this.destroy$))
 .subscribe((data) => {
 // Handle the data
 });
}
ngOnDestroy(): void {
 this.destroy$.next();
 this.destroy$.complete();
}

6. ChangeDetectionRef.markForCheck():

Use **markForCheck** () method from **ChangeDetectionRef** to selectively trigger change detection only when necessary. This can improve performance in specific scenarios.

constructor(private cdr: ChangeDetectorRef) { }
updateData(): void {
 // Update data here
 this.cdr.markForCheck();
}

7. NgZone Optimization:

Leverage the NgZone service to optimize the execution of code that doesn’t require Angular’s change detection. Use the **runOutsideAngular** method to execute code outside Angular’s zone.

constructor(private ngZone: NgZone) { }
performHeavyTask(): void {
 this.ngZone.runOutsideAngular(() => {
 // Perform heavy task here
 });
}

8. Avoid Excessive DOM Manipulation:

Minimize direct DOM manipulation and use Angular’s data binding and directives instead. Excessive DOM manipulation can impact performance negatively.

9. Use Angular Pipes Wisely:

Angular pipes can impact performance if used improperly. While pipes offer great flexibility and convenience, it’s important to use them judiciously to ensure optimal performance.

Angular provides two types of pipes: pure and impure. Pure pipes are memoized, meaning they only recalculate when the input value changes. This reduces unnecessary computations and improves performance. Always strive to use pure pipes whenever possible.

Avoid performing heavy computations within pipes, especially if the computation is not necessary for every change detection cycle. Complex calculations can introduce performance bottlenecks, so consider moving such computations to the component class or leveraging caching techniques to optimize performance.

@Pipe({
  name: 'instantPipe',
  pure: true
})
export class InstantPipe implements PipeTransform {
  transform(value: any): any {
    // Transformation logic here
  }
}

10. Debounce Input Events:

Use the debounceTime operator to reduce the frequency of input event handling. This prevents excessive updates and reduces unnecessary processing.

searchInput.valueChanges
 .pipe(debounceTime(300))
 .subscribe((value) => {
 // Handle the search value
 });

11. Optimize HTTP Requests:

Reduce the number of HTTP requests by combining multiple requests or using caching strategies. Leverage features like HTTP interceptors to handle common functionality across requests.

Example:

// Combine multiple HTTP requests
forkJoin([http.get('data1'), http.get('data2')]).subscribe(([data1, data2]) => {
  // Handle the responses
});

// Implement caching using an interceptor
@Injectable()
export class CachingInterceptor implements HttpInterceptor {
  // ...
}

12. Use Angular Reactive Forms:

Reactive Forms offer better performance than template-driven forms, especially when dealing with complex form scenarios. They provide more control and allow for fine-grained validation and data handling.

import { FormGroup, FormControl, Validators } from '@angular/forms';

const form = new FormGroup({
  name: new FormControl('', Validators.required),
  // ...
});

13. Angular Universal for Server-Side Rendering (SSR):

Implement Angular Universal for server-side rendering. SSR improves initial load times, enables search engine optimization, and provides a better user experience, especially for low-bandwidth or high-latency environments.

14. Use Angular Performance Tools:

Angular offers various performance tools, such as Angular DevTools and Augury , which provide insights into performance bottlenecks and help identify areas for optimization.

Conclusion :

By implementing these performance optimization tips, you can significantly enhance the speed and responsiveness of your Angular applications. Remember to analyze and profile your application to identify specific areas for improvement and measure the impact of these optimizations. Building performant Angular applications not only improves the user experience but also ensures scalability and efficiency.

Start incorporating these into your angular projects and experience the benefits firsthand. Happy coding!

Thanks for reading

👏 Please clap for the story and follow me 👉
📰 View more content
🔔 Follow me: LinkedIn| Twitter| Github

React: Abstract Design Pattern-DRY & Single Shared Responsibility(Part-2)

V.D — Sun, 14 May 2023 05:54:34 +0000

React: Abstract Design Pattern-DRY & Single Shared Responsibility(Part-2)

Understanding the Abstract Method pattern in React and exploring how it can be implemented in your applications.

This is in continuation with the last article on React — Abstract Design pattern. This article is basically on the potential areas where performance issues could arise.Link to last article

In continuation with the last post code, there are a few potential areas where performance issues could arise,

Rendering large datasets : If the transactions array contains a large number of items, rendering them all at once can impact performance. To mitigate this, consider implementing pagination or virtualization techniques to load and render only the visible portion of the dataset.
Dynamic function creation : The getFormatAmount function dynamically creates the formatAmount function based on the transaction type. While this approach provides flexibility, it can impact performance if the function creation process becomes complex or computationally expensive. Ensure that the function creation logic remains simple and efficient to avoid any performance bottlenecks.
Complex transaction processing : If the processing or manipulation of transaction data within the TransactionItem component becomes computationally intensive, it may lead to performance issues. Analyze the operations performed on each transaction and optimize them as necessary. Consider leveraging memoization or caching techniques to avoid unnecessary calculations or redundant operations.
Inefficient rendering updates: If there are frequent updates to the transactions array or individual transactions, it can trigger unnecessary re-renders. To optimize this, ensure that the transactions array and its items are immutably updated to prevent unintended re-renders. Additionally, consider implementing more granular component updates using React's shouldComponentUpdate or React.memo to prevent unnecessary rendering of components that have not changed.

It’s important to profile and analyze the performance of your application using tools like React DevTools, Chrome DevTools, or other performance monitoring tools. By identifying and addressing specific performance bottlenecks, you can optimize the code and improve the overall performance of your financial app.

To avoid potential performance issues in the provided code, here are some suggestions:

Implement pagination or virtualization: If the transactions array contains a large number of items, consider implementing pagination or virtualization techniques. Instead of rendering all transactions at once, load and render only a subset of transactions based on the current viewport or user interaction. This approach improves initial load time and reduces rendering overhead.
Optimize the dynamic function creation : The getFormatAmount function dynamically creates the formatAmount function based on the transaction type. To optimize performance, ensure that the function creation logic remains lightweight and efficient. Avoid complex computations or heavy operations within the function creation process. If possible, precompute or memoize the format functions to avoid repetitive calculations.
Streamline transaction processing: Analyze the operations performed on each transaction within the TransactionItem component. Look for opportunities to optimize data processing and manipulation. Use efficient algorithms and data structures to minimize computational overhead. Consider memoization techniques to cache expensive calculations or avoid redundant operations.
Use immutability and granular updates : Ensure that the transactions array and its items are updated in an immutable manner. Avoid mutating the original array directly, as it can lead to unnecessary re-renders. Instead, create new arrays or objects when making updates. Additionally, utilize React's shouldComponentUpdate lifecycle method or the React.memo higher-order component to prevent unnecessary re-renders of components that have not changed.
Profile and optimize : Utilize performance profiling tools such as React DevTools or Chrome DevTools to identify performance bottlenecks. Measure the rendering times, identify components with excessive re-renders, and analyze the performance of critical code sections. Optimize the identified areas by refactoring, simplifying computations, or implementing caching strategies.

By implementing these suggestions, you can improve the performance of your application, ensuring efficient rendering and minimizing unnecessary computations. Regular performance testing and profiling will help you identify specific areas for optimization and ensure your financial app performs optimally.

Here’s an updated version of the code with optimizations to address the performance concerns:

import React, { useMemo } from 'react';
const FinancialApp = ({ transactions }) => {
  // Pagination or virtualization logic here
  const getFormatAmount = useMemo(() => {
    const formatAmount = (amount) => `$${amount}`;
    return (type) => {
      switch (type) {
        case 'expense':
          return (amount) => `- $${amount}`;
        case 'income':
          return (amount) => `+ $${amount}`;
        case 'transfer':
          return (amount) => `$${amount}`;
        default:
          return formatAmount;
      }
    };
  }, []);
  return (
    <div>
      {/* Rendering logic with pagination or virtualization */}
      {visibleTransactions.map((transaction, index) => (
        <div key={transaction.id}>
          <TransactionItem transaction={transaction} formatAmount={getFormatAmount(transaction.type)} />
        </div>
      ))}
    </div>
  );
};
const TransactionItem = ({ transaction, formatAmount }) => {
  // Transaction item rendering logic here
  return (
    <div>
      <span>{transaction.description}</span>
      <span>{formatAmount(transaction.amount)}</span>
    </div>
  );
};

In the updated code:

The getFormatAmount function is memoized using the useMemo hook. This ensures that the function is only created once and doesn't get re-computed on subsequent renders unless the dependencies change. It improves performance by avoiding unnecessary function re-creation.
The rendering logic includes placeholders for pagination or virtualization techniques. Based on your specific requirements, you can implement the necessary logic to render a subset of transactions based on the current viewport or user interactions. This approach improves performance by reducing the number of rendered items.
The TransactionItem component receives the formatAmount function as a prop. This allows the component to access the appropriate format function without dynamically creating it on each render. It reduces redundancy and optimizes rendering by avoiding unnecessary function calls.

Remember to adapt the code to your specific needs, including the implementation of pagination or virtualization logic. These optimizations provide a starting point for improving performance, but the exact implementation will depend on your application’s requirements and complexity.

Here are some additional customization options for the Pagination component, each with its own code example:

Custom Styling:

const Pagination = ({ currentPage, totalPages, onPageChange }) => {
  const pages = [...Array(totalPages).keys()].map((page) => page + 1);

  return (
    <div className="pagination-container">
      {pages.map((page) => (
        <button
          key={page}
          onClick={() => onPageChange(page)}
          className={currentPage === page ? 'active' : ''}
        >
          {page}
        </button>
      ))}
    </div>
  );
};

In this example, we add a custom CSS class 'pagination-container' to the parent div element. You can then define the styling for the pagination component using CSS to match your desired look and feel.

2. Previous and Next Buttons:

const Pagination = ({ currentPage, totalPages, onPageChange }) => {
  const pages = [...Array(totalPages).keys()].map((page) => page + 1);

  return (
    <div>
      <button onClick={() => onPageChange(currentPage - 1)} disabled={currentPage === 1}>
        Previous
      </button>

      {pages.map((page) => (
        <button
          key={page}
          onClick={() => onPageChange(page)}
          className={currentPage === page ? 'active' : ''}
        >
          {page}
        </button>
      ))}

      <button onClick={() => onPageChange(currentPage + 1)} disabled={currentPage === totalPages}>
        Next
      </button>
    </div>
  );
};

In this example, we add previous and next buttons to allow the user to navigate to the previous and next pages, respectively. The buttons are disabled when the user is on the first or last page to prevent unnecessary navigation.

3. Compact View:

const Pagination = ({ currentPage, totalPages, onPageChange }) => {
  const pages = [...Array(totalPages).keys()].map((page) => page + 1);

  return (
    <div>
      {pages.map((page) => (
        <button
          key={page}
          onClick={() => onPageChange(page)}
          className={currentPage === page ? 'active' : ''}
        >
          {page}
        </button>
      ))}

      <span>Page {currentPage} of {totalPages}</span>
    </div>
  );
};

In this example, we remove the previous and next buttons and instead display the current page number and total number of pages. This provides a more compact view of the pagination component.

4. Custom Labels:

const Pagination = ({ currentPage, totalPages, onPageChange }) => {
  const pages = [...Array(totalPages).keys()].map((page) => page + 1);

  return (
    <div>
      {pages.map((page) => (
        <button
          key={page}
          onClick={() => onPageChange(page)}
          className={currentPage === page ? 'active' : ''}
        >
          {page}
        </button>
      ))}

      <button onClick={() => onPageChange(currentPage + 1)} disabled={currentPage === totalPages}>
        Next Page
      </button>
    </div>
  );
};

In this example, we customize the label of the next button to display “Next Page” instead of just “Next”. This provides a more descriptive and user-friendly label for navigation.

5. Page Size Selection:

const Pagination = ({ currentPage, totalPages, onPageChange, pageSizeOptions, pageSize, onPageSizeChange }) => {
  const pages = [...Array(totalPages).keys()].map((page) => page + 1);

  return (
    <div>
      {pages.map((page) => (
        <button
          key={page}
          onClick={() => onPageChange(page)}
          className={currentPage === page ? 'active' : ''}
        >
          {page}
        </button>
      ))}

      <select value={pageSize} onChange={(e) => onPageSizeChange(e.target.value)}>
        {pageSizeOptions.map((option) => (
          <option key={option} value={option}>
            {option}
          </option>
        ))}
      </select>
    </div>
  );
};

In this example, we introduce a page size selection feature. It includes a dropdown select element where the user can choose the number of items to display per page. The pageSizeOptions array contains the available page size options, and the pageSize state represents the currently selected page size. The onPageSizeChange function is called when the user selects a new page size.

6. Custom Page Range:

const Pagination = ({ currentPage, totalPages, onPageChange, pageRange }) => {
  const startPage = currentPage - Math.floor(pageRange / 2);
  const endPage = currentPage + Math.floor(pageRange / 2);
  const pages = [...Array(totalPages).keys()].map((page) => page + 1).slice(startPage, endPage + 1);

  return (
    <div>
      {pages.map((page) => (
        <button
          key={page}
          onClick={() => onPageChange(page)}
          className={currentPage === page ? 'active' : ''}
        >
          {page}
        </button>
      ))}
    </div>
  );
};

In this example, we introduce a custom page range feature. The pageRange represents the number of consecutive page buttons to display around the current page. The startPage and endPage variables calculate the range of pages to be shown based on the current page and the page range. The pages array is then sliced to obtain the desired range of page numbers.

Feel free to mix and match these customization options or come up with your own variations based on your application’s specific needs. The goal is to tailor the Pagination component to fit your desired functionality and design.

By leveraging the abstract method pattern in React, we can build a robust and modular financial app that effectively manages various types of transactions and ensures clean, reusable code.

Conclusion:

By implementing the Abstract Method pattern in React using a functional approach, we can achieve code reuse, remove redundancy, and avoid code smells. The abstract component provides a common structure and behavior, while child components extend it to define specific rendering and logic. This approach promotes a cleaner and more maintainable codebase, making it easier to scale and modify our applications.

Remember, the Abstract Method pattern is just one of many patterns that can be leveraged in React development. It’s important to evaluate its suitability based on the specific needs and complexity of your application. By applying design patterns thoughtfully, we can enhance code quality and build.

I Hope you liked it, By leveraging this pattern, you can build applications that are easier to manage and evolve over time. Understanding and applying design patterns in React empowers developers to write clean, efficient, and robust code.

Start incorporating the Abstract Design pattern into your React projects and experience the benefits firsthand. Happy coding!

Thanks for reading

👏 Please clap for the story and follow me 👉
📰 View more content
🔔 Follow me: LinkedIn| Twitter| Github

React: Abstract Design Pattern-DRY & Single Shared Responsibility(Part-1)

V.D — Sun, 14 May 2023 05:53:19 +0000

Understanding the Abstract Method pattern in React and exploring how it can be implemented in your applications.

Today, I am going to showcase ADP(Abstract design pattern) inside react, and how can we achieve it. If you want see this happening in action inside Angular, please read this blog Angular-ADP.

Before jumping into react, we need to know that what is an Abstract design pattern and whether it is there in react too. So, let me make it clear that, in any language or framework we are using in today’s world, to make your code organized and reliable to be bug/error free, you should always adopt a design pattern. A design pattern is universal, you can implement in any language as it states only the way you are designing your application.

It is a misconception that a design pattern is used for increasing the performance only. Its primary goal is to promote code reuse and remove redundancy by defining a common structure and behavior.

So, let’s get started

If you don't know what is an ADP(Abstract Design Pattern), please read this blog Angular-ADP.

In React, the Abstract Method pattern provides a way to define a common structure for components while allowing specific implementations to be defined in child components. This pattern promotes code reuse, reduces redundancy, and helps maintain a clean and scalable codebase. In this article, we will explore the Abstract Method pattern in React and demonstrate its implementation using a functional approach. We will showcase detailed examples and discuss best practices to remove redundancy and avoid code smells.

Understanding the Abstract Method Pattern:

The Abstract Method pattern is based on the concept of abstract classes and methods in object-oriented programming. While React does not directly support abstract classes, we can achieve a similar effect by leveraging higher-order components (HOCs) or custom hooks.

Example Scenario:

Consider a scenario in which you want to create a notification system in your application that supports different types of notifications, such as success, error, and warning. We want to define a common structure for these notifications, but allow specific rendering and behavior for each type

Implementation steps

Defines an AbstractNotificationcomponent that describes the general structure and behavior of notifications. These components can contain common user interface elements and functions common to all types of notifications.
Create child components, such as SuccessNotification, ErrorNotification, and WarningNotification, that extend the AbstractNotification component. These child components will provide the specific rendering and behavior for each notification type.
Implement abstract methods in AbstractNotification component. This method can serve as a placeholder to override certain logic in child components. For example, you could define an abstract method called renderDataContent for child components to implement to render content specific to each notification type.
Utilize the abstract method within the AbstractNotification component's render method. This allows child components to inject their specific content while maintaining the common structure provided by the abstract component.

// AbstractNotification.js
import React from 'react';

const AbstractNotification = ({ title, message }) => {
  const renderDataContent= () => {
    throw new Error('Child component must override the renderDataContent method.');
  };

  return (
    <div className="notification">
      <h2>{title}</h2>
      <div className="content">{renderDataContent()}</div>
    </div>
  );
};

------------------------------------------------------------------------------

export default AbstractNotification;

// SuccessNotification.js
import React from 'react';
import AbstractNotification from './AbstractNotification';

const SuccessNotification = ({ title, message }) => {
  const renderDataContent= () => {
    return <p className="success-message">{message}</p>;
  };

  return <AbstractNotification title={title} message={message} renderDataContent={renderDataContent} />;
};

export default SuccessNotification;
------------------------------------------------------------------------------

// App.js
import React from 'react';
import SuccessNotification from './SuccessNotification';

const App = () => {
  return (
    <div className="app">
      <SuccessNotification title="Success!" message="Operation completed successfully." />
    </div>
  );
};

export default App;

In the above code, we have the AbstractNotification component that serves as the abstract component. It receives title and message props and defines an abstract method called renderDataContent. The renderDataContentmethod throws an error, indicating that child components must override it.

In the SuccessNotification component, we define the renderDataContentmethod specific to the success notification. Here, we return a p tag element with a CSS class for styling.

In the App component, we import and render the SuccessNotification component. We pass the title and message props specific to the success notification.

By following this pattern, you can easily create additional child components, such as ErrorNotification or WarningNotification, that extend the abstract component and provide their own implementation of the renderDataContentmethod.

This approach helps remove redundancy and code smells by centralizing common functionality in the abstract component while allowing child components to focus on their specific rendering and behavior.

Remember to apply appropriate error handling and validation in the abstract component to ensure that child components correctly implement the required abstract methods.

This one is the easy one to demo the React ADP pattern.Lets see other more realistic demo

Let’s continue to see it for a finance app that focuses on managing personal finances using the abstract method pattern in React.

First, let’s create the abstract component for a financial transaction:

// AbstractTransaction.js
import React from 'react';

const AbstractTransaction = ({ transaction }) => {
  const formatAmount = () => {
    throw new Error('Child component must override the formatAmount method.');
  };

  return (
    <div className="transaction">
      <h3>{transaction.description}</h3>
      <p>Amount: {formatAmount()}</p>
      <p>Date: {transaction.date}</p>
    </div>
  );
};

export default AbstractTransaction;

In the above code, we have the AbstractTransaction component as our abstract component. It receives a transaction prop and defines an abstract method called formatAmount. The formatAmount method throws an error, indicating that child components must override it.

Now, let’s create a child component that extends the abstract component for an expense transaction:

// ExpenseTransaction.js
import React from 'react';
import AbstractTransaction from './AbstractTransaction';

const ExpenseTransaction = ({ transaction }) => {
  const formatAmount = () => {
    // Display the expense amount with a negative sign
    return `- $${transaction.amount}`;
  };

  return <AbstractTransaction transaction={transaction} formatAmount={formatAmount} />;
};

export default ExpenseTransaction;

In the ExpenseTransaction component, we provide the implementation for the formatAmount method specific to an expense transaction. Here, we display the expense amount with a negative sign.

Next, let’s create a child component that extends the abstract component for an income transaction:

// IncomeTransaction.js
import React from 'react';
import AbstractTransaction from './AbstractTransaction';

const IncomeTransaction = ({ transaction }) => {
  const formatAmount = () => {
    // Display the income amount with a positive sign
    return `+ $${transaction.amount}`;
  };

  return <AbstractTransaction transaction={transaction} formatAmount={formatAmount} />;
};

export default IncomeTransaction;

In the IncomeTransaction component, we provide the implementation for the formatAmount method specific to an income transaction. Here, we display the income amount with a positive sign.

Now, let’s create a child component that extends the abstract component for a transfer transaction:

// TransferTransaction.js
import React from 'react';
import AbstractTransaction from './AbstractTransaction';

const TransferTransaction = ({ transaction }) => {
  const formatAmount = () => {
    // Display the transfer amount without any sign
    return `$${transaction.amount}`;
  };

  return <AbstractTransaction transaction={transaction} formatAmount={formatAmount} />;
};

export default TransferTransaction;

In the TransferTransaction component, we provide the implementation for the formatAmount method specific to a transfer transaction. Here, we display the transfer amount without any sign.

Now, let’s use these components in our financial app:

// FinancialApp.js
// FinancialApp.js
import React from 'react';
import AbstractTransaction from './AbstractTransaction';
import ExpenseTransaction from './ExpenseTransaction';
import IncomeTransaction from './IncomeTransaction';
import TransferTransaction from './TransferTransaction';

const FinancialApp = () => {
  const transactions = [
    { description: 'Groceries', amount: 50, date: '2023-05-01' },
    { description: 'Salary', amount: 2000, date: '2023-05-15' },
    { description: 'Transfer to Savings', amount: 500, date: '2023-05-10' },
  ];

  return (
    <div className="financial-app">
      <h2>Transactions</h2>
      {transactions.map((transaction, index) => (
        <div key={index}>
          <ExpenseTransaction transaction={transaction} />
          <IncomeTransaction transaction={transaction} />
          <TransferTransaction transaction={transaction} />
        </div>
      ))}
    </div>
  );
};

export default FinancialApp;

In the updated FinancialApp component, we have added a transfer transaction to the transactions array. We now render the TransferTransaction component alongside the ExpenseTransaction and IncomeTransaction components for each transaction.

By extending the abstract component and overriding the formatAmount method, we can handle different types of financial transactions with their specific formatting requirements. This approach helps remove code redundancy and promotes code reuse and maintainability.

In a real-world financial app , you can further extend the child components to include additional functionality or customize the rendering based on specific transaction types. The abstract method pattern provides a flexible and scalable approach to handle diverse financial transactions while keeping the core logic centralized in the abstract component.

This pattern helps remove redundant code and promotes code reuse and maintainability in our financial app.

To improve performance in rendering the transactions in our financial app, we can make use of React’s memoization technique and optimize the child components.

Let’s modify the child components (ExpenseTransaction, IncomeTransaction, and TransferTransaction) to leverage React's React.memo to memoize the components and prevent unnecessary re-renders:

// ExpenseTransaction.js
import React from 'react';
import AbstractTransaction from './AbstractTransaction';

const ExpenseTransaction = React.memo(({ transaction }) => {
  const formatAmount = () => {
    // Display the expense amount with a negative sign
    return `- $${transaction.amount}`;
  };

  return <AbstractTransaction transaction={transaction} formatAmount={formatAmount} />;
});

export default ExpenseTransaction;

Similarly, update the IncomeTransaction and TransferTransaction components with React.memo:

// IncomeTransaction.js
import React from 'react';
import AbstractTransaction from './AbstractTransaction';

const IncomeTransaction = React.memo(({ transaction }) => {
  const formatAmount = () => {
    // Display the income amount with a positive sign
    return `+ $${transaction.amount}`;
  };

  return <AbstractTransaction transaction={transaction} formatAmount={formatAmount} />;
});

export default IncomeTransaction;

-------------------------------------------------------------------------

// TransferTransaction.js
import React from 'react';
import AbstractTransaction from './AbstractTransaction';

const TransferTransaction = React.memo(({ transaction }) => {
  const formatAmount = () => {
    // Display the transfer amount without any sign
    return `$${transaction.amount}`;
  };

  return <AbstractTransaction transaction={transaction} formatAmount={formatAmount} />;
});

export default TransferTransaction;

By memoizing the child components using React.memo , we ensure that the components are only re-rendered if their props (transaction in this case) have changed. This optimization can significantly improve the performance of the financial app, especially when dealing with a large number of transactions.

Additionally, you can further optimize the financial app by implementing a key prop when rendering the child components. The key prop should be a unique identifier associated with each transaction to help React efficiently update and re-render the components when necessary.

{transactions.map((transaction, index) => (
  <div key={transaction.id}>
    <ExpenseTransaction transaction={transaction} />
    <IncomeTransaction transaction={transaction} />
    <TransferTransaction transaction={transaction} />
  </div>
))}

By providing a unique key for each transaction, React can perform more efficient updates and prevent unnecessary re-renders of the child components.

These performance optimizations help ensure that the financial app runs smoothly and efficiently, even when dealing with a large number of transactions . By memoizing the components and providing proper keys, we can minimize unnecessary re-renders and improve the overall performance of the app.

Let’s further improve the code to make it more generic and performant.

We’ll refactor the child components (ExpenseTransaction, IncomeTransaction, and TransferTransaction) to eliminate code redundancy and improve performance by avoiding unnecessary re-renders.

First, let’s create a single optimized component called TransactionItem that handles all transaction types:

// TransactionItem.js
import React from 'react';
import AbstractTransaction from './AbstractTransaction';

const TransactionItem = React.memo(({ transaction, formatAmount }) => {
  return <AbstractTransaction transaction={transaction} formatAmount={formatAmount} />;
});

export default TransactionItem;

The TransactionItem component accepts the transaction object and the formatAmount function as props, which will be specific to each transaction type.

Next, we can create a higher-order component (HOC) called withTransactionType that takes in a transaction type and returns a memoized component with the appropriate formatAmount function:

// withTransactionType.js
import React from 'react';

const withTransactionType = (transactionType, formatAmount) => {
  const TransactionComponent = React.memo(({ transaction }) => {
    return <TransactionItem transaction={transaction} formatAmount={formatAmount} />;
  });

  return TransactionComponent;
};

export default withTransactionType;

Now, we can create specific transaction components using the withTransactionType HOC. For example, let's create the ExpenseTransaction component:

// ExpenseTransaction.js
import React from 'react';
import withTransactionType from './withTransactionType';

const formatExpenseAmount = (amount) => `- $${amount}`;

const ExpenseTransaction = withTransactionType('expense', formatExpenseAmount);

export default ExpenseTransaction;

Similarly, create the IncomeTransaction and TransferTransaction components:

// IncomeTransaction.js
import React from 'react';
import withTransactionType from './withTransactionType';

const formatIncomeAmount = (amount) => `+ $${amount}`;

const IncomeTransaction = withTransactionType('income', formatIncomeAmount);

export default IncomeTransaction;

----------------------------------------------------------------------

// TransferTransaction.js
import React from 'react';
import withTransactionType from './withTransactionType';

const formatTransferAmount = (amount) => `$${amount}`;

const TransferTransaction = withTransactionType('transfer', formatTransferAmount);

export default TransferTransaction;

Now, we can use these components in our financial app:

// FinancialApp.js
import React from 'react';
import TransactionItem from './TransactionItem';

const FinancialApp = () => {
  const transactions = [
    { type: 'expense', description: 'Groceries', amount: 50, date: '2023-05-01' },
    { type: 'income', description: 'Salary', amount: 2000, date: '2023-05-15' },
    { type: 'transfer', description: 'Transfer to Savings', amount: 500, date: '2023-05-10' },
  ];

  return (
    <div className="financial-app">
      <h2>Transactions</h2>
      {transactions.map((transaction, index) => {
        const { type, ...rest } = transaction;
        return (
          <div key={index}>
            <TransactionItem transaction={rest} formatAmount={getFormatAmount(type)} />
          </div>
        );
      })}
    </div>
  );
};

const getFormatAmount = (type) => {
  // Define the formatAmount function based on transaction type
  switch (type) {
    case 'expense':
      return (amount) => `- $${amount}`;
    case 'income':
      return (amount) => `+ $${amount}`;
    case 'transfer':
      return (amount) => `$${amount}`;
    default:
      return null;
  }
};

export default FinancialApp;

In the above code, we define the getFormatAmount function, which takes in the transaction type and returns the appropriate formatAmount function based on the type.

Now, when rendering the transactions, we pass the transaction data (rest) and the corresponding formatAmount function to the TransactionItem component.

By organizing the code in this manner, we achieve a more generic and performant solution. The TransactionItem component handles the common logic for rendering transactions, while the specific formatAmount functions are provided dynamically based on the transaction type.

This approach eliminates code redundancy , reduces the number of components, and improves performance by leveraging memoization and avoiding unnecessary re-renders.

Additionally, by using a key prop when rendering the TransactionItem component, we enable efficient updates and re-renders:

<div key={index}>
  <TransactionItem transaction={rest} formatAmount={getFormatAmount(type)} />
</div>

Providing a unique key for each transaction helps React accurately track and update only the necessary components, further optimizing performance.

With these improvements, the financial app can efficiently manage and render various types of transactions while maintaining code cleanliness, reusability, and performance.

It’s important to profile and analyze the performance of your application using tools like React DevTools, Chrome DevTools, or other performance monitoring tools. By identifying and addressing specific performance bottlenecks, you can optimize the code and improve the overall performance of your financial app.

In the provided code, there are a few potential areas where performance issues could arise

let see what are they and how to avoid it in the next upcoming article. Here is the link https://vivekdogra02.medium.com/react-abstract-design-pattern-dry-single-shared-responsibility-9fbef42a6e56

So, stay tuned guys.

Hope you liked it,

Start incorporating the Abstract Design pattern into your React projects and experience the benefits firsthand. Happy coding!

Thanks for reading

👏 Please clap for the story and follow me 👉
📰 View more content
🔔 Follow me: LinkedIn| Twitter| Github

The Power of Web Components in Frontend Development with Angular

V.D — Sat, 13 May 2023 03:21:58 +0000

Introduction:

In today’s fast-paced web development landscape, creating reusable and modular UI components is crucial for building scalable and maintainable applications. One technology that has gained significant popularity in achieving this goal is Web Components. In this article, we will explore the power of Web Components in frontend development using Angular. We will dive into the key concepts of Web Components, demonstrate their usage within an Angular application, and provide code examples to showcase their benefits.

Understanding Web Components
Benefits of Web Components in Angular
Creating a Web Component in Angular
Using Web Components in Angular Applications
Styling Web Components in Angular
Communication between Web Components and Angular
Lifecycle Hooks and Events in Web Components
Testing Web Components in Angular
Performance Considerations
Conclusion

1. Understanding Web Components

Web Components are a set of web platform APIs that allow developers to create reusable and encapsulated UI components. They consist of three main technologies: Custom Elements, Shadow DOM, and HTML Templates.

Custom Elements enable the creation of new HTML tags with custom behaviors,

Shadow DOM provides encapsulation and scoping of styles and markup.

HTML Templates allow developers to define reusable markup structures that can be cloned and inserted into the DOM.

2. Benefits of Web Components in Angular

Integrating Web Components into Angular applications brings several benefits.

Firstly, Web Components promote reusability by allowing developers to create self-contained and independent UI components. These components can be easily shared and used across different Angular projects.

Secondly, Web Components enable better collaboration between frontend and backend teams, as they provide a clear separation of concerns. Frontend developers can focus on building UI components, while backend developers can provide the necessary data and APIs.

Lastly, Web Components are framework-agnostic, meaning they can be used with Angular or any other frontend framework.

3. Creating a Web Component in Angular

To create a Web Component in Angular, we can leverage the Angular Elements package. Angular Elements allows us to package an Angular component as a Web Component, which can be used in any HTML page or framework. We define the component using the @Component() decorator, specifying the necessary properties and methods.

We then use the createCustomElement() function from the @angular/elements package to convert the Angular component into a Web Component.

import { Component, Input, OnInit } from '@angular/core';
import { createCustomElement } from '@angular/elements';

@Component({
  selector: 'app-custom-component',
  template: `
    <div>
      <h2>{{ title }}</h2>
      <p>{{ content }}</p>
    </div>
  `,
})
export class CustomComponent implements OnInit {
  @Input() title: string;
  @Input() content: string;

  ngOnInit() {
    // Component initialization logic
  }
}

const customElement = createCustomElement(CustomComponent, { injector: this.injector });
customElements.define('app-custom-component', customElement);

4. Using Web Components in Angular Applications

Once the Web Component is created, it can be used in Angular applications like any other HTML element. We can include the Web Component in an Angular template by referencing the custom element tag. We can pass data to the Web Component using attributes or properties.

<app-custom-component title="Hello" content="Welcome to the Web Component"></app-custom-component>

5. Styling Web Components in Angular

Styling Web Components in Angular is similar to styling regular Angular components. We can use CSS styles within the component’s template or define them in an external stylesheet. The styles defined within the component are scoped to the component, ensuring that they do not affect other components or styles on the page.

Angular’s component-based architecture allows for modular and encapsulated styling, enhancing the reusability of Web Components.

@Component({
  selector: 'app-custom-component',
  template: `
    <div class="custom-component">
      <h2>{{ title }}</h2>
      <p>{{ content }}</p>
    </div>
  `,
  styleUrls: ['./custom-component.component.css']
})
export class CustomComponent implements OnInit {
  @Input() title: string;
  @Input() content: string;

  ngOnInit() {
    // Component initialization logic
  }
}

6. Communication between Web Components and Angular

Web Components can communicate with the surrounding Angular application through attributes, properties, events, and methods. Attributes and properties allow for data passing from the Angular application to the Web Component, while events enable the Web Component to notify the Angular application of certain actions or state changes. Methods provide an interface for the Angular application to interact with the behavior of the Web Component.

@Component({
  selector: 'app-parent-component',
  template: `
    <app-custom-component [title]="componentTitle" (customEvent)="handleCustomEvent($event)"></app-custom-component>
  `
})
export class ParentComponent {
  componentTitle = 'Hello Web Component';

  handleCustomEvent(event: CustomEvent) {
    // Handle custom event emitted by the Web Component
  }
}

export class CustomComponent {
  @Input() title: string;
  @Output() customEvent = new EventEmitter<string>();

  handleClick() {
    // Emit a custom event
    this.customEvent.emit('Custom event emitted!');
  }
}

7. Lifecycle Hooks and Events in Web Components

Web Components in Angular can leverage Angular’s lifecycle hooks, such as ngOnInit, ngOnChanges, and ngOnDestroy. These hooks allow for additional initialization, state updates, and cleanup operations within the Web Component. Additionally, Web Components can define and emit custom events to communicate with the outside world.

export class CustomComponent implements OnInit, OnChanges, OnDestroy {
  // ...

  ngOnInit() {
    // Perform initialization logic
  }

  ngOnChanges(changes: SimpleChanges) {
    // React to input property changes
  }

  ngOnDestroy() {
    // Cleanup operations
  }

  handleClick() {
    // Emit a custom event
    this.dispatchEvent(new CustomEvent('customEvent', { detail: 'Custom event emitted!' }));
  }
}

8. Testing Web Components in Angular

Angular provides a rich testing environment for Web Components. We can write unit tests using tools like Jasmine and Karma to verify the behavior of the Web Component. Additionally, Angular’s testing utilities allow for integration testing, where we can test the interaction between the Web Component and the Angular application.

describe('CustomComponent', () => {
  let component: CustomComponent;
  let fixture: ComponentFixture<CustomComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [CustomComponent]
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(CustomComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should display the title and content', () => {
    component.title = 'Test Title';
    component.content = 'Test Content';
    fixture.detectChanges();
    const element = fixture.nativeElement as HTMLElement;
    expect(element.querySelector('h2').textContent).toBe('Test Title');
    expect(element.querySelector('p').textContent).toBe('Test Content');
  });
});

9. Performance Considerations

While Web Components offer powerful features for frontend development, it’s important to consider their impact on performance. Here are some considerations to keep in mind:

Minimize the Shadow DOM: The Shadow DOM can introduce a performance overhead, especially when it contains complex DOM structures. To optimize performance, strive to keep the Shadow DOM tree as minimal and shallow as possible.
Efficient Data Binding: Angular provides powerful data binding capabilities. However, excessive data binding can lead to performance degradation. Be mindful of the number of data bindings within your Web Components and consider using one-time or unidirectional data binding where appropriate.
Lazy Loading : If your application utilizes a large number of Web Components, consider implementing lazy loading techniques. Load only the necessary components initially and dynamically load additional components as needed. This can significantly improve the initial loading time and resource consumption.
Code Optimization: Ensure that your Web Components are well-optimized by following best practices for code structure, size, and performance. Minify and bundle your component code to reduce file sizes and leverage caching techniques for faster subsequent loads.
Browser Compatibility: While Web Components are supported in most modern browsers, it’s essential to consider browser compatibility, especially for older versions. Use feature detection or polyfills to ensure consistent behavior across different browsers.
Performance Testing: Regularly conduct performance tests to identify bottlenecks and optimize the rendering and execution of your Web Components. Measure metrics such as load time, rendering time, and CPU usage to assess the impact of your components on overall application performance.

10. Conclusion

Web Components bring immense power and flexibility to frontend development, enabling the creation of reusable and encapsulated UI components. In this article, we explored the integration of Web Components within Angular applications, leveraging Angular’s features and tools.

We learned how to create Web Components using Angular Elements , style them using scoped CSS , and establish communication between Web Components and Angular using attributes, properties, events, and methods. Additionally, we discussed the importance of testing and performance considerations when working with Web Components.

By incorporating Web Components into your Angular projects, you can unlock the benefits of reusability, maintainability, and collaboration. However, it’s crucial to balance the usage of Web Components with performance optimizations and best practices to ensure a smooth and efficient user experience.

Remember to continuously update your knowledge and stay up-to-date with the latest advancements in Web Components and Angular. Experiment, iterate, and leverage the power of Web Components to build modern and performant frontend applications.

Thank you for reading this article. If you found it helpful, please consider sharing it with others who might benefit from it. Happy coding!

Thanks for reading

👏 Please clap for the story and follow me 👉
📰 View more content
🔔 Follow me: LinkedIn| Twitter| Github

Angular — The Builder Pattern -Building Better Objects with TypeScript

V.D — Sat, 13 May 2023 03:11:18 +0000

Angular — The Builder Pattern -Building Better Objects with TypeScript

Introduction:

In software development, creating complex objects with multiple optional parameters can lead to bloated constructors and maintenance challenges. The Builder pattern provides an elegant solution to build objects step by step, enabling flexible configuration and reducing code duplication. In this article, we’ll explore how to implement the Builder pattern in Angular with TypeScript, examine its benefits in terms of performance, code cleanliness, and demonstrate real-world use cases.

Overview of the Builder Pattern:

The Builder pattern is a creational design pattern that allows the construction of complex objects by separating the construction process from the object representation. It provides a fluent and step-by-step approach to building objects, making the code more readable and maintainable.

Implementation:

To implement the Builder pattern in Angular with TypeScript, we’ll follow these steps:

Step 1: Define the Product Class

First, let’s define the class representing the complex object we want to build. This class should have multiple properties and optional parameters.

class Product {
  property1: string;
  property2: number;
  property3: boolean;

  constructor(builder: ProductBuilder) {
    this.property1 = builder.property1;
    this.property2 = builder.property2;
    this.property3 = builder.property3;
  }
}

Step 2: Create the Builder Class

Next, we create a Builder class that provides methods to set the optional parameters of the Product class.

class ProductBuilder {
  property1: string;
  property2: number;
  property3: boolean;

  setProperty1(value: string): ProductBuilder {
    this.property1 = value;
    return this;
  }

  setProperty2(value: number): ProductBuilder {
    this.property2 = value;
    return this;
  }

  setProperty3(value: boolean): ProductBuilder {
    this.property3 = value;
    return this;
  }

  build(): Product {
    return new Product(this);
  }
}

Step 3: Use the Builder to Construct the Object

Now, we can use the Builder to construct the object step by step, setting the desired properties.

const product = new ProductBuilder()
  .setProperty1('Value 1')
  .setProperty2(42)
  .setProperty3(true)
  .build();

Benefits of the Builder Pattern:

The Builder pattern offers several benefits in Angular development:

1. Improved Readability and Maintainability: By separating the object construction logic from the complex object itself, the Builder pattern improves code readability and maintainability. It provides a fluent interface that clearly indicates the steps involved in building the object.

2. Flexible Configuration: The Builder pattern allows the optional parameters of the complex object to be set in any order or skipped entirely. This flexibility enables developers to configure objects based on specific use cases without cluttering the constructor with numerous parameters.

3. Avoidance of Telescoping Constructors: Telescoping constructors occur when a class has multiple constructors with different combinations of parameters. The Builder pattern avoids this issue by providing a single constructor and using method chaining to set optional parameters.

4. Performance Improvement: In scenarios where objects are frequently created with similar configurations, using the Builder pattern can improve performance. Instead of recreating the entire object each time, only the necessary properties are modified, reducing redundant code execution.

Real-World Use Case:

One common use case for the Builder pattern in Angular is form building. In Angular, reactive forms can benefit from the Builder pattern. Let’s consider a scenario where we need to build a dynamic form with multiple fields, validators, and nested structures. Here’s an example:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-my-form',
  template: `
    <form [formGroup]="myForm" (submit)="onSubmit()">
      <input formControlName="name" placeholder="Name">
      <input formControlName="email" placeholder="Email">
      <!-- More fields -->

      <button type="submit">Submit</button>
    </form>
  `
})
export class MyFormComponent implements OnInit {
  myForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.myForm = this.formBuilder.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      // More fields
    });
  }

  onSubmit() {
    if (this.myForm.valid) {
      console.log('Form submitted!', this.myForm.value);
    }
  }
}

In the above example, the FormBuilder acts as a Builder to construct the form. We use the formBuilder.group method to create a FormGroup with various form controls and validators. This approach allows us to define complex forms with clean and readable code.

Further Use Cases and Considerations:

While the Builder pattern is beneficial in various scenarios, here are a few additional use cases where it can provide significant advantages:

1. API Requests: When making API requests, you often need to construct complex payloads with optional parameters, headers, or authentication tokens. The Builder pattern can simplify the construction of these requests and provide a clean and readable way to configure different aspects of the request.

2. Object Initialization: In situations where you have objects with multiple properties and configurations, the Builder pattern can be used for their initialization. By using a Builder, you can ensure that the object is constructed correctly, enforce certain rules or validations, and make the initialization process more maintainable.

3. Configuration Objects: If you have configuration objects with numerous optional properties, the Builder pattern can help create these objects in a flexible manner. It allows you to specify the desired configurations explicitly, reducing the chance of missing or incorrectly setting properties.

Considerations:

While the Builder pattern brings many benefits, it’s essential to consider the following points:

1. Complexity vs. Simplicity: For simple objects with just a few properties, using the Builder pattern might add unnecessary complexity. Evaluate whether the object’s complexity justifies the use of a Builder or if simpler approaches, such as direct object instantiation, are more appropriate.

2. Code Duplication: Be cautious not to introduce code duplication when implementing the Builder pattern. If multiple objects require similar construction logic, consider creating a base Builder class or using inheritance to share common functionality.

3. Trade-off with Immutability: The Builder pattern often involves mutable objects, as properties are set incrementally. If immutability is a critical requirement for your objects, you might need to adapt the Builder implementation accordingly, such as by cloning the object at each step.

Conclusion:

The Builder pattern is a powerful tool in Angular and TypeScript, providing a flexible and readable way to construct complex objects. It enhances code maintainability, improves performance by reducing redundant code execution, and offers a structured approach to configure objects. By leveraging the Builder pattern in appropriate scenarios, developers can create more scalable, modular, and maintainable Angular applications.

In this article, we explored the concept of the Builder pattern , its implementation in Angular with TypeScript, and showcased its benefits and use cases. By understanding and applying this pattern effectively, developers can write cleaner, more efficient code and overcome challenges related to object construction and configuration.

Start incorporating the Builder pattern into your Angular projects and experience the benefits firsthand. Happy coding!

Thanks for reading

👏 Please clap for the story and follow me 👉
📰 View more content
🔔 Follow me: LinkedIn| Twitter| Github

Custom Implementation or Polyfills for Array Methods in JavaScript

V.D — Wed, 10 May 2023 12:33:49 +0000

Part 1: Custom Implementation of map(), reduce(), and filter() methods in JavaScript.

Polyfills in JavaScript

Hi guys, today I am going to show you the implementation or we call it the Polyfills (custom implementation) of the 3 widely-used and famous array methods.

This is something that an interviewer can ask you to write about the behind-the-scenes implementation of these methods (map, reduce, filter). These functions are written every time for a new copy of an array so it won't mutate your actual array.

Photo by AltumCode on Unsplash

1. map()

map() is a method that accepts a callback function that executes for every element of the array. In simpler terms, it is used for manipulating/transforming the elements present inside that array.
It returns a new array (which means it won't mutate or change your actual array).
The array coming out of the map is a transformed array which may or may not be identical to the actual array.

Custom implementation

Custom map implementation

This custom implementation of map() will return the transformed array.

Why do we need to attach its prototype?

As the array is just like an object and it has some built-in methods. To override or write our custom methods and make them available to the array class, it needs to attach to the prototypal chain which will do the inheritance in JavaScript. So to make available any custom method for array or objects, you need to call your methods on its prototypal chain.

2. reduce()

reduce() is the method that accepts a callback function called a reducer.
It is called on every element of the array which accumulates to a single value at last.

The callbackFunc(reducer) contains the following arguments:

previousValue: The value which we got from the last function call. On the first call, it will return ‘ initialValue ’ if given, otherwise, it will return the value of** arr[0].**
currentValue : The value of the current element. On the first call, if initialValue is given, then it returns the value of arr[0], otherwise, the value of arr[1] is returned.
currentIndex : The current index of the element. If initialValue is given, it must be 0 otherwise it should start from index 1.
array : The array used for traversal.

Use cases:

Without initial value
With initial value

Custom implementation of Reduce()

3. filter()

filter() method accepts a callback, that executes for every item of the given array.
Same as above — it returns a new array.
It will return the filtered truthy value.

Custom implementation of the filter() function.

This is how the custom implementation of a few array methods works and a good starting point where you can learn how JavaScript, under the hood, creates its inbuilt method implementation and how it works.

You can create your own Polyfills or custom methods like this and attach it to the prototype chain to make it available to the reference or abstract class used inside the JavaScript environment.

Hope you liked it, please clap, subscribe and share and also save it for future reference. :)

Thanks

Custom Implementation of JavaScript Methods

V.D — Wed, 10 May 2023 12:32:44 +0000

Part 2: Custom implementation of shallowCompare() and deepCompare() with the typeof operator in JavaScript.

Deep/Shallow comparison with typeof operator

Hi guys, today I am going to show you how to write the custom implementation for the shallow and deep copy with the use of the custom typeof operator.

Let’s get started.

First, we need to know what are Shallow and Deep comparisons. These terms were quite intimidating when we were asked in the interviews but once you get an understanding of the JavaScript runtime environment, their meaning becomes quite simple.

Let me tell you that the comparison in JavaScript between primitive types and non-primitive types is quite confusing in some parts but if you know exactly what might be the difference between primitive and non-primitive types in JavaScript, these would be quite easy to answer and explain to anybody else.

What are primitive types and non-primitives types in JavaScript?

Primitive data types are data types that are not any object and have no properties or methods attached to them.

There are 7 primitive data types:

string
number
bigint
boolean
undefined
symbol
null

One important point related to primitive data types is all primitives are immutable; that is, they cannot be altered.

If you need to know more information about the primitive data types, just visit: https://developer.mozilla.org/en-US/docs/Glossary/Primitive

Non-primitive data types are known as derivatives (reference type) which means it is derived from the primitive data types only.

Arrays
Objects

Now that we have a little understanding of what primitive and reference data types are, let’s move on to the topic of deep and shallow comparison.

1. shallowCompare()

Shallow comparison is a type of comparison which checks if two values are equal. It should be checked on one level which means nested object references are not ready for comparison, only one level of comparison between primitive and non-primitive data types is allowed.

Shallow comparison on 1st level

This figure states that if there is a shallow comparison happening it should happen correctly at one level, not at the nested level.

Shallow comparison is not allowed on nested references.

Before we jump into the custom implementation of shallow comparison we need to do one more custom implementation of the typeof Operator (a built-in JavaScript method) — you can use the typeof operator to find the data type of a JavaScript variable.

Inbuilt type of operator

** One major drawback or pitfall which I think is in JavaScript is that it will return the type of object for all the reference types such as an array, object, date, null, etc.

So if you need to know whether it is an array or an object, it won’t be possible. It always returns an object which is quite confusing but, after all, it was designed by the JavaScript guys keeping in mind that an array is treated like an object, due to its nature of dynamic typing in JavaScript.**

So, to achieve functionality to showcase whether it is an array or an object, or a date, we need to write our custom typeof operator.

Let me show you what it looks like:

Custom Implementation — typeof operator

Custom TypeOf operator

Now we get the exact type of the reference data types that we pass, whether it is an array, an object, or a date.

Before making any further delay, let’s concentrate on the shallow comparison.

Custom Implementation — shallowCompare()

In this implementation, we have used the custom typeof operator, to check whether it is an array or an object or a date, or something else. This function will do only shallow comparisons at one level, not on the nested level. Let's see an example:

Examples

2. deepCompare()

Deep comparison is a type of comparison which checks if two values are equal it should be checked on all levels which means nested object references are ready for comparison. Deep comparison is tested on nested objects, arrays, etc.

Custom Implementation — deepCompare()

Deep comparison

There is only one point to note is that in deep comparison, you need to do a recursive call to the same function due to comparison at the multi-level or nested level. As we have nested objects, and arrays, we need to check them on multiple levels.

And also, due to recursive call, a deep comparison is comparatively slow to a shallow comparison.

Let’s see the examples:

Deep comparison examples.

So, we have learnt about the custom implementation of typeof operator, shallowCompare(), and deepCompare() functions in JavaScript and how they are being used to work and compare between primitive and non-primitive data types.

In the coming parts of the custom implementation, we will see more custom implementation which will help you understand what is happening behind the scenes. Stay tuned for more!

Hope you liked it, please clap, subscribe and share and also save it for future reference. :)

Thanks

Authorization VS Authentication — Tools/Strategies

V.D — Wed, 10 May 2023 12:30:52 +0000

Authorization VS Authentication — Tools/Strategies

Authentication vs Authorization

Today, we are going to cover what exactly the authorization and authentication in the tech world.

We have different systems/ways which can be used for authorization and authentication into an application. But what exactly is Authorization and Authentication in layman terms.

Did you ever face challenge while the interviewer asked you about the difference between authorization and authentication as these terms sounds similar?

Nope that is good but some of us still wondering how can we relate to the term Authorization and Authentication and what comes first or last.

To clarify the difference,

Authentication

It is the process of verifying the identity of a user or device. This is to determine that it is the exact user or device this application verified for.

For example, User A only has access to relevant information and cannot see the sensitive information of User B.

Authorization

It is the process of determining what a user or device is allowed to do, after it is being authentication or his identity is being verified.

For example — Access controls encompass: File permissions, such as the right to create, read, edit or delete a file.

Lets understand the difference between OAuth, OpenID Connect and SAML

Photo by Chris Curry on Unsplash

1. OAuth 2.0 (Open Authentication)

OAuth(2.0) is an open standard for providing and implementing authorization. It is standard designed to allow a website or web apps to access resources hosted by other web apps on behalf of a user. OAuth2.0 uses access Tokens(a piece of information that represents the authorization on behalf of the end user.

For more info — https://auth0.com/intro-to-iam/what-is-oauth-2

Note: OAuth allows a third party application to access a user’s resources with their permission and without their login credentials.

2. OpenID Connect(OIDC)

OpenID connect is an open standard/open source solution for initiating and implementing the authentication process. It allows client to verify the identity of the end-user based on the authentication process. It allows users to choose the third-party OpenID provider they want to use to login to any website that accepts the OpenID standard (which could be also custom you have build).

You have seen it many times a day, when you try to login into the account of medium or Spotify or any other app through google account.

OpenID is useful for the developers who want to authenticate users, but are not willing to take the risk of storing user records on their own due to security aspects.

For more info — https://openid.net/connect/

Note : You can see it as SSO(Single Sign On) for consumer applications.

3. Security Assertion Markup Language (SAML)

This is also one of the ways for authentication and authorization.

SAML is an open standard for authentication and authorization and is used mostly in enterprises. It’s a framework for single-sign on (SSO), what it means that if you successfully logged in to an application of your organization, you can also access other apps without the need to re-enter your credentials.

SAML uses XML to exchange authentication and authorization messages between the specific identity providers to verify user identity and permissions, if access to an application is granted or denied. we can say it like it uses to transfer authentication data between two parties — the identity provider (IdP) and the service provider (SP).

Many benefits of using SAML :-

SAML also offers increased security. Since the identity provider stores all login information, the service provider does not need to store any user credentials on their system.
It improves the user experience as you only need to sign in once to access multiple web applications.
The organization also benefits from this feature as it means fewer Help Desk calls for password resets.

For more info — How does it works behind the scene- visit — https://www.onelogin.com/learn/saml

Note: It can be seen as SSO for enterprise applications.

Photo by Christopher Gower on Unsplash

Summary

O_Auth_ allows a third-party application to access a user’s resources with their permission and without their login credentials .

OIDC adds an authentication layer to OAuth, allowing the application to verify the user’s identity and obtain basic profile information.

SAML is used for enterprise single sign-on, allowing users to authenticate with their corporate credentials and access enterprise resources.

Thanks for reading

👏 Please clap for the story and follow me 👉
📰 View more content
🔔 Follow me: LinkedIn| Twitter| Github

ReactJS vs Angular: Which One Should You Choose?

V.D — Wed, 10 May 2023 12:29:29 +0000

ReactJS, developed by Facebook, is a JavaScript library for building user interfaces. It is lightweight and easy to learn, making it a popular choice among developers. Angular, on the other hand, is a full-featured JavaScript framework developed by Google. It is a more comprehensive solution for building complex applications.

So, which one should you choose? Let’s take a closer look at the differences between ReactJS and Angular.

1. Approach

ReactJS follows a component-based approach, where UI elements are broken down into smaller, reusable components. Each component has its own logic and state, making it easy to manage and update. React also uses a virtual DOM, which updates only the necessary components, resulting in faster performance.

Angular, on the other hand, follows a template-based approach, where UI elements are defined in templates and bound to the component’s data. Angular also has a two-way data binding feature, which automatically updates the view when the model changes.

2. Features

ReactJS is a lightweight library that focuses on the view layer, leaving the rest of the application to be implemented using other libraries or frameworks. React also has a strong ecosystem, with a wide range of libraries and tools that can be used to extend its functionality.

Angular, on the other hand, is a complete framework that provides everything you need to build complex applications, including routing, forms, animations, and more. It also has a built-in testing framework, making it easier to write and run tests for your application.

3. Learning Curve

ReactJS has a relatively low learning curve, making it easy for beginners to get started. Its syntax is simple and easy to understand, and its documentation is clear and concise. React also has a large community of developers, which means there are plenty of resources available to help you learn.

Angular, on the other hand, has a steeper learning curve due to its comprehensive feature set. It has a more complex syntax and a larger API, making it harder to learn than React. However, once you master Angular, you can build complex applications with ease.

Conclusion

Both ReactJS and Angular are powerful tools for building web applications. ReactJS is a lightweight library that is easy to learn and has a strong ecosystem, while Angular is a complete framework that provides everything you need to build complex applications. Choosing between the two depends on your project requirements, team’s skill set, and personal preferences.

At the end of the day, it’s not about which one is better, but which one suits your needs the best. If you’re building a small to medium-sized application and want to get up and running quickly, ReactJS might be the right choice for you. If you’re building a large, complex application that requires a complete solution, Angular might be a better fit.

So, which one will you choose for your next project? Let us know in the comments below!

Examples:

Facebook, Netflix, Airbnb, and Dropbox use ReactJS.
Google, Microsoft, and IBM use Angular.

Thanks for reading

👏 Please clap for the story and follow me 👉
📰 View more content
🔔 Follow me: LinkedIn| Twitter| Github

DEV Community: V.D

Atomic Design Unleashed: Building Consistency through Design Systems

What is a Design System?

That is it ?

Atomic Design System(Methodology)

Atoms

Molecules

Organisms

Templates

Pages

Benefits of Design Systems:

Design System Components:

What is your role as an engineer to know about design systems

Link — https://atomicdesign.bradfrost.com/table-of-contents/

Thanks for reading

Future-Proof Your JavaScript Code

Future-Proof Your JavaScript Code: The Game-Changing Immutability Revolution

Thanks for reading

Angular —Adapter Pattern: Simplify Data Integration(Kanban Board)

Simplifying Integration and Enhancing Flexibility

Introduction

Understanding the Adapter Pattern:

Real world use cases:

Implementing the Adapter Pattern in Angular:

Conclusion

Thanks for reading

14 Tips for Enhancing Angular Performance

Practical Techniques to Boost Angular Application Performance

Thanks for reading

React: Abstract Design Pattern-DRY & Single Shared Responsibility(Part-2)

React: Abstract Design Pattern-DRY & Single Shared Responsibility(Part-2)

Understanding the Abstract Method pattern in React and exploring how it can be implemented in your applications.

In continuation with the last post code, there are a few potential areas where performance issues could arise,

To avoid potential performance issues in the provided code, here are some suggestions:

Here are some additional customization options for the Pagination component, each with its own code example:

Conclusion:

Thanks for reading

React: Abstract Design Pattern-DRY & Single Shared Responsibility(Part-1)

Understanding the Abstract Method pattern in React and exploring how it can be implemented in your applications.

So, let’s get started

Understanding the Abstract Method Pattern:

Example Scenario:

Implementation steps

This one is the easy one to demo the React ADP pattern.Lets see other more realistic demo

Let’s further improve the code to make it more generic and performant.

In the provided code, there are a few potential areas where performance issues could arise

Thanks for reading

The Power of Web Components in Frontend Development with Angular

Introduction:

Table of Contents:

1. Understanding Web Components

2. Benefits of Web Components in Angular

3. Creating a Web Component in Angular

4. Using Web Components in Angular Applications

5. Styling Web Components in Angular

6. Communication between Web Components and Angular

7. Lifecycle Hooks and Events in Web Components

8. Testing Web Components in Angular

9. Performance Considerations

10. Conclusion

Thanks for reading

Angular — The Builder Pattern -Building Better Objects with TypeScript

Angular — The Builder Pattern -Building Better Objects with TypeScript

Introduction:

Overview of the Builder Pattern:

Implementation:

Step 1: Define the Product Class

Step 2: Create the Builder Class

Step 3: Use the Builder to Construct the Object

Benefits of the Builder Pattern:

Real-World Use Case:

Further Use Cases and Considerations:

Considerations:

Conclusion:

Thanks for reading

Custom Implementation or Polyfills for Array Methods in JavaScript

Part 1: Custom Implementation of map(), reduce(), and filter() methods in JavaScript.

Polyfills in JavaScript

1. map()

Custom implementation