DEV Community: ajay upreti

React renderToPipeableStream with Express: A Deep Dive into Server‐Side Streaming

ajay upreti — Mon, 23 Jun 2025 08:03:33 +0000

React renderToPipeableStream with Express: A Deep Dive into Server-Side Streaming

Server-side rendering (SSR) has evolved significantly with React 18's introduction of streaming capabilities. The renderToPipeableStream API represents a major leap forward in how we deliver React applications to users, offering improved performance and user experience through progressive rendering.

[Understanding the Problem]
[What is renderToPipeableStream?]
[Setting Up the Express Server]
[The Complete Implementation]
[Behind the Scenes: How Streaming Works]
[Advanced Features]
[Performance Implications]
[Best Practices]
[Troubleshooting Common Issues]

Understanding the Problem

Traditional SSR with React involves rendering the entire component tree to a string before sending it to the client. This approach has several limitations:

Time to First Byte (TTFB): Users must wait for the entire page to render on the server
Memory Usage: Large pages can consume significant server memory
Blocking Operations: Slow components block the entire rendering process
Poor User Experience: Users see nothing until everything is ready

React 18's streaming SSR addresses these issues by allowing the server to send HTML in chunks as it becomes available.

What is renderToPipeableStream?

renderToPipeableStream is React's streaming SSR API that returns a pipeable Node.js stream. Unlike renderToString, which returns a complete string, this API allows you to:

Send HTML to the client progressively
Handle async operations without blocking the entire render
Provide immediate feedback to users
Optimize server resource usage

Key Concepts

Streaming: HTML is sent in chunks as components are rendered
Suspense: Components can suspend rendering while waiting for data
Selective Hydration: Client-side hydration can begin before all content arrives
Progressive Enhancement: Users see content as it becomes available

Setting Up the Express Server

Let's start with a basic Express server setup:

// server.js
import express from 'express';
import { renderToPipeableStream } from 'react-dom/server';
import React from 'react';
import path from 'path';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const app = express();
const PORT = process.env.PORT || 3000;

// Serve static files
app.use('/static', express.static(path.join(__dirname, 'build/static')));

// Main route handler
app.get('*', (req, res) => {
  // SSR logic will go here
});

app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`);
});

The Complete Implementation

Here's a comprehensive implementation showing how renderToPipeableStream works with Express:

// server.js
import express from 'express';
import { renderToPipeableStream } from 'react-dom/server';
import React, { Suspense } from 'react';
import App from './src/App.js';

const app = express();

// HTML template function
function getHTMLTemplate(nonce) {
  return `
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React Streaming SSR</title>
  <link rel="stylesheet" href="/static/css/main.css">
</head>
<body>
  <div id="root"><!--APP_HTML--></div>
  <script nonce="${nonce}" src="/static/js/main.js"></script>
