European Collaboration Summit - SharePoint Framework Angular & Azure Functions

SharePoint Framework, Angular & Azure
Functions
The modern developer tool beltSÉBASTIEN LEVERT
PRODUCT EVANGELIST & PARTNER MANAGER @ VALO INTRANET | OFFICE DEV MVP

Who’s that guy ?
@sebastienlevert | http://sebastienlevert.com | Product Evangelist & Partner Manager at

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 (3x React), 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.

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

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);
}
);
}

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);

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;
}

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 }

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 },
];
}

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);
}
}

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!

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 ModernTeam Site (in under 15 seconds) based on a set of
parameters
• Boom!

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 !

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

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

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

European Collaboration Summit - SharePoint Framework Angular & Azure Functions

More Related Content

What's hot (20)

Similar to European Collaboration Summit - SharePoint Framework Angular & Azure Functions (20)

More from Sébastien Levert (20)

Recently uploaded (20)

European Collaboration Summit - SharePoint Framework Angular & Azure Functions