Gunnar Peipman's ASP.NET blog

Sessions I plan to visit at TechDays 2013 Belgium

DigiMortal — Tue, 19 Feb 2013 13:11:14 GMT

As I’m going to TechDays 2013 Belgium I made my first plans about sessions I want to visit. It’s always good idea to make some home work before event because it is the only way how to make good decisions. Here is the list of sessions I plan to visit.

Four new single page application templates

DigiMortal — Tue, 19 Feb 2013 00:24:35 GMT

ASP.NET and Web Tools 2012.2 are officially out and although it brings a lot of new stuff to us I want to stop on new Single Page Application templates available by community. I was able to get them all work and now let’s take a look at them.

Ember

Ember template uses Emberjs and Handlebars. It mimics the out-of-box Single Page Application template and therefore it is good to compare these two. Out-of-box template is more lightweight by implementation but Ember is more powerful by features, more here.

Default application looks almost like the one provided out-of-box. I suggest this template to guys who are more familiar with JavaScript because in the case of problems – it seems to me – you need good skills on debugging complex code.

Durandal

Durandal template uses Durandal (it’s single page applications framework), Bootstrap, Knockout and Sammy. Their sample application shows you how to show photos from Flickr.

Durandal guys make it clear on sample application front page why to go with Durandal:

Clean MV* Architecture
JS & HTML Modularity
Simple App Lifecycle
Eventing, Modals, Message Boxes, etc.
Navigation & Screen State Management
Consistent Async Programming w/ Promises
App Bundling and Optimization
Use any Backend Technology
Built on top of jQuery, Knockout & RequireJS
Integrates with other libraries such as SammyJS & Bootstrap
Make jQuery & Bootstrap widgets templatable and bindable (or build your own widgets).

Well, seems like good offer for me. Also their views and model seem simple and seems like there is not very much code writing overhead.

Breeze

Breeze template uses Breeze, Knockout and q (a tool for making and composing asynchronous promises in JavaScript). Breeze template is also another implementation of out-of-box ToDo application.

By code Breeze is like a little bit familiar to me. Don’t know why but it reminds me upshot library a little bit. At least the way how server-side and client-side data communication is done is familiar to me.

NB! Hopefully it will be fixed soon but when creating project based on this template you may get errors. Don’t be afraid – just add references to Web API OData and tracing and your solution may run with no issues.

Hot Towel

Hot Towel template by John Papa uses Durandal, Bootstrap, Breeze, Knockout, q, Sammy and Toastr (simple javascript toast notifications). This template has a lot of scripts with it and some sample code but no samples about how data moves between client and server.

As John Papa states then this template is starting point to get started with building single page applications and I really hope he will add some data access samples too because his template looks very cool.

Conclusion

It’s good to see these new community templates for SPA-s coming and hopefully growing and getting better too. Good thing is we can build client-side applications that work on (almost) all browsers without worrying about compatibility issues and from the existing selection every interested developer can find the template he likes and start building his application with it.

Using Microsoft Solver Foundation to solve linear programming tasks

DigiMortal — Mon, 11 Feb 2013 12:23:52 GMT

One of soon-to-starts projects uses linear programming for some optimizations. As it is not very familiar topic to me I started looking for examples and tools so I am prepared better when action starts. In this posting I will show you how to solve simple linear programming tasks using Microsoft Solver Foundation – free math package available by DevLabs.

Linear programming is used in many real-life calculations: business, economy, transportation, energy, telecommunications, manufacturing etc. The goal is holy: to make optimal decisions and save resources like money, time and materials.

Prerequisites

Some version of Visual Studio
Microsoft Solver Foundation
Microsoft Solver Foundation documentation
Big cup of coffee

What is linear programming?

Linear programming is specific case of mathematical programming or optimization. There is linear function we want to maximize or minimize, there are some constraints and non-negative variables. Practically this is how it goes:

We have function to be maximized:

f(x,y) = c₁x₁ + c₂x₂.
We have constraints like:

a₁x₁ + b₁x₂ <= d₁,
a₂x₂ + b₂x₂ <= d_2.
Non-negative variables:

x₁ >= 0,
x₂ >= 0.

Based on this information we will find the maximum value. We can do it graphically but we can also calculate the value. On graph above the grey area is called feasible region. Somewhere on the lines that draw this area are points where maximum values are located.

Example exercises

I found some good linear programming exercises from Brunel University home page.

A company makes two products (X and Y) using two machines (A and B). Each unit of X that is produced requires 50 minutes processing time on machine A and 30 minutes processing time on machine B. Each unit of Y that is produced requires 24 minutes processing time on machine A and 33 minutes processing time on machine B.

At the start of the current week there are 30 units of X and 90 units of Y in stock. Available processing time on machine A is forecast to be 40 hours and on machine B is forecast to be 35 hours.

The demand for X in the current week is forecast to be 75 units and for Y is forecast to be 95 units. Company policy is to maximize the combined sum of the units of X and the units of Y in stock at the end of the week.

Formulate the problem of deciding how much of each product to make in the current week as a linear program. Solve this linear program graphically.
A carpenter makes tables and chairs. Each table can be sold for a profit of £30 and each chair for a profit of £10. The carpenter can afford to spend up to 40 hours per week working and takes six hours to make a table and three hours to make a chair. Customer demand requires that he makes at least three times as many chairs as tables. Tables take up four times as much storage space as chairs and there is room for at most four tables each week.

Formulate this problem as a linear programming problem and solve it graphically.

You can find more exercises like this when searching from web.

Using Microsoft Solver Foundation

Now let’s solve one exercise using Microsoft Solver Foundation. The API it is offering is not very familiar to developers who build usual web applications and it takes some math to understand how and why it is built this way. But still it is not something complex, it’s just a little bit different.

Exercise from Vitutor. A store has requested a manufacturer to produce pants and sports jackets.

For materials, the manufacturer has 750 m2 of cotton textile and 1,000 m2 of polyester. Every pair of pants (1 unit) needs 1 m2 of cotton and 2 m2 of polyester. Every jacket needs 1.5 m2 of cotton and 1 m2 of polyester.

The price of the pants is fixed at $50 and the jacket, $40.

