SproutCore & WCF

Before you start ctrl+c & ctrl+v'ing some source code, make sure you have tried the hello world sample and read the Rest API sample on the sproutcore wiki. Also, make sure you have played with FireBug to call some of the sproutcore commands shown in the sproutcore tutorials.

Ever since WWDC 2008 announced SproutCore, I got curius with how this javascript mvc framework communicates with a server backend. Since I have very limited knowledge of RoR rest, I decided to stick to what I know - WCF.

For my sample, I am using the contacts example that is posted on the sproutcore googlecode website.


JSON & DTO's
Let's start with how the Contacts JSON object should look like:
<br />{"records":<br /> [ {"last_name": "Jobs",<br /> "first_name": "Steve",<br /> "guid": "1",<br /> "type": "Contact"},<br /> {"last_name": "Sculley",<br /> "first_name": "John",<br /> "guid": "2",<br /> "type": "Contact"},<br /> {"last_name": "Scott",<br /> "first_name": "Michael",<br /> "guid": "3",<br /> "type": "Contact"}<br /> ],<br /> "ids": [1,2,3]<br />}<br />

Notice how SproutCore collections has a defined format: {"records":[], "ids":[]}, also take notice on how the properties are defined: "first_name", "last_name" - Looks like sproutcore does some nyahh and puts underscores.

Now let's look @ the ContactDTO & SproutCoreContactDTO DataContracts in C# and let's make this work for sproutcore:
<br />[Serializable, DataContract]<br />public class ContactDTO<br />{<br /> [DataMember(Name = "guid")]<br /> public int Guid { get; set; }<br /><br /> [DataMember(Name = "first_name")]<br /> public string FirstName { get; set; }<br /><br /> [DataMember(Name = "last_name")]<br /> public string LastName { get; set; }<br />}<br />
<br />[Serializable, DataContract]<br />public class SproutCoreContactDTO<br />{<br /> [DataMember]<br /> public ContactDTO[] Records { get; set; }<br /><br /> [DataMember]<br /> public int[] Ids { get; set; }<br />}<br />

This is how we build the SproutCoreContactDTO object:
<br />return new SproutCoreContactDTO { Records = contacts.ToArray(), Ids = (from dto in contacts<br /> select dto.Guid).ToArray()};<br />

WCF Service & Web.Config

Now we've built out dto and have an idea how we build our JSON object, let's make WCF do some crazyness and send and take in DTO's as JSON from something that is not a .Net proxy!

Here's the service:

<br />[ServiceContract]<br />public class ContactService<br />{<br /> private readonly ContactTask task = new ContactTask();<br /><br /> [OperationContract, WebGet(ResponseFormat = WebMessageFormat.Json)]<br /> public SproutCoreContactDTO List()<br /> {<br /> return task.List();<br /> }<br /><br /> [OperationContract, WebInvoke(Method = "POST")]<br /> public void Create(ContactDTO dto)<br /> {<br /> task.Create(dto);<br /> }<br /><br /> [OperationContract, WebInvoke(Method = "POST")]<br /> public void Update(ContactDTO dto)<br /> {<br /> task.Update(dto);<br /> }<br /><br /> [OperationContract, WebGet(ResponseFormat = WebMessageFormat.Json, UriTemplate = "show/{id}")]<br /> public ContactDTO Show(string id)<br /> {<br /> return task.Show(Convert.ToInt32(id));<br /> }<br />}<br />

Notice how my methods are List, Create, Update, Show? That's taking advantage of sproutcore's built-in Record functionality.

Note that complex types like ContactDTO being consumed as a parameter must be a WebInvoke and an HTTP-POST method - you will have pain if u dont!

The key words to return your objects as JSON in WCF is "ResponseFormat = WebMessageFormat.Json"

