JSApps 101: Introduction To JavaScript Applications

Introduction

So, JavaScript… Again! After some months away from this blog, I am back with a new series of articles related to the incredible, magical and mysterious world of JavaScript. More specifically, JavaScript applications. Have you ever heard of AngularJS, Backbone, Knockout JS, LESS and such things? Read on, this might interest you.

We have used, at some point of our Internet life, some awesome websites, such as Facebook, Github, Spotify, and others; where everything is asynchronous, the user interface is super-responsive and couldn’t be closer to a desktop application in matters of functionality, all of this right in our browser. Less that some people imagine is that these sites owe their slickness mainly to our good old friend in battle: JavaScript; oh so many developers underestimate JavaScript. This article series will dive you into the basis of how these kind of powerful JavaScript applications are built and over what technologies and frameworks, so let’s move forward into some basic concepts.

Server-side v.s. Client-side

So, what in the world is a JavaScript application anyways? Well, as you might know, the traditional way a web application works is that you have a set of specialized frameworks and tools (name it ASP.NET, PHP, Spring Framework) running server-side; when someone requests a page from the server, it responds with an HTML document, usually resulting of the parsing of a server-side template (a PHP, ASPX or the alike) and then bound to data coming from the database. Those templates being processed by the server usually contain special syntax and directives that instructs the server’s templating engine how to bind data to it and produce a valid HTML document; some might recall these as the dreaded “server tags.”

Standard Server Request/Response

 

Some server-side technologies like ASP.NET use “controls” or helpers that assist in the rendering of complex user interface components into HTML like grids, forms and charts bound to dynamic data coming from the database. Each time these components need to be refreshed, they do it through asynchronous AJAX requests or a full-page refresh (known as a server post-back, which all users love, or not). While these are handy for speed-building of web solutions, is not as efficient as pure-JavaScript graphical components.

ASP.NET WebControls

Often, JavaScript is used to manipulate the structure of the resulting HTML document, get the value of a field, and other simple tasks dynamically on the browser (better known as “the client side”) without the need of refreshing the page. But as popularity of JavaScript arise (let’s thank jQuery for that), it is being delegated with more and more complex stuff like rendering templates into HTML, so it is done client-side and not server-side; binding of server data, validation of user input and controlling page flow. This being said, a JavaScript application is basically a “client” that runs on the browser, thanks to the leverage of technologies such as JavaScript, HTML5 and CSS3. All of the UI logic is controlled client-side, right there in the browser.

Structure of a JavaScript App

Before moving on, it is true that this requires a paradigm shift if you have been working on traditional web applications for a while, specially if you have never used a Model-View-Controller approach. If you have never heard of, or used Model-View-Controller, I’m afraid there is some reading to be done before continuing. But hey! You can start here, or else you can continue reading this incredibly sexy article.

As mentioned before, a JavaScript application, or JS App (patent pending), usually follows an MVC approach. It is composed of several “views”, which are usually HTML documents or templates; “controllers” that handles validation, logic flow and communications with the server; and “models” that contains the data to be displayed and bind on the views. As you might notice, is a pretty similar model to server-side technologies like ASP.NET MVC and Spring MVC, just that the entire presentation layer is being moved to the browser, specifically into JavaScript components. We’ll analyze advantages of this later on.

With all the presentation logic being handled by the browser, where does the data we see on the UI coming from? It comes from the server; that is the real use we have for it. The controller at the browser is the one responsible for this channel of communication; it retrieves data from the server each time the user pages through a data grid and sends data to it whenever the user needs to create or edit information. JS Apps work in a similar way to smartphone apps, in which a client runs on the phone locally and it uses data coming from a remote server. In fact, there are specialized build tools, like PhoneGap, that creates applications to be installed on a smartphone from HTML/JS/CSS3 sources.

JS App Structure

Pros & Cons

While JS Apps goes far off any conventional use of a browser, it offers several advantages:

  • Rendering of pages and templates is done by the browser in the client computer, taking advantage of the client computer’s processing power and leaving less workload on the server.
  • Better user interface responsiveness, since all calls to the server are asynchronously and JavaScript UI components are usually lightweight.
  • Completely decoupled from the server logic.
  • Less calls to the server, since it is only accessed to get data and not pages in every possible display state it might have.
  • High separation of concerns, since the server ONLY handles business logic and not UI-related validation and such.
  • Easy unit testing of the user interface and UI logic.

Also, it might represent some disadvantages:

  • Lots, lots and LOTS of JavaScript to be written; we all know it can be a pain to maintain if not properly done.
  • The learning curve is quite step, since most people is used to jQuery and DOM manipulation but not to JavaScript controllers, models and pseudo-classes; let alone advanced concepts like JavaScript dependency injection.
  • Data incoming to the server needs to be double-checked in order to prevent bad information sent by tampered JavaScript components.

Sounds Kind of Interesting, Now What?

OK, now that you might get the picture of what a JS App might look like and its advantages, so the next step would be to analyze the technologies and frameworks you could use, getting your hands dirty along the way so you can start developing this kind of applications.

In the following articles we will move into learning JavaScript libraries like AngularJS, for client-side Model-View-Controller; RequireJS, a library that allows asynchronous loading of JavaScript files on-demand; usage of Twitter Bootstrap, to build nice HTML5-compliant user interfaces; and ultimately how to structure your server application as a solid data provider for your JavaScript application.

So, stay tuned for more articles! 😀

 

Overview Of The Task Parallel Library (TPL)

Introduction

