DEV Community: Keshav Khatri

Angular Performance: From Laggy to Lightning Fast

Keshav Khatri — Wed, 24 Apr 2024 06:04:16 +0000

Angular, one of the most popular front-end frameworks, empowers developers to build robust web applications. However, as applications grow in complexity, ensuring optimal performance becomes paramount. In this post, we'll explore various optimization techniques in Angular to enhance the performance and efficiency of your applications.

Lazy Loading:

Lazy loading asynchronously loads modules or components when required, rather than loading everything upfront. This significantly improves initial loading time, especially for large projects. Angular provides built-in support for lazy loading using the loadChildren property in the routing configuration.

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

Ahead-of-Time (AOT) Compilation:

AOT compilation converts Angular HTML and TypeScript code into efficient JavaScript during the build process, leading to smaller bundle sizes and faster rendering. By default, Angular CLI uses AOT compilation for production builds. When you run the ng build --prod command, Angular CLI automatically enables AOT compilation along with other production optimizations. Here's the command to enable AOT compilation explicitly

ng build --prod

Tree Shaking:

Tree shaking eliminates unused code from your application's bundle during the build process. Angular CLI automatically performs tree shaking, but organizing imports and using ES6 module syntax can further optimize your code.

Optimizing Change Detection:

Use techniques like OnPush change detection strategy and immutable data structures to optimize change detection and minimize unnecessary DOM updates.

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

Bundle Size Optimization:

Reduce bundle size by employing code splitting, minification, and compression techniques.

"build": {
  "configurations": {
    "production": {
      "optimization": true
    }
  }
}

Server-Side Rendering (SSR):

Server-Side Rendering (SSR) is a technique used to render web pages on the server before sending them to the client's browser. In traditional single-page applications (SPAs), the entire application logic runs in the client's browser, and the server sends only static HTML, CSS, and JavaScript files. However, with SSR, the server generates the HTML content dynamically and sends pre-rendered HTML to the client, improving performance, SEO, and user experience. Click here to see SSR implementation

Production Mode:

Enabling production mode optimizes Angular applications by disabling development-specific features. Use the --prod flag when building your application using Angular CLI.

Summary

Optimizing Angular applications for performance and efficiency is crucial for delivering a seamless user experience. By incorporating lazy loading, AOT compilation, tree shaking, production mode, optimizing change detection, bundle size optimization, and SSR techniques, you can significantly enhance the performance of your Angular applications.

Implementing Angular Server-Side Rendering (SSR) AKA Angular Universal

Keshav Khatri — Tue, 23 Apr 2024 09:10:21 +0000

Angular offers Server-Side Rendering (SSR) which enables your Angular application to render on the server before sending it to the client, resulting in improved performance and search engine optimization. In this post, we'll delve into the process of implementing Angular SSR, complete with code samples and step-by-step instructions.

Why Angular SSR?

Before diving into implementation details, let's understand why Angular SSR is beneficial:

Improved Performance: SSR reduces initial load times by serving pre-rendered content to the client, resulting in faster perceived performance.
Search Engine Optimization (SEO): Search engines prefer content that is available in the initial HTML response. SSR ensures that search engine crawlers can easily index your Angular application.
Enhanced User Experience: SSR enables users to view content quickly, especially on slower network connections or less powerful devices.

Implementation Steps

Step 1: Create an Angular Application

First, ensure you have Angular CLI installed. If not, install it globally using npm:

npm install -g @angular/cli

Create a new Angular project:

ng new my-angular-app
cd my-angular-app

Step 2: Install Angular Universal

Angular Universal provides server-side rendering support for Angular applications. Install it along with the necessary dependencies:

ng add @nguniversal/express-engine

Step 3: Generate SSR Files

Generate the SSR files using Angular Universal schematics:

ng generate universal --clientProject my-angular-app

This command creates server-side rendering files within your Angular project.

Step 4: Configure Routes

In src/app/app.routing.module.ts, configure your routes as usual. Ensure your routes are compatible with both client and server rendering.

Step 5: Build for SSR

Build your Angular application for server-side rendering:

npm run build:ssr

This command compiles your Angular application and generates server-side rendering artifacts.

Step 6: Run SSR Server

Start the server for server-side rendering:

npm run serve:ssr

Your Angular application is now ready for server-side rendering! Visit http://localhost:4000 to see it in action.