What is the number of pants and jackets that the manufacturer must give to the stores so that these items obtain a maximum sale?

First we have to find out what is the function to maximize and what are the constraints. It’s like described above.

Let’s suppose x = number of pants and y = number of jackets.

Function to maximize:

f(x, y) = 50x + 40y
Constraints (check out Vitutor page for good explanations):

2x + 3y <= 1500,
2x + y <= 1000
Non-negative variables:

x >= 0,
y >= 0.

Now we have all information in place based on what we know and it’s time to write some code.

We create Windows console application and create reference to Microsoft.SolverFoundation.Services assembly that is located in the following place on your hard disk:

c:\Program Files (x86)\Reference Assemblies\Microsoft\Framework\.NETFramework\v4.0\Microsoft.Solver.Foundation.dll

using Microsoft.SolverFoundation.Services;
using System; 
using System.Linq;
   
namespace LinearProgrammingSFS 
{
     class Program
     {
         static void Main(string[] args)
         {
             // Create solver context and model
             SolverContext context = SolverContext.GetContext();
             Model model = context.CreateModel();
 
             // Create decision for objective function
             Decision x = new Decision(Domain.RealNonnegative, "pants");
             Decision y = new Decision(Domain.RealNonnegative, "jackets");
             model.AddDecisions(x, y);

 
             // Add constraints
             model.AddConstraints("production",
               2 * x + 3 * y <= 1500,
               2 * x + y <= 1000);
 
             // Add non-negative variables
             model.AddConstraints("nonnegative",
               x >= 0,
               y >= 0);
 
             // Add goal - what we want to maximize
             model.AddGoal("cost", GoalKind.Maximize,
               50 * x + 40 * y);
 

             Solution solution = context.Solve(new SimplexDirective());
             Report report = solution.GetReport();
             Console.WriteLine("result: " + solution.Goals.First().ToDouble());
             Console.WriteLine("x: {0}, y: {1}", x.ToDouble(), y.ToDouble());
             Console.Write("{0}", report);
             Console.ReadLine();
         }
     }
}

If we run this program we will get the following output:

The first two lines in output give us solution: manufacturer has to make 375 pants and 250 jackets to earn $28.750 that is maximally possible. All the other output is Solver Foundation report about calculation made.

Conclusion

Microsoft Solver Foundation is set of math tools that allows you to solve some mathematical problems you face in real-world applications. Although the API it provides is not very similar to what many of us have seen before it is still simple enough to get started with it when math side is clear. In this posting we solved simple linear programming task. When we got preparation work done we wrote some simple lines of code to get answers we were looking for. Microsoft Solver Foundation is wider platform for different calculations and before writing math manually I suggest you to take a look at what Solver Foundation has to offer.

Let’s go to TechDays 2013 Belgium!

DigiMortal — Fri, 08 Feb 2013 11:19:00 GMT

Last autumn I found some very good presentations from Channel9 and they all were made during TechDays 2012 Netherlands and Belgium. One of those sessions was even so useful that I made some updates to my community presentations I worked on. This year I will visit TechDays 2013 Belgium to get better idea what is and see who’s there. Who knows, maybe I can find some new friends from Belgium.

What is coming?

To concentrate all things to short list here’s what’s coming:

one day of active training about SharePoint, Visual Studio Application Life-Cycle, Exchange and security,
two days of sessions about Winodws 8, Visual Studio, Windows Server 2012, Windows Azure, System Center, Exchange 2013, Office 2013, Windows Phone and more,
speakers like Clemens Vasters, Bart de Smet, Jeff Prosise, Corey Hynes, John Craddock, Kurt Roggen, Dan Holme, Paula Januzskiewicz, Laurent Bugnion, Maarten Balliauw,
networking – good option to make contacts with fellow developers and IT-PROs.

When and where it happens?

05-07.03.2012 @ Kinepolis Antwerp. Antwerp is nice small city in northern part of Belgium. It’s easy to get there from near-by countries and guys who don’t live near can take flight to Brussels or Eindhoven and come with train (like I do). Kinepolis Antwerp is about 4km away from Antwerp central railway station and other popular areas. So if you take hotel near railway station then you can go with public transportation – it’s not a long distance.

Why Belgium is cool?

Well… Belgium and also Netherlands are cute countries with nice towns and friendly people. For me these countries are relaxing as in my country people are always in hurry and stressed and pretty much closed. There it’s different and it fits better with my nature. Also weather there is milder than in north.

Special beers

And here’s more – beer and food! Take a look at this dark red beauty on this image. Yes, it’s cherry beer and no, it’s not done “like usually”. This one is made using high quality cherry liquor – it’s so damn good that I even buy it with damn high price here in Estonia.

There are more special beers like this – just take some cozy pub with big selection and enjoy. These beers are often strong ones but consequences in morning are not awful like with most beers in this world.

Anyway, our days there are spent in conference and evenings are free, so …. :)

Why I go there?

I go there as the materials of TechDays Belgium for previous years have been very good. When I find some event with good sessions and speakers then I go there for sure. Also TechDays is not extremely expensive. Two days of conference and one day of training is around 600EUR per person. Add there nice small town, nice people, cute small shops and damn good beers – what else you may want?

Using database unit tests in Visual Studio

DigiMortal — Thu, 07 Feb 2013 07:23:34 GMT

Stored procedures in SQL Server database can be unit tested using Visual Studio database unit tests. It may seem as simple thing to do at first but when you start writing tests then you will find out it’s more complex task to do then expected. In this posting I will introduce database testing with Visual Studio tools.

NB! In this posting I will use Visual Studio 2010 as I was not able to make database unit tests run on Visual Studio 2012. VS2012 has also these tests available but it seems to me that this support is still raw and waits for stabilization and fixes.

Are they actually unit tests?

I am not very sure that these tests can be called unit tests. They are different than unit tests we are used from applications development. As these tests may also test integrated components in database I would rather call these tests as database tests. Considering these tests to be wider than unit tests is okay because same mechanism allows us write very different tests for databases.

Why database testing?

