This presentation is based on an early (pre-release) version of SP Framework, and was presented with permission from Microsoft.

1. An Insight company
Bob German
Principal Architect - BlueMetal
Introduction to the
SharePoint Framework

2. Thank You
EVENT Sponsors
We appreciated you supporting the
New York SharePoint Community!
• Diamond, Platinum, Gold, & Silver have
tables scattered throughout
• Please visit them and inquire about their
products & services
• To be eligible for prizes make sure to get your
bingo card stamped by ALL sponsors
• Raffle at the end of the day and you must be
present to win!

3. Bob German
Bob is a Principal Architect at BlueMetal, where he
leads Office 365 and SharePoint development for
enterprise customers.
Cloud & Services
Content & Collaboration
Data & Analytics
Devices & Mobility
Strategy & Design
An Insight company
@Bob1German

4. Agenda
• A Geological View of SharePoint
• Developing “from scratch” for the SharePoint Framework
• Client-Side Solutions
• Web Parts
• Single Page Apps
• List Apps
• Action Plan and Resources
@Bob1German

5. A Geological View of SharePoint
ASP.NET WebForms
ASP.NET AJAX, Scripting On Demand
SharePoint Page Models
XSLT
Custom Actions (JavaScript)
JSLink, Display Templates
Add-in Model

6. SharePoint Framework: A Clean Slate

7. SharePoint Framework: A Clean Slate
• A completely new SharePoint UI for Office 365 and SharePoint 2016
• New client-side page model
• Modern and responsive – allows “mobile first” development for
SharePoint
• Mix classic and client-side pages in a SharePoint site
• Client-side web parts work on both classic and client-side pages
• It’s still early! Open questions:
• What OOB web parts will be available for the new pages?
• How will branding work?
• How flexible will the page layout be?’
• How will it integrate with the add-in model?

8. demo
Authoring Canvas in Office 365 Blogs

9. Farm and
Sandboxed
Solutions
Add-in
Model
SharePoint
Developer
Microsoft moved the cheese… again!
JavaScript and
TypeScript
Widgets
SharePoint
Framework

10. Comparing the Models
Add-in Models SP Framework
Mobile-ready
Direct access to page (e.g. Connected Web Parts)
Ease of Data Access
Ease of Upgrade (of your solution)
Protection from Untrusted Code
Storefront Distribution
@Bob1German

11. Open Source Tools
Trad New
Templating Visual Studio Yeoman http://bit.ly/SPF-Yeoman
Language C#, JavaScript Typescript http://bit.ly/SPF-TypeScript
Runtime Env’t .NET, JS Any JS Framework http://bit.ly/SPF-JSFrameworks
Code Editor Visual Studio Visual Studio Code
(or your choice)
http://bit.ly/SPF-VSCode
Packages nuget npm http://bit.ly/SPF-npm
Task Runner Visual Studio Gulp http://bit.ly/SPF-Gulp
Compiler Visual Studio tsc http://bit.ly/SPF-TypeScript
Bundling Visual Studio WebPack http://bit.ly/SPF-WebPack
Links are case
sensitive!
@Bob1German

12. Project Folder
/dest
/sharepoint
SP Framework Development Process
Project Folder
/src
JavaScript
Bundles
.spapp
Local
workbench
workbench.aspx
in SharePoint
Content Delivery
Network
SharePoint
Client-side “App”
Deplyed in
SharePoint
1
2
3
@Bob1German

13. Don’t Panic!
Microsoft is being more
open than ever before;
the software you are
about to see isn’t even in
preview yet.
The tools and user
experience will get a lot
better before it ships!

14. demo
yo sharepoint
Part 1:
• Creating a project
• Using the SharePoint Workbench

15. demo
yo sharepoint
Part 2:
• Packaging and Uploading to SharePoint
• Viewing on a Classic Page

16. demo
yo sharepoint
Part 3:
• Deploying to a CDN

17. Now … where is the web part?

18. Splitting and Bundling
• Freely split your code into multiple files
• Each is translated to JavaScript and placed in a module based on the
filename
• TypeScript is compiled to JavaScript
• Less is compiled to CSS in a JavaScript string
• HTML becomes a JavaScript string
• JavaScript is just placed in the module
• Use exports and require to expose and consume across modules
• Advantages
• Ease of development / modularity
• Efficient download and caching
• Synchronous access (never wait for a script to load!)

19. Splitting and Bundling
.ts
.ts
.js
.html
.less
Webpack
0: javascript
Compilers
(.ts  .js,
.less  .css)
Gulp task runner
1: javascript
2: javascript
(html in string)
3: javascript
4: javascript
(css in string)
Javascript bundleSource Files

20. An Insight company
A Brief Introduction to
TypeScript

21. What is Typescript?
Typescript is a subset of JavaScript, and is “transpiled” into
regular JavaScript.
• Static type checking catches errors earlier
• Intellisense
• Use ES6 features in ES3, ES5 (or at least get compatibility checking)
• Class structure familiar to .NET programmers
let x = 5;
for (let x=1; x<10; x++) {
console.log (‘x is ‘ + x.toString());
}
console.log (‘In the end, x is ‘ +
x.toString());
var x = -1;
for (var x_1 = 1; x_1 < 10; x_1++) {
console.log("x is " + x_1.toString());
}
console.log("In the end, x is " +
x.toString()); // -1

