An Insight company

FEATURINGThe SharePoint FrameworkBob GermanPrincipal Architect

Developing SharePoint Widgets in TypeScript

Bob GermanBob is a Principal Architect at BlueMetal, where he leads Office 365 and SharePoint development for enterprise customers.

Cloud & ServicesContent & CollaborationData & AnalyticsDevices & MobilityStrategy & Design

An Insight company

@Bob1German

Agenda

•The Road Ahead for SharePoint Development

•About Widgets•About TypeScript•TypeScript Widgets Today•TypeScript Widgets in SharePoint Framework

•Resources

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

• 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

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 PagesO365

SP2016 Feature Packearly 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!

Classic SharePoint

SharePoint Framework

Future-proof SharePoint

Development

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

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?

Widgets to the rescue!

One widget can bepackaged many ways

Add-in Model

Content Editor WP

SharePoint Framework

Farm Solutions

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

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?

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

Widget Root

demo

JavaScript Widgetshttp://bit.ly/ww-jq1 - jQuery widgethttp://bit.ly/ww-ng1 - Hello World widget in Angularhttp://bit.ly/ww-ng2 - Weather widget in Angular

Introduction to TypeScript

Why Typescript?

1. Static type checking catches errors earlier2. Intellisense3. Use ES6 features in ES3, ES5 (or at least get compatibility checking)4. Class structure familiar to .NET programmers5. 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

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 SDKs\TypeScript\1.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 runnerEdit 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

Setup steps:• Install Visual Studio• For VS2012 or 2013, install TypeScript

extension• Build and debug the usual way

Visual Studio Environment

(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

(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

(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

(4) Typescript Definitionsvar 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)

demo

Typescript Widgets TodayProvisioning with PowerShell (http://bit.ly/PSProvisioning)SharePoint Site Classification Widget (http://bit.ly/TSMetadata)Weather Widget (http://bit.ly/TSWeather)

A Brief Introduction

SharePoint Framework

Project Folder/dest

/sharepoint

SP Framework Development Process

Project Folder/src

JavaScript Bundles

.spapp

Localworkbench

workbench.aspxin SharePoint

Content Delivery Network

SharePointClient-side “App”

Deplyed in SharePoint

12

3@Bob1German

demo

Weather Web Part in SPFx

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

ResourcesWidget 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

An Insight company

Thank you.