Databases are often more complex beasts than just some tables, keys and indexes. Often databases contain complex queries, stored procedures and user-defined functions. SQL Server has also support for CLR libraries. All these database objects contain some logic that is usually very important.

Systems that make heavy use of stored procedures are good targets for database tests. Actually there are two ways how to test these databases:

regular integration tests against some service or set of classes that make data available to system,
database tests.

Database tests seems better option to me because then we don’t include code from other layers to tests and therefore bugs in other layers cannot affect the results of database tests.

Testing user defined function

Let’s start with simple test that can be considered as unit test. Here is the definition of our function:


CREATE FUNCTION [dbo].[GetImportantValue]  
(
	@n int
)
RETURNS float
AS
BEGIN
	if(ABS(@n)=2)
	begin
		return 0
	end
	return 1.0 / (4 - @n*@n)
END

What can be tested here? Couple of things:

does the function give expected results with normal values?
does the function give expected results with special values?

Okay, what’s normal and what’s special value? Normal values are the one that function is expected to accept in all usual cases. Special values in current case are values that cause division by zero. We don’t want to find errors like this in public test or production environments.

Creating database test

We start with creating new test project in Visual Studio and adding database unit test to this project.

After project is created we have there one default unit test and we must remove it as we don’t need it. If we run it we get exception and there is always one failed test in our tests list.

Now let’s add database unit test. Our first test is just call to our function with value 3.

We remove default test condition. Instead of it we will add Scalar value condition as we expect back scalar value. Clicking on condition we can set expected value.

Now the first test is ready.

Running test

Build project and from top menu select Test => Run => All Tests in Solution. Npw all tests in current solution are run and results are shown in test results Windows.

Our test passed and everything this far is okay.

Adding more conditions

We had more than one value to test our function. We can add more tests to our test project but we can also use same test with more than one test condition.

Let’s add tests for these values: –3, –2, 0, 2, 3. As first thing we will modify our test query. As it has to return only five numbers we can add scalar value conditions for these numbers without making test too complex to handle.

Here is one trick with test conditions. We have to change also column index of each scalar condition as our test will return one row with five columns. Running the test we get the following result.

Visual Studio database tests let us actually do much more but this posting is long enough and I will come back to database tests some other time.

Conclusion

Database unit tests are power tool to use when building database that implements some business logic or performs sensitive calculations and we want to be sure that code in database works correctly. There are many ways how database tests can be written and here we started with simple case that gets you going. Database tests have much more to offer and I suggest you to try them out.

Bundling and minifying in ASP.NET MVC

DigiMortal — Wed, 06 Feb 2013 09:04:24 GMT

Bundling and minifying in ASP.NET is powerful feature that helps you to optimize your web sites and save some expenses on traffic. As any other machinery in this world, bundling and minifying is not silver bullet and it has it’s own limitations. In this posting I will show you how bundling and minifying works in ASP.NET MVC.

What is bundling and minifying?

Bundling helps you to download files of same type using one request instead of multiple requests. This way you can download styles and scripts using less requests than it takes to request all files separately. Minifying helps you make files smaller by removing unnecessary whitespace.

Together these two lessen the amount of requests and bytes to get page loaded by browser.

How bundling and minifying works in ASP.NET MVC

In ASP.NET MVC 4 web application you can find BundleConfig.cs file under App_Start folder. This file contains BundleConfig class that has only one method – RegisterBundles(). In this method files that must be downloaded with one request are added to bundles.


public static void RegisterBundles(BundleCollection bundles)
{
     bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                 "~/Scripts/jquery-{version}.js"));
  
     bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                 "~/Scripts/jquery-ui-{version}.js"));
  
     bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                 "~/Scripts/jquery.unobtrusive*",
                 "~/Scripts/jquery.validate*"));
  
    // Use the development version of Modernizr to develop with and learn from.
    // Then, when you're ready for production, use the build tool at 
    //http://modernizr.com to pick only the tests you need.
    bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                 "~/Scripts/modernizr-*"));
  
    bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));   
   
    bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                 "~/Content/themes/base/jquery.ui.core.css",
                 "~/Content/themes/base/jquery.ui.resizable.css",
                 "~/Content/themes/base/jquery.ui.selectable.css",
                 "~/Content/themes/base/jquery.ui.accordion.css",
                 "~/Content/themes/base/jquery.ui.autocomplete.css",
                 "~/Content/themes/base/jquery.ui.button.css",
                 "~/Content/themes/base/jquery.ui.dialog.css",
                 "~/Content/themes/base/jquery.ui.slider.css",
                 "~/Content/themes/base/jquery.ui.tabs.css",
                 "~/Content/themes/base/jquery.ui.datepicker.css",
                 "~/Content/themes/base/jquery.ui.progressbar.css",
                 "~/Content/themes/base/jquery.ui.theme.css"));
}

Here all files in each bundle are concatenated together and downloaded as one file. It means that this method defines the following URL-s to download files:

~/bundles/jquery
~/bundles/jqueryui
~/bundles/jqueryval
~/bundles/modernizr
~/Content/css
~/Content/themes/base/css

Take a good look at file definitions. You can see that you can specify files not only by name but also by name pattern. Special placeholder {version} in file name means that file name may contain version number. This name pattern is specially good for jQuery that is updated often. When you replace your old jQuery file that has version number in its name with newer version then you don’t have to rename the file. It is enough when file has different version number in its name.

NB! In debug-mode bundling is switched off by default. To force bundling in debug-mode add the following line in the beginning of RegisterBundles() method:


BundleTable.EnableOptimizations = true;

If you open _Layout.cs view of your application you can see how style and script bundles are included to page:

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")

Although we have more bundles defined these are there for using with pages where they are actually needed.

ScriptBundle and StyleBundle

If you noticed then script bundle and style bundle have different classes. ScriptBundle is targeted to scripts and you shouldn’t add any other files to script bundles. Same with styles goes for StyleBundle. Both of these classes extend general Bundle class that offers bundling functionality.

Taking care of minifying is tricky. Neither of these classes have no functionality like this. All they do is they add correct minifier to their transforms collection. There are two minifying classes defined in System.Web.Optimizations namespace:

