Introduction to the SharePoint Frameworknellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec...
Transcript of Introduction to the SharePoint Frameworknellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec...
![Page 1: Introduction to the SharePoint Frameworknellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 5... · Introduction to the SharePoint Framework. Bob German Bob is a Principal](https://reader035.fdocuments.in/reader035/viewer/2022062219/5ee13441ad6a402d666c2a74/html5/thumbnails/1.jpg)
AnInsightcompany
BobGermanPrincipalArchitect- BlueMetal
IntroductiontotheSharePointFramework
![Page 2: Introduction to the SharePoint Frameworknellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 5... · Introduction to the SharePoint Framework. Bob German Bob is a Principal](https://reader035.fdocuments.in/reader035/viewer/2022062219/5ee13441ad6a402d666c2a74/html5/thumbnails/2.jpg)
BobGermanBobisaPrincipalArchitectatBlueMetal,whereheleadsOffice365andSharePointdevelopment forenterprisecustomers.
Cloud&ServicesContent&CollaborationData&AnalyticsDevices&MobilityStrategy&Design
AnInsightcompany
@SPTechCon@Bob1German
![Page 3: Introduction to the SharePoint Frameworknellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 5... · Introduction to the SharePoint Framework. Bob German Bob is a Principal](https://reader035.fdocuments.in/reader035/viewer/2022062219/5ee13441ad6a402d666c2a74/html5/thumbnails/3.jpg)
Agenda
• AGeologicalViewofSharePoint• Developing“fromscratch”fortheSharePointFramework• Client-SideSolutions• WebParts• SinglePageApps• ListApps
• ActionPlanandResources
@SPTechCon@Bob1German
![Page 4: Introduction to the SharePoint Frameworknellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 5... · Introduction to the SharePoint Framework. Bob German Bob is a Principal](https://reader035.fdocuments.in/reader035/viewer/2022062219/5ee13441ad6a402d666c2a74/html5/thumbnails/4.jpg)
demo
TheNewSharePoint
![Page 5: Introduction to the SharePoint Frameworknellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 5... · Introduction to the SharePoint Framework. Bob German Bob is a Principal](https://reader035.fdocuments.in/reader035/viewer/2022062219/5ee13441ad6a402d666c2a74/html5/thumbnails/5.jpg)
AGeologicalViewofSharePoint
ASP.NETWebForms
ASP.NETAJAX,ScriptingOnDemand
SharePointPageModels
XSLT
CustomActions(JavaScript)
JSLink,DisplayTemplates
Add-inModel
![Page 6: Introduction to the SharePoint Frameworknellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 5... · Introduction to the SharePoint Framework. Bob German Bob is a Principal](https://reader035.fdocuments.in/reader035/viewer/2022062219/5ee13441ad6a402d666c2a74/html5/thumbnails/6.jpg)
![Page 7: Introduction to the SharePoint Frameworknellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 5... · Introduction to the SharePoint Framework. Bob German Bob is a Principal](https://reader035.fdocuments.in/reader035/viewer/2022062219/5ee13441ad6a402d666c2a74/html5/thumbnails/7.jpg)
SharePointFramework(SPFx)• Newclient-sidepageandwebpartmodel•Modernandresponsive– allows“mobilefirst”developmentforSharePoint• SPFx webpartsworkonbothclassicandclient-sidepages• It’sstillearly!Openquestions:• Howwillbrandingwork?• Howflexiblewillthepagelayoutbe?’• Whatadditionalwebpartswillbeavailable?
![Page 8: Introduction to the SharePoint Frameworknellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 5... · Introduction to the SharePoint Framework. Bob German Bob is a Principal](https://reader035.fdocuments.in/reader035/viewer/2022062219/5ee13441ad6a402d666c2a74/html5/thumbnails/8.jpg)
FarmandSandboxedSolutions
Add-inModel
SharePointDeveloper
Microsoftmovedthecheese…again!JavaScriptandTypeScriptWidgets
SharePointFramework
![Page 9: Introduction to the SharePoint Frameworknellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 5... · Introduction to the SharePoint Framework. Bob German Bob is a Principal](https://reader035.fdocuments.in/reader035/viewer/2022062219/5ee13441ad6a402d666c2a74/html5/thumbnails/9.jpg)
ComparingtheModels
Add-in Models SPFramework
Mobile-readyDirect accesstopage(e.g.ConnectedWebParts)EaseofData AccessEaseofUpgrade(of yoursolution)Protection fromUntrustedCodeStorefront Distribution
@SPTechCon@Bob1German
![Page 10: Introduction to the SharePoint Frameworknellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 5... · Introduction to the SharePoint Framework. Bob German Bob is a Principal](https://reader035.fdocuments.in/reader035/viewer/2022062219/5ee13441ad6a402d666c2a74/html5/thumbnails/10.jpg)
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
![Page 11: Introduction to the SharePoint Frameworknellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 5... · Introduction to the SharePoint Framework. Bob German Bob is a Principal](https://reader035.fdocuments.in/reader035/viewer/2022062219/5ee13441ad6a402d666c2a74/html5/thumbnails/11.jpg)
ProjectFolder/dest
/sharepoint
SPFrameworkDevelopmentProcess
ProjectFolder/src
JavaScriptBundles
.spapp
Localworkbench
workbench.aspxinSharePoint
ContentDeliveryNetwork
SharePointClient-side“App”
Deplyed inSharePoint
12
3@SPTechCon@Bob1German
![Page 12: Introduction to the SharePoint Frameworknellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 5... · Introduction to the SharePoint Framework. Bob German Bob is a Principal](https://reader035.fdocuments.in/reader035/viewer/2022062219/5ee13441ad6a402d666c2a74/html5/thumbnails/12.jpg)
Don’tPanic!Whatyouareaboutto
seeiseverydaydevelopmentforopensourcewebdevelopers.
Haveyounoticed?Microsoftisgoingopensource!
![Page 13: Introduction to the SharePoint Frameworknellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 5... · Introduction to the SharePoint Framework. Bob German Bob is a Principal](https://reader035.fdocuments.in/reader035/viewer/2022062219/5ee13441ad6a402d666c2a74/html5/thumbnails/13.jpg)
demo
yo sharepointPart1:• Creatingaproject• UsingtheSharePointWorkbench
![Page 14: Introduction to the SharePoint Frameworknellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 5... · Introduction to the SharePoint Framework. Bob German Bob is a Principal](https://reader035.fdocuments.in/reader035/viewer/2022062219/5ee13441ad6a402d666c2a74/html5/thumbnails/14.jpg)
demo
yo sharepointPart2:• PackagingandUploadingtoSharePoint• ViewingonaClassicPage
![Page 15: Introduction to the SharePoint Frameworknellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 5... · Introduction to the SharePoint Framework. Bob German Bob is a Principal](https://reader035.fdocuments.in/reader035/viewer/2022062219/5ee13441ad6a402d666c2a74/html5/thumbnails/15.jpg)
demo
yo sharepointPart3:• DeployingtoaCDN
![Page 16: Introduction to the SharePoint Frameworknellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 5... · Introduction to the SharePoint Framework. Bob German Bob is a Principal](https://reader035.fdocuments.in/reader035/viewer/2022062219/5ee13441ad6a402d666c2a74/html5/thumbnails/16.jpg)
Now…whereisthewebpart?
localhost SharePointOnline
AzureCDN
![Page 17: Introduction to the SharePoint Frameworknellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 5... · Introduction to the SharePoint Framework. Bob German Bob is a Principal](https://reader035.fdocuments.in/reader035/viewer/2022062219/5ee13441ad6a402d666c2a74/html5/thumbnails/17.jpg)
SplittingandBundling
• Freelysplityourcodeintomultiplefiles• EachistranslatedtoJavaScriptandplacedinamodulebasedonthefilename
• TypeScriptiscompiledtoJavaScript• LessiscompiledtoCSSinaJavaScriptstring• HTMLbecomesaJavaScriptstring• JavaScriptisjustplacedinthemodule
• Useexports andrequire toexposeandconsumeacrossmodules(CommonJS conventions)• Advantages
• Easeofdevelopment/modularity• Efficientdownloadandcaching• Synchronousaccess(neverwaitforascripttoload!)
![Page 18: Introduction to the SharePoint Frameworknellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 5... · Introduction to the SharePoint Framework. Bob German Bob is a Principal](https://reader035.fdocuments.in/reader035/viewer/2022062219/5ee13441ad6a402d666c2a74/html5/thumbnails/18.jpg)
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
![Page 19: Introduction to the SharePoint Frameworknellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 5... · Introduction to the SharePoint Framework. Bob German Bob is a Principal](https://reader035.fdocuments.in/reader035/viewer/2022062219/5ee13441ad6a402d666c2a74/html5/thumbnails/19.jpg)
AnInsightcompany
ABriefIntroductiontoTypeScript
![Page 20: Introduction to the SharePoint Frameworknellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 5... · Introduction to the SharePoint Framework. Bob German Bob is a Principal](https://reader035.fdocuments.in/reader035/viewer/2022062219/5ee13441ad6a402d666c2a74/html5/thumbnails/20.jpg)
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
![Page 21: Introduction to the SharePoint Frameworknellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 5... · Introduction to the SharePoint Framework. Bob German Bob is a Principal](https://reader035.fdocuments.in/reader035/viewer/2022062219/5ee13441ad6a402d666c2a74/html5/thumbnails/21.jpg)
(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
![Page 22: Introduction to the SharePoint Frameworknellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 5... · Introduction to the SharePoint Framework. Bob German Bob is a Principal](https://reader035.fdocuments.in/reader035/viewer/2022062219/5ee13441ad6a402d666c2a74/html5/thumbnails/22.jpg)
(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
![Page 23: Introduction to the SharePoint Frameworknellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 5... · Introduction to the SharePoint Framework. Bob German Bob is a Principal](https://reader035.fdocuments.in/reader035/viewer/2022062219/5ee13441ad6a402d666c2a74/html5/thumbnails/23.jpg)
(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
![Page 24: Introduction to the SharePoint Frameworknellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 5... · Introduction to the SharePoint Framework. Bob German Bob is a Principal](https://reader035.fdocuments.in/reader035/viewer/2022062219/5ee13441ad6a402d666c2a74/html5/thumbnails/24.jpg)
(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)
![Page 25: Introduction to the SharePoint Frameworknellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 5... · Introduction to the SharePoint Framework. Bob German Bob is a Principal](https://reader035.fdocuments.in/reader035/viewer/2022062219/5ee13441ad6a402d666c2a74/html5/thumbnails/25.jpg)
AnInsightcompany
DevelopingClient-SideProjectswithSharePointFramework
![Page 26: Introduction to the SharePoint Frameworknellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 5... · Introduction to the SharePoint Framework. Bob German Bob is a Principal](https://reader035.fdocuments.in/reader035/viewer/2022062219/5ee13441ad6a402d666c2a74/html5/thumbnails/26.jpg)
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)
![Page 27: Introduction to the SharePoint Frameworknellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 5... · Introduction to the SharePoint Framework. Bob German Bob is a Principal](https://reader035.fdocuments.in/reader035/viewer/2022062219/5ee13441ad6a402d666c2a74/html5/thumbnails/27.jpg)
demo
WeatherWebPart
![Page 28: Introduction to the SharePoint Frameworknellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 5... · Introduction to the SharePoint Framework. Bob German Bob is a Principal](https://reader035.fdocuments.in/reader035/viewer/2022062219/5ee13441ad6a402d666c2a74/html5/thumbnails/28.jpg)
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);
}
![Page 29: Introduction to the SharePoint Frameworknellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 5... · Introduction to the SharePoint Framework. Bob German Bob is a Principal](https://reader035.fdocuments.in/reader035/viewer/2022062219/5ee13441ad6a402d666c2a74/html5/thumbnails/29.jpg)
demo
Client-SidePageApplication
![Page 30: Introduction to the SharePoint Frameworknellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 5... · Introduction to the SharePoint Framework. Bob German Bob is a Principal](https://reader035.fdocuments.in/reader035/viewer/2022062219/5ee13441ad6a402d666c2a74/html5/thumbnails/30.jpg)
demo
Client-SideListApplication
![Page 31: Introduction to the SharePoint Frameworknellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 5... · Introduction to the SharePoint Framework. Bob German Bob is a Principal](https://reader035.fdocuments.in/reader035/viewer/2022062219/5ee13441ad6a402d666c2a74/html5/thumbnails/31.jpg)
Viewsource:SPDatapreloadedonpage
![Page 32: Introduction to the SharePoint Frameworknellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 5... · Introduction to the SharePoint Framework. Bob German Bob is a Principal](https://reader035.fdocuments.in/reader035/viewer/2022062219/5ee13441ad6a402d666c2a74/html5/thumbnails/32.jpg)
Sonowwhat?WTF!IsMicrosoftserious?
Whenwillitship?WheredoIgetit?
HowdoIgetstarted?
![Page 33: Introduction to the SharePoint Frameworknellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 5... · Introduction to the SharePoint Framework. Bob German Bob is a Principal](https://reader035.fdocuments.in/reader035/viewer/2022062219/5ee13441ad6a402d666c2a74/html5/thumbnails/33.jpg)
Yes– MicrosoftisseriousaboutmodernizingSharePoint!
Prediction:Overthenextfewyears,MicrosoftwillchangetheentireSharePointuserexperiencetomeettheneedsofamodern,mobileworkforce.
It’slikeupgradingacar,onepartatatime– whileyou’redrivingitcrosscountry!
WebPartsO365– mid2016
NewPagesO365– late2016
SP2016 FeaturePackearly2017
WebEra CloudandDeviceEra
![Page 34: Introduction to the SharePoint Frameworknellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 5... · Introduction to the SharePoint Framework. Bob German Bob is a Principal](https://reader035.fdocuments.in/reader035/viewer/2022062219/5ee13441ad6a402d666c2a74/html5/thumbnails/34.jpg)
Yes– MicrosoftisseriousaboutmodernizingSharePoint!
TheSharePointFrameworkisadditive!• ClassicSharePointpagescanrunthenewwebparts• ClassicSharePointsitescanincludethenewfull-pagesolutions
Itshouldbepossibletotransitionoursitesgraduallytothenewmodel
WebEra CloudandDeviceEra
![Page 35: Introduction to the SharePoint Frameworknellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 5... · Introduction to the SharePoint Framework. Bob German Bob is a Principal](https://reader035.fdocuments.in/reader035/viewer/2022062219/5ee13441ad6a402d666c2a74/html5/thumbnails/35.jpg)
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
![Page 36: Introduction to the SharePoint Frameworknellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 5... · Introduction to the SharePoint Framework. Bob German Bob is a Principal](https://reader035.fdocuments.in/reader035/viewer/2022062219/5ee13441ad6a402d666c2a74/html5/thumbnails/36.jpg)
AnInsightcompany
Thankyou.