Showpitch 101: Let’s Talk About Building Showpitch

Let me start by saying that I am aware it’s been a very long time since I posted to this blog. Honestly, the topic today, and the related topics to follow have a lot to do with that! But I’m back and I’m ready to share with you all what I’ve been working on for the past almost two years, so let’s begin!

There’s a lot to share with what’s gone into building Showpitch.com. This includes what Showpitch.com is, what its goals are, what technologies we’re using to make it successful, and the patterns and practices at work in its implementation. And then there’s how all of that ties together into a comprehensive eco system with many capabilities now and more planned for the future.

Today I want to start with talking about what Showpitch.com is and what a very high level overview of it looks like. I’ll go into more detail regarding its design, implementation, and specific capabilities in future posts.

In a nutshell Showpitch.com‘s stated purpose is to make talented people famous. This is a very simple concept, but very hard to make a reality. There’s a lot that goes into talent, discovery, fame, and the entertainment industry. Becoming famous isn’t easy, in fact it’s a lot of hard work! As the saying goes “If it were easy, everyone would do it.” So when you consider solving the problem of fame, you can easily see that this is a very hard problem to work on!

Showpitch.com‘s solution to this problem takes a very comprehensive approach.

We’ve identified the major forces involved in the talent discovery process:

  • Industry
  • Fans
  • Talent

Further, we’ve broken the process down in to many components:

  • Discovery
  • Engagement
  • Connecting
  • Collaborating
  • Funding
  • Development
  • Production

And with this in mind we’ve modeled the problem domain, and built tools and processes around each of these components. A short list of some of the tools and processes includes:

  • Fan Recruiting, Promotion, and Social Posting
  • Connecting between Industry members and Talent in a Social Network
  • Full Text Search across Talent, Industry, and Media
  • Deep Tag-based Search and Analysis across Talent, Industry, and Media
  • Showcalls and creating and publishing Opportunities for projects
  • Joint Ventures, Partnership Channels, and Industry Contacts
  • A Media Hub, allowing for Distribution and Consumption of Media

This starts to encompass the scope of features that are made possible through the Showpitch platform and specifically the Showpitch.com website.

With such a large feature set, and with the team size that you would expect for a startup, it quickly became evident that we were going to have to embrace several modern approaches to web application design to achieve success, including:

  • Being Cloud First, Cloud Native
  • Leveraging partner solutions where possible and economically viable
  • Leveraging technologies that allow for Rapid Application Development and Iteration
  • Running on a very Lean and Agile Management approach
  • Using only what we need, when we need it, and being ready to scale when the time comes

And so less than a year and a half into principle production development you can see the results at Showpitch.com. I encourage you to head over to the site, create an account, and check out some of its features!

After a lot of hard work there’s a lot we’ve gotten right. There’s also a lot of lessons we’ve had to learn. And I’m going to use the next several posts to this blog to share those with you. So stay tuned!

On to Showpitch 102 >>

Knockout + Web API + SignalR = Awesomeness

This blog post is based on an excellent video by Brad Wilson delivered at this year’s NDC. It’s a walk-through of how to quickly build a real time web application, in this case a To Do List application, using Knockout, Web API, and SignalR.

You can find the example code on GitHub – https://github.com/bradwilson/ndc2012.

This video covers using the following technologies to build a truly awesome application quickly:

The idea here is that there is a clear separation between the client and the server. The client runs as an MVVM application written in javascript. Specifically written in Knockout in this case.

Then, to provide communication between the client and the server there are two options, Web API and SignalR.

Web API provides the ability to build a RESTful interface for the client to communicate with. SignalR provides a full duplex connection, over websockets, or emulates one using graceful degradation.

In the video Brad talks about using Web API to make changes to the application state and then pushing those changes out to any clients concerned with the change. This uses the full duplex communication that SignalR provides.

Looking at the code it can be seen how this is accomplished. By making the Hubs from SignalR available to the Web API Controller the response can be pushed out over the Hub to all of the Clients –


public class ToDoController : ApiControllerWithHub<ToDoHub>
{
private static List<ToDoItem> db = new List<ToDoItem>
{
new ToDoItem { ID = 0, Title = "Do a silly demo on-stage at NDC" },
new ToDoItem { ID = 1, Title = "Wash the car" },
new ToDoItem { ID = 2, Title = "Get a haircut", Finished = true }
};
private static int lastId = db.Max(tdi => tdi.ID);

public HttpResponseMessage PostNewToDoItem(ToDoItem item)
{
lock (db)
{
// Add item to the "database"
item.ID = Interlocked.Increment(ref lastId);
db.Add(item);
// Notify the connected clients
Hub.Clients.addItem(item);
// Return the new item, inside a 201 response
var response = Request.CreateResponse(HttpStatusCode.Created, item);
string link = Url.Link("apiRoute", new { controller = "todo", id = item.ID });
response.Headers.Location = new Uri(link);
return response;
}
}

}

From the Client it can be seen that the Knockout observable then receives the update from the SignalR Client rather than from the response to the RESTful call –


self.sendCreate = function () {
$.ajax({
url: "/api/todo",
data: { 'Title': self.addItemTitle(), 'Finished': false },
type: "POST"
});
self.addItemTitle("");
};

hub.addItem = function (item) {
viewModel.add(item.ID, item.Title, item.Finished);
};

Notice how easy it is to get a real time application communicating changes to a number of Clients. One final thing to consider is how easy it is to update the view in the client with the data coming back over this connection –


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>NDC Demo</title>
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="css/site.css" />
</head>
<body>
<form data-bind="submit: sendCreate">
<label for="title">Add a task:</label>
<input type="text" name="title" id="title" data-bind="value: addItemTitle, valueUpdate: 'afterkeydown'" />
<input type="submit" title="Add a new item" value="Add" disabled="disabled" data-bind="enable: addItemTitle().length > 0" />
</form>
<section data-bind="visible: items().length > 0" style="display: none">
<h1>Items in Progress</h1>
<table data-bind="foreach: items">
<tr>
<td>
<input type="checkbox" data-bind="checked: finished" />
<span data-bind="text: title, css: { finished: finished }"></span>
</td>
<td><input type="button" value="Delete" data-bind="click: remove" /></td>
</tr>
</table>
</section>
</body>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/knockout-2.1.0.js"></script>
<script type="text/javascript" src="js/jquery.signalR-0.5.0.js"></script>
<script type="text/javascript" src="signalr/hubs"></script>
<script type="text/javascript" src="js/todo.js"></script>
</html>

With a minimal amount of HTML and declarative markup for the data binding it’s very easy to integrate the data from the application with the view that the user is interacting with.

And so, using these three technologies modern, real time web applications can be built with a minimal amount of effort.

An Introduction

Well, here it is. My blog is live and ready for readers.

You may or may not know that I’m a Software Architect and Technologist by trade. Often in the course of what I’m working on I come across great ideas, tools, or solutions and have thought “I should share this so that it helps others.” Whether it’s solving small or large problems for clients, leading organizations in an implementation of a technology, or working with a start up to get off of the ground, this happens quite a lot.

So I’ve been considering starting a blog for a while, for just this purpose. I’m hoping in the weeks, months, and years to come that this blog helps others get past some the same tough problems I’ve had to solve myself. Or at least is a jumping off point to that solution.