Remember those times when we needed to spawn a separate thread in order to execute long-running operations without locking the application execution until the operation execution completes? Well, time to rejoice; those days are long gone. Starting by its version 4.5, the Microsoft.NET Framework delivers a new library that introduces the concept of “tasks”. This library is known as the Task Parallel Library; or TPL.

Tasks v.s. Threads

In the good (annoying) old days we frequently had the need to spawn a separate thread to query the database without locking the main application thread so we could show a loading message to the user and wait for the query to finish execution and then process results. This is a common scenario in desktop and mobile applications. Even though there are several ways to spawn background threads (async delegates, background workers and such), in the most basic and rudimentary fashion, things went a little something like this:

User user = null;

// Create background thread that will get the user from the repository.
Thread findUserThread = new Thread(() =>
{
    user = DataContext.Users.FindByName("luis.aguilar");
});

// Start background thread execution.
findUserThread.Start();

Console.WriteLine("Loading user..");

// Block current thread until background thread finishes assigning a
// value to the "user" variable.
findUserThread.Join();

// At this point the "user" variable contains the user instance loaded
// from the repository.
Console.WriteLine("User loaded. Name is " + user.Name);

Once again, this code is effective, it does what it has to do: Load a user from a repository and show the loaded user’s name on console. However, this code sacrifices succinctness completely in order to initialize, run and join the background thread that loads the user asynchronously.

The Task Parallel Library introduces the concept of “tasks”. Tasks are basically operations to be run asynchronously, just like what we just did using “thread notation”. This means that we no longer speak in terms of threads, but tasks instead; which lets us execute asynchronous operations by writing very little amount of code (which also is a lot easier to understand and read). Now, things have changed for good like this:

Console.WriteLine("Loading user..");

// Create and start the task that will get the user from the repository.
var findUserTask = Task.Factory.StartNew(() => DataContext.Users.FindByName("luis.aguilar"));

// The task Result property hold the result of the async operation. If
// the task has not finished, it will block the current thread until it does.
// Pretty much like the Thread.Join() method.
var user = findUserTask.Result;

Console.WriteLine("User loaded. Name is " + user.Name);

A lot better, huh? Of course it is. Now we have the result of the async operation strongly typed. Pretty much like using async delegates but without all the boilerplate code required to create delegates; which is possible thanks to the power of C# lambda expressions and built-in delegates (Func, Action, Predicate, etc.)

Tasks have a property called Result. This property contains the value returned by the lambda expression we passed to the StartNew() method. What happens when we try to access this property while the task is still running? Well, the execution of the calling method is halted until the task finishes. This behavior is similar to Thread.Join() (line 16 of the first code example).

Tasks Continuations

OK, we now have knowledge of how all this thing about tasks goes. But, let’s assume you don’t want to block the calling thread execution until the task finishes, but have it call another task after it finishes that will do something with the result later on. For such scenario, we have task continuations.

The Task Parallel Library allows us to chain tasks together so they are executed one after another. Even better, code to achieve this is completely fluent and verbose.

Console.WriteLine("Loading user..");

// Create tasks to be executed in fluent manner.
Task.Factory
    .StartNew<User>(() => DataContext.Users.FindByName("luis.aguilar")) // First task.
    .ContinueWith(previousTask =>
    {
        // This will execute after the first task finishes. First task's result
        // is passed as the first argument of this lambda expression.
        var user = previousTask.Result;

        Console.WriteLine("User loaded. Name is " + user.Name);
    });

// Tasks will start running asynchronously. You can do more things here...

As verbose as it gets, you can read the previous code like “Start new task to find a user by name and continue by printing the user name on console”. Is important to notice that the first parameter of the ContinueWith() method is the previously executed task which allows us to access its return value through its Result property.

Async And Await

The Task Parallel Library means so much for the Microsoft.NET Framework that new keywords were added to all its languages specifications to deal with asynchronous tasks. These new keywords are async and await.

The async keyword is a method modifier that specifies that it is to be run in parallel with the caller method. Then we have the await keyword, which tells the runtime to wait for a task result before assigning it to a local variable, in the case of tasks which return values; or simply wait for the task to finish, in the case of those with no return value.

Here is how it works:

// 1. Awaiting For Tasks With Result:
async void LoadAndPrintUserNameAsync()
{
    // Create, start and wait for the task to finish; then assign the result to a local variable.
    var user = await Task.Factory.StartNew<User>(() => DataContext.Users.FindByName("luis.aguilar"));

    // At this point we can use the loaded user.
    Console.WriteLine("User loaded. Name is " + user.Name);
}

// 2. Awaiting For Task With No Result:
async void PrintRandomMessage()
{
    // Create, start and wait for the task to finish.
    await Task.Factory.StartNew(() => Console.WriteLine("Not doing anything really."));
}

// 3. Usage:
void RunTasks()
{
    // Load user and print its name.
    LoadAndPrintUserNameAsync();

    // Do something else.
    PrintRandomMessage();
}

As you can see, asynchronous methods are now marked with a neat async modifier. As I mentioned before, that means they are going to run asynchronously; better said: in a separate thread. Is important to clarify that asynchronous methods can contain multiple child tasks inside them which are going to run in any order, but by marking the method as asynchronous means that when it is called in traditional fashion, the runtime will implicitly wrap this method contents in a task object.

For example, writing this:

var loadAndPrintUserNameTask = LoadAndPrintUserAsync();

.. is equivalent to writing this:

var loadAndPrintUserNameTask = new Task(LoadAndPrintUserAsync);

Remember the task was created, but it has not been started yet. You need to call the Start() method in order to do so.

Now, we can also create awaitable methods. This special kind of methods are callable using the await keyword.

