Recommendations for a performing typescript web app

[frederikhors]

I take the liberty of opening this issue here too because perhaps you have already faced this problem and you could show me the right way.

And I could also create a PR for future people.

I'm building for the first time a new app in Typescript designing it with Proto files.

I'm having doubts about which is the best strategy to manage the many service clients in this web app.

"Best" in terms of a good compromise between user's device RAM and Javascript execution speed (main thread ops).

This is what I'm doing right now, this is the main file:

• main.ts:

import { GrpcWebFetchTransport } from '@protobuf-ts/grpcweb-transport';

import { PlayerServiceClient } from './grpc/generated/player.client';
import { TeamServiceClient } from './proto/team.client';
import { RefereeServiceClient } from './proto/referee.client';
import { FriendServiceClient } from './proto/friend.client';
import { PrizeServiceClient } from './proto/prize.client';
import { WinnerServiceClient } from './proto/winner.client';
import { CalendarServiceClient } from './proto/calendar.client';

const transport = new GrpcWebFetchTransport({ baseUrl: 'http://localhost:3000/api' });

let playerService: PlayerServiceClient;
export const getPlayerService = (): PlayerServiceClient =>
	playerService || ((playerService = new PlayerServiceClient(transport)), playerService);

let teamService: TeamServiceClient;
export const getTeamService = (): TeamServiceClient =>
	teamService || ((teamService = new TeamServiceClient(transport)), teamService);

let refereeService: RefereeServiceClient;
export const getRefereeService = (): RefereeServiceClient =>
	refereeService || ((refereeService = new RefereeServiceClient(transport)), refereeService);

let friendService: FriendServiceClient;
export const getFriendService = (): FriendServiceClient =>
	friendService || ((friendService = new FriendServiceClient(transport)), friendService);

let prizeService: PrizeServiceClient;
export const getPrizeService = (): PrizeServiceClient =>
	prizeService || ((prizeService = new PrizeServiceClient(transport)), prizeService);

let winnerService: WinnerServiceClient;
export const getWinnerService = (): WinnerServiceClient =>
	winnerService || ((winnerService = new WinnerServiceClient(transport)), winnerService);

let calendarService: CalendarServiceClient;
export const getCalendarService = (): CalendarServiceClient =>
	calendarService || ((calendarService = new CalendarServiceClient(transport)), calendarService);

// and so on... a lot more...

As you can see there are many service clients.

I'm using this code because I thought it was better given my web app structure based on routes almost overlapping with client services:

I mean, if the player goes from /home to /players page I can use it like this:

import { getPlayerService } from 'main';

const players = async () => await getPlayerService().queryPlayers()

In this way, if the PlayerService does not exist, it is created at the moment and returned, otherwise it returns the one created before.

Since the user switches pages frequently this way I can avoid the sudden creation and destruction of those clients, right?

But in this way I am using global variables which I don't like to use.

What do you suggest me to do?

Is there a better way?

Can I refactor this code into only one class?

[bluskript]

How we use this tool in our project, we have a Connection class which contains instances of each service needed by the application. We don't use many services though, so we aren't really taking advantage of lazy loading them. Although if we wanted to lazy load them then I would just have getters for the services that import only once.

[frederikhors]

Thank you very much, @bluskript.

Although if we wanted to lazy load them then I would just have getters for the services that import only once.

An example, please?

[bluskript]

Here's a simple one that should work:

import type { AuthServiceClient } from "../protocol/auth/v1/auth";
import { HrpcTransport } from "./hrpcTransport";

export class Connection {
  host: string;
  private auth?: AuthServiceClient;
  private session?: string;
  private transport: HrpcTransport;

  constructor(host: string) {
    this.host = host;
    this.transport = new HrpcTransport({
      baseUrl: host,
    });
  }

  setSession(session: string) {
    this.session = session;
    this.transport.setSession(session);
  }

  getSession() {
    return this.session;
  }

  async getAuthClient() {
	if (!this.auth) {
      this.auth = new (await import("../protocol/auth/v1/auth")).AuthServiceClient(this.transport);
    }
	return this.auth;
  }
}

If the async getter gets too tiring for you, I would recommend having a loadAuthClient function instead that gets called before accessing auth

[timostamm]

The import() function is the way to go for lazy loading. See https://v8.dev/features/dynamic-import It depends on your framework where and how to use it properly.

Angular supports lazy loading on a module level, see https://angular.io/guide/lazy-loading-ngmodules

