Uncategorized – Page 2 – john brunnings

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.

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.

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.

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

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.

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.

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

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.

Select all public methods on the class.

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

Finally, unselect the constructor method and move forward.

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.

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

Build the Factory to use the Wrapper and return it.

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.

Again select all public methods for the interface members.

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

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.

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.