introduction to the sharepoint frameworknellisconsultingllc.com/resources/sptechconsf2016slides/dec...
TRANSCRIPT
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.