22. (1) Type Annotations
var myString: string = '<u>Results</u><br />';
var myNum : number = 123;
var myAny : any = "Hello";
myString = <number>myAny;
var myDate: Date = new Date;
var myElement: HTMLElement = document.getElementsByTagName('body')[0];
var myFunc : (x:number) => number =
function(x:number) : number { return x+1; }
var myPeople: {firstName: string, lastName: string}[] =
[
{ firstName: “Alice", lastName: “Grapes" },
{ firstName: “Bob", lastName: “German" }
]
Intrinsics
Any and
Casting
Built-in
objects
Functions
Complex
Types

23. (2) ES6 Compatibility
var myFunc : (nx:number) => number =
(n:number) => {
return n+1;
}
let x:number = 1;
if (true) { let x:number = 100; }
if (x === 1) { alert ('It worked!') }
var target: string = ‘world';
var greeting: string = `Hello, ${target}’;
“Fat Arrow”
function
syntax
Block
scoped
variables
Template
strings

24. (3) Classes and Interfaces
interface IPerson {
getName(): string;
}
class Person implements IPerson {
private firstName: string;
private lastName: string;
constructor (firstName: string, lastName:string) {
this.firstName = firstName;
this.lastName = lastName;
}
getName() { return this.firstName + " " + this.lastName; }
}
var me: IPerson = new Person("Bob", "German");
var result = me.getName();
Interface
Class
Usage

25. (4) Typescript Definitions
var oldStuff = oldStuff || {};
oldStuff.getMessage = function() {
var time = (new Date()).getHours();
var message = "Good Day"
if (time < 12) {
message = "Good Morning"
} else if (time <18) {
message = "Good Afternoon"
} else {
message = "Good Evening"
}
return message;
};
interface IMessageGiver {
getMessage: () => string
}
declare var oldStuff: IMessageGiver;
var result:string = oldStuff.getMessage();
document.getElementById('output').innerHTML = result;
myCode.ts
(TypeScript code wants to call legacy JavaScript)
oldStuff.js
(legacy JavaScript)
oldStuff.d.ts
(TypeScript Definition)

26. An Insight company
Developing Client-Side
Projects
with SharePoint Framework

27. Client-Side Projects
1 Client-Side Web
Parts
Run on classic and client-side pages
2 Client-Side Apps
(single page)
Your Single-Page application hosted in
SharePoint
3 Client-Side Apps (list)
A SharePoint list with forms (AllItems, Display,
Edit, New)

28. demo
Weather Web Part

29. demo
Client-Side Page Application

30. demo
Client-Side List Application

31. So now what?
WTF! Is Microsoft serious?
When will it ship?
Where do I get it?
How do I get started?

32. Yes – Microsoft is serious about modernizing
SharePoint!
Prediction: Over the next few years, Microsoft will change
the entire SharePoint user experience to meet the needs of
a modern, mobile workforce.
It’s like upgrading a car, one part at a time – while you’re
driving it cross country!
Web Parts
O365 – mid 2016
New Pages
O365 – late 2016
SP2016 Feature Pack
early 2017
Web Era Cloud and Device Era

33. Yes – Microsoft is serious about modernizing
SharePoint!
The SharePoint Framework is additive!
• Classic SharePoint pages can run the new web parts
• Classic SharePoint sites can include the new full-page
solutions
It should be possible to transition our sites gradually to the
new model
Web Era Cloud and Device Era

34. Tooling Up
TypeScript TypeScript Site
• http://bit.ly/SPF-TypeScript
TypeScript Playground
• http://bit.ly/TSPlayground
Bob’s TS “Cheat Sheets”
• http://bit.ly/LearnTypeScript
WebPack WebPack Site
• http://bit.ly/SPF-WebPack
REST API’s SharePoint REST API reference
• http://bit.ly/SP-REST
Gulp Gulp task runner
• http://bit.ly/SPF-Gulp
VS Code Visual Studio Code
• http://bit.ly/SPF-VSCode
Join me Thursday at 3:45 for:
Future-Proof Development for SharePoint and
SharePoint Online

35. Conference Materials
• Slides / Demo will be posted on Lanyrd.com
• http://lanyrd.com/2016/spsnyc
• Photos posted to our Facebook page
• https://www.facebook.com/sharepointsaturdaynyc
• Tweet Us - @SPSNYC or #SPSNYC
• Sign Up for our NO SPAM mailing list for all
conference news & announcements
• http://goo.gl/7WzmPW
• Problems / Questions / Complaints / Suggestions
• Info@SPSNYMetro.com

36. • Visit ExtaCloud’s booth for wrist bands!
Scallywag's Irish Pub
508 9th Ave, between 38th & 39th.
[6 minutes walk]
Scallywags also serves food.
http://www.scallywagsnyc.com/

37. An Insight company
Thank you.