Things are moving fast. Sometimes you might even feel that you own comfort zone is getting of control. But in a Mobile-First, Cloud-First world, things are changing to a crazy pace and to stay on the top of your game, you need keep up with the latest and greatest technologies that are available out there. By staying up to date, you will give to yourself new options that will let you be more productive, write better code and push you in a more open and more collaborative world. With the official shipment of Angular 2 and the current preview release of the SharePoint Framework, it is now the time to start moving towards those new technologies in your SharePoint Solutions. In this session, we will cover the modern tool belt of the SharePoint developer by covering the SharePoint Framework as the new surface to express yourself, Angular as a Framework to enable you to build complete applications within your SharePoint modern experiences and Azure Function as the perfect server-side companion for all your Office 365 & Azure development. This very demo-intensive session will make sure that at the end you get those 3 key takeaways : Understand the role of the SharePoint Framework, Angular and Azure Functions in this Cloud-First, Mobile-First world Have a complete sample where the modern tool belt is relevant and useful in a real-world scenario Change the way you will think for your next SharePoint project

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. Agenda

5. SPFx + Angular

6. Angular… But which version ?
• 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!)

7. 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…

8. Web Components
• Web Components & 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

9. Web Components
<fancy-datepicker></fancy-datepicker>

10. Why not just Web Components?
• Web Components are complex to build
• Lots of code to write
• Speaking DOM is performant but a complex language…

11. And then…That happened.

13. 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

14. Azure Functions

15. 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

16. Our scenario
• Using the 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!

17. Make it happen

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 I use 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. Next Steps

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