These are the classes that make the actual work. Same way can everybody write minification transforms one needs and if it is desired to keep same style as built-in bundles then one can create new bundle class that adds custom minifier to transforms collection when new bundle is created.

Switching off minifying

Yesterday I found out that CssMinify gets stuck with some style files. In the case of problems bundlers write problems out as comments to file they are transforming. Problems are reported in the beginning of file. While developers try to find out what is wrong with those style files we cannot keep minifying turned on for styles but we still want bundling to work.

There are two ways how to do it.

Use Bundle class. Bundle class that other bundling classes extend is not abstract class. We can create instance of it. This way we can bundle whatever files we want.
Clear transforms collection of StyleBundle. Clearing transforms collection is same as using Bundle class with empty transforms collection.

Tips and tricks

Here are some tips and tricks related to bundling.

Bundles are cached. If not specified differently in bundle class then bundle is created on first request and cached on server. All following requests for bundles are served from cache.
Always test bundling. Bundling may seems like what-can-go-wrong feature. You just turn it on before deploying your system to production. But don’t forget these to transform classes I introduced. These classes may face unexpected situations they are not able to handle. Before deploying your system to production make sure that bundling and minifying works like expected.
Be careful with styles. When bundling style sheets make sure that bundle path is same “deep” as style sheet path. If style sheet refers to images or other styles using relative URL-s and you change depth of path then all these references are broken.

Conclusion

Bundling and minifying is powerful feature that helps us optimize our web pages. Bundles are easy to use and they are supported out-of-box. Actually almost all ASP.NET MVC templates use bundles. Thanks to easy and flexible API we can control almost every aspect of bundling. Also we can create our own custom bundle types and define custom transforms that are applied to files in bundles. Although bundling is very good it has its own limits and tricks you must know to use them successfully. Good thing is – there are only few things that can go wrong.

Moving ASP.NET Single Page Application to TypeScript

DigiMortal — Tue, 05 Feb 2013 00:14:34 GMT

I just moved ASP.NET Single Page Application out-of-box example to TypeScript. My idea was to try out how TypeScript works and what it means to move existing JavaScript application to it. Here is overview about what I did and what was my experience with my first steps on TypeScript.

Prerequisites

You need the following pieces of software installed on your machine to use my code:

What is TypeScript?

TypeScript is superset of JavaScript that is targeted to building large JavaScript application. It supports type hinting, modules and variable scopes. It is not separate language – every JavaScript application is TypeScript application and vice versa.

TypeScript files are “compiled” to JavaScript when you build your application and all rules given in TypeScript files are checked. Errors are shown as usual compile errors that stop the building process. It is easy to avoid mistakes this way that otherwise maybe hard to find.

TypeScript has more familiar object-oriented syntax but it doesn’t do any magic. It is close to JavaScript and to write it one must know how JavaScript works.

ASP.NET SPA default application

When you create new ASP.NET Single Page Application project it has some files already there that make up the sample application.

Besides Web API controllers that are used to move data between user interface and server there are some JavaScript files under Scripts folder:

todo.binding.js – additional Knockout bindings for sample application (clearing textbox when user clicks enter, placeholder text functionality for non-HTML5 browsers etc),
todo.datacontext.js – one-class-data-layer that coordinates all data operations,
todo.model.js – model for sample application, contains classes used by sample application (take these classes as models and not as browser-side version of domain classes),
todo.viewmodel.js – view model for sample application.

Some things I don’t like about these files is the fact that each of these files contains one large function that has classes defined inside it. I would like if code is written more object-oriented way and I don’t keep have to keep in mind the fact that these files are actually one big JavaScript calls.

Moving to TypeScript

I moved JavaScript files mentioned above to TypeScript. The only exception was bindings file as it was simple and straight-forward enough. For other files I made the following steps:

create new TypeScript files (I prefer one class per file style),
add module definition,
port code from current file to TypeScript class,
make sure all code that is not part of JavaScript class gets called,
add new file to JavaScripts bundle,
uncomment code in old file,
run application and test.

There are some things I made differently:

there is one class per TypeScript file,
I added special Application.ts file that contains application initialization code.

I like when class files are clean and doesn’t contain code that starts doing something when loaded. If all initialization code is in same file (Application.ts in my case) then it makes me easier to control how application is initialized and started.

Example class

As an example of TypeScript class let’s take TodoItem.ts from my application:


/// <reference path="DataContext.ts" />
 
declare var ko;
declare var todoApp;
 
module TodoApp {
     export class TodoItem {
         datacontext: TodoApp.DataContext;
         TodoItemId: any;
         Title: any;
         IsDone: any;
         TodoListId: any;
  
         public ErrorMessage: any;
         public save;
  
         constructor(data, datacontext: TodoApp.DataContext) {
             this.datacontext = datacontext;
             data = data || {};
  

             // Persisted properties
            this.TodoItemId = data.TodoItemId;
            this.Title = ko.observable(data.Title);
            this.IsDone = ko.observable(data.IsDone);
            this.TodoListId = data.TodoListId;
   
             // Non-persisted properties
            this.ErrorMessage = ko.observable();
  
             var _self = this;
             this.save = function () {
                 return todoApp.datacontext.saveChangedTodoItem(_self);
             }
  
             // Auto-save when these properties change
            this.IsDone.subscribe(this.save);
             this.Title.subscribe(this.save);
         }
     }
}

And this is the JavaScript that is generated from TypeScript above:

var TodoApp;
(function (TodoApp) {
     var TodoItem = (function () {
         function TodoItem(data, datacontext) {
             this.datacontext = datacontext;
             data = data || {};
             this.TodoItemId = data.TodoItemId;
             this.Title = ko.observable(data.Title);
             this.IsDone = ko.observable(data.IsDone);
             this.TodoListId = data.TodoListId;
             this.ErrorMessage = ko.observable();
             var _self = this;
             this.save = function () {
                 return todoApp.datacontext.saveChangedTodoItem(_self);
             };
             this.IsDone.subscribe(this.save);
             this.Title.subscribe(this.save);
         }
         return TodoItem;
     })();
     TodoApp.TodoItem = TodoItem;
})(TodoApp || (TodoApp = {}));

