Lessons learnt from feedback on JavaScript & AngularJS in SharePoint Hosted Apps

I posted my first JavaScript article last month and also was pushing myself to apply the AngularJS framework. I had some AMAZING feedback in a comment from Стас Выщепан. I sat down last night and went through point and figured and write about what I learnt here so it may help others. I’m always learning and jumping from C# managed code to JavaScript is challenging for me for sure!

1) You are using aspx page in app web and you shouldn’t load scripts with JQuery

As I’m learning I am grabbing blocks of code from MSDN pages and Code Samples around the blogosphere. I had a chunk of code where JQuery was loading these scripts in my app.js page.

It turns out I didn’t need this block of code as these files were actually already loaded in the default.aspx page via this code block:

2) You are using aspx page in app web and you don’t need to use a SP.ProxyWebRequestExecutorFactory.

In that same block above, I also didn’t need the SP.RequestExecutor javascript either as I’m in a SharePoint Hosted App, you only need this if you are going cross domain. This MSDN page explains it well. So rather than this code:

I just needed this which is much cleaner:

3) Your code contains a lot of copy-paste fragments.

Yep, noted…

4) Your code contains 3-5 times more LOC than it should be.

Roger…

5) Intention of using deffered’s is not clear, you are not resolving most of them.

So in my functions within my services I was starting them all with the deferred variable:

To be honest, I was just doing this in each service because that is what I saw in the promises background from Shawn Wildermuth. It turns out that I wasn’t using the deferred.resolve() where i should have been on my async functions. I was using teh deferred.reject() within the second functions, but not the first function.

 

6) Seems like you don’t need a service. Service should be a reusable component, not tied to concrete business-logic or schema.

This was a sample which I’m going to abstract out and pass in the business logic…I was simply getting the sample working first.

7) You shouldn’t instatiate SP.ClientContext each time, wait until sp.js loaded and use SP.ClientContext.get_current().

This was definitely a slack move on my part to not wait for the document to be loaded and sp.js to be loaded like this:

I adjusted this by wrapping it the executeOrDelayUntilScriptLoaded and also the $(document).ready():

8) Over-using Function.createDelegate. It’s better to use closures or $.proxy.

All of the code samples I’ve seen around using CSOM have used the Function.createDelegate inside of context.executeQueryAsync() parameters. From talking to the guys at MSDN they are trying to keep the code framework free JavaScript as the assumption is that some will use JQuery and some will use other ones. I tend not to agree there as by default JQuery is included in Apps so I’d like more MSDN samples to just use JQuery approach. Here is the code I was using:

The two approaches that are claimed better are closures or $.proxy(). I did some research on closures and found a nice post on the Apps for Office & SharePoint blog. I’d also forgotten about Doug Ware’s awesome series on C# for JavaScript and how he’d explained closures also. Two blogs YOU MUST subscribe to! After a bit of digging I found this example which helped me structure my code without the createDelegate:

To get this to work, I also had some “.this” stuff going on that was causing the function not to find the listItems object within the executeQueryAsync which I had to fix. I definately need to research more around scope of objects etc. here.

I also now have an issue where the push angularJS call isn’t actually refreshing the binding to show the newly added app. As soon as I hover over the list it appears which is an odd one?!?! I had to add this code to force it to update:

9) In sharepoint pages you can use JSRequest class to parse query string.

I was using another sample from MSDN to fetch the Host Web and App Web URLs.

and then this method:

But it appears that you can use this SPRequest Library instead that doesn’t seem to be that well documented on MSDN.

Obviously this is much cleaner!

Wrap Up

I’d just like to say a big thank you to Стас Выщепан for taking the time to give me this feedback! I love this community!

11 thoughts on “Lessons learnt from feedback on JavaScript & AngularJS in SharePoint Hosted Apps”

  1. #6 – service as a reusable..

    It can be used as a reusable component – but in general you would often use a service for business logic – since you should avoid using business logic in the controller – to keep the controller as small as possible.

    There is a bit of religion going on about that, but in general most would probably agree. :)

  2. Cool stuff Jeremy.

    Have you looked at http://durandaljs.com/ as an alternative to AngularJS? As I understand, both framework have similar features (binding, routing, amd). However, I found that Durandal was easier to pick up for people who’ve used KnockOutJS previously. Just trying to balance these new technical feature against labor skill availability. Not many people know much here, we’re all learning at the same time.

    Thanks for the detailed posted. Great to see the SP dev community coming together around new JS coding practices.

    1. I decided to jump on the AngularJS bandwagon due to Google backing. I did look at other frameworks but my web monkey friends tell me this is a good bet ;-)

    1. I’m always learning from everyone, just amazes me that he took that much time to review and comment. Such a great community to be a part of.

  3. Hey, great write-up, Jeremy. I’m bookmarking this post and holding onto it for future reference. I wasn’t aware of some of the shortcuts and libraries that were available for use behind-the-scenes. Similar to where you may have been coming from, most of SharePoint-hosted app building base comes from the limited samples and discussions that were available circa summertime last year. Seeing what you’ve learned makes it painfully obvious to me that I need a refresher and update myself.

    Thanks for sharing :-)

    1. Thanks dude, yeah i’ve had a lot of good feedback from this…definitely going to continue on down this path. Absolutely happy to put my hand up and say i’m not strong in this area and learning but it seems this is useful. Thanks for the comment.

  4. #8 Did you found solution for this example?
    I also have a problem that the result is not refreshable.
    It mean’s that I get all records, but there are not visible on the page

Leave a Reply