AnInsightcompany

BobGermanPrincipalArchitect- BlueMetal

IntroductiontotheSharePointFramework

BobGermanBobisaPrincipalArchitectatBlueMetal,whereheleadsOffice365andSharePointdevelopment forenterprisecustomers.

Cloud&ServicesContent&CollaborationData&AnalyticsDevices&MobilityStrategy&Design

AnInsightcompany

@SPTechCon@Bob1German

Agenda

• AGeologicalViewofSharePoint• Developing“fromscratch”fortheSharePointFramework• Client-SideSolutions• WebParts• SinglePageApps• ListApps

• ActionPlanandResources

@SPTechCon@Bob1German

demo

TheNewSharePoint

AGeologicalViewofSharePoint

ASP.NETWebForms

ASP.NETAJAX,ScriptingOnDemand

SharePointPageModels

XSLT

CustomActions(JavaScript)

JSLink,DisplayTemplates

Add-inModel

SharePointFramework(SPFx)• Newclient-sidepageandwebpartmodel•Modernandresponsive– allows“mobilefirst”developmentforSharePoint• SPFx webpartsworkonbothclassicandclient-sidepages• It’sstillearly!Openquestions:• Howwillbrandingwork?• Howflexiblewillthepagelayoutbe?’• Whatadditionalwebpartswillbeavailable?

FarmandSandboxedSolutions

Add-inModel

SharePointDeveloper

Microsoftmovedthecheese…again!JavaScriptandTypeScriptWidgets

SharePointFramework

ComparingtheModels

Add-in Models SPFramework

Mobile-readyDirect accesstopage(e.g.ConnectedWebParts)EaseofData AccessEaseofUpgrade(of yoursolution)Protection fromUntrustedCodeStorefront Distribution

@SPTechCon@Bob1German

OpenSourceToolsTrad New

Templating VisualStudio Yeoman http://bit.ly/SPF-YeomanLanguage C#,JavaScript Typescript http://bit.ly/SPF-TypeScriptRuntime Env’t .NET, JS AnyJSFramework http://bit.ly/SPF-JSFrameworksCode Editor VisualStudio VisualStudioCode

(oryourchoice)http://bit.ly/SPF-VSCode

Packages nuget npm http://bit.ly/SPF-npmTaskRunner VisualStudio Gulp http://bit.ly/SPF-GulpCompiler VisualStudio tsc http://bit.ly/SPF-TypeScriptBundling VisualStudio WebPack http://bit.ly/SPF-WebPack

Linksarecasesensitive!

@SPTechCon@Bob1German

ProjectFolder/dest

/sharepoint

SPFrameworkDevelopmentProcess

ProjectFolder/src

JavaScriptBundles

.spapp

Localworkbench

workbench.aspxinSharePoint

ContentDeliveryNetwork

SharePointClient-side“App”

Deplyed inSharePoint

12

3@SPTechCon@Bob1German

Don’tPanic!Whatyouareaboutto

seeiseverydaydevelopmentforopensourcewebdevelopers.

Haveyounoticed?Microsoftisgoingopensource!

demo

yo sharepointPart1:• Creatingaproject• UsingtheSharePointWorkbench

demo

yo sharepointPart2:• PackagingandUploadingtoSharePoint• ViewingonaClassicPage

demo

yo sharepointPart3:• DeployingtoaCDN

Now…whereisthewebpart?

localhost SharePointOnline

AzureCDN

SplittingandBundling

• Freelysplityourcodeintomultiplefiles• EachistranslatedtoJavaScriptandplacedinamodulebasedonthefilename

• TypeScriptiscompiledtoJavaScript• LessiscompiledtoCSSinaJavaScriptstring• HTMLbecomesaJavaScriptstring• JavaScriptisjustplacedinthemodule

• Useexports andrequire toexposeandconsumeacrossmodules(CommonJS conventions)• Advantages

• Easeofdevelopment/modularity• Efficientdownloadandcaching• Synchronousaccess(neverwaitforascripttoload!)

SplittingandBundling

.ts

.ts

.js

.html

.less

Webpack

0:javascript

Compilers(.tsà .js,

.lessà .css)

Gulp taskrunner

1:javascript

2:javascript(htmlinstring)

3:javascript

4:javascript(css instring)

Javascript bundleSourceFiles

AnInsightcompany

ABriefIntroductiontoTypeScript

WhatisTypescript?

TypescriptisasubsetofJavaScript,andis“transpiled”intoregularJavaScript.• Statictypecheckingcatcheserrorsearlier• Intellisense• UseES6featuresinES3,ES5(oratleastgetcompatibilitychecking)• Classstructurefamiliar to.NETprogrammers

let x = 5;for (let x=1; x<10; x++) {

console.log (‘x is ‘ + x.toString());}console.log (‘In the end, x is ‘ + x.toString());

var x = -1;for (var x_1 = 1; x_1 < 10; x_1++) {

console.log("x is " + x_1.toString());}console.log("In the end, x is " + x.toString()); // -1

(1)TypeAnnotations