One thing is miss is some good way to write object-oriented code without using typical self-closure hack to refer to class instance safely in methods.

Configuring bundling

Although your TypeScript files are not downloaded to browser when page loads you have to load JavaScript files that were generated by TypeScript. I’m doing the loading of these files in bundling configuration of my web application. It’s done in BundleConfig.cs file under App_Start folder.

bundles.Add(new ScriptBundle("~/bundles/todo").Include(
     "~/Scripts/app/todo.bindings.js",
     "~/Scripts/app/DataContext.js",
     "~/Scripts/app/TodoItem.js",
     "~/Scripts/app/TodoList.js",
     "~/Scripts/app/TodoListViewModel.js",
     "~/Scripts/app/Application.js"
));

JavaScript files generated by TypeScript are in same folder with TypeScript files and they have same name as TypeScript files.

Conclusion

TypeScript is cool thing and I think it’s very good fit for large JavaScript applications as it helps to detect places in code where things are not used the way that was expected. As TypeScript is superset of JavaScript it is easy to convert between those two and also language rules are almost the same. It wasn’t very hard to convert SPA default application JavaScript to TypeScript and I am sure that over next years we will see JavaScript projects that make heavy use of TypeScript.

Using jQuery webcam plugin with ASP.NET MVC

DigiMortal — Wed, 30 Jan 2013 18:50:36 GMT

I have to use webcam images in one of applications I build and when playing with different components I found free and easy to use Flash and jQuery based webcam component called jQuery webcam plugin. In this posting I will show you how to use jQuery webcam plugin with ASP.NET MVC application to save captured image to server hard disc.

Preparation

Here are some steps to take before writing any ASP.NET code:

Create new ASP.NET MVC application.
Download jQuery webcam plugin and extract it.
Put jquery.webcam.js, jscam.swf and jscam_canvas_only.swf files to Scripts folder of web application.

Now we are ready to go.

Create webcam page

We start with creating default page of web application. I’m using Index view of Home controller.

@{
    ViewBag.Title = "Index";
}
@section scripts
{
    <script src="@Url.Content("~/Scripts/jquery.webcam.js")">
    </script>
    <script>
        $("#Camera").webcam({
             width: 320,
             height: 240,
             mode: "save",
             swffile: "@Url.Content("~/Scripts/jscam.swf")",
             onTick: function () { },
             onSave: function () {
             },
             onCapture: function () {
                 webcam.save("@Url.Content("~/Home/Capture")/");
             },
             debug: function () { },
             onLoad: function () { }
         });
     </script>
}

<h2>Index</h2>
<input type="button" value="Shoot!" onclick="webcam.capture();" />
<div id="Camera"></div>

We initialize webcam plugin in additional scripts block offered by layout view. To send webcam capture to server we have to use webcam plugin in save mode. onCapture event is the one where we actually give command to send captured image to server. Button with value “Shoot!” is the one we click at right moment.

Saving image to server hard disk

Now let’s save captured image to server hard disk. We add new action called Capture to Home controller. This action reads image from input stream, converts it from hex dump to byte array and then saves the result to disk.

Credits for String_To_Bytes2() method that I quickly borrowed go to Kenneth Scott and his blog posting Convert Hex String to Byte Array and Vice-Versa.

public class HomeController : Controller
{
     public ActionResult Index()
     {
         return View();
     }

     public void Capture()
     {
         var stream = Request.InputStream;
         string dump;

         using (var reader = new StreamReader(stream))
             dump = reader.ReadToEnd();

         var path = Server.MapPath("~/test.jpg");
         System.IO.File.WriteAllBytes(path, String_To_Bytes2(dump));
     }

     private byte[] String_To_Bytes2(string strInput)
     {
         int numBytes = (strInput.Length) / 2;
         byte[] bytes = new byte[numBytes];

         for (int x = 0; x < numBytes; ++x)
         {
             bytes[x] = Convert.ToByte(strInput.Substring(x * 2, 2), 16);
         }

         return bytes;
     }
}

Before running the code make sure you can write files to disk. Otherwise nasty access denied errors will come.

Testing application

Now let’s run the application and see what happens.

Whoops… we have to give permission to use webcam and microphone to Flash before we can use webcam. Okay, it is for our security.

After clicking Allow I was able to see picture that was forgot to protect with security message.

This tired hacker in dark room is actually me, so it seems like JQuery webcam plugin works okay :)

Conclusion

jQuery webcam plugin is simple and easy to use plugin that brings basic webcam functionalities to your web application. It was pretty easy to get it working and to get image from webcam to server hard disk. On ASP.NET side we needed simple hex dump conversion to make hex dump sent by webcam plugin to byte array before saving it as JPG-file.

How to make NLog create separate log per service thread

DigiMortal — Wed, 30 Jan 2013 06:51:25 GMT

NLog on is popular logging component for .NET applications. I am using it in one project where I built multi-threaded server that is running similar threads with different configuration. As those thread are independent services I needed way how to configure NLog to create different log file for each thread. Here is my solution.

When new service starts in its thread I will configure NLog in code to create log file to correct folder with correct name and layout. Image on right shows how server is keeping instances data on disk. Each instance has its own folder and for logs there is subfolder because for every date there will be new log file.

var target = new FileTarget();

target.Name = InstanceName;

target.FileName = LogsFolder + "/${shortdate}.log";

target.Layout = "${date:format=HH\\:MM\\:ss} ${logger} ${message}";

var config = new LoggingConfiguration();

config.AddTarget(this.Name, target);

var rule = new LoggingRule("*", LogLevel.Info, target);

config.LoggingRules.Add(rule);

LogManager.Configuration = config;

_logger = LogManager.GetLogger(InstanceName);

_logger.Info("Logger is initialized");

This way I got all logging done on code level and as there is arbitrarily small probability that logging ever changes I am very sure that this seemingly temporary solution will live with project for long time.

New ASP.NET Single Page Application Template

DigiMortal — Mon, 28 Jan 2013 15:20:00 GMT

I downloaded last version of ASP.NET and Web Tools 2012.2 and digging around in Single Page Application project template. It has changed a lot compared to last beta (it was not part of stable version) and it is interesting to me to see what’s going on. I also found some good resources about SPA-s to share with your.

