TypeScript and SharePoint Framework
Download as PPTX, PDF1 like1,409 views
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.
![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](https://image.slidesharecdn.com/german-typescriptwidgetsandspfx-160910013921/85/TypeScript-and-SharePoint-Framework-13-320.jpg)
![(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](https://image.slidesharecdn.com/german-typescriptwidgetsandspfx-160910013921/85/TypeScript-and-SharePoint-Framework-19-320.jpg)
TypeScript and 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!
- 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
- 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.