Web.config (system.servicemodel configuration)
<br /><system.servicemodel><br /> <bindings><br /> <webhttpbinding><br /> <binding name="ezed.binding"><br /> </webhttpbinding><br /> </bindings><br /> <behaviors><br /> <endpointbehaviors><br /> <behavior name="ezed.endpoint"><br /> <webhttp><br /> </behavior><br /> </endpointbehaviors><br /> <servicebehaviors><br /> <behavior name="ezed.service"><br /> <servicemetadata httpgetenabled="true"><br /> <servicedebug includeexceptiondetailinfaults="true"><br /> </behavior><br /> </servicebehaviors><br /> </behaviors><br /> <services><br /> <service behaviorconfiguration="ezed.service" name="ezed.spikes.services.ContactService"><br /> <endpoint address="" behaviorconfiguration="ezed.endpoint" binding="webHttpBinding" bindingconfiguration="" name="" contract="ezed.spikes.services.ContactService"><br /> </service><br /> </services><br /></system.serviceModel><br />

Things to remember about your wcf service:
1) must be webHttpBinding to talk to any non-microsoft clients
2) must have a webHttp endpoint behavior

NUnit Tests
We could create a proxy to verify if our services work, but since we're going to be using sproutcore as our UI, we're going to do it the hard way. We're going to bust some serious System.Net skillz... soo peep this awesomeness:

<br />[TestFixture]<br />public class ContactServiceTest<br />{<br /> private const string url = @"http://localhost:8080/ContactService.svc/{0}";<br /><br /> [Test]<br /> public void GetAll_ShouldGetAllContacts_UsingHttpGet()<br /> {<br /> var resultJsonDto = new WebClient().DownloadString(string.Format(url, "List"));<br /> var contacts = resultJsonDto.ToSproutCoreContactDTO();<br /> Assert.That(contacts.Records.Length, Is.GreaterThan(1));<br /> AssertExists("Jonas", "Awesome", contacts.Records);<br /> AssertExists("Gucci", "Player", contacts.Records);<br /> AssertExists("Dude", "Love", contacts.Records);<br /> }<br /><br /> [Test]<br /> public void Create_ShouldCreateContact_UsingHttpPost()<br /> {<br /> HttpPost(new ContactDTO {Guid = 3, FirstName = "New", LastName = "One"}.ToJSON(), "Create");<br /> HttpPost(new ContactDTO {Guid = 4, FirstName = "Second", LastName = "Two"}.ToJSON(), "Create");<br /><br /> var resultJsonDto = new WebClient().DownloadString(string.Format(url, "List"));<br /> var contacts = resultJsonDto.ToSproutCoreContactDTO();<br /> AssertExists("New", "One", contacts.Records);<br /> AssertExists("Second", "Two", contacts.Records);<br /> }<br /><br /> [Test]<br /> public void Update_ShouldUpdate_UsingHttpPost()<br /> {<br /> var client = new WebClient();<br /> var resultJsonDto = client.DownloadString(string.Format(url, "Show/1"));<br /> var toUpdate = resultJsonDto.ToContactDto();<br /> toUpdate.LastName = "changed";<br /><br /> HttpPost(toUpdate.ToJSON(), "Update");<br /> resultJsonDto = client.DownloadString(string.Format(url, "Show/1"));<br /><br /> var result = resultJsonDto.ToContactDto();<br /> Assert.That(toUpdate.LastName, Is.EqualTo(result.LastName));<br /> }<br /><br /> [Test]<br /> public void Show_ShouldShowContactById_UsingHttpGet()<br /> {<br /> var resultJsonDto = new WebClient().DownloadString(string.Format(url, "Show/2"));<br /> var dudeLove = resultJsonDto.ToContactDto();<br /> Assert.That(dudeLove.FirstName, Is.EqualTo("Dude"));<br /> Assert.That(dudeLove.LastName, Is.EqualTo("Love"));<br /> }<br /><br /> private static void AssertExists(string firstName, string lastName, IEnumerable<contactdto> contacts)<br /> {<br /> Assert.That(from c in contacts<br /> where c.FirstName == firstName && c.LastName == lastName<br /> select c, Is.Not.Null);<br /> }<br /><br /> private static void HttpPost(string jsonDto, string methodName)<br /> {<br /> var request = WebRequest.Create(new Uri(string.Format(url, methodName)));<br /> request.Method = WebRequestMethods.Http.Post;<br /> request.ContentType = "application/json";<br /> var bytes = new ASCIIEncoding().GetBytes(jsonDto);<br /> request.ContentLength = bytes.Length;<br /> using (var stream = request.GetRequestStream())<br /> stream.Write(bytes, 0, bytes.Length);<br /> }<br />}<br /><br />internal static class TestExtensions<br />{<br /> public static SproutCoreContactDTO ToSproutCoreContactDTO(this string json)<br /> {<br /> return ToItemType<sproutcorecontactdto>(json);<br /> }<br /><br /> public static ContactDTO ToContactDto(this string json)<br /> {<br /> return ToItemType<contactdto>(json);<br /> }<br /><br /> private static ItemType ToItemType<itemtype>(this string json)<br /> {<br /> using (var memoryStream = new MemoryStream(Encoding.Unicode.GetBytes(json)))<br /> return (ItemType)new DataContractJsonSerializer(typeof(ItemType)).ReadObject(memoryStream);<br /> }<br /><br /> public static string ToJSON(this ContactDTO dto)<br /> {<br /> using (var stream = new MemoryStream())<br /> {<br /> new DataContractJsonSerializer(typeof (ContactDTO)).WriteObject(stream, dto);<br /> return Encoding.Default.GetString(stream.ToArray());<br /> }<br /> }<br />}<br />

