Xgility - SharePoint Framework Reston SPUG · SharePoint Online: 1.Training 2.Activation 3.Adoption...

SharePointFramework

May201

7

Presentedby

Commissionedfor

RestonSharePointUserGroup

Dheepa IyerManagingConsultant

AboutMe

2

DheepaIyerManagingConsultant,WashingtonDCMetro,XGILITY

PersonalEmail::bdheepa@hotmail.com

WorkEmail::diyer@xgility.com

XGILITYMicrosoftCapabilities

3

SharePoint Office365 Azure Secure ProductiveEnterprise

BusinessProcessAutomation• WorkflowsandFormsusing

− Nintex− SharePoint

Designer− InfoPath

1. SharePointOnline2. Office ProPlus3. OneDrive forBusiness4. PowerBI5. Skype6. Exchange

WebSites• LearningManagementSystem• BingMaps

CloudIdentityManagement

LineofBusinessApplications• ContractsManagement• HumanResources• Finance• SalesandProjects

• Migrations• SecureProductiveEnterprise

• SharePointFarms• ApplicationIntegration• SQL

AzureInformationProtection

Integration• ConnectinglineofbusinesstobuildDashboardsandReports

SharePointOnline:1. Training2. Activation3. Adoption

• ApplicationModernization Windows10

Webuildapplications,workflowandcollaborationsolutionsusingSharePoint,Office365andAzurethataresecuredanddeployedtomobiledevicesusingEMS

OurTransformationalCollaborators

4

Agenda1. History&CurrentFramework

2. GettingStarted

� Tools&libraries� DevelopmentEnvironment

3. LiveDemo

4. Resources

5. Q&A

5

SharePointEvolution

6

BasicDocumentManagement

TeamSitesandPortals

Workflows,BrandingandCustomizations

Officeintegration,

CSOM

Cloud,AppModel

7

• Modernpagesandclient-sidedevelopment

• NoIframes!

• NoWebPart Zones

• Lightweightwebandmobile

• SupportsopensourcetoolsandJavaScriptwebframeworks

• Hostanywhere

SharePointFrameworkHighlights

BenefitforBusiness• MobileandCloudFriendly

• LessExpensiveDevelopmentandMaintenance� LowcodeandEfficient– JavaScriptexperience� Reduceddevelopmentcost

• Integrationwithotherofficetools

8

9

1. Runsinthecontextofthecurrentuserandconnectioninthebrowser

2. ThecontrolsarerenderedinthenormalpageDOM

3. Thecontrolsareresponsiveandaccessiblebynature

4. Enablesthedevelopertoaccessthepagelifecycle

5. It'sframeworkagnostic

6. Basedoncommonopensourceclientdevelopmenttools

7. Performanceisreliable

8. Solutionscanbedeployedinbothclassicwebpartandpublishingpagesand

modernpages

KeyFeatures

YourDevelopmentToolkit&Libraries• YeomanGenerators

• TypeScript

• Javascript Frameworks

• Node.js

• NodePackageManager(npm)

• Gulp

• SourceCodeEditors

• SharePointRESTAPIs

• OfficeGraph

• OfficeUIFabric

• O365pnp – core-pnp-js10

SetupDevelopmentEnvironment

11

InstallDeveloperTools

� JavaScriptruntimebuilton Chrome'sV8JavaScriptengine.

� Event-driven,non-blockingI/Omodelthatmakesitlightweightandefficient.

� VisualStudioCode

� Atom� WebStorm

12

> CODE EDITOR

Build,Preview,&Test

(Gulp&Grunt)

13

InstallYeomanandGulp

Prepareforbuildandpackage PackageManagerfordependencymanagement

(npm &Bower)

• Generator:• Plugin/Node.jsModule• Providescommonbuildtools,commonboilerplatecode,

andacommonplaygroundwebsitetohostwebpartsfortesting.

• InstallYeomanSharePointGenerator

OptionalTools

14

Fiddler

http://www.telerik.com/fiddler

Postman

https://www.getpostman.com/

CMDER

http://cmder.net/

git

https://git-scm.com

PowerShellCommands

15

ClientWebPartDevelopmentLifeCycle

16

17

BuildingaWebApp:A10-StepGuide

ScaffoldtheWebPartusingYo

CodetheWebPart SetupDebugEnvironments

BuildandtestcodeusingGulp

DetermineCDN:• AzureStorage• Office365CDN• SharePoint

Updatecdnbasepath inwrite-manifests.json

PackagetheWebPartNOTE:Thiswillnotpackageassets

PrepareassetstodeploytoCDN

(js,css,etc.)

UploadtheresourcefilestoCDN

InstallpackagetoAppCatalog

1 2 3 4 5

6 7 8 9 10

Powershell commandstobuildawebpart

18

[LIVEDEMO]

19

Resources

20

SharePointPNPhttp://aka.ms/sppnp

OfficeDevCenter(SP)https://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview

OfficeBlogshttps://dev.office.com/blogs

LookingforYOURTransformationalChangeJoinourpassionateteamofexpertstodeliverInnovativesolutionswithourcustomers

Rockville,MD: CollaborationSpecialist

FtMead,MD: ClearedDevelopersClearedAdmins

McLean,VA: .NETDevelopersK2DevelopersSharePointAdmins

Wash.,DC: .NETdevelopers

ThankYou!!Questions??

May201

7

RestonSharePointUserGroup

Dheepa IyerManagingConsultant