Thursday, April 21, 2011

jQCon: Front-end Prototyping & Unit Testing with Mocking



Right after speaking at the Mix11 conference in Las Vegas, Nevada I flew to the jQuery Conference in San Francisco, California to present my next talk.

If you were able to attend my talk in person I would appreciate if you could give me some feedback on SpeakerRate. Thanks in advance! Unfortunately, the session was not recorded at the conference, but I plan to record the material soon and make the session available for to you to watch.

For this talk I focused on some prototyping and unit testing tools to help web developers quickly build their front-end while not depending on the back-end. Here is the abstract for the session:

Prototyping and Unit Testing with Mockjax, mockJSON, and Amplify
The front-end and back-end of your application inevitably progress at different speeds. In order for each layer to develop independently it is optimal if the front-end piece can work regardless of the back-end, which is where the Mockjax plugin or the Amplify Request component comes in. These tools can intercept and simulate ajax requests made with jQuery with minimal effort and impact to your code. Another tool that works well with these tools is mockJSON which provides a random data templating feature. This can be very handy when you want to mock a JSON response from a AJAX call, but instead of manually building the response you can build a template to do it for you.

As you are developing, Mockjax or Amplify Request can also be used to help Unit Test your front-end code. You can setup a static mock responses to your requests and then Unit Test your Ajax success and fail event handlers.

At the end of the presentation I went through a demo showing the various types of prototype and unit testing techniques you can utilize using Mockjax, mockJSON, and Amplify. The source code for all of the examples I presented can be found on my GitHub account.

The demonstration code goes through the following steps (they are outlined in the index.html comments):
  1. Use a local JSON file with contacts and have $.getJSON refer to that endpoint
  2. Update URL to use the real endpoint and use Mockjax to intercept and return the contacts
  3. Use mockJSON and Mockjax to return a random set of contacts based on a template
  4. Use Amplify Request and return an array of mock contacts (this part was mentioned, but not demonstrated)
  5. Uses Amplify Request and mockJSON to return an random array of contacts*
  6. Updates Amplify Request Definition to pull contacts from Whitepages instead*
  7. Pulls out Amplify Request decoder and type to allow reuse for later requests*
* No code changes were made to the main application. The only changes made were to the amplify.request.define statement.

View Slides Download Code

Wednesday, April 20, 2011

Mix11 Video: Good JavaScript Habits for C# Developers



If you were able to watch my presentation (either in person or the above video) please consider rating my talk on SpeakerRate and providing a comment with your feedback. Thank you.

Thanks to everyone who voted my talk, I was able to present again at Mix again this year. In my presentation I reviewed some common problems that C# developers tend to make when moving to the JavaScript language. The languages look very similar, but they are very much different and knowing these differences is key!

You can view the recorded session above. The conference was jam packed with great sessions and many times it was difficult to pick which one to attend. Fortunately, all the sessions were recorded and Mix did a great job about publishing the videos only a few days after recording.

Throughout the presentation I list several resources that you might want to dig into and research for yourself.

Slides and Articles
  • I have hosted the slides from the video. I utilized an HTML5 Presentation tool and the slides are best viewed using either Google Chrome or Firefox. 
  • The article series this video was based on can be found on Enterprise jQuery

Tools
  • JSLint.com by Douglas Crockford
  • JSHint.com (a fork of JSLing supported and maintained by the JavaScript developer community) by Anton Kovalyov

Books

Articles

Video