1 / 29

Microsoft’s TypeScript : JavaScript for the SharePoint Dev Guy

Microsoft’s TypeScript : JavaScript for the SharePoint Dev Guy. John Liu. a bout John Liu. Senior Consultant for SharePoint Gurus Sydney SharePoint Server MVP User G roups, SharePoint Saturday, SharePoint Conferences, http://johnliu.net @ johnnliu. Contents. What is TypeScript

cortez
Download Presentation

Microsoft’s TypeScript : JavaScript for the SharePoint Dev Guy

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Microsoft’s TypeScript: JavaScript for the SharePoint Dev Guy John Liu

  2. about John Liu • Senior Consultant for SharePoint Gurus Sydney • SharePoint Server MVP • User Groups, SharePoint Saturday, SharePoint Conferences, • http://johnliu.net • @johnnliu

  3. Contents • What is TypeScript • Why do we need TypeScript • How • Demo • Pinteresp • Working with your existing JavaScript

  4. What is TypeScript • A superset of JavaScript • Created by the father of C# Anders Hejlsberg • Based on ecmascript 4 + ecmascript 6 • Free and open source, strongly supported by Microsoft • Used by Bing, TFS Online, Monoco • To answer why we need JavaScript+, we need to understand what's wrong with vanilla JavaScript

  5. What is the problem • Why do people hate working in JavaScript? • Douglas Crockford David Flanagan

  6. What is the problem • JS is designed for small things • We now use to do big things • AJAX and REST = never refresh the page • But JavaScript is not suited for building large applications • As JavaScript codebase get complex; code rots

  7. Problem – types are dynamic • Variables are dynamically typed. Flexible, but you don’t know at any point what the variable is. • var x = 1; var y = x + 1; • var x = 1; var y = x + 1; x = “hello”; • What is type of:y • { } is ad-hoc object. [ ] is empty array. • What is value of: { }+[ ]

  8. Problem - scope • JavaScript's scope looks like C#, but does not work at a block level. It is at the function level. • vari = 1;if (i == 1) {vari = 2;}var y = function { vari = 3; }

  9. Problem - multiple files • JavaScript doesn't understand multiple files.  • VS.NET helps with <reference>, but doesn't help you check the correctness of your reference code

  10. Let's look at TypeScript • To get started with TypeScript, grab it from http://typescriptlang.org this includes VS2012 or VS2013 extensions 

  11. TypeScript - first glance - optional strong type checking • // jsfunction f(x, y) { return x * y;} • // tsfunction f(x : number, y : number) : number { return x * y;} // Type information is enforced in design and // compile time, but removed at runtime

  12. TypeScript - demo.ts • Let's go see demo.ts in Visual Studio

  13. TypeScript - pinteresp.ts • see pinteresp.ts - building a sandbox webpart with TypeScript

  14. Real world story • Brian Harry (of TFS) converts TFS Web UI to TypeScript • 80,000 lines of code • Heavily tested by unit tests and functional tests, JSLint clean • Finds 13 bugs after initial conversion • http://blogs.msdn.com/b/bharry/archive/2012/10/24/typescript-a-real-world-story-of-adoption-in-tfs.aspx

  15. How - existing projects - practical guidelines • Q: I have spaghetti JavaScript how do I update them to TypeScript? • You don't have to start with your largest file. You don't have to convert all your files.Start with the smaller file. Everything will still work.

  16. How - existing projects • #1 copy the JS file and paste into a TS file. Remember: JS is subset of TS

  17. How - existing projects • #2 Add <reference> for definition files • #3 Optional arguments in your functions • #4 Fix ad-hoc objects to match definition interfaces. • #5 Create missing definitions (e.g. 3rd party JQuery extensions) • Majority of errors are TypeScript asking you to describe the interface better.

  18. How - existing projects • #6 Fix minor issues is TS • Fix deprecated method references (JQuery.live should be JQuery.on) • Fix Date - Date • These are common issues - easy to find solutions on StackOverflow (the official support forum for TypeScript) • Good news: That's it!

  19. How - existing projects • Now, you can start to refactor and improve your TypeScript • #1 Group utility functions into a separate scope. Move them out into a commonly shared file. Add Type information and jsdoc comments for them. • #2 Use F2 rename symbol to finally standardize the variable/function names in JS, without fearing things would break • #3 If you are working with a number of files, TypeScript will now check across files to make sure you are still calling valid functions, if your team member change them.

  20. How - existing projects • CongratulationsYou (and your team) are on your way to cleaner, maintainable code

  21. Deploying – SP 2007 • Use Content Editor webpart and point to a HTML file, which then references a JavaScript file generated from TypeScript. • Use VS.NET with WebDAV • Package as farm solution web part • Include map file to debug in IE12 / Chrome.

  22. Deploying – SP 2010 • Use Sandbox solution to deploy a sandbox webpart • Reference a JavaScript file generated from TypeScript • Package as sandbox solution

  23. Deploying – SP 2013 / Office 365 • Using App for SharePoint to deploy an App Part • Do not create code behind. Reference JavaScript file generated from TypeScript • Configure App permissions • Package as SharePoint “App” • When deploying – grant permissions to App

  24. In Summary… • AwesomeVS.NET tools for design, compile and debug • Helps you understand and write better JavaScript • Works with any existing third party JS libraries • Refactoring, multiple files enables code reuse and team work • Requires very little new learning. Combine what you already know from Javascript and C# • TypeScript is great for your SharePoint projects.

  25. References - TypeScript • http://www.typescriptlang.org/ • http://blogs.msdn.com/b/typescript/ • http://visualstudiogallery.msdn.microsoft.com/07d54d12-7133-4e15-becb-6f451ea3bea6 • http://channel9.msdn.com/Shows/Going+Deep/Anders-Hejlsberg-and-Lars-Bak-TypeScript-JavaScript-and-Dart • https://github.com/borisyankov/DefinitelyTyped • http://www.slideshare.net/jeremylikness/introduction-to-typescript • http://prezi.com/zkhsz49ownaw/coffeescript-vs-typescript/

  26. References - SharePoint + TypeScript • http://www.chaholl.com/archive/2013/01/03/typescript-in-a-sharepoint-farm-solution.aspx • http://sptypescript.codeplex.com/ • http://johnliu.net/blog/2013/3/13/building-sharepoint-solutions-with-microsofts-typescript-why.html • http://sharepoint-community.net/profiles/blogs/creating-sharepoint-solutions-with-typescript

  27. References - JavaScript • http://javascript.crockford.com/javascript.html • http://javascript.crockford.com/inheritance.html • http://www.adequatelygood.com/2010/2/JavaScript-Scoping-and-Hoisting • http://www.jibbering.com/faq/notes/closures/

  28. Questions? Comments? More info John.Liu@SharepointGurus.net @johnnliuhttp://JohnLiu.net

  29. Thanks for listening Remember to submit your feedback

More Related