async Task LoadUserAsync()
{
    // Create, start and wait for the task to finish; then assign the result to a local variable.
    var user = await Task.Factory.StartNew<User>(() => DataContext.Users.FindByName("luis.aguilar"));

    // Return the loaded user. The runtime converts this to a Task<User> automagically.
    return user;
}

All awaitable methods specify a task as its return type. Now, there are things we need to discuss in detail here. This method’s signature specifies that it has a return value of type Task<User> but it is actually returning the loaded user instance instead (line 7). What is this? Well, this method can return two types of values depending of the calling scenario.

First scenario would be when it is called in a traditional fashion. In this case it returns the actual task instance ready to be executed.

Task loadUserTask = LoadUserAsync();

// The previous code is equivalent to:
Task loadUserTask = new Task<User>(() => LoadUserAsync().Result);

Second scenario would be when it is called using await. In this case it starts the task, waits for it to finish and gets the result, which then gets assigned to the specified local variable.

User user = await LoadUserAsync();

// The previous code is equivalent to:
User user = LoadUserAsync().Result;

See? Personally it is the first time I see a method that can return two types of value depending on how it is called. Even though is quite interesting such thing exists. By the way, is important to remember that any method which at any point awaits for an asynchronous method by using the await keyword needs to be marked as async.

Conclusion

This surely means something for the whole framework. Looks like Microsoft has taken care of parallel programming on its latest framework release. Desktop and mobile application developers will surely love this new feature which reduces significantly boilerplate code and increases code verbosity. We can all feel happy about our beloved framework moving forward the right way once again.

That’s all for now, folks. Stay tuned! 😉

Further Reading

Unit Testing 101: Inversion Of Control

Introduction

Inversion Of Control is one of the most common and widely used techniques for handling class dependencies in software development and could easily be the most important practice in unit testing. Basically, it determines if your code is unit-testable or not. Not just that, but it can also help improve significantly your overall software structure and design. But what is it all about? It is really that important? Hopefully we’ll clear those out on the following lines.

Identifying Class Dependencies

As we mentioned before,  Inversion Of Control is a technique used to handle class dependencies effectively; but, What exactly is a dependency? In real life, for instance, a car needs an engine in order to function; without it, it probably won’t work at all. In programming it is the same thing; when a class needs another one in order to function properly, it has a dependency on it. This is called a class dependency or coupling.

Let’s look at the following code example:

public class UserManager
{
    private Md5PasswordHasher passwordHasher;

    public UserManager()
    {
        this.passwordHasher = new Md5PasswordHasher();
    }

    public void ResetPassword(string userName, string password)
    {
        // Get the user from the database
        User user = DataContext.Users.GetByName(userName);

        string hashedPassword = this.passwordHasher.Hash(password);

        // Set the user new password
        user.Password = hashedPassword;

        // Save the user back to the database.
        DataContext.Users.Update(user);
        DataContext.Commit();
    }

    // More methods...
}

public class Md5PasswordHasher
{
    public string Hash(string plainTextPassword)
    {
        // Hash password using an encryption algorithm...
    }
}

The previous code describes two classes, UserManager and PasswordHasher. We can see how UserManager class initializes a new instance of the PasswordHasher class on its constructor and keeps it as a class-level variable so all methods in the class can use it (line 3). The method we are going to focus on is the ResetPassword method. As you might have already noticed, the line 15 is highlighted. This line makes use of the PasswordHasher instance, hence, marking a strong class dependency between UserManager and PasswordHasher.

Don’t Call Us, We’ll Call You

When a class creates instances of its dependencies, it knows what implementation of that dependency is using and probably how it works. The class is the one controlling its own behavior. By using inversion of control, anyone using that class can specify the concrete implementation of each of the dependencies used by it; this time the class user is the one partially controlling the class behavior (or how it behaves on the parts where it uses those provided dependencies).

Anyways, all of this is quite confusing. Let’s look at an example:

public class UserManager
{
    private IPasswordHasher passwordHasher;

    public UserManager(IPasswordHasher passwordHasher)
    {
        this.passwordHasher = passwordHasher;
    }

    public void ResetPassword(string userName, string password)
    {
        // Get the user from the database
        User user = DataContext.Users.GetByName(userName);

        string hashedPassword = this.passwordHasher.Hash(password);

        // Set the user new password
        user.Password = hashedPassword;

        // Save the user back to the database.
        DataContext.Users.Update(user);
        DataContext.Commit();
    }

    // More methods...
}

public interface IPasswordHasher
{
    string Hash(string plainTextPassword);
}

public class Md5PasswordHasher : IPasswordHasher
{
    public string Hash(string plainTextPassword)
    {
        // Hash password using an encryption algorithm...
    }
}

Inversion of Control is usually implemented by applying a design pattern called the Strategy Pattern (as defined in The Gang Of Four book). This pattern consists on abstracting concrete component and algorithm implementations from the rest of the classes by exposing only an interface they can use; thus making implementations interchangeable at runtime and encapsulate how these implementations work since any class using them should not care about how they work.

The Strategy Pattern

So, in order to achieve this, we need to sort some things out:

  • Abstract an interface from the Md5PasswordHasher class, IPasswordHasher; so anyone can write custom implementations of password hashers (line 28-31).
  • Mark the Md5PasswordHasherclass as an implementation of the IPasswordHasher interface (line 33).
  • Change the type of the password hasher used by UserManager to IPasswordHasher (line 3).
  • Add a new constructor parameter of type IPasswordHasher interface (line 5), which is the instance the UserManager class will use to hash its passwords. This way we delegate the creation of dependencies to the user of the class and allows the user to provide any implementation it wants, allowing it to control how the password is going to be hashed.

