SharePoint Saturday Twin Cities - SharePoint Framework, Angular & Azure Functions
Download as PPTX, PDF0 likes125 views
The document discusses the use of SharePoint Framework (SPFx) with Angular and Azure Functions for modern development. It outlines the compatibility of different Angular versions with SPFx, outlines the limitations and lessons learned, and describes a scenario for using these tools together. Additionally, it emphasizes resource sharing and community engagement through specific hashtags.
SharePoint Saturday Twin Cities - SharePoint Framework, Angular & 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
- 4. Agenda
- 7. 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!?)
- 8. 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
- 9. What are the limitations? • 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.
- 10. Lessons learned • Never use 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!
- 11. Azure Functions
- 12. 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
- 13. 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 • Boom!
- 14. Make it happen
- 15. 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
- 16. 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 !
- 17. Next Steps
- 18. 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
- 20. Share your experience • Use hashtags to share your experience • #Office365Dev • #MicrosoftGraph • #AzureFunctions • Log issues & questions to the GitHub Repositories
- 22. Thank you! @sebastienlevert | http://sebastienlevert.com | Product Evangelist & Partner Manager at