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 4 and the current 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
and Azure Functions
The modern developer toolbelt
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
• Works OK with Angular 2
• Works awesome with Angular 4 (Did you just say Angular 4!?)

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

8. https://github.com/sebastienlevert/spfx-angular-boilerplate

10. Dynamic Bootstrapping
protected get rootComponentType(): any {
return AppComponent;
}
protected get appDeclarationTypes(): any {
return [
DialogComponent, SitesComponent, SitesHomeComponent,
SitesFormComponent, SitesViewComponent
];
}

11. Dynamic Bootstrapping
private _bootStrapModule(): void {
var self = this;
platformBrowserDynamic().bootstrapModule(self._getModule()).then(
ngModuleRef => {
self._component = self._app['_rootComponents'][0]['_component’];
self.updateChanges();
self._zone.run(() => { console.log('Outside Done!'); });
}, err => {
console.log(err);
}
);
}

12. Dynamic Bootstrapping
const AppModule1 = Reflect.decorate([
NgModule({
imports: [BrowserModule, FormsModule, HttpModule, routes],
declarations: declarations,
bootstrap: [component],
exports: [RouterModule],
providers: providers
}),
Reflect.metadata('design:paramtypes', [ApplicationRef, NgZone])
], AppModule);

13. Routing
const routes: Routes = [
{ path: '', component: SitesComponent, children: [
{ path: '', component: SitesHomeComponent },
{ path: 'sites', children: [
{ path: 'new', component: SitesFormComponent },
{ path: ':id', component: SitesViewComponent }
]},
]}
];
import { appRoutes } from "./app/app.routes"
protected get routes(): any {
return appRoutes;
}

14. Global Configurations
import { ConfigurationService } from
"./app/services/ConfigurationService";
ConfigurationService
{ provide: APP_INITIALIZER, useFactory: (configurationService:
ConfigurationService) => () => configurationService.load({
functionUrl: this.properties.functionUrl,
functionKey: this.properties.functionKey,
description: this.properties.description,
styles: styles
}), deps: [ConfigurationService], multi: true }

15. Mocking Data
if (Environment.type === EnvironmentType.Local) {
return [
{ provide: SitesService, useClass: MockSitesService },
];
} else if (Environment.type == EnvironmentType.SharePoint ||
Environment.type == EnvironmentType.ClassicSharePoint) {
return [
{ provide: SitesService, useClass: SitesService },
];
}

16. Mocking Data
export class MockSitesService implements ISitesService {
public createSite(siteInformation: ISiteCreationInformation):
Observable<ISiteCreationResponse> {
return Observable.of<ISiteCreationResponse>({
description: `${siteInformation.description} (Mocked)`,
email: `${siteInformation.url}@mocked.onmicrosoft.com`,
id: "00000000-0000-0000-0000-000000000000",
title: `${siteInformation.title} (Mocked)`,
url: `#${siteInformation.url}`
}).delay(2000);
}
}

17. Azure Functions

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

19. 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!

20. Make it happen

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

22. 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 !

23. Downsides
• Can’t use the CLI to build new components and slow to compile
• Can’t use AOT to reduce the bundle size
• Lots of “hacks” in code that make this approach…
• Clearly not SPCAF compliant!

24. 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, 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!

25. And… Should I use it in production?
• As of today, this approach is the only approach that works.
• Use it to experiment, to learn the SharePoint Framework and
Angular altogether.
• Will require a lot of maintenance with new versions of SPFx… In
short, I would not go all in right now… But…

26. But…

27. Next Steps

28. 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
• https://www.youtube.com/watch?v=Vkzr2TxHFLg&t=6s

29. Samples
• https://github.com/sebastienlevert/spfx-angular-boilerplate
• https://github.com/sebastienlevert/spfx-angular-samples

30. Sharing is caring
• Use hashtags to share your experience
• #Office365Dev
• #MicrosoftGraph
• #AzureFunctions
• #SPFx
• Log issues & questions to the GitHub Repositories

32. Thank you!
@sebastienlevert | http://sebastienlevert.com | Product Evangelist & Partner Manager at