I spent a few minutes researching the word “Redux” to try to figure out whether or not the title of this post would be an appropriate use for it.  I think I’m at least pretty close.  It sounded like a cool word, anyway, and I wasn’t really willing to give that up.

This past Saturday, I had the pleasure of presenting what I termed “Another SharePoint JQuery Session (UX)” at SharePoint Saturday Columbus.  I opened the session by answering (or attempting to answer) the question of Why?—why would we choose to build solutions using JavaScript, JQuery, and JQuery UI?

I provided some bullets and slides, which you are free to review (PDF attached… somewhere in this post), but it all basically boiled down to the following:

1. JavaScript is pretty powerful, and its here to stay (I like to use the analogy: JavaScript is like a cockroach that’s awesome—it just never seems to die no matter what people try to do to kill it)
2. JQuery is a solid, third part library that really increases performance and developer productivity on the web platform.  It gives us a “method to our madness” for implementing large, advanced JavaScript applications.
3. JQuery UI is a great solution for doing robust, cross platform User Interfaces.  It also gives us ThemeRoller support so that we can provide one “branding” solution for any JQuery UI implementations

Next, I gave a brief demo of Balsamiq Mockups as I constructed a quick visualization of what our content rotator would look like within a SharePoint web page.  Balsamiq was kind enough to donate a free copy of their tool to my session, which I raffled off after the session broke.

Next, I rolled into Demo mode and presented two sample solutions using JQuery, JQuery Templates, and JQuery UI.  The first sample was a basic Content Rotator, I broke it down into three steps: 

1. First, we showed how the the JQuery UI Tabs control can be used to transform plain old html into a tabbed container that rotated from one selection to the next every five seconds.  We did this in two lines of JavaScript, but had static html in for this demo. 
2. Then, we moved on to make the solution more dynamic: instead of transforming static html, we generated the html dynamically using JQuery Templates with some static JavaScript arrays that we initialized in our JavaScript file. 
3. The last step, then, was to replace the static arrays with dynamic data that we pulled out of SharePoint.  To solve this solution, we used the JQuery $.getJSON method to retrieve JSON data from a SharePoint Announcements list and transposed it into the same array structure that we had in demo 2.  Suddenly, we had a content rotator that was being driven out of rich html content within SharePoint!  And we did it all in 100% JavaScript.

In the second demo I showed how, with a little bit of JavaScript and C#, you could build a rich Multiple File Upload Page right into SharePoint.  I referred to it as “the big finish”, though I’m not sure it impressed as much as I would had hoped. 

For this demo, I utilized the JavaScript component known as Plupload.  It is a rich asynchronous File Upload utility that has no server side dependencies.  It provides a JQuery UI widget for ThemeRoller support and is 100% “theme-able” besides. It’s a fabulous tool that I’ve used for multiple client solutions. 

To make my life easier, I did build an HttpHandler that I deployed the _layouts folder for this solution.  This allowed me to POST each file to a static URL and then let some simple C# code add the file and attach my metadata, this reduced my JavaScript code surface significantly.  Uploading the files using an out of the box component like the SharePoint Web Services or WebDAV can be done, but would take a significant amount of additional JavaScript code and I was trying to minimize my surface area as much as possible for demo purposes. 

To make the demo a little more fancy, I showed how the JQuery UI AutoComplete widget worked by allowing the user to attach a “Level of Awesome” to each file that they uploaded.  The Awesome Level was automatically tagged onto each document that the user uploaded in a column I created on my Document Library.

Then I closed up shop and had some great individual questions relating to JQuery and future-proofing the code and exploring the differences between fetching the data asynchronously using the REST APIs, and generating the static html on the server using ASP.NET.

If you attended my session, I would really love to hear your feedback.  Please comment here, send me an email, tweet me… whatever.  I really enjoyed this session and feel like it’s one that I can make more engaging and interesting.  Also, if you run a User Group or are involved in any other community events, please let me know if you think this would be a worthwhile session.  I would love to submit it anywhere it makes sense.

The deck and code samples can be downloaded from my SkyDrive, (link below).