This is the very essence of inversion of control: Minimize class coupling. The user of the UserManager class has now control over how passwords are hashed. Password hashing control has been inverted from the class to the user. Here is an example on how we can specify the only dependency of the UserManager class:

IPasswordHasher md5PasswordHasher = new Md5PasswordHasher();
UserManager userManager = new UserManager(md5PasswordHasher);

userManager.ResetPassword("luis.aguilar", "12345");

So, Why is this useful? Well, we can go crazy and create our own hasher implementation to be used by the UserManager class:

// Plain text password hasher:
public class PlainTextPasswordHasher : IPasswordHasher
{
    public string Hash(string plainTextPassword)
    {
        // Let's disable password hashing by returning
        // the plain text password.
        return plainTextPassword;
    }
}

// Usage:
IPasswordHasher plainTextPasswordHasher = new PlainTextPasswordHasher();
UserManager userManager = new UserManager(plainTextPasswordHasher);

// Resulting password will be: 12345.
userManager.ResetPassword("luis.aguilar", "12345");

Conclusion

So, this concludes our article on Inversion of Control. Hopefully with a little more practice, you will be able to start applying this to your code. Of course, the  biggest benefit of this technique is related to unit testing. So, What does it has to do with unit testing? Well, we’re going to see this when we get into type mocking. So, stay tuned! 😉

Further Reading

Unit Testing 101: Basics

Introduction

We all know unit testing is an essential part of the development cycle. Actually, unit tests code is as important as the actual application code (Yeap, you read that right); this is something we should never forget. That’s why we are going to look at some important (introductory) concepts relating to composing proper testing code.

I will be using NUnit as my testing library. The package comes with the framework libraries and a set of test runner clients. You can download it at their site’s download section.

Unit Test Structure

Unit tests are usually grouped in test fixtures. Basically, a test fixture is a group of unit tests targeted to verify a single application feature. Let’s illustrate this in code:

using NUnit.Framework;

namespace AppDemo.Tests
{
    [TestFixture(Category = "User Authentication")]
    public class WhenUserIsBeingAuthenticated
    {
        [Test]
        public void ShouldReturnTrueIfValidationIsSuccessful()
        {
            // TODO: Implement test code.
        }

        [Test]
        public void ShouldReturnFalseIfUsernameOrPasswordIsNull()
        {
            // TODO: Implement test code.
        }
    }
}

We can now picture how a test fixture looks in code. In this case, the test fixture is a regular class filled out with test methods. As you might have noticed, the class name describes the state of the feature being tested: “When the user is being authenticated”. Each particular test method seeks to verify a required result on a specific condition: “Should return true if validation is successful”.

Running Tests

Once you have your fixture ready to go, is now time to run all tests on it and see results. I will be using the NUnit GUI Runner which looks for all classes in the assembly marked with the [TestFixture] attribute and then calls each method on them marked with the [Test] attribute. Is important to remember that all tests must be in a separate class library. First reason is because it is a good practice, you should not be mixing application code with test code; and second because the NUnit test runner can only load DLL files.

So, first thing to do is to build the project so we have a DLL containing all our tests. Once we have a DLL file with our test fixture classes on it, fire up the NUnit test runner (NUnit.exe) and load the file on it.

NUnit Test Runner

At this point everything is quite intuitive. You can hit the “Run” button and see how all tests pass or rebuild the project on Visual Studio and see how the test runner auto-updates with new changes. Cool, huh?

Arrange, Act and Assert

Test methods are usually composed of three common phases: Arrange, act and assert. Or “triple-A” if you like.

  • Arrange: At the very beginning of the method, you need to setup the test scenario. This includes expected test results for comparison with actual results, instances of the components to be tested and type mocking.
  • Act: After arrangement is done, we now have to actually perform the actions that will produce the actual test results. For instance, call the Validate method on the UserAuthenticator class which performs the actual user validation.
  • Assert: The assertion phase verifies that actual tests results match what we are expecting.

Is a good practice to provide comments delimiting each phase:

[Test]
public void ShouldReturnTrueValidationIsSuccessful()
{
    // Arrange
    var expectedResult = true;
    var userAuthenticator = new UserAuthenticator();

    // Act
    var actualResult = userAuthenticator.Validate("luis.aguilar", "1234");

    // Assert
    Assert.That(actualResult, Is.EqualTo(expectedResult), message = "Authentication failed though it should have succeeded.");
}

As you might see, these three phases are executed in order. Is a good practice to initialize variables with expected results at Arrange phase to make the Assert phase more readable. Also, for the sake of readability, I am using the Assert.That syntax of NUnit so assertions are more verbose.

Tests Before Implementation

Even though unit testing is good for all development methodologies, I’m an avid supporter of the Test-Driven-Development (TDD) methodology. As the name implies, TDD is all about writing all tests BEFORE you implement actual application code. That way, your code will meet acceptance criteria right from inception. Basically, application infrastructure design is driven by tests. Now we think on user requirements rather than UML diagrams and classes.

For instance, you should write all the previous sample tests before implementing the UserAuthenticator class. That way that particular class will be born satisfying user requirements so we don’t have to  change its code later on, which helps save lots of time (and money, managers love to hear that) and improves code efficiency and design greatly.

Conclusion

Okay, hopefully this served out as a brief introduction to the exciting world of unit testing. Of course, there’s a lot more on this topic. In next articles we are going to look at concepts like inversion of control, type mocking and more things related to TDD. Is going to be lots of fun!

Stay tuned! 😉

UI Design Using Model-View-Presenter (Part 3)

In The Previous Episode

