Engineering Poll: Bundles and Loaders

[dmceachernmsft]

Unlocking Cross platform

Currently in the UI library we primarily support our Composites for the different Azure Communication Services scenarios in React. We are looking for feedback on other ways that our customers are wanting to use us. We currently have 3 ways you can use us today for the composites depending on your scenario

• Natively in react
• Typescript loader functions
• Github CDN / download

Natively in React

If you have used us before you are probably familiar with this option, using our react components and composites in your react application is as easy as using any components you have written yourself. Check out the docs if you are unfamiliar with us and are interested in getting started!

Typescript Loader Functions

This is a new way to use us, we are including in private preview today Typescript functions that you can use in your Angular application (or other framework) to load us into your application. These loader functions will load in the different composites in by mounting a react node to your application. We are currently including in private preview on our API the following 4 functions:

// @beta
export const loadCallComposite: (adapterArgs: CallCompositeLoaderProps, htmlElement: HTMLElement | null, props?: CallCompositeOptions) => Promise<CallAdapter | undefined>;
// @beta
export const loadCallWithChatComposite: (args: CallWithChatCompositeLoaderProps, htmlElement: HTMLElement | null, props: CallWithChatCompositeOptions) => Promise<CallWithChatAdapter | undefined>;
// @beta
export const loadChatComposite: (args: ChatCompositeLoaderProps, htmlElement: HTMLElement | null, props: ChatCompositeOptions) => Promise<ChatAdapter | undefined>;
// @beta
export const loadOutboundCallComposite: (adapterArgs: OutboundCallCompositeLoaderProps, htmlElement: HTMLElement | null, props?: CallCompositeOptions) => Promise<CallAdapter | undefined>;

The following snippet is how you would lazy load into your Angular component the CallComposite configured for a group call.

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

@Component({
  selector: 'app-calling',
  standalone: true,
  templateUrl: './calling.component.html',
  styleUrls: ['./calling.component.css'],
})
export class CallingComponent {
  userId = '<ACS User Id>';
  token = '<ACS Token>';
  displayName = 'User';
  groupId = '<GUID for call>';
  adapter: any;

  async loadCalling(): Promise<void> {
    import('@azure/communication-react').then(async (communicationreact) => {
      this.adapter = await communicationreact
        .loadCallComposite(
          {
            userId: this.userId,
            token: this.token,
            displayName: this.displayName,
            locator: { groupId: this.groupId  },
          },
          document.getElementById('call-composite-container'),
          {
            surveyOptions: {
              disableSurvey: true, // disable survey
            },
            callControls: {
              displayType: 'compact',
            },
          }
        )
        .then((adapter) => {
          if (adapter) {
            adapter.on('callEnded', () => {
              console.log('Call ended');
            });
          }
        });
    });
  }

  ngOnDestroy(): void {
    if (this.adapter) {
      this.adapter.dispose();
    }
  }
}

If you're wanting to try us out in this way please do!

Github Releases CDN/Download

We also have as part of our release pipeline a set of JavaScript bundles that mirror the functionality of the Typescript loaders. These files can either be consumed by hitting the download link like a CDN but this is not recommended in production.

This method of consumption does not allow for lazy loading and will be pulled into your repo the moment it is called and wont be cleaned up by garbage collection like the other two methods. Check out the docs on how you can use this today.

Please let us know in the Poll how you would like to use us, and if one of the three options that we talked about here doesn't quite fit your scenario please let us know by leaving a comment! We would love to hear the different projects you all are building with us and how we can better support you and how we deliver our content to you!