Tag: Knockout

Showpitch 102: Let’s Review the Tech

So where we left off we covered what Showpitch is and what we’re setting out to accomplish. Now I want to review what technologies we’re using to accomplish our goals, and highlight a few of them in particular.

In the last post I had said I wanted to share what I’ve been working on for the past two years. Well Showpitch is not the entirety of that two year period. To start with, I only joined the Showpitch team about a year and a half ago. Even then, I didn’t step in to the architectural role for the product for another 3 months or so after that.

Before that was even the case though I had been working on other projects, exploring and experimenting with some of the technologies, patterns, and practices that we ultimately put in to place at Showpitch. For the first 3 months I was there, I was there as a Front End team member, helping to build some of the components that we were going to use for the UI at that time.

But then there was change in the team structure, and direction of the company, and as I had experience leading, architecting, and developing projects before I was asked to take over as the Senior Software Architect overseeing and implementing a from scratch reboot of the entire Showpitch platform, along with my good friend and colleague Eric Johnson (better known as EJ!) as a peer and partner in charge of the Front End team. (And lots of other stuff as well! In fact, if you’re all lucky, EJ may be convinced to add a guest post to this blog some day!)

By this point Showpitch had been developing this platform for quite a while. So with an entire reboot from scratch upon us, and expectations from stakeholders, partners, and other industry members ahead of us, one thing was very clear: We needed to move very fast. But with the vision that was in mind, we also needed to do things right, and keep where we were going in mind. We had to follow of the wisdom of two great minds: to be mindful of the future, but not at the expense of the moment.

This lead us to the list of modern approaches that appeared in the first post. Let’s dive in a bit more now and talk about the technologies, practices, and partners that we choose to implement and support each of those approaches.

Being Cloud First, Cloud Native

When we talk about being Cloud First, Cloud Native, what does that mean? For us it meant that we simply didn’t have the budget, people, or time to buy our own hosting hardware and software, nor to setup our own company computing environment. And that’s been to our benefit. Everything we do at Showpitch is on the Cloud; collaboration, development, management, and especially hosting.

We work with, leverage, and consume Cloud services from providers such as:

This is not an all inclusive list of the Cloud technologies and partners we leverage, but it should server as an example of just how cloud oriented Showpitch is.

Leveraging partner solutions where possible and economically viable

In addition to the Cloud First, Cloud Native approach, we also wanted to focus on delivering features and functionality with our platform, and not spend time building what others have already built, and probably built better. This stands in contrast to what I consider the NIH anti-pattern (Not Invented Here).

To that end we looked outside our team first for implementations of many of the features we have, including:

Again, this is not an exhaustive list. But the purpose of this approach was to start up quickly, and use the expertise and tools that each of these partners made available to support our development. We could have easily gotten caught up in building solutions for each of these components ourselves, but instead we were able to focus on developing our own features.

Leveraging technologies that allow for Rapid Application Development and Iteration

This was a very important approach to consider, perhaps the most important, as we had to demonstrate feature progress immediately. To the that end we needed to select application components that supported building this system very quickly. What we decided on were things like:

These are some of the technologies that have allowed us to quickly prototype, apply proof of concept, development, test, refine, iterate, and successfully deliver. I’d especially like to call out Unity and ReSharper here. Unity has been massively important to the design of our application and has allowed us to accomplish in handfuls of code what would have been entire projects otherwise. I will be posting specifically on a couple examples of this throughout this series. And ReSharper has increased productivity for our team across the board. Its Code Navigation and Refactoring capabilities alone have saved us dozens if not a couple hundred man hours across the team, and this includes the Front End Team who works largely in the realm of JavaScript (Yeah, ReSharper does that!).

Running on a very Lean and Agile Management approach

All of these technologies, tools, and partners would amount to naught though if we were constantly getting in our own way, or if we were constantly in a state of analysis and requirements gathering. As such we’ve had to find a fine line between staying organized and getting work done. So while our team oscillates between a Scrum-like approach and a KanBan-like approach, we still attribute a couple of key technologies to our success:

This combination of technologies has allowed us to work while distributed geographically, on a Cloud Oriented basis, without having to invest significantly in office management nor technology management.

Using only what we need, when we need it, and being ready to scale when the time comes

Through the use of everything we’ve already discussed we’ve been able to design for and adhere to this last approach. Almost of the Cloud partners and technologies we use are built to scale on demand, or near enough, that we don’t need to make huge up front commitments or investments. In fact we’ve switched providers and partners several times during the past year, sometimes in as little as day, with no disruption to our ongoing development!

All of this ties together in to a success story culminating in the live Showpitch site today, and continues to enable and empower our success moving forward.

Do you want me to focus on any of these technologies in future posts? If so, please leave a comment below! And stay tuned for more posts that will go in to greater detail about these technologies, practices, and approaches in particular!

<< Back to Showpitch 101
On to Showpitch 103 >>

Advertisement

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.