Category Archives: Critical Path Training

Critical Path Training Webinar Material

I completed my Critical Path Training webinar earlier today.  All in all, I think it went pretty well.  There was a TON of material to cover, and as usual, not enough time to cover it all.  I’ve posted the source code I showed to Git (https://github.com/Sector43/CPTJSWebinar) and you can clone it from here:  https://github.com/Sector43/CPTJSWebinar.git.

In the webinar I showed a sample application which manipulated Views in SharePoint to show an icon in place of a column value based on the value of that column for the item in the view.  It wasn’t a fancy demo, but the code has a lot of good stuff in it – including a full suite of tests, use of the revealing module pattern, IIFEs, defensive coding, dependency injection, etc. 

Once you’ve pulled the code down, there are a few steps you’ll need to take to make everything work.  As I said in the demo, this is not beginner-level stuff, so I’m assuming you’re familiar with VS, node, NuGet, etc. or can figure out what you need.  Here’s a summary of what you need to do

  1. Install node – www.nodejs.org
  2. Add an environment variable for CHROME_BIN pointing to the folder where you have Chrome installed.  You can also add one for FIREFOX_BIN if you’d like to use Firefox for testing in Karma.
  3. Add the Karma Visual Studio plugin from here: https://visualstudiogallery.msdn.microsoft.com/bfe6feb7-7ec4-4e8e-9d90-cf6ea2cd2169  (only if you want to see the test results in the VS Test Runner window).
  4. In Visual Studio, toggle the “Run Tests on Build” option on in the Test Explorer Window
  5. Restore NuGet packages
  6. Install node packages (from a command prompt in the root of your project):
    • npm install karma-cli
    • npm-install karma
    • npm install karma-chrome-launcher
    • npm install karma-xml-reporter
    • npm-install karma-jasmine
    • npm-install jasmine-jquery
  7. Edit the karma.conf.js that is in the source code if necessary
  8. From the command prompt in the root of your project: karma start

Karma should now launch in a command window, launch Chrome and then run all of  the tests in the project.  They should all pass initially.

Feel free to kick the tires on the code and give it all a good workout.  If you find bugs, please issue a pull request and I’ll work them back into the repo.

The LogManager and REST utilities are included in here but will eventually be wrapped into the SPClientLib project I’m working on (which will also be released on GitHub).

As I said in the webinar, this is what I would consider “production-ready” code, but PLEASE review it and understand what it is doing before using any piece of it as-is.  It is released under the MIT license so you are free to use it for any purpose, but you must keep attributions intact and please share back any improvements.

Dave

Typescript Webinar–Part 1

I just wrapped up my latest webinar on the Critical Path Training free webinar series – this time on Typescript.   It was pretty well attended – about 60 people if I saw the attendee counter properly.  Smile  I think the session went OK – it started out a little slow but then picked up and as usual, I had way too much content to fit into a 45 minute session (allowing time for Q&A).

If you missed the live session, the recording is available here: http://t.co/bSZvjTYE.

Anyway, as promised, this post is a summary of the material I covered and the first of what I hope to be several posts on the subject of Typescript and SharePoint.  I do need to revisit my JavaScript series, which has been sorely neglected over the past few months, and see how it needs to be refocused to fit into the brave new world of Typescript.

What Is Typescript?

So, first of all…what is Typescript?  From the www.typescriptlang.org website, we learn that:

Typescript is a language for application-scale JavaScript development.
Typescript is a typed superset of JavaScript that compiles to plain JavaScript.
Any browser. Any host. Any OS. Open Source.

Great.  That and $5 will buy me a cup of coffee.  Honestly, that description barely scratches the surface of Typescript.  Personally, I prefer this as a definition:

Typescript is a language and accompanying tools that support robust, professional development using JavaScript for cross-browser, cross-host applications of any size.  It facilitates the creation of standards-compliant JavaScript (ECMAScript) in a type-safe, easy-to-use manner which can be quickly grokked by most managed code or other professional programmers.

I think that is a far more encompassing definition. 

Now on to the good stuff.

Getting Started with Typescript

To get started with Typescript, you first need to install a couple of tools.  First, you’ll need the Visual Studio plug-in and I highly recommend Web Essentials (for more than just Typescript):

Web Essentials: http://visualstudiogallery.msdn.microsoft.com/07d54d12-7133-4e15-becb-6f451ea3bea6

VS Plugin: http://go.microsoft.com/fwlink/?LinkID=266563 (If you don’t use Visual Studio, Typescript is also available for Sublime Text, Emacs and Vim.  My guess is that if you’re doing SharePoint development you use VS…)

With those installed, you’re ready to go.  You can now create a SharePoint project (Farm, Sandbox or App – doesn’t matter) and add a Typescript file to it:

image

 

After you first add the Typescript file to your project, you’ll see it in Solution Explorer:

image

(Notice that there is no accompanying .js file yet)

Once you compile (which could be as simple as just saving the .ts file, depending on how you’re environment is configured), the appropriate .js files are created and nested under the .ts file in Solution Explorer:

image

The configuration settings to pay attention to are in Tools|Options|Web Essentials|Typescript:

image

Most are pretty straightforward and can be left at their defaults for now.  I’ll explore these options in more detail in a later article.  The only ones I like to make sure are set a certain way are “Keep Comments,” “Compile on Save”,” and “Minify generated JavaScript” – I make sure they’re all set to TRUE.  Believe it or not, we want to leave “Compile all Typescript files on build” set to FALSE.  We’ll address that next.

To make sure that our Typescript code is compiled into JavaScript at the proper time, we need to go through a little hack for any SharePoint projects.  Rob Bogue spells it out here: http://www.thorprojects.com/blog/archive/2012/10/13/including-typescript-in-a-sharepoint-project.aspx and the end result looks like this in your .csproj file:

image

The highlighted part is what we added.  Note that you’ll need to perform that little hack for every project in your SharePoint VS Solution that needs to compile Typescript.

The last thing you’re going to want to do is remove the .ts file from your deployment package – there’s no sense including it in the package – neither SharePoint nor the web server would have any idea what to do with it.  Doing this is simply a matter of deleting it from, or commenting it out of, the Elements.xml file:

image

Now we’re finally ready to begin… 

The Typescript Editor

The Typescript editor is a two-paned affair.  You type your Typescript on the left, the right is a preview of your generated JavaScript:

image

Each and every Typescript file you add will have some sample code included with it.  This is great while you’re learning but just an annoyance when you’re actually trying to be productive.  I hope this changes in the RTM of the tooling.  If, for some reason the tooling doesn’t change at RTM, or if deleting the sample code every time gets on your nerves, you could just create a Text file and change the extension to .ts.

After pondering over the sample code for a few minutes, go ahead and delete everything in the left hand pane – Ctrl-A | Delete will do the trick.  Now save your .ts file and, assuming you set your options as specified above, the JavaScript code in the preview on the right hand side will disappear as well.

This is probably a good place to end part 1 of this article.  We’ll pick up with Part 2 shortly covering our first baby-steps into writing Typescript code.  I’ll leave you with some resources to help you learn basic Typescript.  Part 2 will review some of that quickly and then move on to SharePoint-specific Typescript code.

Resources

Typescript Language Specification: http://go.microsoft.com/fwlink/?LinkId=267238

Pluralsight Typescript course: http://pluralsight.com/training/courses/TableOfContents?courseName=typescript

My webinar slides: blog.mannsoftware.com/wp-content/uploads/2013/02/typescriptandsharepoint.pdf

 

That’s it for part 1. 

 

Dave

Questions from my CPT Webinar

I delivered my installment in the Critical Path Training 2012 Webinar Series last week covering JavaScript for SharePoint developers.  Overall I think the session went pretty well.  If you missed it, the recording is available here: Watch the recording.  The only real problem was that, as usual, I had WAY too much material to cover in the 45 or minutes allotted.  As a result, I didn’t get the chance to answer any of the questions that the attendees asked during the session, so here are the questions and answers:

Q: Do you recommend minimizing your js files?

A: Absolutely!  Minimizing and compressing your JavaScript files is an easy way to improve the performance of your site.  In addition, wherever possible, try to  minimize the number of individual script files that need to be downloaded.  Less HTTP requests means better performance.


Q: Is this a sandbox solution?

A: (I’m assuming the question is about the CKS:ScriptLibrary solution I demonstrated).  Yes.  The CKS:Script Library is fully sandbox-compatible.


Q: Is SOD (Script On-Demand) available in sandbox solution?

A: Yes.  The only related thing that is not is the ScriptLink control.


Q: Does the usage of javascript extend to jquery?

A: JQuery IS JavaScript, so yes.  As I said in the session – there is technically no such thing as “writing JQuery.”  You use the JQuery library to make it easier to write JavaScript.


Q: SP in the first line…SP.ExceptionHandlingScope that is in what library?

A: SP.Runtime.JS


Q: What other method of loading JS files is there besides Visual Studio solutions if you don’t want to use CEWP…?

A: A VS Solution is really the best method of getting the .js files placed on the server.  My (distant) second choice would be manually loading them into the script library manually via the browser.  The (evil) CEWP comes into play when you’re talking about referencing script files on a given page.  At that point, I would recommend a Custom Action, editing your Master Page, adding it via a web part, or just about any means except using the CEWP.


Q: Where would you recommend for us to learn & deep dive into these advanced javascript language & concepts you are talking about – learning resource? approach? so we can pickup these professional js skills easier?

A: There is a wealth of JavaScript information available on the Internet.  A simple search will turn up quite a lot of good resources.  My somewhat self-serving answer would also be to keep an eye on this blog.  I’ll be covering a lot more material over the next couple of weeks.


For those of you who caught the release of the SharePoint “15” Preview earlier today, this JavaScript stuff only gets more important in the next version of SharePoint, so it would behoove us all to come up to speed on it as quickly as we can.  I hope I can help with that…

Thanks,

Dave

PS: If you’re looking for SharePoint 2010 developer training, I’ll be teaching the CPT 2010 developer course as a webcast on September 10th.  More information is available here: WC-SPT2010 – Developing Solutions with SharePoint 2010 Webcast

Questions from my Pro-Dev webinar

There were a few questions that I didn’t get to answering at the end of my Critical Path Training webinar last week.  I apologize for not getting to them during the webinar, but I was already running significantly overtime, so I’ll address them here:

Q: Does cksapi.codeplex.com use the Microsoft Practices LoggerProxy project?

A: It does not directly use the Patterns and Practices material as there is a lot of “extra” stuff included (Service Locator, etc) that would have made just using the logging and exception handling more difficult.  Our goal for CKS:API is to be a lightweight, largely independent collection of resources that do not require a lot of additional architectural elements.  The P&P guidance is an excellent resource and if you find yourself needing a large percentage of it, I would strongly recommend looking at using it in its entirety.  All of that said, some of the approaches and code practices in CKS:API are quite similar to the P&P guidance.

 

Q: How about Microsoft unit testing framework that comes out of the box with visual studio 2010, is this an option when it comes to SharePoint?

A: The unit testing tools in Visual Studio can be used to manage and run your tests for SharePoint.  This is what I used in my demos.  Due to some complexity in testing SharePoint, you need some facility to create mocks to stand in for standard SharePoint objects in order to eliminate your dependency on SharePoint.  In the demo, I used TypeMock Isolator for this, but you could also use Microsoft’s Pex/Moles.

 

Q: How do you recommend using SpGuidance in code? because that puts more overhead and more objects runtime..

A: See my answer to question #1 above.

 

Q: Is CKS API logging service works in MOSS 2007 ?

A: Unfortunately, no.  I may introduce this in the future, but right now there are no plans for it.

 

Q: What about TFS ?

A: TFS is not directly related to unit testing.  It is a source code repository, team management/collaboration, project management tool (among other things).  Using TFS on a SharePoint project is not very different from using it on any other project.  I’ll be blogging about this more in the future.

 

Thanks to everyone who attended.  As usual, I tried to jam too much information into the session so I feel like I glossed over some stuff.  I’ll be posting more detail here on my blog in future articles.