</body>
</html>`;
}

app.get('*', (req, res) => {
  // Generate nonce for security
  const nonce = generateNonce();

  // Set response headers
  res.setHeader('Content-Type', 'text/html');
  res.setHeader('Transfer-Encoding', 'chunked');

  // Create the React element
  const reactElement = React.createElement(
    Suspense,
    { fallback: React.createElement('div', null, 'Loading...') },
    React.createElement(App, { url: req.url })
  );

  let didError = false;
  let didComplete = false;

  // Render to pipeable stream
  const { pipe, abort } = renderToPipeableStream(reactElement, {
    // Called when the shell is ready
    onShellReady() {
      console.log('Shell ready, starting to stream');

      // Set status code
      res.statusCode = didError ? 500 : 200;

      // Start streaming the response
      const htmlTemplate = getHTMLTemplate(nonce);
      const [htmlStart, htmlEnd] = htmlTemplate.split('<!--APP_HTML-->');

      res.write(htmlStart);
      pipe(res);
    },

    // Called when all content is ready (including suspended content)
    onAllReady() {
      console.log('All content ready');
      didComplete = true;

      if (!res.headersSent) {
        // If we haven't started streaming yet, send everything at once
        res.statusCode = didError ? 500 : 200;
        const htmlTemplate = getHTMLTemplate(nonce);
        const [htmlStart, htmlEnd] = htmlTemplate.split('<!--APP_HTML-->');
        res.write(htmlStart);
        pipe(res);
      }
    },

    // Called when the stream is complete
    onShellError(error) {
      console.error('Shell error:', error);
      didError = true;

      if (!res.headersSent) {
        res.statusCode = 500;
        res.send(`
          <!DOCTYPE html>
          <html>
            <body>
              <h1>Server Error</h1>
              <p>Something went wrong during rendering.</p>
            </body>
          </html>
        `);
      }
    },

    // Called for errors during streaming
    onError(error) {
      console.error('Streaming error:', error);
      didError = true;
    }
  });

  // Set up timeout to abort long-running renders
  const timeout = setTimeout(() => {
    console.log('Request timeout, aborting render');
    abort();
  }, 10000); // 10 second timeout

  // Clean up timeout when response finishes
  res.on('finish', () => {
    clearTimeout(timeout);
  });

  res.on('close', () => {
    clearTimeout(timeout);
  });
});

function generateNonce() {
  return Math.random().toString(36).substring(2, 15);
}

Behind the Scenes: How Streaming Works

1. Request Initiation

When a request comes in, Express calls our route handler. We immediately start the React rendering process without waiting for all data to be available.

2. Shell Rendering

React first renders the "shell" of your application - the parts that don't depend on async data. This includes:

Basic HTML structure
Navigation components
Loading states
Error boundaries

3. Progressive Streaming

As suspended components resolve their data, React continues rendering and streams the HTML to the client:

// Example component that suspends
function UserProfile({ userId }) {
  const user = use(fetchUser(userId)); // This will suspend

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

// Wrapped in Suspense
function App() {
  return (
    <div>
      <header>My App</header>
      <Suspense fallback={<div>Loading user...</div>}>
        <UserProfile userId="123" />
      </Suspense>
    </div>
  );
}

4. Client-Side Hydration

The client receives HTML progressively and can start hydrating components as they arrive, rather than waiting for the entire page.

Advanced Features

Custom Suspense Boundaries

function App() {
  return (
    <div>
      <header>Always visible</header>

      <Suspense fallback={<UserSkeleton />}>
        <UserSection />
      </Suspense>

      <Suspense fallback={<ProductsSkeleton />}>
        <ProductsSection />
      </Suspense>

      <footer>Always visible</footer>
    </div>
  );
}

Error Boundaries for Streaming

class StreamingErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    console.error('Streaming error boundary caught:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <div>Something went wrong in this section.</div>;
    }

    return this.props.children;
  }
}

Bootstrap Script Injection

const { pipe, abort } = renderToPipeableStream(reactElement, {
  bootstrapScripts: ['/static/js/main.js'],
  bootstrapScriptContent: `
    window.__INITIAL_DATA__ = ${JSON.stringify(initialData)};
  `,
  onShellReady() {
    pipe(res);
  }
});

Performance Implications

Benefits

Faster TTFB: Users see content immediately when the shell is ready
Reduced Memory Usage: Server doesn't hold entire HTML in memory
Better Perceived Performance: Progressive loading feels faster
Improved SEO: Search engines can start processing content sooner

Considerations

Complexity: More complex than traditional SSR
Error Handling: Requires careful error boundary placement
Caching: Traditional page caching strategies may need adjustment
Debugging: Streaming issues can be harder to debug

Performance Monitoring

const { pipe, abort } = renderToPipeableStream(reactElement, {
  onShellReady() {
    console.time('Shell ready');
    const startTime = Date.now();

    pipe(res);

    res.on('finish', () => {
      console.timeEnd('Shell ready');
      console.log(`Total response time: ${Date.now() - startTime}ms`);
    });
  }
});

Best Practices

1. Strategic Suspense Placement

Place Suspense boundaries around components that fetch data, not around individual data dependencies:

// Good
<Suspense fallback={<UserDashboardSkeleton />}>
  <UserDashboard />
</Suspense>

// Not ideal
<div>
  <Suspense fallback={<div>Loading name...</div>}>
    <UserName />
  </Suspense>
  <Suspense fallback={<div>Loading avatar...</div>}>
    <UserAvatar />
  </Suspense>
</div>

2. Meaningful Loading States

Provide skeleton components that match the final content structure:

function UserSkeleton() {
  return (
    <div className="user-profile">
      <div className="skeleton-avatar"></div>
      <div className="skeleton-text skeleton-name"></div>
      <div className="skeleton-text skeleton-email"></div>
    </div>
  );
}

3. Error Boundary Strategy

Implement error boundaries at appropriate levels to prevent entire sections from failing:

function App() {
  return (
    <StreamingErrorBoundary>
      <header>My App</header>
      <main>
        <StreamingErrorBoundary>
          <Suspense fallback={<UserSkeleton />}>
            <UserSection />
          </Suspense>
        </StreamingErrorBoundary>

        <StreamingErrorBoundary>
          <Suspense fallback={<ContentSkeleton />}>
            <ContentSection />
          </Suspense>
        </StreamingErrorBoundary>
      </main>
    </StreamingErrorBoundary>
  );
}

4. Timeout Management

Always implement timeouts to prevent hanging requests:

const timeout = setTimeout(() => {
  abort();
  if (!res.headersSent) {
    res.status(504).send('Request timeout');
  }
}, 10000);

Troubleshooting Common Issues

1. Headers Already Sent Error

This occurs when trying to set headers after streaming has started:

// Problem
res.setHeader('Custom-Header', 'value'); // After onShellReady

// Solution
app.get('*', (req, res) => {
  res.setHeader('Custom-Header', 'value'); // Before renderToPipeableStream

  const { pipe } = renderToPipeableStream(/* ... */);
});

2. Memory Leaks

Ensure proper cleanup of timeouts and event listeners:

const timeout = setTimeout(abort, 10000);

res.on('close', () => {
  clearTimeout(timeout);
});

res.on('finish', () => {
  clearTimeout(timeout);
});

3. Hydration Mismatches

Ensure server and client render the same content:

// Use consistent data sources
function App({ initialData }) {
  const [data, setData] = useState(initialData);

  // Don't use Date.now() or Math.random() in render
  // Use stable identifiers
}

4. Incomplete Streaming

Monitor for incomplete responses:

let streamComplete = false;

const { pipe } = renderToPipeableStream(reactElement, {
  onAllReady() {
    streamComplete = true;
  },
  onError(error) {
    if (!streamComplete) {
      console.error('Stream incomplete:', error);
    }
  }
});

Conclusion

React's renderToPipeableStream with Express represents a significant advancement in server-side rendering capabilities. By enabling progressive HTML streaming, it delivers better user experiences through faster initial page loads and more responsive interfaces.

The key to successful implementation lies in understanding the streaming lifecycle, strategically placing Suspense boundaries, implementing robust error handling, and monitoring performance metrics. While the complexity is higher than traditional SSR, the benefits in user experience and performance make it a compelling choice for modern React applications.

As you implement streaming SSR, start with simple use cases and gradually add complexity. Monitor your application's performance metrics, user experience indicators, and server resource usage to ensure you're getting the expected benefits from this powerful rendering approach.

Remember that streaming SSR works best when combined with other React 18 features like concurrent rendering and selective hydration, creating a comprehensive solution for modern web application performance challenges.

How to Use Push Notifications in React: A Step-by-Step Guide

ajay upreti — Fri, 22 Sep 2023 06:47:05 +0000

Introduction:

Push notifications have become a ubiquitous part of our digital lives. They keep us informed, engaged, and connected with our favorite apps and websites. If you're building a React application and want to implement push notifications, you're in the right place. In this tutorial, we will walk you through the process of adding push notification functionality to your React app. We will use a service worker, the Notifications API, and a popular library called Firebase Cloud Messaging (FCM) to achieve this. By the end of this guide, you'll have a React app that can send and receive push notifications.

Prerequisites:

Before we get started, make sure you have the following prerequisites in place:

Basic knowledge of React and JavaScript.
Node.js and npm (Node Package Manager) installed on your development machine.
A code editor of your choice (e.g., Visual Studio Code).
Let's dive in!

Step 1: Create a New React App

If you don't have a React app already, create one using Create React App (CRA). Open your terminal and run the following command:

npx create-react-app push-notification-app
// Replace "push-notification-app" with your preferred project name.

Step 2: Register a Service Worker

Service workers are a fundamental part of enabling push notifications in web applications. They run in the background and can intercept network requests, making them suitable for handling push notifications.

In your React app's src folder, create a new file named service-worker.js. Add the following code to it:

// service-worker.js
self.addEventListener('push', event => {
  const options = {
    body: event.data.text(),
    icon: '/path/to/your/icon.png', // Replace with your icon path
  };
  event.waitUntil(
    self.registration.showNotification('Your App Name', options)
  );
});

This code sets up a basic service worker that listens for incoming push notifications and displays them with a title and icon.

Step 3: Register the Service Worker

In your src/index.js file, register the service worker by adding the following code:

// src/index.js
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(registration => {
      console.log('Service Worker registered with scope:', registration.scope);
    })
    .catch(error => {
      console.error('Service Worker registration failed:', error);
    });
}

This code checks if the browser supports service workers and registers the service worker file we created earlier.

Step 4: Set Up Firebase Cloud Messaging (FCM)

To send and receive push notifications, we'll use Firebase Cloud Messaging (FCM). Follow these steps to set up FCM:

Create a Firebase project at https://console.firebase.google.com/.

In your Firebase project, go to "Project settings" > "Cloud Messaging."

Copy the "Sender ID" and "Server key" values. You'll need them later.

Step 5: Install Firebase and Configure FCM

In your React app's root directory, install the Firebase package by running:

npm install firebase

Now, create a Firebase configuration file. In your src folder, create a file named firebase.js and add the following code:

// src/firebase.js
import firebase from 'firebase/app';
import 'firebase/messaging';

const firebaseConfig = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_AUTH_DOMAIN',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_STORAGE_BUCKET',
  messagingSenderId: 'YOUR_SENDER_ID',
  appId: 'YOUR_APP_ID',
};

firebase.initializeApp(firebaseConfig);

export const messaging = firebase.messaging();

Replace the placeholder values in firebaseConfig with the actual values from your Firebase project.

Step 6: Request Permission and Get the Registration Token

In your React app, you'll need to request permission from the user to send notifications and obtain a registration token. You can do this in a React component like so:

import React, { useEffect } from 'react';
import { messaging } from './firebase';

const PushNotificationButton = () => {
  useEffect(() => {
    messaging.requestPermission()
      .then(() => {
        return messaging.getToken();
      })
      .then(token => {
        console.log('Token:', token);
      })
      .catch(error => {
        console.error('Error:', error);
      });
  }, []);

  return (
    <button>Enable Push Notifications</button>
  );
};

export default PushNotificationButton;

This component requests permission and logs the registration token to the console. You can customize it to display a user-friendly message and handle different permission scenarios.

Step 7: Send Push Notifications

With the registration token obtained in the previous step, you can now send push notifications from your server or Firebase Cloud Messaging console.

For example, you can use the Firebase Admin SDK on your server to send notifications to specific devices using their registration tokens.

const admin = require('firebase-admin');
const serviceAccount = require('path/to/serviceAccountKey.json');

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
});

const message = {
  data: {
    title: 'New Notification',
    body: 'This is a push notification from your server.',
  },
  token: 'DEVICE_REGISTRATION_TOKEN',
};

admin.messaging().send(message)
  .then(response => {
    console.log('Successfully sent message:', response);
  })
  .catch(error => {
    console.error('Error sending message:', error);
  });

Replace 'DEVICE_REGISTRATION_TOKEN' with the actual registration token of the target device.

Step 8: Display Push Notifications in Your Service Worker

To display push notifications received from FCM in your service worker, modify the service worker code you created in Step 2. Update the self.addEventListener('push', event => { ... }) block to customize the notification's appearance and behavior.

self.addEventListener('push', event => {
  const data = event.data.json(); // Assuming the payload is in JSON format

  const options = {
    body: data.body,
    icon: '/path/to/your/icon.png',
    data: {
      url: data.link, // Customize the link to open when the notification is clicked
    },
  };

  event.waitUntil(
    self.registration.showNotification(data.title, options)
  );
});

Step 9: Handle Notification Clicks

To handle clicks on push notifications and navigate to a specific URL when a notification is clicked, add the following code to your service worker:

self.addEventListener('notificationclick', event => {
  const notificationData = event.notification.data;

  if (notificationData.url) {
    clients.openWindow(notificationData.url);
  }

  event.notification.close();
});

This code listens for the notificationclick event, extracts the URL from the notification data, and opens the URL in a new browser tab when the notification is clicked.

Step 10: Test Your Push Notifications

Finally, it's time to test your push notifications. Run your React app locally and use the "Enable Push Notifications" button you created earlier to obtain a registration token.

Happy coding!

Let's all connect on github

ajay upreti — Thu, 21 Sep 2023 18:39:34 +0000

In the vast world of coding and programming, GitHub stands as a shining beacon of collaboration and innovation. It's not just a platform; it's a community where developers from all corners of the globe come together to share their work, learn from one another, and contribute to the ever-evolving landscape of technology.

But GitHub is more than just a place to host your code; it's a place to connect with like-minded individuals who share your passion for coding.

So, why not take a moment to share your GitHub profile and let's all connect?

Here is my link

ajayupreti (ajay upreti) · GitHub

ajayupreti has 46 repositories available. Follow their code on GitHub.

github.com

Share yours!

Best Practices for making AngularJS Application

ajay upreti — Sat, 31 Jul 2021 14:52:26 +0000

This article lists some of the best practices that would be useful for developers while they are coding with AngularJS.

Here are some good practices for AngularJS applications separated into five categories:

1. Structure

When we start to build an AngularJS application sometimes we don’t know exactly how to organise our files or even know what files we need. For this, the AngularJS team recommends two solutions:

Use the angular-seed (https://github.com/angular/angular-seed) project, which is basically a skeleton of a typical AngularJS application. You just need to clone the repository.
The other recommendation is to use yeoman (http://yeoman.io/) which is a tool that will basically create the skeleton and add other tools such as bower and grunt, which are widely used in the development of javascript applications according to the user preferences.

You need to be very careful with these tools that seem to be very useful in the beginning because you need to think first about what your project needs are. For example, angular-seed will create a folder named ‘app’ where all the static deployable files are and inside we will have a folder named ‘js’ with all our javascript files like ‘controllers.js’, ‘services.js’, etc

2. Improving the Page Load Time

The users can easily add AngularJS to a web page with the <script> tag. But often the framework and related scripts impact the loading of HTML code. The developers can easily improve the page load time by placing the entire <script> tag at the bottom of the page. When AngularJS and related scripts are placed at the bottom of the page, the HTML code can be loaded without any interruption and delay.

3. Performing Dependency Injection Properly

While using AngularJS, the developers can inject dependencies in a number of ways. For instance, they can perform dependency injection using the new operator or create a service registry for the dependency. Likewise, they can keep the dependency injection global and store it in a single place. But the developers can always consider passing the dependency to the constructor function instead of using any other option. When the dependency is passed to the constructor function, the dependency object will be generated by other functions or objects without any manual intervention.

4. Determining Object Scope

Regarding the object scope that we have in AngularJS, we have three simple rules:

The scope must be write-only in the controllers, meaning that the controller is in charge of using another component, like a service, to get the data that the template will show and write this data in an object of the scope.
The scope must be read-only in the templates, meaning that even if AngularJS allows us to write code that modifies the scope in the templates, it’s something that we must be very cautious about and probably shouldn’t do.
Do not create properties in the scope but object! It’s a common mistake to think that the scope is the model component that AngularJS talks about. In fact, the scope is just a way to bind our model with the template, so the model must be a javascript object, to use a simple property can and will give issues later on with the scope hierarchy.

5. Organizing the Application through Modules

AngularJS allows developers to organize and control the application through individual modules. Each module contains certain components of the website. But the developers have the option to create modules without any restriction. Hence, many developers prefer creating individual modules for components like services, directives, and controllers. There are always chances that a specific functionality of the web application will require components and dependencies from different modules. So the developers must make it a practice to include related services, directives, controllers and dependencies in the same module to structure the application more flexible.

6. Performing Unit Tests

One may want to use Jasmine/Karma combination for doing controller methods testing.
Protractor framework can be used for E2E testing, as recommended. Read more on the Angular page for E2E testing.

References

https://docs.angularjs.org/guide

How to use animation with Angular ?

ajay upreti — Sat, 31 Jul 2021 12:38:54 +0000

Introduction

Angular offers the ability to create powerful animations and activate them based on a variety of factors.

One of the changes from Angular 2 to 5 was the fact that they moved the animation functions from the angular core library, into their own animations library.

Initial Setup

Angular Animations are kept in their own module, so we need to import them into the module where they will be used.

import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    BrowserAnimationsModule
  ],
})

Getting your component ready for animation

First, we need to import some animation functions to the top of the intended component:

import { trigger,state,style,transition,animate,keyframes } from '@angular/animations';

Next, we have to add the animations property to the @Component() decorator:

The trigger animation function is the starting point of each unique Animation animation.
The first argument accepts the name of the animation, and the second argument accepts all of the other animation functions that we imported.

@Component({
  selector: 'app-root',
  template: `
  <p>I will animate</p>
  `,
  styles: [``],
  animations: [
    trigger('myAwesomeAnimation', [

    ]),
  ]
})

Animation States and transitions

The state function allows you to define different states that you can call and transition between. The first argument accepts a unique name, and the second argument accepts the style function.

import { Component } from '@angular/core';

import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  animations: [
    trigger('popOverState', [
      state('show', style({
        opacity: 1
      })),
      state('hide',   style({
        opacity: 0
      })),
      transition('show => hide', animate('600ms ease-out')),
      transition('hide => show', animate('1000ms ease-in'))
    ])
  ]
})
export class PopOverComponent {
  show = false;
  constructor() { }

  get stateName() {
    return this.show ? 'show' : 'hide'
  }

  toggle() {
    this.show = !this.show;
  }
}

In the HTML, we can now apply this animation to a div and provide a button to toggle the state between show and hide.

<div [@popOverState]="stateName">
        <p>Hello ! .</p>
</div>
<button (click)="toggle()">Toggle PopOver</button>

Notice the comma after the trigger function,That's there so that you can define multiple animations, each with unique animation names defined within the first argument.

Multi-step animations with keyframes

What if you want to control the intermediate steps in an animation? That’s where keyframes come in.

Every keyframe has an offset ranging from 0.0 to 1.0, which represents its position in time relative to the animation duration. If an animation runs for 1000ms, a keyframe offset of 0.25 is equivalent to 250ms.

transition('void => *', [
        animate(1000, keyframes([
          style({ transform: 'translateX(-100px)', opacity: 0, offset: 0}),
          style({ transform: 'translateX(-50px)', opacity: 0.5, offset: 0.3 }),
          style({ transform: 'translateX(-20px)', opacity: 1, offset: 0.8 }),
          style({ transform: 'translateX(0px)', opacity: 1, offset: 1 })
        ]))
])

Adding Animation callbacks

Sometimes you might want to trigger code when an animation is completed. In this example, we create an event handler to console log the animation start and done events.

logAnimation($event) {
  console.log(`${this.position} animation ${$event.phaseName}`)
}

In the template, we can fire the event handler when the animation sends of the start and done events.

<div style="width: 100px; height: 100px"
        [@divState]="state"
        (@divState.start)="logAnimation($event)"
        (@divState.done)="logAnimation($event)">
</div>

The callbacks receive an AnimationEvent that contains useful properties such as fromState, toState and totalTime.

This, in a nutshell, is how animations work in Angular.

Which UI Frameworks you can use with Angular ?

ajay upreti — Sat, 31 Jul 2021 12:36:40 +0000

As we are aware, a framework is an important part of application development. AngularJS is one such framework which is gaining popularity for its potential to simplify application development. AngularJS is a MVW JavaScript framework maintained by Google and a community of enthusiastic developers.

Overview of Commonly Used UI Frameworks for AngularJS-

UI Bootstrap:

As its name indicates, UI Bootstrap is a collection of Bootstrap components written in AngularJS. The web developers can use the repository of components with dependencies like AngularJS, Bootstrap CSS, Angular-animate, and Angular-touch. As the directives included in the repository have external markup, the developers have the option to use the markup as templates. They can further make changes to the external markup to create custom templates according to their specific requirements. Also, they are required to use the code of required directives, as each directive has its own AngularJS module.

Videogular

Videogular is an HTML5 video application framework for AngularJS web applications and websites. It offers a bindable application programming interface (API). It works for both desktop and mobile devices.

Angular Foundation

Angular Foundation is built on a modern, responsive front-end framework named Foundation. The framework offers several directives based on Foundation’s markup and CSS components. Some of them include, accordion, alert, dropdown, interchange, trigger, pagination, popover and progress bar.

Protractor

The protractor is a Node.js testing framework for AngularJS applications. In Protractor, a browser is controlled using the JSON Webdriver Wire Protocol, which performs actions like finding and interacting with DOM elements in an asynchronous manner. Hence, it allows running tests against an application running in a real browser just like a user would natively do.

Suave:

The framework is designed specifically to facilitate web application development with AngularJS. The users can take advantage of the CSS definitions, directives and services provided by Suave to build a variety of web-based user interfaces rapidly. The UI components provided by Suave are already included in bundle-files. So the users are not required to include the components separately. They can simply use a command to include Suave UI in their project through Bower.

QuantumUI:

The CSS based UI components provided by QuantumUI are developed over AngularJS. Each of these components is the further server and rest service friendly. The users also have the option to customize the UI components provided by QuantumUI according to their specific needs. However, some of these components provided by Quantum UI are open source, while others are commercial. The developers can easily download the open source UI components for QuantumUI from GitHub.

Ionic

Ionic is a powerful front-end framework optimized for AngularJS for developing mobile applications. The framework uses AngularJS directives to support mobile components, tools and gestures made up of HTML5 and CSS3, thus offering rich user interfaces (UIs). Built with SAAS, Ionic offers a free and open-source software development kit (SDK) as well as a library of UI components for designing interactive, hybrid applications for touch devices.

Mobile Angular UI

Mobile Angular UI is a user interface (UI) framework for designing HTML5 mobile applications. It is optimized for AngularJS and Bootstrap and supports powerful libraries like fastclick.js and overthrow.js. The framework offers essential mobile components, such as sidebars, overlays, switches, scrollable areas and more. With Mobile Angular UI, you can design a responsive, mobile user-interface as well as convert desktop web applications to mobile applications.

Angular UI Tree:

The AngularJS UI component enables web developers to sort and move items through a nested list or tree seamlessly. As Angular UI Tree supports drag-and-drop functionality, it becomes easier for users to manipulate the items in a nested list or tree. Also, they have option to prevent specific elements from accepting child nodes, along with using native AngularJS scope for data binding. However, Angular UI Tree lacks many features provided by other AngularJS based UI frameworks.

Angular UI Grid:

The framework is available as part of AngularUI suite. It is designed as a data grid for AngularJS applications. The web developers can use Angular UI Grid to perform and manipulate large datasets. At the same time, they can take advantage of the plug-in architecture of the framework to use only the features required by their project. They also have the option to use a variety of customizable templates, and customize the templates simply by making changes to the CSS. At the same time, they can further avail features like sorting, filtering, grouping, column pinning, and virtualization.

Semantic UI:

The development framework enables developers to create responsive and beautiful layout by writing readable code with HTML. Semantic UI allows programmers to treat classes and words as interchangeable concepts. Also, the users have the option to trigger functionality using simple phrases called as behaviors. They can even take advantage of the performance logging feature of Semantic UI to identify and eliminate the bottlenecks in their code without assessing the stack traces thoroughly.

LumX:

LumX is a fully-responsive front-end framework based on Google material design guidelines and optimized for AngularJS. Lumx is built with SAAS, Neat and Bourbon providing customizable application design for smooth functionality and cool features.

AngularJS is a relatively new technology improving every day. A lot of AngularJS frameworks will be developed and made available in the near future. Till then, you can choose any framework from this list depending upon your project requirements.

AngularJS : Requesting JSON data with AJAX

ajay upreti — Sat, 31 Jul 2021 12:32:19 +0000

In AngularJS you can send AJAX requests in several different ways. These are:

AJAX calls via the $http service.
JSONP calls via the $http service.
REST type calls.

JSON Data

There are plenty of ways to implement data into your Angular services — some open source and others not so much. For the sake of simplicity, this tutorial will use static JSON files. Here is an example of some mock user data you might want to include in your app:

[
    { “name”: “Ankit”, “age” : “26”, “color” : “blue” },
    { “name”: “Sushant”, “age” : “45”, “color”: “black” },
    { “name”: “John”, “age” : “35”, “color”: “brown” }
]

Custom Angular Services and $HTTP

The $http service has several functions you can use to send AJAX requests. These are:

$http.get(url, config)
$http.post(url, data, config)
$http.put(url, data, config)
$http.delete(url, config)
$http.head(url, config)

(function() {

    var app = angular.module(‘modusDemo’);
    app.service(‘userService’, function($http) {
        this.getUsers =function() {
            return $http.get(‘userData.json’);
        }
    })
})();

As you can see, app.service takes two parameters: a name so we can reference it in our controller, and a function that contains the code our service executes.

$http is a core angular service, meaning it comes with Angular right out of the box; there’s no need to define what it does beforehand. According to AngularJS’ own docs, $http facilitates communication with remote HTTP servers via the XMLHttpRequest object. In short, if you pass $http a URL or local file with the proper response method (in our case GET) it will return data from that location.

Linking to Your Controller and HTML

Now that we have our service, we need to use it. As previously mentioned, our service is now usable throughout our project and we can include it in our controller file. In the same way, we included $http in our service, we can include our service in our controller by passing it as an argument. Take a look at the controller setup below:

(function() {
    var app = angular.module(‘modusDemo’);
    app.controller(‘todoCtrl’, function(userService) {

        var vm = this;
        userService.getUsers().then(function(res){
            console.log(res.data);
            vm.userData = res.data;
        });
    });
})();

With userService plugged in as an argument, we can now use its methods directly in our controller. After calling the service, it will return data, in this case, our JSON file, and store it in vm.userData. After that, it’s as simple as including the controller in your HTML view and using vm.userData to display our data via ng-repeat. That code looks like this:

<body ng-app=”modusDemo” ng-controller=”todoCtrl as user”>
    <h1>Users</h1>
    <div ng-repeat=”users in user.userData”>
        {{users.name}} 
    </div>
</body>

And there you have it; using Angular’s existing core functionality we implemented one of Angular’s core services, created our own service, called that service in our controller, and then instantiated the data into our HTML; all while never worrying about writing an API or storing our information to a database. Angular has a lot of awesome services, and using custom services to mock data is only scratching the surface of what they can really do.

How to use Push Notifications in Angular ?

ajay upreti — Sat, 31 Jul 2021 12:23:09 +0000

In this post, we are going to go through a complete example of how to implement Web Push Notifications in an Angular Application using the Angular Service Worker.

Note that these are the exact same native notifications that we receive for example on our mobile phones home screen or desktop, but they are triggered via a web application instead of a native app.

These notifications can even be displayed to the user if all application tabs are closed, thanks to Service Workers! When well used, Push notifications are a great way of having our users re-engage with our application.

This is a step-by-step tutorial, so I invite you to code along as we implement Push Notifications in an existing application.

We will also learn along the way how Push Notifications work in general, as we follow and explain the complete flow that a given notification follows.

The Angular PWA series
Note that this post is part of the Angular PWA Series, here is the complete series:

Service Workers - Practical Guided Introduction (several examples)
Angular App Shell - Boosting Application Startup Performance
Angular Service Worker - Step-By-Step Guide for turning your Application into a PWA
Angular Push Notifications - Step-by-Step Guide

In this post, we will cover the following topics:

How do Push Notifications work?
Browser Push Service Providers
What is a VAPID key pair?
generating a VAPID key pair using node webpush
Subscribing to Push Notifications
showing again the Allow/Deny Notifications popup
Understanding the PushSubscription object and its properties
How to use the Push Subscription?
Sending Push Notifications from a Node backend
Push Notifications In Action - Demo
Source Code + Github Running Example (complete Angular PWA) So without further ado, let's get started learning how to handle Push Notifications with the Angular Service Worker.

Introduction to Push Notifications

What we know as Web Push Notifications are actually based on two separate browser standards:

Push API - this is an API that allows messages to be pushed from a server to a browser (even when the site isn't focused or the browser is closed)

Notifications API: displays native system notifications to the user

The Push API is what allows the message to be pushed from a server to the browser, and the Notifications API is what allows the message to be displayed, once it gets to the browser.

But notice that we can't push notifications from our server directly to the user's browser. Instead, only certain servers that browser development companies (like Google, Mozilla, etc.) specifically choose will be able to push notifications to a given browser.

These servers are known as a Browser Push Service. Note that for example, the Push Service used by Chrome is different than the one used by Firefox, and each Push Service is under control of the corresponding browser company.

Browser Push Service Providers

As we sometimes see online, Push Notifications can be very disruptive to the user, and browser implementers want to ensure that browser users have a good online experience at all times.

This means that browser providers want to be able to block out certain notifications from being displayed to the user, for example if the notifications are too frequent.

The way that browsers like Chrome or Firefox ensure that Push messages don't cause user experience issues is to funnel all push messages over servers under their control.

For example, in the case of the Chrome browser, all Push messages come to the browser via the Firebase Cloud Messaging service and NOT directly from our application server.

Firebase Cloud Messaging acts in this case as the Chrome Browser Push Service. The Push Service that each browser uses cannot be changed, and is determined by the browser provider.

In order to be able to deliver a message to a given user and only to that user, the Push Service identifies the user in an anonymous way, ensuring the user privacy. Also, the Push Service does not know the content of the messages, as they are encrypted.

Let's then go through the whole lifecycle of a particular message, to understand in detail how everything works. We will start by uniquely identifying our server, and learn why that's important.

Why identify our server as a Push source?

The first thing that we should do is to uniquely identify our server to the several Browser Push Services available.

Each Push Service will analyze the behavioral patterns of the messages being sent in order to avoid disruptive experiences, so identifying our server and using the push messages correctly over time will increase our odds that the Push Service will deliver our messages in a timely manner.

We will then start by uniquely identifying our Application server using a VAPID key pair.

What is a VAPID key pair?
VAPID stands for Voluntary Application Server Identification for Web Push protocol. A VAPID key pair is a cryptographic public/private key pair that is used in the following way:

the public key is used as a unique server identifier for subscribing the user to notifications sent by that server
the private key needs to be kept secret (unlike the public key) and its used by the application server to sign messages, before sending them to the Push Service for delivery.

Generating a VAPID key pair using node web-push

Let's start by generating a VAPID key using the node webpush library. We will first install the webpush library globally, as a command line tool:



npm install web-push -g

We can then generate a VAPID key pair with the following command:



web-push generate-vapid-keys --json

Using this command, here is what a VAPID key pair looks like:



{
  "publicKey":"BLBx-hf2WrL2qEa0qKb-aCJbcxEvyn62GDTyyP9KTS5K7ZL0K7TfmOKSPqp8vQF0DaG8hpSBknz_x3qf5F4iEFo",
  "privateKey":"PkVHOUKgY29NM7myQXXoGbp_bH_9j-cxW5cO-fGcSsA"
}

Subscribing to Push Notifications

The first thing that we will need is the Angular Service Worker, and for that here is a guide for how to add it to an existing Angular application.

Once we have the Angular Service Worker installed, we can now request the user permission for sending Push Notifications:



@Component({
    selector: 'app-root',
    template: `
        <button class="button button-primary" (click)="subscribeToNotifications()">
          Subscribe
        </button>