In the previous part of the series we finally wrote some code and implemented the three main components of the Model-View-Presenter pattern. We defined our Model class, extreme-makeover’d our old Windows Form class to a slick View-compliant class and then created a Presenter which will orchestrate all sorts of evil things so the Model and View play together nicely.

In case you missed any of our adrenaline-filled previous posts, now it is a good time to go back to Part 1 or Part 2 and drop a sweat, boy.

Wiring Everything Up

Now is time to wire up the Model, View and Presenter classes so we have a running application which does the exact same thing as our old application but with a pretty sexy code base. This wiring will take place at the Main method of the application, which will instantiate the repository class, the View and the Presenter; initialize everything and then finally run the application.

So, here is our new Program class doing what it does best:

namespace Codenough.Demos.WinFormsMVP
{
   public static class Program
   {
       [STAThread]
       public static void Main()
       {
           Application.EnableVisualStyles();
           Application.SetCompatibleTextRenderingDefault(false);

           var clientsForm = new ClientsForm();
           var clientsRepository = new ClientRepository();
           var clientsPresenter = new ClientsPresenter(clientsForm, clientsRepository);

           clientsForm.Closed += () =>
           {
               Application.Exit();
           };

           Application.Run(clientsForm);
       }
   }
}

If you smash on that Run toolbar button at this point, you will see a really nice window poppin’ up on-screen with the clients list box populated just like the old application, only that this time all data coming back and forth the View is going through the Presenter (what a controlling psycho freak). Most important of it all: You can now look in the code examples how each part has a single purpose. The Model stores data, the View displays data and the Presenter controls data flow.

Now, the only thing left to do and (hopefully) show the real benefit behind this pattern, is to try again and implement our pre-defined unit tests so we can verify our application meets all requirements.

Meeting Acceptance Criteria

Our application code has never been so ready before for some unit testing. We had some already defined, which we could not implement at the time simply because the code was being a total jack. But now, using the MVP pattern on all its glory, we are set up for it.

So, for unit testing I am using NUnit and Moq. Moq is a library that allows me to create mocks (in this case the repository class and the View interface) without having to write additional code; we don’t like to do that. Before we proceed, let’s see what a mock is and what it can do for us.

A “mock” is a fake implementation of an interface or a class which members produce data we already know– basically is like making a TV display a TiVO recording instead of an actual live show. You know, in this example we can know what the data coming from the repository class is just by looking at the code, but in the real world we might not have that source code at hand. Or even worst, that data might come from a production dabatase we don’t have access to. With a mock, we can fake a method to do or return anything we want.

Our first test is called ItShouldLoadAllClients. Since our test-naming skills are so incredibly sharp, we can imply, just by reading that title, that a clients list has to be loaded during Presenter class initialization. We first create a new method called SetUp that will run right before each time a test method runs to set everything up– in this case it will initialize mock instances for the repository class and view interface. We then proceed to create an instance of the Presenter class, which is the test subject (our lab rat, yes) and then we use the Verify method of the mock that will throw a nasty exception and make the unit test fail miserably if the specified View method (LoadClients for this particular case) was never called during Presenter initialization.

using Moq;
using NUnit.Framework;
using System.Collections.Generic;
using System.Linq;

namespace Codenough.Demos.WinFormsMVP
{
   [TestFixture]
   public class WhenClientsWindowLoads
   {
       private Mock<IClientsView> clientsViewMock;
       private Mock<ClientRepository> clientsRepositoryMock;

       [SetUp]
       public void SetUp()
       {
           this.clientsViewMock = new Mock<IClientsView>();
           this.clientsRepositoryMock = new Mock<ClientRepository>();
       }

       [Test]
       public void ItShouldLoadAllClients()
       {
           // Act
           var clientsPresenter = new ClientsPresenter(clientsViewMock.Object, clientsRepositoryMock.Object);

           // Assert
           clientsViewMock.Verify(view => view.LoadClients(It.IsAny<IList<ClientModel>>()), "Expected clients to be loaded on initialization.");
       }
   }
}

Of course, this test passes. A call to the LoadClients method is done at the Presenter constructor. The following tests are a little more complicated, since we will be setting up methods of the View and repository mocks to return what we need them to return (method setup).

Our next test is ItShouldShowFirstClientOnListDetails, which requires our presenter to load the first client on the list after initialization.

For this case, we let the SetUp method do its thing and create the respective mocks and then, at our test arrange phase, we use the Setup method to make the repository mock return a sample list of clients when the FindAll method is called. Finally, we verify the LoadClient method of the view was called; making this the assertion that makes the test case pass (and make us happy) or fail (and quit our jobs).

[Test]
public void ItShouldShowFirstClientOnListDetails()
{
   // Arrange
   var clients = new List<ClientModel>()
   {
       new ClientModel { Id = 1, Name = "Matt Dylan", Age = 28, Gender = "Male", Email = "mattd@none.com" },
       new ClientModel { Id = 2, Name = "Anna Stone", Age = 22, Gender = "Female", Email = "ann@none.com" }
   };

   clientsRepositoryMock.Setup(repository => repository.FindAll()).Returns(clients);

   // Act
   var clientsPresenter = new ClientsPresenter(clientsViewMock.Object, clientsRepositoryMock.Object);

   // Assert
   clientsViewMock.Verify(view => view.LoadClient(clients.First()), "Expected first client to be loaded on initialization.");
}

The last test is ItShouldShowClientDetailsOnListItemSelected and finding out the way it works will be your homework, dear reader. This is the most complicated of them all since now we use Moq to fire view events and wake up the Presenter, which should be listening to them.

