SPCA2013 - SharePoint Hosted Apps and Javascript

Editor's Notes

• #8: SharePoint-hosted apps solve many problems for Microsoft in a sense that not a single line of code runs in the app pool process. This protects the core processes of SharePoint.It is actually a good thing that you can use JavaScript only. Sandboxed solutions should be built in a way that they use JavaScript as much as possible to prevent from being shutdown because of resource usage. A lot of solutions however simply required to up the available resource points instead of switching to extend the use of JSOM.Apps must be running in their own app web to ensure that no actions can be performed while circumventing the use of a proxy which checks permissions. It also ensures that nothing is added to the SharePoint site that cannot be upgraded. In a worse case scenario, your app stops working on upgrade, with which you’ll only loose app functionality. Your default SharePoint functionality remains untouched.
• #9: Even though SharePoint-hosted apps solves many problems for Microsoft, they do introduce a lot of challenges for developers. Such as how to cope with cross-site script access, how to integrate with the SharePoint UI.The fact that it is JavaScript only, limits the possibilities. You cannot perform any server side custom tasks. Such as resizing an image, combine files and download them as zip.Apps run in their own app web, which by default creates an app web for each web the SharePoint-hosted apps get added. You can deploy an app from the app catalog management page which creates a single app web for all webs, unfortunately this doesn’t work for all sorts of features. CustomAction elements for example cannot be deployed like this. The fact that the SharePoint-hosted apps gets its own App Web isn’t that big a deal, except when you use a lot of JavaScript libraries. These libraries need to be downloaded for each web where your app is added, since they are hosted under a different URL, the client cannot cache these libraries
• #10: SharePoint-hosted apps do not work with SAML and FBA sites. A good explanation on why can be found here: http://nearbaseline.com/blog/2013/07/sharepoint-hosted-apps-with-saml-authentication/
• #12: JavaScript has a lot of well known pro’s and con’s. And the fact that it’s a dynamic language is both great and “dangerous”.
• #13: JavaScript has a lot of well known pro’s and con’s. And the fact that it’s a dynamic language is both great and dangerous.
• #14: The ugly doesn’t come from JavaScript itself, but from the code samples found on the Microsoft sites…This sample codemixes jQuery usage and standard JavaScriptUses string concatenation to generate html outputCreates variables in the global scope with a very common name..Code source: http://msdn.microsoft.com/en-us/library/fp179927.aspxBeside that, documentation of the JSOM libraries is very poor
• #19: Script# allows for writing C# code which gets compiled to JavaScript.This slide shows a sample Page class
• #20: Script# allows for writing C# code which gets compiled to JavaScript.This slide shows a sample AdminPage class which inherits the Page class
• #21: You can add references to common libraries such as jQuery to use the jQuery library.
• #22: Generated JavaScript
• #23: Generated JavaScript
• #24: Generated JavaScript
• #25: Generated JavaScript
• #26: Unfortunately there is no SharePoint reference available… which renders Script# pretty useless for SharePoint-hosted app development.You can however see something called sharepoint.TypeScript.DefinatelyTyped… wonder what that is…
• #28: TypeScript allows us to write strongly typed JavaScript, that gets compiled to plain ECMA 5 script!
• #29: TypeScript also allows us to add references to other ts or d.ts (definition) files. This in turn gives us intellisense and type checking.The biggest advantage of TypeScript is that it has a large community and from that community comes the SharePoint.d.ts file that contains the SharePoint definitions,
• #31: We first use a T4 Template to create the “d.ts” file that gives us full intellisense.
• #32: We then use a T4 template that uses regular expressions to generate the actually needed .ts file that will in turn generate the needed JavaScript…
• #33: This slide shows the generated .ts file and the generated .js file contents.
• #35: AngularJS takes care for the two way data binding.
• #37: By creating a “.bundle” file we concatenate all the JavaScript files in the defined order… by minifying the result… we get a single minified JavaScript file.
• #38: This is what we are going to built…
• #39: First of all we need the custom action to open a dialog with the ActionHandlerLight.aspx page.Do notice the HostWebDialog,HostWebDialogHeight and HostWebDialogWidth attributes
• #40: We also need some sort of framework for the basic page handling such as error logging, closing dialogs, reading query string paramaeters, taking care of styling and such
• #41: We also we need to add a binding template to the page...
• #42: And finally we need to fetch the data and bind the data