2. New Tricks for Old Dogs: The SharePoint Framework (SPFx)
07/21/2017 NTT DATA Services Joseph Ackerman, Systems Integration Sr. Advisor

3. 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

4. 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…

5. Customization Types

6. Customization Types Full Trust Solution
, C#, Windows and Visual Studio, Dev on Server
Sandbox Solution
& SPO (Declarative Only XML)
Provider Hosted Add-in
& SPO, Any Platform/Language, Runs in IFRAME or full page app web
SharePoint Hosted Add-in
& SPO, JavaScript only, Runs in IFRAME or full page app web
JavaScript Injection
& 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

7. SPFx: The Good, The Bad and The Ugly

8. 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:

9. Workin’ on the Toolchain Gang: It’s a Setup!

10. 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)

11. Using the Toolchain

12. 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!

13. Starting a Project: Yo, SharePoint! (Default Demo)

14. Coding and Testing: What Up, Workbenches!

15. 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

16. Demos: Qlinks & ListInfo

17. Deployment

18. Putting Yourself Out There
Gulp bundle --ship
Transpiles (TSJS)
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…

19. Resources

20. Resources
(PnP Videos)

21. Thank You to Our Sponsors

22. 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 th St, Sacramento, CA bluepryntsacramento.com

23. Easy Questions?