Summary

Implementing Angular Server-Side Rendering (SSR) is a powerful technique for improving performance and SEO-friendliness of your web applications. By following the steps outlined in this guide, you can seamlessly integrate SSR into your Angular projects. Remember to continuously optimize and test your application to ensure optimal performance and user experience.

Angular SSR not only boosts performance but also enhances the accessibility and discoverability of your web applications in today's competitive digital landscape. So, why wait? Start implementing Angular SSR today and reap the benefits it offers for your projects. Happy coding!

Working with Dates and Times in JavaScript

Keshav Khatri — Mon, 22 Apr 2024 10:20:43 +0000

JavaScript provides robust tools for managing dates and times efficiently. In this guide, we'll explore the various functionalities and best practices for working with dates and times in JavaScript.

Understanding JavaScript's Date Object:

JavaScript provides a built-in Date object for working with dates and times. You can create a new Date object using various constructors, such as:

// Current date and time
const currentDate = new Date();

// Specific date and time
const specificDate = new Date('2024-04-22T12:00:00');

// Date components
const dateComponents = new Date(2024, 3, 22, 12, 0, 0);

Manipulating Dates:

Once you have a Date object, you can perform various operations such as getting and setting specific components like year, month, day, hours, minutes, seconds, and milliseconds.

// Get the year
const year = currentDate.getFullYear();

// Set the month
currentDate.setMonth(5); // June

Formatting Dates:

Formatting dates for display is a common requirement. JavaScript doesn't have built-in methods for formatting dates, but you can achieve this using methods like toLocaleDateString() or libraries like moment.js or date-fns.

// Using toLocaleDateString
const formattedDate = currentDate.toLocaleDateString('en-US', {
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
});

console.log(formattedDate); // Example: "Friday, April 22, 2024"

Working with Timezones:

JavaScript's Date object operates in the local timezone by default. However, you may need to work with dates in different timezones. You can accomplish this using libraries like moment-timezone or by manually adjusting the time offset.

// Using moment-timezone
const moment = require('moment-timezone');
const utcDate = moment.utc('2024-04-22T12:00:00').tz('America/New_York');

Handling Date Arithmetic:

Performing date arithmetic, such as adding or subtracting days, months, or years, is often necessary. JavaScript's Date object provides methods like setDate(), setMonth(), and setFullYear() for this purpose.

// Adding days
currentDate.setDate(currentDate.getDate() + 7);

// Subtracting months
currentDate.setMonth(currentDate.getMonth() - 1);

// Adding years
currentDate.setFullYear(currentDate.getFullYear() + 2);

Working with Intervals and Durations:

Sometimes, you need to work with intervals or durations between dates. Libraries like date-fns provide functions to handle these scenarios easily.

// Calculating difference between dates
const differenceInDays = dateFns.differenceInDays(endDate, startDate);

// Adding a duration to a date
const endDate = dateFns.addDays(startDate, 7);

Additional Date Functions and Uses:

Comparing Dates:

const date1 = new Date('2024-04-22');
const date2 = new Date('2024-04-23');

if (date1 < date2) {
  console.log('date1 is before date2');
} else {
  console.log('date1 is after date2');
}

Getting Day of the Week:

const dayOfWeek = currentDate.getDay(); // Returns the day of the week (0-6)

Calculating Age:

function calculateAge(birthDate) {
  const today = new Date();
  const diff = today - birthDate;
  const ageDate = new Date(diff);
  return Math.abs(ageDate.getUTCFullYear() - 1970);
}

const birthDate = new Date('1990-05-15');
const age = calculateAge(birthDate);

By mastering these javascript date handling techniques, you can build more robust and efficient applications that meet your users' needs effectively.

Angular Signals: Streamline Data Flow and Boost Maintainability

Keshav Khatri — Wed, 17 Apr 2024 07:01:53 +0000

What are Signals?

Imagine a central nervous system for your Angular app. Signals act as the messengers, seamlessly transmitting data updates between components without tight coupling. These signals can represent various data types, from user input to application state or data fetched from external sources.

There are two main types of signals:

Writable Signals:

These signals allow you to directly modify their values, providing a clear path for data updates.

Read-Only Signals:

Derived from other signals, these offer a reactive approach, calculating their values based on changes in the source signals. They boast lazy evaluation, meaning the calculations happen only when needed, and memoization, ensuring efficient performance.

