SharePoint Fest DC - SharePoint Framework, Angular and Azure Functions

SharePoint Fest DC - 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.
  Agenda
• 4.
  SPFx + Angular
• 5.
  Angular… But whichversion ? • Works well with Angular 1.6 • Works OK with Angular 2 • Works awesome with Angular 4 (Did you just say Angular 4!?)
• 6.
  Is that evenpossible ? • 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
• 7.
  What are thelimitations? • Size of the bundle is huge, watch for performance issues! • Webpack becomes slow when compiling yourTypeScript 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.
• 8.
  Lessons learned • Neveruse any class or ids from the DOM. Always use theViewChild 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!
• 9.
  Technology
• 10.
  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
• 11.
  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 • Boom!
• 12.
  Make it happen
• 13.
  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
• 14.
  What about theOffice 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 !
• 15.
  Next Steps
• 16.
  Resources • https://github.com/SharePoint/sp-dev-fx- webparts/tree/master/samples/angular2-prototype • https://dev.office.com/sharepoint/docs/spfx/sharepoint-framework- overview •http://dev.office.com/fabric#/components
• 17.
  Samples • https://github.com/sebastienlevert/spfx-angular-poc
• 18.
  Share your experience •Use hashtags to share your experience • #Office365Dev • #MicrosoftGraph • #AzureFunctions • Log issues & questions to the GitHub Repositories
• 19.
  Thank you! @sebastienlevert |http://sebastienlevert.com | Product Evangelist & Partner Manager at