ScottishSummit24 - Level up your teams extensibility game with Blazor! - Antti Koskela

🚀 Join this exciting session on creating dynamic and engaging Teams apps using the powerful Blazor web framework. Whether you’re a seasoned developer or just dipping your toes into the world of Teams app development, this session will equip you with new knowledge and tools for the craft – hopefully with a new twist!

In this demo-heavy session, we’ll explore how to create, debug, and deploy your own Blazor-based Teams apps. All without writing a single line of JavaScript!

Get ready to elevate your collaboration game and enhance productivity within Microsoft Teams! 🔥

Who is this session for?
💻 Developers: Whether you’re a .NET enthusiast or a (recovering) web developer, you’ll get something out of this session.
🤿 Blazor-Curious: If you’ve been eyeing Blazor but haven’t taken the plunge just yet, dive in!
📱 Teams App Enthusiasts: If you’re passionate about improving Teams functionality, consider this your opportunity to level up! Or to take a side-step, perhaps — because sometimes that’s what keeps things interesting, right?

Key Takeaways:
🌐 Blazor Unleashed: Discover how Blazor seamlessly integrates with Teams, allowing you to build interactive web UIs using C#.
📑 Creating Your First App: Learn how to set up a Blazor Teams app.
🕵️‍♂️ Debugging Like a Pro: Master the art of debugging your Blazor tab app within Visual Studio. Say goodbye to JavaScript-induced headaches!
☁️ Deployment Made Easy: Explore deployment options, from local testing to Azure cloud hosting.

1. #ScottishSummit2024
Level Up Your
Teams
Extensibility Game
with Blazor!

2. #ScottishSummit2024
Thank Youto our Sponsors…
Platinum Sponsor
Gold Sponsors

3. #ScottishSummit2024
Thank You to our Sponsors…
With Thanks

4. #ScottishSummit2024
Hi, I’m Antti
•Coding for cookies (and occasionally
cash) since 2004
•Microsoft MVP for Azure and M365
•Live in Finland
•Might be opinionated about tech
https://www.linkedin.com/in/koskila/
https://www.koskila.net
https://x.com/koskila
https://github.com/koskila

5. #ScottishSummit2024
My Journey Here

6. #ScottishSummit2024
My Journey Here

7. #ScottishSummit2024
My Journey Here

8. #ScottishSummit2024
My Journey Here

9. #ScottishSummit2024
Level Up Your
Teams
Extensibility Game
with Blazor!

10. #ScottishSummit2024
Agenda
At the end of this session you:
•Know a bit about Teams Extensibility (5 min)
•Know the basics about Blazor (10 min)
•Have seen a demo ☺ (15 min)
•Are aware of some pitfalls (10 min)

11. #ScottishSummit2024
How about you – Show of hands!
•Are you:
•Familiar with Teams extensions?
•Familiar with Blazor?
•A GitHub Copilot user?

12. #ScottishSummit2024 12
#ScottishSummit2024
Teams Extensibility

13. #ScottishSummit2024
Teams Extensibility: The Microsoft overview
M icrosoft Tea ms a pp ca pa bilities for ta b.
M icrosoft Tea ms a pp ca pa bilities for bot.
M icrosoft Tea ms a pp ca pa bilities for messa g e extension.
M icrosoft Tea ms a pp ca pa bilities for a da ptiv e ca rds.
M icrosoft Tea ms a pp ca pa bilities for meeting s.
M icrosoft Tea ms a pp ca pa bilities for webhook s a nd connectors.
M icrosoft Tea ms a pp ca pa bilities for g ra ph conv ersa tiona l interfa ce.

14. #ScottishSummit2024
Teams Extensibility: Simplified
•Basically 4 UI surfaces:
•Activity Feed
•Message Extension
•Bot
•Tab

15. #ScottishSummit2024
Teams Extensibility: Simplified

16. #ScottishSummit2024
Teams Extensibility
•TeamsFX
•Teams Toolkit

17. #ScottishSummit2024 17
#ScottishSummit2024
Blazor?

18. #ScottishSummit2024
Blazor?
•What’s with the name?

19. #ScottishSummit2024
Blazor?
•A web framework
•Part of the ASP.NET Core suite
•C# for both client-side and server-side logic
“Component-based architecture, state management,
and seamless integration with .NET libraries make it a
robust choice for modern web development”

20. #ScottishSummit2024
Brief history of Blazor
2024-
2021
2020
2019
2017
Announced
First as a tech
demo at NDC
Oslo
Officially
launched
As part of .NET
Core 3.0 (Blazor
Server)
Blazor WASM
Reached GA with
.NET Core 3.1.3
Blazor Hybrid
Released in .NET
6. MAUI takes
Blazor to mobile
platforms
Ongoing
work
Blazor United

21. #ScottishSummit2024
Blazor?
•Uses component model from Razor
Pages
•Build once, run anywhere

