Download to read offline
Uploaded bySébastien Levert
SharePoint Saturday Utah 2018 - SharePoint Framework, Angular and Azure Functions
Sébastien Levert presented on using Angular, Azure Functions, and the SharePoint Framework together. He discussed how Azure Functions can be used to host APIs cheaply using various programming languages. He demonstrated a scenario using PowerShell and the Microsoft Graph to provision new SharePoint sites via an Azure Function. Levert also covered how Angular Elements allows generating web components from Angular that can be used in SharePoint Framework web parts, though the approach is still in preview. Resources and next steps were provided.
SharePoint Saturday Utah 2018 - SharePoint Framework, Angular and Azure Functions
- 1. SharePoint Framework,Angular &Azure Functions The modern SharePoint developer tool belt Sébastien Levert
- 2. Hi! I’m Seb! @sebastienlevert| http://sebastienlevert.com | Product Evangelist & Partner Manager at
- 3.
- 4.
- 5. Why Azure Functions? • Cheap way to host any API in Azure • You can use your favorite language (JS, C#, F#, PHP, PowerShell) • Perfect companion for any Single Page Application or any JavaScript component • Elevating permissions is now easy
- 6. Our scenario • Usingthe PnP PowerShell Cmdlets • Connecting to the Microsoft Graph and to an Azure AD Application • Creating a ModernTeam Site (in under 15 seconds) based on a set of parameters • Apply a PnP ProvisionningTemplate to the newly created group • Boom!
- 8.
- 9. Angular… But whichversion ? • Works well with Angular 1.6 – Still the recommended approach • Does not work with Angular 2 • Works with some hacks in Angular 4 • Works even better with Angular 5 (NgElement to the rescue!)
- 10. The Angular challenge •For a long time, it was simply not possible to have a viable solution • It was working… until it was not! • Managing multiple webparts on a page and multiple applications was simply impossible…
- 11. Web Components • WebComponents & Custom Elements are becoming a standard in a lot of browsers and polyfills exist for the other ones • Define a new DOM element that can be extended with custom JavaScript and acts like built-in elments
- 12.
- 13. Why not justWeb Components? • Web Components are complex to build • Lots of code to write • Speaking DOM is performant but a complex language…
- 14.
- 16. Introducing Angular Elements •Angular Elements is a project fromAngular Labs • Adds a new usage scenario of Angular to be a Developer tool to generate Web Components rather than a full-fledge SPA framework • Supports self-bootstrapping • Zones are optional (this is the key to the success of this approach) • Generating aWeb Component from an Angular Component
- 17.
- 18. The full scenario •Build a SharePoint Framework WebPart • Use Angular as our main Framework • Use Angular Material as our UI Framework • Use Azure Function as my backend provisioning API
- 19. And… Should Iuse it in production? • As of today, this approach is the only approach that works. • But it’s still in early preview for Angular Elements. Not production ready…Yet. • Use it to experiment, to learn the SharePoint Framework and Angular altogether.
- 20.
- 21. Resources • https://github.com/SharePoint/sp-dev-fx-angular • https://github.com/sebastienlevert/spfx-ng-webparts •https://material.angular.io • https://www.youtube.com/watch?v=Vkzr2TxHFLg&t=6s
- 22. Sharing is caring •Use hashtags to share your experience • #Angular • #Office365Dev • #MicrosoftGraph • #AzureFunctions • #SPFx • Log issues & questions to the GitHub Repositories
- 23. Thank you! @sebastienlevert |http://sebastienlevert.com | Product Evangelist & Partner Manager at