Skip to main content

How Microsoft is using GraphQL in their new Teams architecture

Microsoft has made a significant investment in the re-architecture of its Microsoft teams desktop client, which is available in preview at the moment of writing this post.

Although there are a lot of great improvements in the new Teams I want to focus on the new technical architecture which they shared in this post: Microsoft Teams: Advantages of the new architecture.

What I found really interesting is how they brought GraphQL into the mix:

If you look at the schema above, notice the Client Data Layer on the right. This layer is hosted inside a Web Worker and used to overcome the single-threaded nature of JavaScript. It enables functionality like data fetch, data storage, push notifications, and offline functionality(through Index DB) and all this running on parallel threads.

The Teams window(using WebView2) is abstracted from the client data layer through GraphQL. I think this is a use case where I wouldn’t have thought about this technology myself but it is a great example of the versatility and power of this technology.


Popular posts from this blog

XUnit - Assert.Collection

A colleague asked me to take a look at the following code inside a test project: My first guess would be that this code checks that the specified condition(the contains) is true for every element in the list.  This turns out not to be the case. The Assert.Collection expects a list of element inspectors, one for every item in the list. The first inspector is used to check the first item, the second inspector the second item and so on. The number of inspectors should match the number of elements in the list. An example: The behavior I expected could be achieved using the Assert.All method:

Azure DevOps/ GitHub emoji

I’m really bad at remembering emoji’s. So here is cheat sheet with all emoji’s that can be used in tools that support the github emoji markdown markup: All credits go to rcaviers who created this list.

Angular --deploy-url and --base-href

As long you are running your Angular application at a root URL (e.g. ) you don’t need to worry that much about either the ‘--deploy-url’ and ‘--base-href’ parameters. But once you want to serve your Angular application from a server sub folder(e.g. ) these parameters become important. --base-href If you deploy your Angular app to a subfolder, the ‘--base-href’ is important to generate the correct routes. This parameter will update the <base href> tag inside the index.html. For example, if the index.html is on the server at /angularapp/index.html , the base href should be set to <base href="/angularapp/"> . More information: --deploy-url A second parameter that is important is ‘--deploy-url’. This parameter will update the generated url’s for our assets(scripts, css) inside the index.html. To make your assets available at /angularapp/, the deploy url should