SharePoint Framework, Angular & Azure Functions

The modern SharePoint developer tool belt

Sébastien Levert

Sponsors

Hi! I’m Seb!

@sebastienlevert | http://sebastienlevert.com | Product Evangelist & Partner Manager at

Agenda

SPFx + Angular

Angular… But which version ?

• Works well with Angular 1.6

• Works OK with Angular 2

• Works awesome with Angular 4 (Did you just say Angular 4!?)

Is that even possible ?

• Some are thinking it is mission impossible… But it is! And it’s much more simpler than you think.

• You have the full power of Angular within you own SPFx webparts

• Multiple webparts can exist in a page, including their own routing configuration

What are the limitations?

• Size of the bundle is huge, watch for performance issues!

• Webpack becomes slow when compiling your TypeScript code

• Not built in to SPFx, so you need to build your own wrapper (I have code for that!)

• Some variables are still global in Angular, it can become problematic in complex solutions.

Lessons learned

• Never use any class or ids from the DOM. Always use the ViewChild attribute.

• You can use html templates using the require() approach. Try to do that with React!

• When you have a strong AngularJS background, it feels just a little bit weird to move to Angular, but you will get used to it!

Technology

Why Azure Functions ?

• Cheap way to host any API in Azure

• You can use your favorite language

• Super cheap to run

• Perfect companion for any Single Page Application or any JavaScript component

Our scenario

• Using the PnP PowerShell Cmdlets

• Connecting to the Microsoft Graph and to an Azure AD Application

• Creating a Modern Team Site (in under 15 seconds) based on a set of parameters

• Boom!

Make it happen

The full scenario

• Build a SharePoint Framework WebPart

• Use Angular as our main Framework

• Include 3 routes (Home, New Site and Site Information)

• Use Azure Function as my backend provisioning API

• Use the Office UI Fabric components

What about the Office UI Fabric ?• Well… You have 2 choices : Build or Reuse

• My choice ? Reuse !

• But Seb… It’s Angular, I can’t reuse what does not exist…

• Well… The React components exist, just reuse them !

Next Steps

Resources

• https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/angular2-prototype• https://dev.office.com/sharepoint/docs/spfx/sharepoint-fr

amework-overview• http://dev.office.com/fabric#/components

Samples

• https://github.com/sebastienlevert/spfx-angular-poc

Share your experience

• Use hashtags to share your experience• #Office365Dev• #MicrosoftGraph• #AzureFunctions

• Log issues & questions to the GitHub Repositories

Sponsors

Thank you!

@sebastienlevert | http://sebastienlevert.com | Product Evangelist & Partner Manager at