[Test]
public void ItShouldShowClientDetailsOnListItemSelected()
{
   // Arrange
   var clients = new List<ClientModel>()
   {
       new ClientModel { Id = 1, Name = "Matt Dylan", Age = 28, Gender = "Male", Email = "mattd@none.com" },
       new ClientModel { Id = 2, Name = "Anna Stone", Age = 22, Gender = "Female", Email = "ann@none.com" }
   };

   clientsRepositoryMock.Setup(repository => repository.FindAll()).Returns(clients);
   clientsRepositoryMock.Setup(repository => repository.GetById(1)).Returns(clients.First());

   clientsViewMock.SetupGet(view => view.SelectedClient).Returns(clients.First());

   var clientsPresenter = new ClientsPresenter(clientsViewMock.Object, clientsRepositoryMock.Object);

   // Act
   clientsViewMock.Raise(view => view.ClientSelected += null);

   // Assert
   clientsViewMock.Verify(view => view.LoadClient(clients.First()), "Expected first client to be loaded on initialization.");
}

Conclusion

Making code testable is not easy at all. No, really, AT ALL. At least not at first, since you have to think on all the possible test scenarios your code could go through. But in the long term, this is what makes testable code more robust and clean than regular hastily thrown together code.

Okay, this makes it up for it. Hope you enjoyed it and learned a couple things. Stay tuned for more talk on patterns and good practices and maybe really off-topic things.

Oh! Don’t forget to check out the code examples (including an exciting port on Java).

Code Examples

UI Design Using Model-View-Presenter (Part 2)

What Just Happened?

In the previous part, we demonstrated the traditional way of doing things when it comes to UI design. We also reviewed some key concepts like Code Coverage and Separation Of Concerns. Lastly we reviewed some concepts behind the Model-View-Presenter pattern. Yeap, that was a lot of stuff. So, if you haven’t read it yet, be a good boy and go read it now.

Everything has been really theoric up until now, which is boring to depressing levels. But don’t worry. I’ll make it up for you on this part. We are now going to look at how each piece of the pattern is implemented. Alright, let’s move on then, but have in mind this diagram at all times:

MVP Diagram

UI Design Redemption

Ok, time to make things right. First thing to do to sort this mess up, dear reader, is to create the Model.

The Model is a domain object (fancy name for a class full of properties only) which contains the information the View is gonna show. In this case our View will contain a list of clients, so the Model is actually the Client class renamed to obey naming conventions as ClientModel. C’mon– lots of people, including seven devs, two architects and a baby goat were required to figure out that name refactor.

namespace Codenough.Demos.WinFormsMVP
{
   public class ClientModel
   {
      public int Id { get; set; }

      public string Name { get; set; }

      public int Age { get; set; }

      public string Gender { get; set; }

      public string Email { get; set; }
   }
}

As mentioned before (I tend to repeat myself, bear with me here), the Model is a really simple class composed only of properties; better known as plain old C# object or “POCO” for the friends. Wait– “poco” actually means “not much” in Spanish; so, it does not much. Wow, cool– right?

Okay, here is a list of things the Model should NOT do:

  • Do any data validation.
  • Refresh, save or update its data on the database.
  • Throw exceptions like it was something actually funny.
  • Be aware of any other class outside the domain model.
  • Provide a solution to world hunger (actually that would be pretty impressive, but DON’T!).

Next step is to create an interface that will serve as a contract of whatever the View is capable to do so the Presenter is aware of it. Remember it will be communicating with it to serve view data and receive input, so the guy needs to know what is in the view regardless of implementation.

using System;
using System.Collections.Generic;

namespace Codenough.Demos.WinFormsMVP
{
   public interface IClientsView
   {
      event Action ClientSelected;
      event Action Closed;

      IList<ClientModel>; Clients { get; }

      ClientModel SelectedClient { get; }

      void LoadClients(IList<ClientModel> clients);

      void LoadClient(ClientModel client);
   }
}

The interface only defines the methods needed by the Presenter so it can “puppet” it as needed, in order to get its data and validate anything before it gets back into the database; or any other event triggered by the user. Also, see those fancy events on the view interface? Dude, I didn’t even knew interfaces could have events on it, LOL– just kidding. Actually, they are there so the Presenter subscribe to them and then the View can fire them to notify of data changes. Is a two-way communication.

Okay now, to complete the View portion, we need to create the concrete implementation of the view interface. In this case is our old Windows Forms class which has gone under a strict diet low on carbs to reduce its functionality to the minimum.

using System;
using System.Collections.Generic;
using System.Windows.Forms;

namespace Codenough.Demos.WinFormsMVP
{
   public partial class ClientsForm : Form, IClientsView
   {
      public event Action ClientSelected;
      public event Action Closed;

      public ClientsForm()
      {
         this.InitializeComponent();
         this.BindComponent();
      }

      public IList<ClientModel> Clients
      {
         get { return this.clientsListBox.DataSource as IList<ClientModel>; }
      }

      public ClientModel SelectedClient
      {
         get { return this.clientsListBox.SelectedItem as ClientModel; }
      }

      public void LoadClients(IList<ClientModel> clients)
      {
         this.clientsListBox.DataSource = clients;
      }

      public void LoadClient(ClientModel client)
      {
         this.clientNameTextBox.Text = client.Name;
         this.clientEmailTextBox.Text = client.Email;
         this.clientGenderTextBox.Text = client.Gender;
         this.clientAgeTextBox.Text = client.Age.ToString();
      }

      private void BindComponent()
      {
         this.closeButton.Click += OnCloseButtonClick;

         this.clientsListBox.DisplayMember = "Name";
         this.clientsListBox.SelectedIndexChanged += OnClientsListBoxSelectedIndexChanged;
      }