`})
export class AppComponent {

    readonly VAPID_PUBLIC_KEY = "BLBx-hf2WrL2qEa0qKb-aCJbcxEvyn62GDTyyP9KTS5K7ZL0K7TfmOKSPqp8vQF0DaG8hpSBknz_x3qf5F4iEFo";

    constructor(
        private swPush: SwPush,
        private newsletterService: NewsletterService) {}

    subscribeToNotifications() {

        this.swPush.requestSubscription({
            serverPublicKey: this.VAPID_PUBLIC_KEY
        })
        .then(sub => this.newsletterService.addPushSubscriber(sub).subscribe())
        .catch(err => console.error("Could not subscribe to notifications", err));
    }
}

Let's break down what is going on in this code sample:

the user clicks on the Subscribe button and the subscribeToNotifications() method gets executed
using the swPush service, we are going to ask the user if he allows our server (identified by the VAPID public key) to send him Web Push messages
the requestSubscription() method returns a Promise which emits the push subscription object, in case the user allows notifications
The user is then going to see a browser popup asking him to allow or deny the request:
Push Notifications Popup

if the user accepts the request, the Promise returned by requestSubscription() is going to be evaluated successfully, and a push subscription object is going to be passed to .then()

Showing again the Allow/Deny Notifications Popup

While testing this on localhost, you might accidentally hit the wrong button in the popup. The next time that you click subscribe, the popup will not be displayed.

Instead, the Promise is going to be rejected and the catch block in our code sample above is going to be triggered.

Here is what we need to do in order to have the popup displayed again:

go to chrome://settings/content/notifications
scroll down the Block list, containing all the websites that are blocked from emitting push notifications
delete localhost from the Block list
Click the Subscribe button again
The popup should now appear again, and if we click on the Allow option, a Push Subscription object will be generated.

The PushSubscription object
Here is what the push subscription object looks like, as we receive it in the then() clause:



{
  "endpoint": "https://fcm.googleapis.com/fcm/send/cbx2QC6AGbY:APA91bEjTzUxaBU7j-YN7ReiXV-MD-bmk2pGsp9ZVq4Jj0yuBOhFRrUS9pjz5FMnIvUenVqNpALTh5Hng7HRQpcUNQMFblTLTF7aw-yu1dGqhBOJ-U3IBfnw3hz9hq-TJ4K5f9fHLvjY",
  "expirationTime": null,
  "keys": {
    "p256dh": "BOXYnlKnMkzlMc6xlIjD8OmqVh-YqswZdut2M7zoAspl1UkFeQgSLYZ7eKqKcx6xMsGK7aAguQbcG9FMmlDrDIA=",
    "auth": "if-YFywyb4g-bFB1hO9WMw=="
  }
}

view raw03.ts hosted with ❤ by GitHub
Let's now break down the content of the subscription object, as that will help us to understand better how Push Notifications work in general:

endpoint: This contains a unique URL to a Firebase Cloud Messaging endpoint. This url is a public but unguessable endpoint to the Browser Push Service used by the application server to send push notifications to this subscription
expirationTime: some messages are time sensitive and don't need to be sent if a certain time interval has passed. This is useful in certain cases, for example, if a message might contain an authentication code that expires after 1 minute
p256dh: this is an encryption key that our server will use to encrypt the message, before sending it to the Push Service
auth: this is an authentication secret, which is one of the inputs of the message content encryption process All the information present in the subscription object is necessary to be able to send push notifications to this user.

Create a react app

ajay upreti — Mon, 19 Jul 2021 18:16:06 +0000

React is a user interface framework developed by Facebook. It has a quickly growing developer adoption rate and was ranked as the most loved language or technology in the 2017 StackOverflow developer survey. This article will walk you through setting up your first React app and assumes you are familiar with text editors and command line navigation. We will be using the Node package manager (npm), so you will need to have Node installed.

1. SET UP THE BOILERPLATE APPLICATION

It is possible to manually create a React app, but Facebook has created a node module create-react-app to generate a boilerplate version of a React application.

Besides providing something that works out-of-the-box, this has the added benefit of providing a consistent structure for React apps that you will recognize as you move between React projects. It also provides an out-of-the-box build script and development server.

We will use npm to install the create-react-app command line interface (CLI) globally (-g).

Open up your terminal and run npm install -g create-react-app:

Now that you have the CLI available for use, navigate to the parent directory that you would like to place the application within. Then, run create-react-app with the name you would like to use for your project (just no capital letters :-) ).

create-react-app <name-of-app>

Upon completion, you will get some quick tips on how to use the application:

Before we run the app, lets take a look around the app structure and see what it contains.

2. REACT APP STRUCTURE

Change directories into the app you just created. If you list the contents of the directory including hidden files (ls -la), you should see the following structure:

create-react-app has taken care of setting up the main structure of the application as well as a couple of developer settings. Most of what you see will not be visible to the visitor of your web app. React uses a tool called webpack which transforms the directories and files here into static assets. Visitors to your site are served those static assets.

.gitignore

This is the standard file used by the source control tool git to determine which files and directories to ignore when committing code. While this file exists, create-react-app did not create a git repo within this folder. If you take a look at the file, it has taken care of ignoring a number of items (even .DS_Store for Mac users):

package.json

This file outlines all the settings for the React app.

name is the name of your app
version is the current version
"private": true is a failsafe setting to avoid accidentally publishing your app as a public package within the npm ecosystem.
dependencies contains all the required node modules and versions required for the application. Here, it contains two dependencies, which allow us to use react and react-dom in our JavaScript. In the screenshot above, the react version specified is ^15.5.4. This means that npm will install the most recent major version matching 15.x.x. In contrast, you may also see something like ~1.2.3 in package.json, which will only install the most recent minor version matching 1.2.x.
devDependencies contains useful node modules and versions for using the React app in a development environment. Here, it contains one dependency, react-scripts, which provides a set of useful development scripts for working with React.
scripts specifies aliases that you can use to access some of the react-scripts commands in a more efficient manner. For example running npm test in your command line will run react-scripts test --env=jsdom behind the scenes.

node_modules

This directory contains dependencies and sub-dependencies of packages used by the current React app, as specified by package.json. If you take a look, you may be surprised by how many there are.

Running ls -1 | wc -l within the node_modules/ directory will yield more than 800 subfolders. This folder is automatically added to the .gitignore for good reason! Don’t worry, even with all these dependencies, the basic app will only be around 50 KB after being minified and compressed for production.

package-lock.json

This file contains the exact dependency tree installed in node_modules/. This provides a way for teams working on private apps to ensure that they have the same version of dependencies and sub-dependencies. It also contains a history of changes to package.json, so you can quickly look back at dependency changes.

public

This directory contains assets that will be served directly without additional processing by web pack. index.html provides the entry point for the web app. You will also see a favicon (header icon) and a manifest.json.

The manifest file configures how your web app will behave if it is added to an Android user’s home screen (Android users can “shortcut” web apps and load them directly from the Android UI). You can read more about it here.

src

This contains the JavaScript that will be processed by webpack and is the heart of the React app. Browsing this folder, you see the main App JavaScript component (App.js), its associated styles (App.css), and test suite (App.test.js). index.js and its styles (index.css) provide an entry into the App and also kicks off the registerServiceWorker.js. This service worker takes care of caching and updating files for the end-user. It allows for offline capability and faster page loads after the initial visit. More on this methodology is available here (https://goo.gl/KwvDNy).

As your React app grows, it is common to add a components/ directory to organize components and component-related files and a views directory to organize React views and view-related files.

3. STARTING THE REACT APP DEVELOPMENT SERVER

As was stated in the success message when you ran create-react-app, you just need to run npm start in your app directory to begin serving the development server. It should auto-open a tab in your browser that points to http://localhost:3000/ (if not, manually visit that address). You will be greeted with the React welcome banner:

As stated, any changes to the source code will live-update here. Let’s see that in action.

Leave the current terminal tab running (it’s busy serving the React app) and open src/App.js in your favorite text editor. You’ll see what looks like a mashup of JavaScript and HTML. This is JSX, which is how React adds XML syntax to JavaScript. It provides an intuitive way to build React components and is compiled to JavaScript at runtime. We’ll delve deeper into this in other content, but for now, let’s make a simple edit and see the update in the browser.

Change the main paragraph text to read: Hello Codecademy! in App.js and save the file.

If you left the terminal running, you should be able to switch over to your browser and see the update:

Congratulations! You’re now up and running with React. You can clean up any unnecessary files and begin adding functionality for your application.

How to Squash 3 commits into 1?

ajay upreti — Mon, 19 Jul 2021 18:12:38 +0000

Do git log and see the commits you want to squash is commited first.

if you want squash top 3 commits from your head,
Use this command,

git rebase -i HEAD~3

Here the tilde ~ symbol with 3 pick the top latest three commits and it will pop up in an interactive shell where you can select the top commit and squash other two commits into one by entering s, it means squash.

If your commit is not appearing then do git log and see, if not then

git add files
git commit -m 'your commit'