The document discusses the SharePoint Framework (SPFx) which is a client-side development framework for building experiences and web parts for SharePoint. It provides an agenda that covers what SPFx is, setting up development environments, creating a web part, testing, and deploying to SharePoint. Key points are that SPFx allows direct access to SharePoint, uses TypeScript, and makes it easy to integrate JavaScript libraries. The walkthrough demonstrates creating a web part using Yeoman and deploying it to SharePoint by bundling and packaging the solution.

1. SharePoint TechFest
SharePoint Development with the
SharePoint Framework

2. Agenda
2
What is SharePoint Framework?
Framework vs Apps
Setting up test site
Setting up for development
Create the web part
Test in workbench
Test in SharePoint
Deploy to SharePoint

3. About me
3
SharePoint Consultant for 5 years
Worked for SparkHound for over 3 years
Taught SharePoint workshops training ASP.Net developers in
SharePoint development
Microsoft Certified Professional – HTML5 and CSS3

4. What is the SharePoint Framework
4
A fully supported client side development framework
Enhanced Script Editor Web part
Develop using TypeScript and JavaScript
Uses REST or JavaScript Client Object Model for SharePoint
interaction
Easily integrate with favorite JavaScript Library
Develop locally or through SharePoint using Node.JS
Create reusable web parts to be used throughout your site
Create Web hooks for pushing and consuming data

5. Apps Vs. SharePoint Framework
5
Framework
Run in context (direct
access to site, web,
current user)
Access to full page
lifecycle
Choice of any dev
environment
Uses TypeScript
Apps
Run in an Iframe
Must use Visual Studio
or NAPA
JavaScript or MVC
Provider hosted apps

6. Walkthrough
6
Create a web part

7. Setting Up Development Site
7
Create a developer tenant
Need developer tenant for SharePoint deployment
Still in Preview phase
Create App catalog site
Used for storing web part
Create a developer site collection
Other site collections will not work
Setting up for development
Add ClientSideApplicationId column to document library
Needed for workbench.aspx
Download workbench.aspx from GitHub

8. Setting Up Development PC
8
Install NodeJS 3.0 or later
server
Install a code editor
Visual Studio Code
Install windows-build-tools
Compiler tools
Install gulp
Task automation
Install Yeoman
Template generator

9. Creating a web part
9
Create File Directory
Run Yeoman
Name web part
Give a description
Select JS Frameworks
Allows framework to preinstall knockout or react
Test: gulp serve

10. Web Part Breakdown
10
Config
Stores configurations for CDN deployment and test server
References to external files
Node_modules
Master storage of JS files
Src
TypeScript files
Temp
Deployment files for debug and release
Typings
TypeScript definitions

11. Walkthrough
11
Test App

12. Deploy to SharePoint
12
Set CDN URL write-manifests.json
Setup azure CDN credentials in deploy-azure-storage.json (if
applicable)
Run gulp bundle --ship
Bundles files and scripts
Run gulp package-solution –ship
Creates feature for deployment to app store
Upload app to app store
Add app to site
Add web part to page

13. Deploy to SharePoint
13
Debug
Uses local server
Filename does not
change
Files are not minimized
Release
Uses CDN URL
Files generated have
unique GUID
Must upload web part to
app store everytime
Minimized Files

14. Walkthrough
14
Deploy to SharePoint

15. Important Links
15
Walkthroughs
http://dev.office.com/sharepoint/docs/spfx
Workbench
https://github.com/SharePoint/sp-dev-
docs/blob/master/workbench.aspx
Troubleshooting
http://sharepoint.stackexchange.com/
#spfx, #spfx-webparts, #spfx-tooling
Type Script Definition repository
http://definitelytyped.org/