New default project

There is new default project for SPA-s now and it looks different than previous one. Now there is support for multiple to-do lists and of course, new design.

When we take a look at project structure we will still see almost same set of files than before but there are some changes.

Upshot is gone

Big surprise to me is the fact that I cannot find upshot anymore. It was there, it provided a little bit complex but still very powerful data layer with local caching and connection detecting etc. But now it’s gone. I actually hoped to see some progress on upshot library and support for local cache based data source.

Now it seems to be up to developers to handle data caching logic which is also not bad option as upshot code was at least for me a little bit hard to follow and debug. Now there is pure jQuery and Knockout and less JavaScript code than before.

Getting started

When searching some more information I found very good postings series by John Papa: Building Single Page Apps with Knockout, jQuery, and Web API – Part 1 – The Story Begins. Take a look at postings and examples the series provides. Although it is ten postings the postings are not too long and they are very well focused. Also I suggest reading John Papa blog post Inside the ASP.NET Single Page Apps Template Beta that explains how new SPA template works.

Conclusion

As upshot is gone and there is enough reading now about SPA-s in ASP.NET I think I come out with some new ideas when I have gone through all the materials. It’s good to see the progress and I’m happy because SPA template is back again. Hopefully it is now simpler beast to manage than it was during upshot days.

Using Visual Studio database projects in real life

DigiMortal — Mon, 28 Jan 2013 12:47:11 GMT

Visual Studio database projects are good to support software development. I have successfully used database projects for years and I think it’s time to share my experiences also to global developers audience. In this posting I will introduce you how to effectively use database projects so developers are working with up-to-date schema and test data all the time.

Standardizing development environments

To make things easier I will always use standardized development environments. It makes also life easier for developers because all problems that appear in environments are similar and after some time there are known solutions for all environment specific problems.

One important aspect in standardization is virtualization. We (or at least those with stronger survival instinct or more experiences) use virtual machines for development because they are easy to restore and when VM is crashed then it doesn’t affect host system where usually office and other work supporting software is running. Plus you can increase or decrease the amount of resources that VM uses.

For databases we usually agree in couple of things to make development easier:

developers use local SQL Server (usually developer edition),
names of databases are the same in all development machines,
credentials to access databases are same in all development machines.

Yes, it is not always possible this way and there are exceptional cases but points given here work for most of projects.

Initializing database project

Some of your team who is responsible for developing database is the one who will be also manager of database project in Visual Studio solution. Writing database objects on Visual Studio, then deploying database to local machine just to test changes is non-sense. Management Studio and other WYSIWYG database management tools are way more productive and usually databases are built using these tools. I don’t want to force people to more work manually and I ‘m happy when they are moving on as fast as possible.

Suppose that database guy has already started building database. There are some tables and maybe views. Maybe even some stored procedures. Let’s also suppose there is empty database project also added to solution.

1. Set target database platform

Here is Windows Azure SQL Database selected as target so Visual Studio will check that modifications done to schema project doesn’t conflict with SQL Azure.

2. Create schema comparison

To get changes made to database to schema project we create new database schema comparison. Schema comparison allows us to compare two different schemas. Right click on database project and select Schema Compare…

Empty schema compare window is opened.

Now you have to specify source and target schema:

source schema will be your local database (you can make new connection and use Windows authentication in this case because you don’t run schema comparison under application pool or other limited account),
target schema will be the database schema project in your solution.

Here are my sample settings for source and target dialogs:

When settings are done then click Compare button in schema compare window.

You can see now what objects are in database and what is action to do with object on target. If I don’t have good reason I don’t add roles and user accounts to schema project as sometimes their deployment is problematic. Take a look at object definitions window – you can see diff between source and target there.

3. Update schema project

Now click Update button to get database objects to your schema project and save schema to file in database project folder. I usually call this file as LocalDbToSchema.scmp.

Under your schema project you should see now some new folders and database objects. On sample image on right you can see some database tables that were imported from database.

Now include saved database compare file to your database project. This way this comparison is always available for you and you don’t have to manually configure comparison again and again when you want to compare development database with schema project.

This is the schema compare that is used mostly by database developer. Of course, after making update to schema project you have to try to build it to see that there are no errors in schema project.

Adding schema project to local database comparison

As now you have way to get schema changes from database to schema project you are ready to make another comparison that is mostly used by developers who don’t develop database. They need to compare their local databases against schema project and apply changes or recreate their databases.

Steps are almost same as before:

Right click on database project and select Schema Compare…
For source schema select your schema project in solution
For target schema select your local database
Save schema as file to database project folder (SchemaToLocalDb.scmp)
Include schema compare file to database project

This is it. As all virtual machines have same database settings then all developers can use the same schema comparison to update or recreate their schemas.

Adding test data

If you made breaking changes that cannot be deployed to existing database with data then developers need to create their databases again. Can you imagine how painful it is when new database is empty and you have to insert all data again to make even elementary things work again? The guy who manages database project will usually also manage data that is deployed to database after it is recreated.

1. Create new post-deployment script

Right click on database project, select Add…, select New Item… and select Post-Deployment Script.

Name it as Script.PostDeployment.sql by example. I’m using often only one script and that’s usually enough for me. Click Add and new post-deployment script will be added to database project. Here you can see the empty window of post-deployment script:

To this script you must add all test data and keep it up to date so developers have only minimum delays in work when something happens to database. Yes, it is additional work to keep data up to date but as database developer you should know very well how to produce test data and how to get data from database to clipboard.

Publish profile

You need two database publish profiles. Schema comparison doesn’t work for you when developer has to delete database and create it again. Yes, schemas are compared but data doesn’t appear to new database automatically. Of course, it is possible to take data with copy and paste from post-deployment script but why so much manual work when we have tools that work nice for us?

Right click on database project, select Publish… You are asked for target database connection string. Add connection to your local development database and then click on button Advanced…

Set publishing options like I have (should work for most projects you have) and then click OK.

Now save publishing settings to file called PublishToLocal.publish.xml and make sure this file is included to database project. When some developer explodes database then it is easy to recreate it again now.

Updating test and production databases

