SharePoint Saturday Vancouver - SharePoint Framework, Angular and Azure Functions
-
Upload
sebastien-levert -
Category
Technology
-
view
511 -
download
3
Transcript of SharePoint Saturday Vancouver - SharePoint Framework, Angular and Azure Functions
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