Benefits of Embracing Signals

By incorporating Signals into your Angular projects, you reap a multitude of advantages:

Enhanced Maintainability: Decoupling components leads to cleaner code that's easier to understand and manage. Imagine a well-organized system where components don't rely directly on each other, making modifications a breeze!
Improved Testability: Signals allow you to isolate components during testing. Simply provide different signal values and observe component behavior. This streamlines the testing process and boosts confidence in your code.
More Reactive Applications: Signals empower you to create applications that respond swiftly to data changes. This translates to a more dynamic and interactive user experience.

Code Examples: Unleashing the Power of Signals

Let's delve into some code examples to solidify your understanding of Signals:

Writable Signals in Action:

import { signal } from '@angular/core'; // Import the signal function

const count = signal(0); // Create a writable signal with an initial value of 0

function incrementCount() {
  count.update(value => value + 1); // Update the count using update()
}

console.log('Initial count:', count()); // Get the current value using the signal function

incrementCount();
console.log('Count after increment:', count());

Computed Signals: Deriving Values

const firstName = signal('John');
const lastName = signal('Doe');

const fullName = computed(() => `${firstName()} ${lastName()}`); // Define a computed signal based on other signals

console.log('Full name:', fullName());

firstName.set('Jane'); // Update the firstName signal

console.log('Full name after update:', fullName()); // fullName automatically reflects the change

Embrace the Signal Revolution

Signals offer a compelling approach to streamline data flow, enhance maintainability, and create more responsive Angular applications. So, the next time you're building your Angular project, consider incorporating Signals and witness the magic unfold!

Mastering Frontend Web Development: Best Practices

Keshav Khatri — Wed, 17 Apr 2024 06:19:34 +0000

Building websites that look amazing and work smoothly is all about following some simple rules. In this easy-to-understand guide, we'll walk through the most important things to keep in mind when working on the frontend of a website.

Make It Fit Every Screen
People use all kinds of devices to browse the web, from big computer screens to tiny phones. So, your website should adjust and look good on all of them. Use tools like Bootstrap or Flexbox to help make your website flexible enough to fit any screen size.
Speed Things Up
Nobody likes waiting for a website to load. To make sure your website is fast, make images smaller, bundle your files together, and use tricks like lazy loading. Tools such as Webpack can be a big help here.
Write Neat and Clear Code
Good code is like good writing—it's easy to read and understand. Keep your code organized, name things sensibly, and leave comments to explain what your code is doing. Tools like ESLint can help you spot mistakes and keep your code looking tidy.
Welcome Everyone with Accessibility
Accessibility means making sure everyone, including those with disabilities, can use your website easily. Use the right HTML tags, describe images for those who can't see, and make sure people can navigate using just a keyboard. Tools like Lighthouse can check how accessible your website is.
Test on Different Browsers
Not everyone uses the same web browser, so test your website on different ones like Chrome, Firefox, and Safari. Tools such as BrowserStack can help you see how your website looks and works across different browsers.
Keep Track of Changes with Git
Git is like a time machine for your code. It helps you keep track of changes, work with others, and go back to an older version if something goes wrong. Websites like GitHub and GitLab make it easy to use Git for your projects.
Build with Reusable Parts
Modern websites are often made of small building blocks called components. Tools like React, Vue.js, or Angular help you build these blocks and put them together. This makes your code easier to manage and reuse.
Get Noticed with SEO
SEO is about making your website easy for search engines like Google to find. Use the right HTML tags, write good meta descriptions, and have clear URLs. Google's Search Console can help you see how well your website is doing in search results.
Keep It Safe and Secure
Security is super important. Make sure your website uses HTTPS to protect data, and be careful with user input to prevent attacks. Stay updated on security issues and always update your tools to the latest versions.
Never Stop Learning
The world of web development is always changing, so it's important to keep learning. Read blogs, join forums, go to conferences, and try out new tools. The more you learn, the better you'll become at creating awesome websites.

In summary, frontend web development covers a wide array of principles, techniques, and best practices designed to craft engaging, accessible, and high-performing user experiences on the web. By adhering to these best practices and embracing a mindset of ongoing learning and improvement, frontend developers can design websites that not only please users but also achieve business goals while maintaining industry standards and best practices.