Describes the new SharePoint development framework, which uses Gulp, node.js, TypeScript, SASS and other modern web technologies. Covers client web parts, modern pages and the canvas, and how to surface your files on a CDN for optimum performance. This intro presentation helps you get started.

2. www.sharepointnutsandbolts.com
@ChrisO_Brien
http://cob-sp.com/COBLinkedIn

3. Subtle shift to client side development
Beyond jQuery - developers seeking to use
latest tech
Still difficult
for devs new
to SharePoint

4. Modern pages
and client web
parts
Client side
applications
(list-based and
page-based)
A new
development
model
New
deployment
possibilities
We’ll focus on these aspects

5. Apps, but no IFrames!
Similar to recent Delve
blog pages
New page “canvas” –
no classic web part zones

6. Pure JavaScript
implementation
“Baked-in JS injection”
Simplified end-user
experience (e.g. web
part properties)

7. Classic pages Modern pages
Classic web parts Y N
Modern web parts Y Y
Modern web parts can work in:
But classic web parts can NOT work in
modern pages

8. Not just JavaScript, but TypeScript!
Use your preferred JS framework –
React, Angular, Knockout, jQuery,
or none
Gulp for build
Yeoman for startup
No need for Visual Studio!

10. Pre-requisites:
Process:

12. Fundamentals
TypeScript is expected (at least, for now)
Client web parts

13. 1. Variables and types
var foo: string var foo: UserProfile
var foo: any
2. Typings for libraries (e.g. jQuery, CSOM)
3. Import a module to use it

14. BaseClientSideWebPart provides:

15. Folder Purpose
config Settings for
bundling/deployment
dist Run-time files for your app
lib Intermediate folder in build
system
node_modules JS dependencies
src Where you write code
typings TypeScript typings
cob-sp.com/SPX-Files

18. 



19. 

20. 

21. 


22. Refactor into
separate TypeScript
classes/use new
SpHttpClient class
Implement
promises (e.g. ES6)
for async methods
Create
class/interface to
represent a search
result
Final code – separate ‘Search’ utility class. GetResultsAsync returns promise with
my TS interface representing a search result (with URL, description & title
properties):

24. Your files can be hosted anywhere
App packages are the deployment vehicle
Ensure dependencies are bundled OR referenced

25. Build app in
release mode (--
ship)
Upload
resources to
CDN
Upload app
package (.sppkg)
to app catalog
Add to page

26. 1. Upload
resources to CDN
• Use supplied
Gulp task
(“upload-cdn”),
or do it yourself
2. Deal with
dependencies
• Ensure 3rd party
libraries are
bundled OR
referenced
externally
3. Package app
• Use supplied
Gulp task (“gulp
package-
solution”)
4. Add to app
catalog
• Administrator
drags and
drops into
catalog
5. Add to page
• Web part can
now be added
to page

28. 



30. Good news!
Likely to be released in a Feature
Pack update, some time in 2017

32. There isn’t one!
client-side
Provider-hosted add-ins/IFrames are still a good
choice
Create a server-side component (e.g. WebAPI) where
necessary

33. SharePoint dev is changing!
SPFx does not replace anything
Start your dev prep now!