Bob German, a Principal Architect at BlueMetal, gave a presentation about developing SharePoint widgets using TypeScript. He discussed how Microsoft is modernizing SharePoint with the new SharePoint Framework. Widgets provide a way to build reusable components for different SharePoint development models using HTML and JavaScript. TypeScript adds benefits like catch errors earlier and use modern JavaScript features. German demonstrated how to set up TypeScript and build widgets today and in the future SharePoint Framework.

1. An Insight company
Bob German
Principal Architect
Developing SharePoint Widgets
in TypeScript

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

3. Agenda
• The Road Ahead for
SharePoint Development
• About Widgets
• About TypeScript
• TypeScript Widgets Today
• TypeScript Widgets in
SharePoint Framework
• Resources

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

5. • 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
• Phase in over time
• Client-side web parts work on both classic and client-side pages
(Check out O365 blogs to try the Canvas)
• Mix classic and client-side pages in a SharePoint site
SharePoint Framework: A Clean Slate

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

7. Classic
SharePoint
SharePoint
Framework
Future-proof
SharePoint
Development

8. Too Many SharePoint Development Models!
Farm
Solutions
Sandboxed
Solutions
Add-in
Model
Content
Editor WP
SharePoint
Framework
Q: What do they have in common?
A: HTML and JavaScript

9. Widgets to the rescue!
• Commonly used on the Internet called
”Web Widgets”, ”Plugins”, ”Embeds”, etc.
• It’s just a clever piece of HTML and
Javascript that acts like a web part
• Why not use the same pattern in
SharePoint?

10. Widgets to the rescue!
One widget can be
packaged many ways
Add-in
Model
Content
Editor WP
SharePoint
Framework
Farm
Solutions

11. Widgets in Action: BlueMetal Intranet
SharePoint Online using
Light Branding and Widgets
1. My Clients & Projects List
2. News Feed
3. Tabbed New Hire and Anniversary
Carousel
4. Tabbed Calendars/Discussions
5. Twitter Feed

12. What makes a good widget?
1
ISOLATED – so they won’t interfere with other
widgets or the rest of the page
Can you run multiple copies of the widget on a page?
2
EFFICIENT – so they load quickly Does the page get noticeably slower as you add
widgets?
3
SELF-CONTAINED – so they’re easy to reuse Does the widget work without special page elements
such as element ID’s, scripts, and CSS references?
4
MODERN – so they’re easier to write and maintain Is the widget written in a modern JavaScript
framework such as AngularJS or Knockout?

13. Widget Wrangler
• Small open source
JavaScript Framework
• No dependencies on
any other scripts or
frameworks
• Works with popular JS
frameworks (Angular,
Knockout, jQuery,
etc.)
• Minimizes impact on
the overall page when
several instances are
present
<div>
<div ng-controller="main as vm">
<h1>Hello{{vm.space()}}{{vm.name}}!</h1>
Who should I say hello to?
<input type="text" ng-model="vm.name" />
</div>
<script type="text/javascript" src="pnp-ww.js“
ww-appName="HelloApp“
ww-appType="Angular“
ww-appScripts=
'[{"src": “~/angular.min.js", "priority":0},
{"src": “~/script.js", "priority":1}]'>
</script>
</div>
AngularJS Sample

14. demo
JavaScript Widgets
http://bit.ly/ww-jq1 - jQuery widget
http://bit.ly/ww-ng1 - Hello World widget in Angular
http://bit.ly/ww-ng2 - Weather widget in Angular

15. Introduction to TypeScript

16. Why Typescript?
1. Static type checking catches errors earlier
2. Intellisense
3. Use ES6 features in ES3, ES5 (or at least get compatibility checking)
4. Class structure familiar to .NET programmers
5. Prepare for AngularJS 2.0
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

17. Setup steps:
• Install VS Code
• Install Node (https://nodejs.org/en/download)
• npm install –g typescript
• Ensure no old versions of tsc are on your path; VS
adds:
C:Program Files (x86)Microsoft
SDKsTypeScript1.0
• In VS Code create tsconfig.json in the root of your
folder
{
"compilerOptions": {
"target": "es5“,
"sourceMap": true
}
}
• Use Ctrl+Shift+B to build – first time click the
error to define a default task runner
Edit task runner and un-comment the 2nd
example in the default
• npm install –g http-server
(In a command prompt, run http-server and
browse to http://localhost:8080/)
VS Code Environment

18. Setup steps:
• Install Visual Studio
• For VS2012 or 2013, install TypeScript
extension
• Build and debug the usual way
Visual Studio Environment

19. (1) Type Annotations
var myString: string = ‘Hello, world';
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

20. (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

21. (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

22. (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)

23. demo
Typescript Widgets Today
• Provisioning with PowerShell (http://bit.ly/PSProvisioning)
• SharePoint Site Classification Widget (http://bit.ly/TSMetadata)
• Weather Widget (http://bit.ly/TSWeather)

24. A Brief Introduction
SharePoint Framework

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

26. demo
Weather Web Part in SPFx

27. Getting ready for the future…
• Write web parts and forms for Classic SharePoint today for easy
porting to SharePoint Framework
• Start learning TypeScript and a modern “tool chain”
(VS Code, Gulp, WebPack)
• Download the SPFx Preview and give it a spin

28. Resources
Widget Wrangler
• http://bit.ly/ww-github
• http://bit.ly/ww-intro
(includes links to widgets in Plunker)
TypeScript Playground
• http://bit.ly/TSPlayground
SharePoint Framework
• http://bit.ly/SPFxBlog
Bob’s TS Code Samples
• http://bit.ly/LearnTypeScript
• http://bit.ly/TSWeather

29. An Insight company
Thank you.