New Tricks for Old Dogs: The SharePoint Framework (SPFx) 07/21/2017 NTT DATA Services Joseph Ackerman, Systems Integration Sr. Advisor
Today’s Agenda Who is this guy? Customization Types SPFx: The Good, The Bad and The Ugly Workin’ on the Toolchain Gang: It’s a Set Up! Starting a project: Yo, SharePoint! Default Demo Coding and Testing: What up, workbenches! Qlink & ListInfo Demos Deployment Resources Q & (if they are easy) A
So Who Is This Guy? 30 Years solving problems with code on the Microsoft Stack for organizations large and small: Customizing SharePoint Solutions since 2007 Self-professed Dinosaur working hard to avoid becoming a fossil…
Customization Types
Customization Types Full Trust Solution 2007-2016, C#, Windows and Visual Studio, Dev on Server Sandbox Solution 2010-2016 & SPO (Declarative Only XML) Provider Hosted Add-in 2013-2016 & SPO, Any Platform/Language, Runs in IFRAME or full page app web SharePoint Hosted Add-in 2013-2016 & SPO, JavaScript only, Runs in IFRAME or full page app web JavaScript Injection 2010-2016 & SPO, Managed Manually, HTML/CSS/JS in a Content Editor WP SharePoint Framework SPO only (2016 w/ FP2), Typescript, Runs in context, currently WP only
SPFx: The Good, The Bad and The Ugly
SPFx The Good The Bad The Ugly Dev Platform Agnostic Windows, Mac, Linux Dev Location Agnostic You don’t have to be on the server All you need is an SPO account and an internet connection Typescript Fixes JavaScript for C# Developers All the tools are FREE Latest version currently SPO Only, On-Prem with FP2 must be v1.0.2 Web Parts only for classic pages; other features (Command Sets, Field Customizers, Application Customizers) are “Modern” UI only It’s all new, not what we are used to – Learning Curve! So. Many. Dependencies. Fragile! Project Structures are Deep Which folder now? The Game Moves as You Play Things are evolving Changes come fast and often Graphic Source: http://postercabaret.com
Workin’ on the Toolchain Gang: It’s a Setup!
Setting Up Your Development Environment Download and install: Node.js (local web server, LTS version recommended) Git (repository) Latest version of PowerShell (command shell [others ok]) Visual Studio Code (code editor and typescript [others ok]) Then use NPM to install: npm (ensure latest npm) yo gulp (installs yeoman & gulp) @microsoft/generator-sharepoint (yeoman SharePoint generator)
Using the Toolchain
Focus only on what’s truly necessary This is a lot of new stuff I went through my own “5 Stages of SharePoint Developer Grief” Denial (“The SP Dev platform has changed again? Oh please, I’ve got work to do…”) Anger (“What is all this junk?! Command line?! What decade is this?!!!”) Bargaining (“Maybe I can get this working in Visual Studio…” [actually, you can, but…]) Depression (“This is overwhelming. I hate this.”) Acceptance (“*sigh*, this is not going away…ok, what’s *really* most important?”) Don’t get overwhelmed! Out of all this stuff, there’s really two bits to focus on: Typescript, a.k.a. “JavaScript for C# Developers” Everyone *uses* JavaScript but who really likes it? Apologies to the brilliant Douglas Crockford, but there’s a reason “JavaScript: The Good Parts” is the thinnest computer book on the shelf Npm, for adding specific functionality to your projects The rest is just details; you can focus on all of that later!
Starting a Project: Yo, SharePoint! (Default Demo)
Coding and Testing: What Up, Workbenches!
What Up, Workbenches! We used to have to deploy in order to test Now we can use the local or dev site Workbench.aspx pages Local tests can utilize mock data if you build it into your project Dev site tests can actually interact with SharePoint Online data There’s a very nice VS-Code extension, “Debugger for Chrome” Add config information and you can launch either workbench from inside of VS-Code
Demos: Qlinks & ListInfo
Deployment
Putting Yourself Out There Gulp bundle --ship Transpiles (TSJS) Minifies Move these files to your delivery location (CDN or Doc Lib) Gulp package-solution --ship Creates .sppkg file (“the app”) Upload to your app catalog Install the app in one of your sites Add the web part to a page in the site where you installed the app All of this is just fine for web parts, since they are added at the page level “Tenant Scoped” deployment was released about a month ago “Site Collection Scoped” deployment is coming…
Resources
Resources https://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview https://github.com/SharePoint/sp-dev-docs https://github.com/SharePoint/sp-dev-docs/wiki https://dev.office.com/sharepoint/reference/spfx/sharepoint-framework-reference-overview https://www.youtube.com/channel/UC_mKdhw-V6CeCM7gTo_Iy7w (PnP Videos) https://techcommunity.microsoft.com/t5/SharePoint-Developer/bd-p/SharePointDev https://www.typescriptlang.org/docs/tutorial.html https://github.com/OfficeDev/TrainingContent/tree/master/SharePoint/SharePointFramework
Thank You to Our Sponsors
Thank you for joining us today! Don’t Forget SharePint Join us right after at The Blue Prynt Socialize and unwind after our day of learning. Blue Prynt Restaurant & Bar 815 11th St, Sacramento, CA 95814 bluepryntsacramento.com
Easy Questions?