Your SlideShare is downloading. ×

SPCA2013 - SharePoint Hosted Apps and Javascript

631

Published on

SharePoint Hosted Apps and Javascript

SharePoint Hosted Apps and Javascript

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
631
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
28
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • 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.
  • 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
  • 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/
  • 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”.
  • 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.
  • 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
  • Script# allows for writing C# code which gets compiled to JavaScript.This slide shows a sample Page class
  • Script# allows for writing C# code which gets compiled to JavaScript.This slide shows a sample AdminPage class which inherits the Page class
  • You can add references to common libraries such as jQuery to use the jQuery library.
  • Generated JavaScript
  • Generated JavaScript
  • Generated JavaScript
  • Generated JavaScript
  • 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…
  • TypeScript allows us to write strongly typed JavaScript, that gets compiled to plain ECMA 5 script!
  • 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,
  • We first use a T4 Template to create the “d.ts” file that gives us full intellisense.
  • 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…
  • This slide shows the generated .ts file and the generated .js file contents.
  • AngularJS takes care for the two way data binding.
  • 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.
  • This is what we are going to built…
  • 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
  • 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
  • We also we need to add a binding template to the page...
  • And finally we need to fetch the data and bind the data
  • Transcript

    • 1. SharePoint-Hosted Apps and JavaScript Developers, developers, developers, developers, developers, developers, developers, developers, developers, developers, developers, developers, developers, developers, developers, developers, developers, developers, developers, developers, developers, developers, developers, developers, …
    • 2. Introduction • Wesley Bakker • Email : wesley.bakker@motion10.com • Principal Consultant at motion10 22-11-2013 3
    • 3. Agenda • SharePoint-Hosted Apps • The good, the bad and the ugly • JavaScript • The good, the bad and the… etc. • Demo • Questions 22-11-2013 4
    • 4. SharePoint Hosted Apps The good, the bad and the ugly 5
    • 5. What Microsoft says about SharePoint-hosted apps “SharePoint-hosted apps: SharePoint-hosted apps contain only declarative content, such as HTML and JavaScript, and don’t have any server-side code that is packaged with them. These types of apps store the HTML and other content in SharePoint and simply present the declarative content to the browser. SharePoint-hosted apps interact with SharePoint via the JavaScript object model or Representational State Transfer (REST) endpoints and are client-side based. The design and interaction of these types of apps are similar to client-side design patterns used with sandboxed solutions.” * *http://msdn.microsoft.com/library/office/dn268593(v=office.15) 22-11-2013 6
    • 6. The good • Solves many problems for Microsoft • JavaScript only • Apps run in their own app web which is a sub web of the host web 22-11-2013 7
    • 7. The bad • Solves many problems for Microsoft • JavaScript only • Apps run in their own app web which is a sub web of the host web 22-11-2013 8
    • 8. The ugly • SharePoint-hosted apps do not work with SAML and FBA sites 22-11-2013 9
    • 9. JavaScript The good, the bad and the… etc. 10
    • 10. The good • Dynamic programming language • Extensible • Can be written in an Object-oriented fashion 22-11-2013 11
    • 11. The bad • Dynamic programming language • Extensible • Can be written in an Object-oriented fashion 22-11-2013 12
    • 12. The ugly <script type="text/javascript"> var hostweburl; var appweburl; $(document).ready(function () { hostweburl = decodeURIComponent( getQueryStringParameter("SPHostUrl") ); appweburl = decodeURIComponent( getQueryStringParameter("SPAppWebUrl") ); var scriptbase = hostweburl + "/_layouts/15/"; $.getScript(scriptbase + "SP.RequestExecutor.js", execCrossDomainRequest); }); 22-11-2013 13
    • 13. Real development shortcomings • No type checking • No compile-time validation • IntelliSense is not that good 22-11-2013 14
    • 14. Huge Demo Demo 15
    • 15. Conclusion • TypeScript is pretty cool • Still in preview though and the Visual Studio plugin is not very stable… • T4 templating is pretty cool • T4 templating could use some TLC… no intellisense is pretty much a deal breaker though • AngularJS is pretty cool • No buts… it is pretty cool! • Web Essentials is pretty cool • The tool does have some bugs, it is open source though and you can submit your changes  • Writing SharePoint-hosted Apps can be pretty cool… • Nobody said it would be easy though.. 22-11-2013 42

    ×