22. #ScottishSummit2024
Blazor
•Comes in 2 basic flavors:
•Blazor Server
•Runs server-side, uses SignalR for interactivity
•Blazor WASM (WebAssembly)
•Runs completely in the browser (SWA)
•+ Blazor United & Blazor Hybrid...

23. #ScottishSummit2024
What you get out-of-the-box?
•FluentUI (provided by Microsoft, but it is a separate
nuget package)

24. #ScottishSummit2024
Vendors
•Telerik
•DevExpress
•Syncfusion
•Infragistics
•GrapeCity
•jQWidgets
•... and more!

25. #ScottishSummit2024
Open Source efforts
•Radzen - A free and open-source Blazor component library
•MudBlazor - A popular open-source Blazor component library focused
on Material Design
•MatBlazor - Another open-source library for Material Design components
[Obsolete]
•Blazorise - A versatile Blazor component library that supports multiple
CSS frameworks
•Blazored - Offers a variety of Blazor components for common UI
elements
•PureBlazor - Focuses on accessibility, performance, and customization
with TailwindCSS

26. #ScottishSummit2024 27
#ScottishSummit2024
Why Blazor?

27. #ScottishSummit2024
Why Blazor?
•Get stuff done, fast
•Great* Teams tooling
•I dislike JavaScript
•Because Blazor is shiny.

28. #ScottishSummit2024 29
#ScottishSummit2024
How?

29. #ScottishSummit2024
Demo time
Running and debugging a
basic Teams tab

30. #ScottishSummit2024 31
#ScottishSummit2024
Deployment

31. #ScottishSummit2024
ClickOps
•Super easy to right-click publish!
•You should probably not use it

32. #ScottishSummit2024
GitHub Actions
•GitHub Actions is easy too
•It’s “just a website”
•“Build and deploy ASP.Net Core app to Azure Web App”

33. #ScottishSummit2024 34
#ScottishSummit2024
Learnings

34. #ScottishSummit2024
AAD config can be complex
•For dev environment
(where you have Global
Admin) -> easy
•For production (without
having a friendly Global
Admin) -> painful

35. #ScottishSummit2024
Hot Reload feels like magic (when it works)

36. #ScottishSummit2024
Graph Client (“SDK”) still kinda sucks
•Cumbersome classes that change between versions
•Auto-generated “RequestBuilder” approach is dubious
•Kiota is technically impressive, but a really lazy approach for
an SDK...
•GitHub Copilot doesn’t understand the SDK either
•Mismatch between models and versions of v1.0 and beta
(different packages)
•Graph Explorer is your best friend (because the SDK is not!)

37. #ScottishSummit2024
Graph Client (“SDK”) still kinda sucks

38. #ScottishSummit2024
Graph Client (“SDK”) still kinda sucks

39. #ScottishSummit2024
Graph Client (“SDK”) still kinda sucks

40. #ScottishSummit2024
But occasionally it works and is easy

41. #ScottishSummit2024
Dependencies can still be messy
•Don’t update “just in case”
•Microsoft.Graph and Microsoft.Graph.Beta are not in sync
•There’s at least 2 FluentUI nuget packages
•The one that came with the template didn’t have symbols for
IntelliSense...

42. #ScottishSummit2024
GitHub Copilot is incredibly hit-or-miss
•Blazor support doesn’t always work
•Graph SDK support is awful
•Razor support is great
•“Generic” .NET support is great
•“Chatting” with it slow....

43. #ScottishSummit2024
Repackaging per-tenant is still cumbersome
•Publishing a dev –version to tenant where you’re not an
admin -> some manual work
•.csproj for Teams packaging independent of the Blazor
project

44. #ScottishSummit2024
Insufferable IntelliSense

45. #ScottishSummit2024
Testing anything within Teams kinda sucks

46. #ScottishSummit2024
Microsoft Dev Home & Dev Drive
•“Dev Home” is a joke
•“Dev Drive” of questionable value

47. #ScottishSummit2024
Azure Key Vault
•DefaultCredential is great, but...
•Times out every 30 days or so AND randomly
•Tools > Options > Azure Service Authentication > Account
Selection > Re-enter your credentials

48. #ScottishSummit2024 49
#ScottishSummit2024
Key takeaways

49. #ScottishSummit2024
Blazor Unleashed!
•Blazor – stable and highly productive,
but lets you do horrible stuff
•Graph SDK –still feels unfinished (but
Graph is great!)
•Tooling – unstable, great when works
•Extending Teams – pretty easy (but you
need an admin friend for Entra)
•GitHub Copilot – productive, but
unreliable (and chatting is slow)

50. #ScottishSummit2024
Demo recap
•Creating Your First App
•Debugging Like a Pro
•Development and Hot Reload

51. #ScottishSummit2024
Deployment
•Teams Toolkit
•GitHub Actions

52. #ScottishSummit2024 53
#ScottishSummit2024
Finally

53. #ScottishSummit2024 54 54#ScottishSummit2024
FeedBack
•Give feedback in the app!
•Materials also on my
website:
Community Rocks!

54. #ScottishSummit2024
Thank you!