      private void OnClientsListBoxSelectedIndexChanged(object sender, EventArgs e)
      {
         if (this.ClientSelected != null)
         {
            this.ClientSelected();
         }
      }

      private void OnCloseButtonClick(object sender, EventArgs e)
      {
         if (this.Closed != null)
         {
            this.Closed();
         }
      }
   }
}

Now the View implementation only loads data from someone else and fires events as the loaded data changes so anyone out there in space listening to it be aware of the changes and will take appropriate action (OK, that sounded like a line from a Law & Order episode). As you might have already guessed, the only component aware of the View events would be the Presenter. So, the next step is to implement the infamous Presenter class.

The Presenter is a component that is aware of what is happening in the View through its events (See what I said about repeating myself? But hopefully that will help get things carved out in your head, bud.). As we mentioned before, the Presenter talks to the View by using its interface instead of the concrete implementation, the ClientsForm class that is; this for the sake of code testability. Later on, we are going to provide the Presenter with a “mock” instead of the actual View implementation. We are going to learn what a mock is later, no need to hurry.

using System.Linq;

namespace Codenough.Demos.WinFormsMVP
{
   public class ClientsPresenter
   {
      private readonly IClientsView view;
      private readonly ClientRepository clientsRepository;

      public ClientsPresenter(IClientsView view, ClientRepository clientsRepository)
      {
         this.view = view;
         this.clientsRepository = clientsRepository;

         var clients = clientsRepository.FindAll();

         this.view.ClientSelected += OnClientSelected;
         this.view.LoadClients(clients);

         if (clients != null)
         {
            this.view.LoadClient(clients.First());
         }
      }

      public void OnClientSelected()
      {
         if (this.view.SelectedClient != null)
         {
            var id = this.view.SelectedClient.Id;
            var client = this.clientsRepository.GetById(id);

            this.view.LoadClient(client);
         }
      }
   }
}

This time around, the one handling data access through the repository class is the Presenter. The View is no longer aware of where its data is coming from; that’s a good thing. Also, we can notice how the Presenter reacts each time a client is selected on the list box, since it has subscribed to the View’s ClientSelected event. Fancy, right?

Now, the only thing left to do is to wire-up everything so we can run this incredibly clever application which will save many companies from bankruptcy from now on to the future. Of course, that is for the next part in our series. Gotcha, huh?

Coming Up

In our next part, we will wire up all this mess so we have a nice and working application. We will also implement all unit tests we defined in the first part. Is going to be lots of fun, I promise.

Go read Part 3! 😉

UI Design Using Model-View-Presenter (Part 1)

Introduction

Current tendencies and best practices in software development lead to the common pattern that a software system has to be solid, scalable and reliable. In order to comply with those three requirements, two aspects have to be considered during design phase: Code coverage and separation of concerns.

What? Ok so, code coverage is a metric that indicates how much of the code is being covered by unit tests or, in other words (English, plz), how testable is the source code we have written during those lovely 18-hour shifts. Yes– unit testing is SO important it has its own goddamn metric.

Then we have separation of concerns, which plays close with code coverage, since, in order to have handsome unit tests, we need to give each component of the system a single concern to deal with. In software design, the milk man cannot deliver newspapers around the neighborhood. Each component has a specific well-defined responsibility and it has to stick to that scope.

But what does all of this has to do with user interface design? Well, user interface code is the number one culprit of most software design flaws since it often lead developers into breaking these two design aspects specifically. Is a common well-known scenario where a class that represents a window to be rendered on-screen also performs business logic validations and queries the database directly. This not only screws up the whole idea of separation of concerns but also makes unit testing of that particular class almost impossible, punching code coverage right in the face.

That’s right. Developers are well-known for not being too skilled at designing pretty GUIs. However, when they nail it, they screw infrastructure up. Go figure.

Anyways, this three-part series of articles intend to demonstrate clear examples of both the traditional way and the “awesome” way (don’t mind quotes at all) using the Model-View-Presenter pattern in order to improve overall infrastructure design of the application user interface.

Examples will be provided in C#, using Windows Forms. The example application is Mono-compliant, so it can be compiled to run in several platforms using the Mono Framework. An additional version for Java using Swing will be provided at the last article of the series.

The Scenario

For our practical example, we are going to build a small application that displays a list of clients available in a data source to the user on-screen. The user will then be able to select clients from the list and view additional details like age, gender and e-mail address. You get the idea.

The clients will be queried from a repository which, for matters of simplicity (I’m just THAT lazy), will return data from a pre-defined generic list. For a start, here is the repo source code:

using System.Collections.Generic;

namespace Codenough.Demos.WinFormsMVP
{
   public class ClientRepository
   {
      private IList<Client> clients = new List<Client>()
      {
         new Client { Id = 1, Name = "Matt Dylan", Age = 28, Gender = "Male", Email = "mattd@none.com" },
         new Client { Id = 2, Name = "Anna Stone", Age = 22, Gender = "Female", Email = "ann@none.com" }
      };

      public virtual Client GetById(int id)
      {
         foreach (Client client in this.clients)
         {
            if (client.Id == id)
            {
               return client;
            }
         }

         return null;
      }

      public virtual IList FindAll()
      {
         return this.clients;
      }
   }
}

Traditional UI Design

Read “Effective”, Not “Efficient”

Traditional ways to develop user interfaces tend to give all responsibility to it of the data it shows, including: user input, data validation, error handling, database access and all other sorts of magical and mysterious things. The following piece of code creates the window containing a list box, to display available clients; and a series of text boxes showing additional stuff related to the client selected on the aforementioned list box and a really REALLY good looking close button.