var myString: string='<u>Results</u><br />';var myNum :number=123;var myAny :any="Hello";myString =<number>myAny;var myDate:Date=newDate;var myElement:HTMLElement =document.getElementsByTagName('body')[0];var myFunc :(x:number) =>number=

function(x:number) :number {returnx+1;}var myPeople:{firstName:string, lastName:string}[]=

[{firstName:“Alice",lastName:“Grapes"},{firstName:“Bob",lastName:“German"}

]

Intrinsics

AnyandCasting

Built-inobjects

Functions

ComplexTypes

(2)ES6Compatibility

var myFunc :(nx:number) =>number =(n:number) =>{returnn+1;

}

letx:number=1;if(true) {letx:number=100;}if(x===1){alert('Itworked!') }

var target:string=‘world';var greeting:string=`Hello,${target}’;

“FatArrow”functionsyntax

Blockscopedvariables

Templatestrings

(3)ClassesandInterfacesinterfaceIPerson {getName():string;

}

classPersonimplements IPerson {privatefirstName:string;privatelastName:string;constructor(firstName:string, lastName:string){this.firstName =firstName;this.lastName =lastName;

}getName(){returnthis.firstName +""+this.lastName;}

}

varme:IPerson =newPerson("Bob", "German");var result=me.getName();

Interface

Class

Usage

(4)TypescriptDefinitionsvar oldStuff =oldStuff ||{};

oldStuff.getMessage =function() {var time=(newDate()).getHours();varmessage="GoodDay"

if(time<12){message="GoodMorning"

}elseif(time<18){message="GoodAfternoon"

}else{message="GoodEvening"

}

returnmessage;};

interfaceIMessageGiver {getMessage:()=>string

}

declarevar oldStuff: IMessageGiver;

var result:string =oldStuff.getMessage();

document.getElementById('output').innerHTML =result;

myCode.ts(TypeScript codewantstocalllegacyJavaScript)

oldStuff.js(legacyJavaScript)

oldStuff.d.ts(TypeScriptDefinition)

AnInsightcompany

DevelopingClient-SideProjectswithSharePointFramework

Client-SideProjects

1 Client-Side WebParts Run onclassicandclient-sidepages

2 Client-Side Apps(singlepage)

Your Single-PageapplicationhostedinSharePoint

3 Client-SideApps(list) ASharePointlistwithforms(AllItems,Display,Edit,New)

demo

WeatherWebPart

CodesnippetfromaWebPart

//Angularappishere:https://github.com/Widget-Wrangler/ww/tree/master/TypeScript.WeatherexportclassWeatherWebPart extendsBaseClientSideWebPart<IWeatherWebPartProps> {

//…publicrender(mode: DisplayMode, data?:IWebPartData){

if(!this.renderedOnce) {this.domElement.innerHTML =viewHtml;angular.module('weatherWidget', [])

.service('WeatherPropService',WeatherPropService)

.service('WeatherService',WeatherService)

.constant('appId', 'ecb1f756686518281c429bf5b7498d70')

.controller('WeatherController',WeatherController);angular.bootstrap(this.domElement, ['weatherWidget']);

}//Everytimewerender,updatethewebpartpropertiesangular.element(this.domElement).injector().get('WeatherPropService').UpdateProperties(this.properties);

}

demo

Client-SidePageApplication

demo

Client-SideListApplication

Viewsource:SPDatapreloadedonpage

Sonowwhat?WTF!IsMicrosoftserious?

Whenwillitship?WheredoIgetit?

HowdoIgetstarted?

Yes– MicrosoftisseriousaboutmodernizingSharePoint!

Prediction:Overthenextfewyears,MicrosoftwillchangetheentireSharePointuserexperiencetomeettheneedsofamodern,mobileworkforce.

It’slikeupgradingacar,onepartatatime– whileyou’redrivingitcrosscountry!

WebPartsO365– mid2016

NewPagesO365– late2016

SP2016 FeaturePackearly2017

WebEra CloudandDeviceEra

Yes– MicrosoftisseriousaboutmodernizingSharePoint!

TheSharePointFrameworkisadditive!• ClassicSharePointpagescanrunthenewwebparts• ClassicSharePointsitescanincludethenewfull-pagesolutions

Itshouldbepossibletotransitionoursitesgraduallytothenewmodel

WebEra CloudandDeviceEra

ToolingUpTypeScript TypeScript Site

• http://bit.ly/SPF-TypeScriptTypeScriptPlayground• http://bit.ly/TSPlaygroundBob’sTS “CheatSheets”• http://bit.ly/LearnTypeScript

WebPack WebPack Site• http://bit.ly/SPF-WebPack

RESTAPI’s SharePointRESTAPIreference• http://bit.ly/SP-REST

Gulp Gulp taskrunner• http://bit.ly/SPF-Gulp

VS Code Visual StudioCode• http://bit.ly/SPF-VSCode

JoinmeWednesdayat4:00for:Future-ProofDevelopmentforSharePointand

SharePointOnline

Tutorials• DevSetup:

http://bit.ly/SPFx-DevSetup• BuildyourfirstWebPart:

http://bit.ly/SPFx-FirstWP• SetupyourCDN:

http://bit.ly/SPFx-CDN

AnInsightcompany

Thankyou.