You have also test databases that are used in test environments where users and testers test the system. Also you have production databases. It would be nice if all changes get there automatically but life has shown that for these systems you have to deal mostly manually. You must be sure that you don’t break something and you don’t delete any important data by mistake.

You can still use database comparisons to compare current schema to test or production database but I recommend you to use database accounts that have no permissions to modify data or database objects. Schema comparisons will show you what changes are needed for target databases but you have to do these changes manually and not trust automatics. Even if you have publishing options set correctly you cannot always be sure that automatic modifications are done the way you expected. Make on mistake and face worst problems you have ever seen.

Until you just compare two schemas to find out differences and you use “read-only” accounts you are in safer waters.

How it works in practice

So far, so good. My teams have saved remarkable amount of time to fix mysterious database issues and setting up databases again.

All developers know how to use database projects regardless their actual role in projects.
Database and environment related issues are usually easy to find because development environments are standardized and unknown issues appear only when doing something “unusual”.
Crashed or screwed up database gets back to life with about 15 minutes at maximum.
Mismatches between database and code are quickly detected and fixed.

You need well disciplined developers to use things like this because guys who don’t really care about quality will just screw up all thing by out-dating schema project and post-deployment scripts. For good developers database projects save time and help them keep work quality high.

Conclusion

Database projects in Visual Studio are powerful tools to use. This posting gave you overview about how to use database projects when developing systems where databases with regular size and structure are used. For more complex and advanced scenarios also rules change and different problems like big amounts of data or impossibility to use local databases may need workarounds. Until it’s regular development you can easily use database projects like described here.

My experiences with Knockout

DigiMortal — Sun, 27 Jan 2013 22:29:36 GMT

It has been quite here for some month as I was very busy on some critical projects and I also got used to be a father to one wonderful baby. Now it’s time to get back to community stuff and this time I will dig to fancy JavaScript library called Knockout. This was one of interesting journeys I have had together with fellow ASP.NET MVP Hajan Selmani.

How I got to Knockout

Knockout was decision that was to be made in one project where UI is making heavy use of AJAX. Although there were other ways how to go we got some technical decisions that were not adequate and that left not much room for us.

As we had business logic implemented in database level we built WCF service so UI can communicate with database and we can also solve some issues in server side code so we don’t affect UI with every change we make.

This is how the communication between layers was organized in big picture. We had to find something to make communication between UI and server as painless as the choice was knockout. Actually Hajan suggested it at first place and it take me a little time to get to this idea but now I like the idea, of course.

What is Knockout?

Knockout is JavaScript library that allows to implement declarative model binding and use observable variables and collections. This is like client side implementation of MVVM but the engine that it is running on is JavaScript. I hope this explanation is simple enough to get the idea.

Coding with Knockout is as follows:

write code to get data from server,
write templates for repeated data,
add data binding attributes to HTML elements,
bind data to page.

Here is fragment on page that uses Knockout to show data. data-bind attribute is the one that Knockout checks. In this attribute you tell to Knockout all it has to do with element. On this example you can see foreach, click, text and clickBubble attributes.

Syntax of attributes may feel weird at first but still it’s better to have one HTML-attribute to avoid possible clashes with other libraries.

Getting data from server

If you are building rich user interface you probably have enough calls for data to server that you need some service classes.

Classes like these help us divide service calls to special service classes on UI side so our code remains organized and clean.

View models

As a next thing we need view models for our pages. View models provide data and operations to HTML page and bindings are controlled by Knockout. If we are using collections that users may change through UI code then we can use observable collections that reflect changes through bindings automatically back to HTML DOM.

Using of view models like this is optional – you can organize your code the way you like. As we had some view specific logics we started using view models so we have view model for each HTML page and we can go on with object-oriented code that we love usually most.

When view model is initialized then Knockout is binding view model to products form element. After that products are loaded from server and products collection is filled with products. As products collection is array observed by Knockout then products list on screen is filled automatically. We can use templates for single products and keep this way our forms simpler to read.

What were main wins using Knockout?

As I am not big JavaScript guru and we had most forms not very simple then my biggest wins are these:

no need for long-long code to control the UI,
no need for long code to bind data to form elements,
HTML got way cleaner and shorter when using Knockout,
Knockout worked also in more complex situations where more than one view model per page was needed.

Practically Knockout solved almost all nightmares I was afraid of to happen.

How to get started?

I got started using Knockout home page. They have pretty good tutorial and also good examples:

I started from these pages and got on my feet with Knockout quickly.

Conclusion

Knockout is easy to learn although it takes some time to find out all powerful features it has and find answers to questions when working with more complex scenarios. Although materials at Knockout site are very good they don’t explain all things but using search engines I was able to solve all problems I faced. I also had some problems when Knockout got confused but mostly these were simple issues. After week or two with Knockout I found it to be extremely valuable library to use even in more complex scenarios.

Travelling MVP #4: DevReach 2012

DigiMortal — Sat, 27 Oct 2012 10:25:35 GMT

Our next stop after Varna was Sofia where DevReach happens. DevReach is one of my favorite conferences in Europe because of sensible prices and strong speakers line-up. Also they have VIP-party after conference and this is good event to meet people you don’t see every day, have some discussion with speakers and find new friends.

Our trip from Varna to Sofia took about 6.5 hours on bus. As I was tired from last evening it wasn’t problem for me as I slept half the trip. After smoking pause in Velike Tarnovo I watched movies from bus TV. We had supper later in city center Happy’s – place with good meat dishes and nice service. And next day it begun…. :)

DevReach 2012

DevReach is held usually in Arena Mladost. It’s near airport and Telerik office. The event is organized by local MVP Martin Kulov together with Telerik. Two days of sessions with strong speakers is good reason enough for me to go to visit some event. Some topics covered by sessions:

Windows 8 development
web development
SharePoint
Windows Azure
Windows Phone
architecture
Visual Studio

Practically everybody can find some interesting session in every time slot. As the Arena is not huge it is very easy to go from one sessions to another if selected session for time slot is not what you expected.

On the second floor of Arena there are many places where you can eat. There are simple chunk-food places like Burger King and also some restaurants. If you are hungry you will find something for your taste for sure. Also you can buy beer if it is too hot outside :)