using System;
using System.Windows.Forms;

namespace Codenough.Demos.WinFormsMVP
{
   public partial class ClientsForm : Form
   {
      private readonly ClientRepository clientsRepository;

      public ClientsForm()
      {
         this.clientsRepository = new ClientRepository();

         InitializeComponent();
         BindComponent();
      }

      private void InitializeComponent()
      {
         // Create and initialize window controls. Omitted for brevity..
      }

      private void BindComponent()
      {
         this.closeButton.Click += OnCloseButtonClick;
         this.clientsListBox.SelectedIndexChanged += OnClientsListBoxSelectedIndexChanged;

         this.clientsListBox.DisplayMember = "Name";
         this.clientsListBox.ValueMember = "Id";
         this.clientsListBox.DataSource = this.clientsRepository.FindAll();
      }

      private void OnClientsListBoxSelectedIndexChanged(object sender, EventArgs e)
      {
         var selectedClientId = (int)this.clientsListBox.SelectedValue;
         var selectedClient = this.clientsRepository.GetById(selectedClientId);

         this.clientNameTextBox.Text = selectedClient.Name;
         this.clientEmailTextBox.Text = selectedClient.Email;
         this.clientGenderTextBox.Text = selectedClient.Gender;
         this.clientAgeTextBox.Text = selectedClient.Age.ToString();
      }

      private void OnCloseButtonClick(object sender, EventArgs e)
      {
         Application.Exit();
      }
   }
}

First thing I would like to mention here is that this example satisfies all acceptance criteria (you know, what it is expected to do) we established for the end-product. It shows the list of clients, each time one is selected details of that client are displayed in the details group box and all that magic.

So, what is so bad about this code? It does what it should, and best of all: in roughly 49 lines of code. Well, as frustrating it might seem, something effective is not always efficient. The previous piece of code breaks pretty much all aspects of good design. Martin Fowler might even shed a little tear just by looking at it.

Testing What Cannot Be Tested

As I mentioned at the beginning of the article, unit test code is as important as the actual business source code. Always remember that, lad. Let’s define a couple requirements this application needs to satisfy.

The clients application should (as in “has to”):

  • Show all clients in the list box when it loads.
  • Show details of the first client in the list when it loads.
  • Show details of a client and show it when the user select an item in the clients list box.

Now, let’s write test method stubs for these:

using NUnit.Framework;

namespace Codenough.Demos.WinFormsMVP
{
   [TestFixture]
   public class WhenClientsWindowLoads
   {
      [Test]
      public void ItShouldLoadAllClients()
      {
         // ...
      }

      [Test]
      public void ItShouldShowFirstClientOnListDetails()
      {
         // ...
      }

      [Test]
      public void ItShouldShowClientDetailsOnListItemSelected()
      {
         // ...
      }
   }
}

When looking at these tests, we can notice they are specific to the presentation portion of the application. We are not testing data access (the ClientRepository class) or rendering-related stuff. By using the code example provided earlier, our tests could fail or pass depending of:

  • The repository classes.
  • The data coming from the repository.
  • The stability of the actual Windows Forms libraries (better known as the “Please Don’t Screw Up, Microsoft” prayer). 

So, we would have to adapt our tests for cases when the ClientsRepository class returns unexpected data or an environment-related exception occurs when rendering the window on-screen.

We simply can’t perform proper testing of the source code as it is right now. At this point, code coverage has been compromised; not even talk about separation of concerns. The ClientForm class does friggin’ EVERYTHING.

But fear not. Fortunately for us, some nerds locked up in a server room under an average temperature of about -5 degrees celcius already encountered themselves in this predicament and figured out a way to make of the world a better place: The Model-View-Presenter pattern.

The Model-View-Presenter Way

The Model-View-Presenter pattern was hatched in early 90’s at Taligent and popularized later on by a paper written by some really smart fella called Mike Potel; Taligent’s CTO at the time. The pattern was later used in Smalltalk user interface framework and adapted to Java when it started gaining popularity.

In a very general scope, the MVP pattern seeks to leverage the principles of separation of concerns, leaving each part composing the user interface code with a well-defined responsibility. Wow, that sounds awesome. Right?

Dropping the geek lingo, it means that, in our clients list application, the window should only care about showing data to the user on-screen and nothing else. No data-access, no business logic, no NOTHING.

The pattern is composed of three parts:

  • Model: The stuff that will be displayed to the user. It is updated as the user inputs new information on-screen.
  • View: As the name implies, the View is either a window, web page, app, smoke signals or anything used to show the Model information to the user and let it modify it as it pleases.
  • Presenter: The Presenter is actually a dude who stands right between the View and Model. It has the responsibility of providing the View with the data from the Model and validate data coming back from the View.

MVP Diagram

You might be asking yourself what in the world could be so good about separating the presentation layer of an already multi-layered software architecture in even more parts (or, source code “onionization”). Well, the MVP pattern allows us to fully test the presentation layer of our application regardless of the other layers; business and data-access that is.

In the case of our application, all unit tests required to comply with acceptance criteria are intended to validate user interface initialization and logic flow, task the Presenter is in charge of; window rendering is problem of the View and model data-access is responsibility of the ClientsRepository, which we don’t really care about whatsoever.

Coming Up

So, this concludes the first part of this article. We have reviewed some of the key aspects behind proper code design: code coverage and separation of concerns; which is important for what’s coming next. In the next part we will be exploring how to actually implement the MVP pattern to buff up our previous example and hopefully settle things up for good.

Go read Part 2! 😉