A suitable way to update a front-end from back-end processes is to use pubsub over WebSockets. In this video I'll show how to use Ably, a cloud based pubsub service, to visualize the progress of a serverless workflow implemented with Azure Functions and Durable Functions.

Blog post: https://ably.com/blog/visualize-azure-serverless-workflow-progress-in-realtime-with-pubsub
GitHub: https://github.com/ably-labs/serverless-workflow-visualizer
Discord: http://go.ably.com/discord

0:00 Intro

0:48 Demo

1:57 CodeTour

2:25 Components

2:58 Function apps and their functions

3:49 PizzaWorkflowOrchestrator

4:52 CollectOrder activity function

5:28 MessagingBase class

6:26 PizzaWorkflow type

6:54 Subscribing to the messages

7:18 Update the local Vue state

7:51 PizzaProcess Vue component

8:08 ProgressItem Vue component

8:48 GitHub repo & Discord

About Ably

Ably is an enterprise-grade pub/sub messaging platform. We make it easy to efficiently design, quickly ship, and seamlessly scale critical realtime functionality delivered directly to end-users. Every day, we deliver billions of realtime messages to millions of users for thousands of companies.

https://ably.com