Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

TypeScript and SharePoint Framework


Published on

A presentation at SharePoint Saturday Boston, 2016 by Bob German

Published in: Software
  • Login to see the comments

TypeScript and SharePoint Framework

  1. 1. An Insight company Bob German Principal Architect Developing SharePoint Widgets in TypeScript
  2. 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. 3. Agenda • The Road Ahead for SharePoint Development • About Widgets • About TypeScript • TypeScript Widgets Today • TypeScript Widgets in SharePoint Framework • Resources
  4. 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. 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. 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. 7. Classic SharePoint SharePoint Framework Future-proof SharePoint Development
  8. 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. 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. 10. Widgets to the rescue! One widget can be packaged many ways Add-in Model Content Editor WP SharePoint Framework Farm Solutions
  11. 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. 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. 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{{}}{{}}!</h1> Who should I say hello to? <input type="text" ng-model="" /> </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. 14. demo JavaScript Widgets - jQuery widget - Hello World widget in Angular - Weather widget in Angular
  15. 15. Introduction to TypeScript
  16. 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. 17. Setup steps: • Install VS Code • Install Node ( • 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. 18. Setup steps: • Install Visual Studio • For VS2012 or 2013, install TypeScript extension • Build and debug the usual way Visual Studio Environment
  19. 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. 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. 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. 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. 23. demo Typescript Widgets Today • Provisioning with PowerShell ( • SharePoint Site Classification Widget ( • Weather Widget (
  24. 24. A Brief Introduction SharePoint Framework
  25. 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. 26. demo Weather Web Part in SPFx
  27. 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. 28. Resources Widget Wrangler • • (includes links to widgets in Plunker) TypeScript Playground • SharePoint Framework • Bob’s TS Code Samples • •
  29. 29. An Insight company Thank you.