Now that's some awesome shizzle! all works, and it's all good in the hood!


Apache, Mongrel, IIS - Fo Shizzle my Nizzle!

In order for your sc-server (mongrel) to have the proper resourceUrl for your WCF web service, we need to use a middleman as our reverse proxy - apache. Soo, we need to do the following:
1) download apache web server
2) make sure your port is something other than port 80 (I was running IIS and Apache on the same computer)
3) uncomment the following on httpd.conf:
- proxy_module
- proxy_ajp_module
- proxy_balancer_module
- proxy_connect_module
- proxy_http_module
4) add the following in the very bottom of httpd.conf:
#SproutCore Stuff
ProxyPass /contacts http://localhost:4020/contacts
ProxyPassReverse /contacts http://localhost:4020/contacts
ProxyPass /static http://localhost:4020/static
ProxyPassReverse /static http://localhost:4020/static
#IIS Stuff - Where my ContactService.svc is at
ProxyPass / http://localhost:8080/
ProxyPassReverse / http://localhost:8080/

With ReverProxy set-up, you can still go to localhost:4020, but your reference to your wcf service won't work. Depending on how you configured you apache server, you now have to access your sproutcore site via apache.

Finally! some sproutcore action!!
I'm assuming you have already exported the contacts sample from google code, and read "Using the built-in REST API".

We need to modify a couple of things so we can talk to our wcf service.

Model\contact.js
<br />Contacts.Contact = SC.Record.extend(<br />/** @scope Contacts.Contact.prototype */ {<br /> <br /> dataSource: Contacts.server, <br /> resourceURL: 'ContactService.svc', <br /> <br /> fullName: function() {<br /> return [this.get('firstName'), this.get('lastName')].compact().join(' ');<br /> }.property('firstName', 'lastName')<br /> <br />}) ;<br />
contacts\main.js
<br />function main() {<br /> <br /> //Contacts.server.preload(Contacts.FIXTURES) ;<br /> Contacts.server.listFor({recordType: Contacts.Contact}); <br /><br /> SC.page.awake() ;<br /><br /> var records = Contacts.Contact.collection() ;<br /> Contacts.masterController.set('content', records) ; <br /> records.refresh() ;<br />} ;<br />



The Finished Product

With all your sc-gen, iisreset, and all that good stuff, run your site to see the final product.


And ofcourse, what's this long post without the sourcecode? download it from here or if you have svn, type "svn co http://ezed.googlecode.com/svn/spikes/SproutCore&WCF"

Boo & System.Collections.Generic

i know there is the boo.lang.hash type, but i needed to use the IDictionary for this one.

Soo....

if you're busting some C#:
<br />var domainObjects = new Dictionary<IValidatingDomainObject,IPimpList<ISomeAwesomeStuff>>(); <br />

and if you're freestylin' with boo...
<br />dictionary = Dictionary[of IValidatingDomainObject, IPimpList[of ISomeAwesomeStuff]]()<br />