Weather was very good for October – practically Estonian summer – 25C and over.

Sessions I visited

Here is the list of sessions I visited at DevReach 2012:

DevReach 2012 Opening & Welcome Messsage with Martin Kulov and Stephen Forte
Principled N-Tier Solution Design with Steve Smith
Data Patterns for the Cloud with Brian Randell
.NET Garbage Collection Performance Tips with Sasha Goldshtein
Building Secured, Scalable, Low-latency Web Applications with the Windows Azure Platform with Ido Flatow
It’s a Knockout! MVVM Style Web Applications with Charles Nurse
Web Application Architecture – Lessons Learned from Adobe Brackets with Brian Rinaldi
Demystifying Visual Studio 2012 Performance Tools with Martin Kulov
SPvNext – A Look At All the Exciting And New Features In SharePoint with Sahil Malik
Portable Libraries – Why You Should Care with Lino Tadros

I missed some sessions because of some death march projects that are going and that I have to coordinate but it was not big loss as I had time to walk around in session venue neighborhood and see Sofia Business Park.

Next year again!

I will be there again next year and hopefully more guys from Estonia will join me. I think it’s good idea to take short vacation for DevReach time and do things like we did this time – Bucharest, Varna, Sofia. It’s only good idea to plan some more free time so we are not very much in hurry and also we have no work stuff to do on the trip. This far this trip has been one of best trips I have organized and I will go and meet all those guys in this region again! :)

Travelling MVP #3: Community event in Varna, Bulgaria

DigiMortal — Sat, 27 Oct 2012 00:03:54 GMT

Second stop in my DevReach 2012 trip was at Varna. We had not much time to hang around there but this problem will get fixed next year if not before. But still we had sessions there with Dimitar Georgijev and I had also chance to meet local techies. Next time we will have more tech and beers for sure!

We started in the morning from Bucharest and travelled through Ruse, Razgrad and Shumen to Varna. It’s about 275km. We used cab, local bus and Dimitar father’s car. We had one food stop in Ruse and after that we went directly to Varna. Here is our route on map.

Varna is Bulgarian city that locates on western coast of Black Sea. I have been there once before this trip and it’s good place to have vacation under sun. Also autumn is there milder than here in Estonia (third day of snow is going on). Bulgaria has some good beers, my favorite mankind killer called rakia and very good national cuisine. Food is made of fresh stuff and it is damn good experience. Here are some arbitrarily selected images (you can click on these to view at original size):


Old bus “monument” in Razgrad	Stuffed peppers, Bulgarian national cuisine	Infra-red community having good time and beers

We made our sessions at one study class of Varna technical university. It’s a little bit old style university but everything we needed was there and we had no problems with machinery. Sessions were same as in Bucharest.

The user group in Varna is brand new and hopefully it will be something bigger one good day. At least I try to make my commits so they get on their feet quicker. As we had not much time to announce the event there was about 15 guys listening to us and I’m happy that it was not too much hyped event because still I was getting my first experiences with foreign audiences. After sessions we took our stuff to hotel and went to hang around with local techies. We had some good time there and made some new friends.

Next time when I go to Varna I go back as more experienced speaker and I plan to do there one tougher and highly challenging session. Maybe somebody from Estonian community will join me and then it will be well planned surprise-attack to Varna :)

Windows Azure development storage and StorageServerException (Error 500)

DigiMortal — Sat, 20 Oct 2012 17:01:27 GMT

When preparing my Sinergija12 code examples I ran into interesting problem. Windows Azure local development storage hangs for about minute and gives StorageServerException stating that there was problem in web server. A little surf in search engines gave me solution.

For me this error happened with default settings of development storage. Everything started working normally when I created storage database to my local SQL Server. MSDN library has good article about steps to take: How to Configure SQL Server for the Storage Emulator:

Click Start, point to All Programs, and then click Windows Azure SDK.
Right-click Windows Azure SDK Command Prompt, and then click Run as administrator.
In the Windows Azure SDK Command Prompt window, type the following command:
DSInit /sqlInstance:<SQLServerInstance>
Where <SQLServerInstance> is the name of the SQL Server instance.

Before running these commands shut down Storage Emulator. You can run it when you are done on Azure command-line.

Gunnar Peipman's ASP.NET blog

Sessions I plan to visit at TechDays 2013 Belgium

05.03

06.03

07.03

Four new single page application templates

Ember

Durandal

Breeze

Hot Towel

Conclusion

Using Microsoft Solver Foundation to solve linear programming tasks

Prerequisites

What is linear programming?

Example exercises

Using Microsoft Solver Foundation

Conclusion

Let’s go to TechDays 2013 Belgium!

What is coming?

When and where it happens?

Why Belgium is cool?

Special beers

Why I go there?

Using database unit tests in Visual Studio

Are they actually unit tests?

Why database testing?

Testing user defined function

Creating database test

Running test

Adding more conditions

Conclusion

Bundling and minifying in ASP.NET MVC

What is bundling and minifying?

How bundling and minifying works in ASP.NET MVC

ScriptBundle and StyleBundle

Switching off minifying

Tips and tricks

Conclusion

Moving ASP.NET Single Page Application to TypeScript

Prerequisites

What is TypeScript?

ASP.NET SPA default application

Moving to TypeScript

Example class

Configuring bundling

Conclusion

Using jQuery webcam plugin with ASP.NET MVC

Preparation

Create webcam page

Saving image to server hard disk

Testing application

Conclusion

How to make NLog create separate log per service thread

New ASP.NET Single Page Application Template

New default project

Upshot is gone

Getting started

Conclusion

Using Visual Studio database projects in real life

Standardizing development environments

Initializing database project

1. Set target database platform

2. Create schema comparison

3. Update schema project

Adding schema project to local database comparison

Adding test data

1. Create new post-deployment script

Publish profile

Updating test and production databases

How it works in practice

Conclusion

My experiences with Knockout

How I got to Knockout

What is Knockout?

Getting data from server

View models

What were main wins using Knockout?

How to get started?

Conclusion

Travelling MVP #4: DevReach 2012