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.

Announcing Neat!

This week I want to talk about an Open Source project I’ve launched called Neat! When I say Open Source, I mean that this project is licensed under the MIT License, you can read this license in the LICENSE.txt file included with the project, or at the following URL – http://opensource.org/licenses/MIT

This project will contain many handy little infrastructure things that come in handy when working with .Net.

So far I’ve added a RESTful client object that greatly simplifies the work of calling and using responses from RESTful services. You’ll find this under the Neat.Service.Client.Rest namespace. I’ve also added some wrappers, generated using the technique covered last week, of some of the .Net components needed for the framework components that have been added. These are in the Neat.Wrapper namespace.

You can find the code for this project on GitHub at https://github.com/johnbrunnings/Neat. Contact me at me@johnbrunnings.com if you’d like to contribute.

Planned for this framework are the following features –

    • Encryption
      • SHA-512
      • MD5
      • AES (Rijndael)
    • Unity
      • Lifetime Handlers
        • WebContext
        • ServiceContext
    • Aspects
      • Logging
      • Performance
      • Feature Flag
      • Exception Handling
    • ServiceHosts & Factories (WCF)
    • Controller Factories
      • MVC 4
    • Random String Generation
    • Configuration Management
      • MsNetAppSettingsXml
      • MsNetCustomSettingsXml
      • MsNetConnectionStringsXml

Please contact me if you’d like to suggest anything as well.

Using ReSharper to Quickly Abstract Framework Components

I’m going to demonstrate today how to use ReSharper to quickly abstract even very large framework components. These might even be components that otherwise offer no abstract parent or interface with which to abstract their use as a dependency. This can be an important step to take when trying to properly unit test a given class or method.

We’ll begin by defining a wrapper class. Use the keyboard shortcut CTRL-ALT-INS to quickly and easily add a class.

01ReSharperAddFileFromTemplate

02ReSharperAddFileFromTemplateName

Once this class has been generated we then build the class’ constructor. ALT-INS brings up the code generation menu. Select “Constructor…” from the menu.

03ReSharperCodeGenerationConstructor

We then add the Wrapper’s dependency, which is the object we’re trying to abstract, as a parameter to the constructor. ALT-Enter to accept adding the using statement.

04ReSharperCodeGenerationConstructorParameterType

ALT-INS to bring up the code generation menu quickly.

05ReSharperCodeGenerationConstructorParameter

Then, using ReSharper, change this parameter to initialize a field which ReSharper will add. The keyboard shortcut here is ALT-Enter and then selecting the first option in the menu.

06ReSharperCodeGenerationConstructorField

07ReSharperCodeGenerationConstructorConstructed

Now that the private field has been added we need to generate the Delegating Members of the Wrapper. ALT-INS brings up the code generation menu. Select ”Delegating Members…” from the menu.

08ReSharperCodeGenerationDelegatingMembers

Be sure to select the entire list of members which will generate a complete Wrapper class implementation.

09ReSharperCodeGenerationSelectAllMembers

10ReSharperCodeGenerationSelectMembersGenerated

Now that there’s a complete Wrapper class we’ll use the Refactor method to extract an abstract parent class. The keyboard shortcut for this is CTRL-SHIFT-R. Select “Extract Superclass…” from the menu.

11ReSharperRefactorExtractSuper

Select all public methods on the class.

12ReSharperRefactorExtractSelectAllPublic

Then select all of the methods that were previously selected and make them abstract.

13ReSharperRefactorExtractMakeAllAbstract

Finally, unselect the constructor method and move forward.

14ReSharperRefactorExtractUnselectConstructor

This will generate the base class, which is now a successful abstraction from the framework component that the Wrapper wraps. And the Wrapper will inherit from this base class.

15ReSharperRefactorExtractInherits

16ReSharperRefactorExtracNewBase

Next we need a Factory to abstract the creation of this new Wrapper.

17ReSharperAddFileFromTemplate

18ReSharperAddFileFromTemplateName

Build the Factory to use the Wrapper and return it.

19ReSharperCreateFactoryUsingWrapper

Now give the Factory its own interface using the Refactor method. The keyboard shortcut for this is CTRL-SHIFT-R. Select “Extract Interface…” from the menu.

20ReSharperRefactorExtractInterface

Again select all public methods for the interface members.

21ReSharperRefactorExtractInterface

Generate the interface for the Factory for the final level of abstraction.

22ReSharperInterface

23ReSharperInterfaceDefined

And finally consume the framework component from the abstracted class which is returned by the new Factory. The new Factory can be injected by most mocking frameworks since it’s abstracted by an interface.

24ReSharperInterfaceUsed

By using this method, and relying on the Factory interfaces and abstract Wrapper base classes instead of the concrete objects, we better define our seams in our application and provide for true unit testing. And all while working around issues such as internal sealed classes and so forth that tend to be common enough in the framework so as to regularly cause a headache, especially with unit testing.

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.