You would register the generated service in a module, like this:

protobuf-ts/packages/example-angular-app/src/app/app.module.ts

Lines 39 to 45 in 85a3c5b

	providers: [
	// Make this service available for dependency injection.
	// Now you can use it as a constructor argument of your component.
	ExampleServiceClient,
	HaberdasherClient,

And let angular inject the client into your component, like this:

protobuf-ts/packages/example-angular-app/src/app/twirp-angular/twirp-angular.component.ts

Lines 29 to 31 in 85a3c5b

	constructor(private readonly client: HaberdasherClient) {
	}

The example angular app does not use lazy loading (it does not even use routing).

This is just an example for how generated clients can be used. This is not a recommendation for angular, there are certainly much more simple frameworks out there.

[frederikhors]

Ok. Thanks for your ideas.

What do you think abtou the code below?

import { GrpcWebFetchTransport } from "@protobuf-ts/grpcweb-transport";

import type { PlayerServiceClient } from "./proto/player.client";
import type { TeamServiceClient } from "./proto/team.client";
import type { RefereeServiceClient } from "./proto/referee.client";

class Connection {
  private transport: GrpcWebFetchTransport;
  private playerService: PlayerServiceClient;
  private teamService: TeamServiceClient;
  private refereeService: RefereeServiceClient;

  constructor() {
    this.transport = new GrpcWebFetchTransport({
      baseUrl: "http://localhost:3000/api",
    });
  }

  get player(): PlayerServiceClient {
    if (!this.playerService) {
      import("./proto/player.client").then(
        (imported) =>
          (this.playerService = new imported.PlayerServiceClient(
            this.transport
          ))
      );
    }
    return this.playerService;
  }

  get team(): TeamServiceClient {
    if (!this.teamService) {
      import("./proto/team.client").then(
        (imported) =>
          (this.teamService = new imported.TeamServiceClient(this.transport))
      );
    }
    return this.teamService;
  }

  get referee(): RefereeServiceClient {
    if (!this.refereeService) {
      import("./proto/referee.client").then(
        (imported) =>
          (this.refereeService = new imported.RefereeServiceClient(
            this.transport
          ))
      );
    }
    return this.refereeService;
  }
}

export default new Grpc();

Not comfortable things:

1. As you can see there is a lot of code (all the same: DRY!) to write even using the class: is there a way to write less code using generics for example?

2. When I use this code in components it is ugly and time consuming to repeat this:

   import connection from "../../grpc"
   
   const players = connection.player.queryPlayers()

   Everytime I need to use connection.* in my code.

[bluskript]

Normal getters won't work here since import is asynchronous and you will run into a race condition since the promise isn't resolved.

[frederikhors]

Normal getters won't work here since import is asynchronous and you will run into a race condition since the promise isn't resolved.

Oh. Can you enlight me more, please? 🙏

[frederikhors]

Normal getters won't work here since import is asynchronous and you will run into a race condition since the promise isn't resolved.

Now I understand what you mean, @bluskript.

I would recommend having a loadAuthClient function instead that gets called before accessing auth

Do you mean it is called by the individual components, right?

Is there any way to make the class call it and not the components?

[frederikhors]

I opened https://stackoverflow.com/questions/67006908/how-to-refactor-by-eliminating-double-await-and-the-dry-code.

[frederikhors]

@Guerric-P answered my question: https://stackoverflow.com/a/67037262. His answer taught me a lot: thanks bro!

@timostamm, I think we need something like this (to be optionally generated).

He proposed to use:

import { GrpcWebFetchTransport } from '@protobuf-ts/grpcweb-transport';

const transport = new GrpcWebFetchTransport({ baseUrl: 'http://localhost:3000/api' });

const serviceMap = {};

export function getService(serviceName: string) {
  return serviceMap[serviceName] ?? (serviceMap[serviceName] = import(serviceName).then(x => new x.default));
}

which is great because I can use it like this:

import { getService } from './serviceFactory';

const service: IPlayerServiceClient = await getService('./proto/player.service');
const players = await service.queryPlayers();

and I can even use these for each service:

export const playerService: IPlayerServiceClient = getService('./proto/player.service');

calling it from components with:

import { playerService } from "./services/player"

const { response } = await (await playerService).queryPlayers();

but there is the new x.default() problem.

If with protobuf-ts v2 I have player.client.ts files, right?

Can we export default that only PlayerServiceClient class?