Declarative UI interactions using Reactive Extensions for Javascript

We are creating a page, with a lot of controls, that are talk to each other. For example "When DD1 (DropDown 1) changes, change T1 (TextBox 1), T2, reload U1 (UpdatePanel 1), but only when DD1 and DD2 has changed, update T3).
Using imperative style, your's attempt will defiantly will end with a lot of nested callbacks, and it will be very problematic to "read" original interaction scheme, from the code.

Rx will simplify a bit this problem. It will allow you to describe interactions (and data flow) between these controls, in declarative style.

Let's try to create a page, that contains 2 input text boxes, and will compute the result and write it, to the third text box. The result, will appear, after 1 second, to simulate Ajax call. If we have made many changes, than only last result will be shown to us, instead of displaying all intermediate results. And no events will be triggered, until we sat all initial values, to the controls.

Here is resulting marble diagram (red bars – are ajax calls):

 

So, the diagram shows, that T3 is calculated as T1 + T2. Calculation is made on the server, using ajax calls, and we need to recalculate T3, each time T1 or T2 changes. If Text changes, while calculation is in process (red bar), then it's result should be ignored, and new call made, to recalculate T3 with most recent data. And last thing, during initialization, no events will be fired, but when we "turn on the switch", each text box will fire the event, with it's value.

Implementation

Sample page markup:

JavaScript:

Notes:

@2 – Latch is a sort of a global "power on" switch, when we call Latch.OnComplete(), messages will start cycling around
@3 – AttachToChangeAndSetValue – it's functions that returns observable on control's change event, also, it does some "plumbering", I'll describe it later
@18, @20 – Two observables, Text1Changed and Text2Changed on marble diagram
@21 – Rx CombileLatest expression, that actually do that "value management" that is shown with arrows on a diagram
@27-28 – Actually doing calculations, and simulating Ajax call with duration of 1000ms, returns Observable, with fires, as soon, as value is ready (Ajax call returned, or 1000ms passed)
@32 – Ensures that only latest calculation result will be displayed, all earlier results will be ignored
@43-44 – Starts Computations, by releasing latch

Latch implementation

Function AttachToChangeAndSetValue creates observable from html events, but before returning this observable, it is preceded by Latch observable (@11-15 return Latch.Concat(source)). Semantic of Concat function, says that all events from source will be ignored, until Latch source is depleted. Now, we can freely change control's state (in initialization phase), without any side effects. But, as soon, as we call Latch.OnCompleted(); (@43), Concat will allow to pass change events from source.

At line @42, Latch is instructed to fire dummy event, value from this event is overwritten with control's default value (@11-14), this is for setting default values of control, and to set system to "on - tw" state (on the marble diagram).

Throwing our obsolete ajax responses

Lines @25-30 Maps update requests, to the source of sources of ajax responses. Don't be scared, it's just a list of events, and each of them, will fire when ajax response will return.
For simplification, we don't use ajax, but timer instead. Rx.Observable.Timer(1000) returns an observable, that will fire once (after specified interval). These items are represented as a red bars, on the marble diagram.
Switch function, at line @32, takes this source of sources of ajax responses, and wait until most recent event will fire, this will guarantee, that we will display data from latest recalculation.

Verify stored procedures parameters and nice side-effect of abstractions

Few week ago, I have blogged about wrapper around SPROC calling routine. At that moment I thought, about this, only like a sort of a syntax-sugar around “low level” data access classes.

Yesterday, I have faced a requirement, to verify and revalidate all my stored procedures signatures over new database. The task tended to be mundane and useless, but thanks to introduced abstraction (that builder), we can create a test, that will “fake” a stored procedure builder with a recording-mock, record all procedure calls and it’s parameters and verify it’s signatures against target database.

Here, how it works:

1. Tests replace CommandBuilderFactory, with Factory, that produces recording builders.
2. Test executes All possible methods of each Data Gateway, to record called procedures and parameters.
3. Each procedure is verified, against it’s SQL declaration.

Recording builder, in my case, allows a gateway to fill-in all required parameters. When builder is requested to do “build-up”, to produce an executor in my case, it just throws special exception. This type exception is excepted by caller.

Great, now we have a list of procedures, it’s parameters and parameter types. Next task is to check parameters of each procedure against procedure in SQL. ADO.net has method “SqlCommandBuilder.DeriveParameters”, which populates a SPROC call with it’s parameters.

Viola, the test is ready, and can be executed on continuous basis, to make shore, that nobody will commit wrong SPROC declaration anymore.

So, the lesson that I got, is, that abstraction over BCL classes has a hi chance to pay off to you :) 

Reactive extensions – WPF fold/unfold

I have just implemented WPF fold/unfold functionality using Reactive Extensions Framework (RX). Desired algorithm is to "unfold" wpf window, as soon, as mouse entered, and "fold" after 5 seconds of mouse leaving.

First, naive implementation:

This implementation contains a bug, when you move mouse in/out several times in 5sec interval, window can left collapsed, because old "collapse" events will arrive, after delay.

Here is RX implementation, that discards "fold" messages, as soon, as new "fold" messages has arrived:

Reactive extensions for javascript.

Microsoft has released Rx extensions for Javascript. It's a great tool for organizing events processing in yours UI code.

I have used it to handle following task: Call Ajax-Update every 5 seconds, after filter button clicked and on paging request, but only when previous request is finished. Tricky? Good luck debugging it later.

This can be implemented using Rx extensions. In that case all that interactions became explicit and clear, placed on few lines of code.

Here is an example:

Speed-up database insert operation using Reactive extensions

Application inserts a lot of data to mongo databse. Insertion of small records one-by-one takes a lot of time. So, obvious solution to buffer this records. Buffer feature of Rx extensions fits well for such buffering.

Code notes:

• Line 17-25 – Aggregates messages for 100ms period into an array and pass to saving function
• Line 56 – Pushes measures to Rx buffer.

This buffering gave me roughly 30% performance gain.

The code itself:

public class MeasureGateway : IMeasureGateway, IDisposable
{
	private readonly AddObserver _addObserver = new AddObserver();
	private static readonly TimeSpan BufferTimeout = TimeSpan.FromMilliseconds(100);
	private DateTime _lastMeasureAddedAt = DateTime.MinValue;
	private readonly IDisposable _bufferSubscription;

	[InjectionConstructor]
	public MeasureGateway() : this(true)
	{
		
	}
	public MeasureGateway(bool useBuffering)
	{
		if (useBuffering)
		{
			_bufferSubscription =
				_addObserver
					.Buffer(BufferTimeout).Subscribe((q) =>
														 {
															 if (q.Any())
															 {
																 AddMeasureInner(q);
															 }
														 });
		}
	}

	private void AddMeasureInner(Document q)
	{
		using (MongoScope mongo = MongoScope())
		{
			mongo.DefaultCollection.Insert(q);
		}
	}
	private void AddMeasureInner(IEnumerable<Document> q)
	{
		using (MongoScope mongo = MongoScope())
		{
			mongo.DefaultCollection.Insert(q);
		}
	}

	public void Add(DeviceMeasure measure)
	{
		Document measureDoc = GetMeasureDoc(measure);

		if (_bufferSubscription != null)
		{
			if (DateTime.Now.Subtract(_lastMeasureAddedAt) > BufferTimeout)
			{
				AddMeasureInner(measureDoc);
			}
			else
			{
				_addObserver.Add(measureDoc);
			}

			_lastMeasureAddedAt = DateTime.Now;
		}
		else
		{
			AddMeasureInner(measureDoc);
		}
	}

	private class AddObserver : IObservable<Document>, IDisposable
	{
		private IObserver<Document> _observer;

		#region IDisposable Members

		public void Dispose()
		{
		}

		#endregion

		#region IObservable<Document> Members

		public IDisposable Subscribe(IObserver<Document> observer)
		{
			_observer = observer;
			return this;
		}

		#endregion

		public void Add(Document doc)
		{
			_observer.OnNext(doc);
		}
	}

	public void Dispose()
	{
		if (_bufferSubscription != null)
		{
			_bufferSubscription.Dispose();
		}
	}

Fluent interface for hierarchical structures

Fluent interface works well in combination with builder pattern for representation of flat structures. But API gets a bit messy when you need represent some sort of hierarchical structure.

Currently I have “VeryVeryComplex” legacy entity and I need to represent it’s traversal algorithm in a friendly way. That looks easy when there is no arrays in the entity but as soon as it appears the code gets messy. The gist is to couple with hierarchy with a sort of collecting parameter pattern.

TouchEach method has 2 parameters: the collection to enumerate and “touch” delegate, that will be applied to each item in the collection. The delegate itself has also 2 arguments: t - toucher instance, that acts as a collecting parameter and i – collection element.

The consumer code would look like this:

var t = new Toucher();
var c = new VeryVeryComplexEntity();
t.Touch(c)
 .Touch(c.Child1)
 .Touch(c.Child2)
 .TouchEach(c.SubCollection1
   (t, i) => {
      t.Touch(i.SubSubChild1)
      .Touch(i.SubSubChild2);
      // The same for Subcollection of i - item
   });

Naive toucher implementation:

class Toucher
{
	List<object> _items = new List<object>();
	public Toucher Touch(object obj)
	{
		_items.Add(obj);
		return this;
	}
	public Toucher TouchEach<T>(IEnumerable<T> collection, Action<Toucher, T> subTouch)
	{
		foreach(var i in collection)
		{
			subTouch(i, this);
		}
		return this;
	}
}

Happy coding :).

Handle incoming protobuf messages with IIS Server.

The task is to receive protobuf messages that is sent from client via IIS Server. Of course, you can use native protobuf server to handle incoming request. In my case rest of the application is written using IIS, so I don’t want to cope with additional server process.

Client will send HTTP POST request with content that is protobuf encoded message. IHttpHandler on the other side will be listening for this message on the other side.

To do this, you need to modify web.config:

<configuration>
  <httpHandlers>
   <add verb="*" path="Device.proto.aspx" validate="false" type="Server.ProtoHttpHandler, Server" />
  </httpHandlers>
 <!-- 
        The system.webServer section is required for running ASP.NET AJAX under Internet
        Information Services 7.0.  It is not necessary for previous version of IIS.
    -->
 <system.webServer>
  <handlers>
            <add name="ProtoHttpHandler" path="Device.proto" verb="*" type="Server.PrototHttpHandler, Server" resourceType="Unspecified" preCondition="integratedMode" />
  </handlers>
 </system.webServer>
</configuration>

This will invoke ProtoHttpHandler that can handle incoming message.

public class ProtoHttpHandler : IHttpHandler
{
 private UnityContainer _Container;

 public ProtoHttpHandler()
 {
  _Container = new UnityContainer();
 }

 public void ProcessRequest(HttpContext context)
 {
  var handler = _Container.Resolve<RequestHandler>();
  var decoder = _Container.Resolve<ProtobufEncoder>();
  var messages = decoder.Decode(new BinaryReader(context.Request.InputStream).ReadBytes(context.Request.ContentLength));
  
  foreach (var deviceMeasureRequest in messages)
  {
   handler.OnMeasreRequest(deviceMeasureRequest);
  }
  context.Response.End();

 }

 public bool IsReusable
 {
  get { return true; }
 }
}

How to handle ASP.NET Update Panel in WatiN

Handling asp.net update panels with WatiN is a pretty annoying thing.
Click and WaitForLoad usually throws timeout every time.

I have found "just fine" solution that work for me:

static class ElementExtension
    {
        public static void ActWithToken(this Element Element, Action Action)
        {
            string Waittoken = "waittoken";
            Element.SetAttributeValue(Waittoken, Waittoken);
            Action();
            Element.WaitUntil(!Find.By(Waittoken, Waittoken));
        }
        
        public static void ActWithToken<E>(this E Element, Action<E> Action)
            where E : Element 
        {
            string Waittoken = "waittoken";
            Element.SetAttributeValue(Waittoken, Waittoken);
            Action(Element);
            Element.WaitUntil(!Find.By(Waittoken, Waittoken));
        }
    }

Usage

Page.CreditToLocation.FindItem(1).ActWithToken(e => e.ClickNoWait());

Call stored procedure with output parameter using Builder pattern

My custom DAL requirements is:

1. By given Business objects (BOs) call stored procedures
2. Handle output parameters (updating BOs fields)
3. Throw exceptions, if error code returned from stored procedure

Coding this functionality using ADO.NET is a bit annoying. The majority of code consists of communication with framework interface, and does not explicitly express developer's intensions. Example.
Such annoying code can be refactored nicely using Builder pattern. Target interface for me is interface like this:

public void Update(ObjectContext Ctx, BusinessObject Row)
{
 CommandBuilder Builder = InsertOrUpdateBuilder(Ctx, "updateBusinessObject", Row);
 Builder.ErrorCodes
  .Parameter("err_code_out")
  .Handle<ConcurrencyException>(-1);

 Builder
  .Parameter("id", Row.Id)
  .Parameter("last_update_date", Row.LastUpdateDate)
  .Parameter("last_updated_by", Row.LastUpdatedBy)
  .Output<DateTime>("last_update_date_out", (d) => Row.LastUpdateDate = d)
  .Create()
  .ExecuteUpdate();
}

public void Insert(ObjectContext Ctx, BusinessObject Row)
{
 InsertOrUpdateBuilder(Ctx, "insertBusinessObject", Row)
  .Parameter("created_by", Row.CreatedBy)
  .Output<int>("id_out", (Id) => Row.Id = Id)
  .Create()
  .ExecuteUpdate();
}

This interface is versatile enough to express required stored procedures call scenarios and explicit enough to be readable by human.

Literally Update call do this:

1. If Stored procedure returns –1 from parameter "err_code_out", Concurrency exception will be thrown.
2. Parameters "id", "last_update_date" and "last_updated_by" will be added to stored procedures
3. Parameter "last_update_date_out" will be threaded as output parameter of type DateTime and mapped to Row.LastUpdateDate.

Implementation

The idea of Builder pattern, is to hide complex construction logic behind clear and explicit API.
Builder responsibility is to collect consumer "wishes" and return something that consumer can execute, to make "wishes" come true.

Here is builder implementation:

public class CommandBuilder
{
 private readonly DbCommand _Command;
 private readonly OutputParameterMapper _ParameterMapper = new OutputParameterMapper();
 private readonly ErrorCodeHandler _ErrorCodeHandler;

 public CommandBuilder(ObjectContext Ctx, string Name)
 {
  _ErrorCodeHandler = new ErrorCodeHandler(Name);
  _Command = Ctx.CreateStoreCommand(
   Name, 
   CommandType.StoredProcedure);
 }

 public IErrorCodeHandlerBuilder ErrorCodes
 {
  get
  {
   return _ErrorCodeHandler;
  }
 }

 public CommandBuilder Parameter(string Name, object Value)
 {
  if (Value == null)
  {
   Value = DBNull.Value;
  }

  _Command.Parameters.Add(new SqlParameter(Name, Value));
  return this;
 }

 public CommandBuilder AddPagingParameters(PageSortInfo PageSortInfo)
 {
  _Command.AddPagingParameters(PageSortInfo);
  return this;
 }

 public CommandExecutor Create()
 {
  if (_ErrorCodeHandler.ParameterName != null)
  {
   Output>int<(_ErrorCodeHandler.ParameterName, (ErrorCode) => { _ErrorCodeHandler.ThrowOnError(ErrorCode); });
  }

  return new CommandExecutor(
   _Command, 
   _ParameterMapper);
 }

 public CommandBuilder Output>T<(string ParameterName, Action>T< Func)
 {
  var Parameter = new SqlParameter(ParameterName, default(T));
  Parameter.Direction = ParameterDirection.Output;

  _Command.Parameters.Add(Parameter);
  _ParameterMapper.AddMap(ParameterName, Func);
  return this;
 }
}

After class consumer calls create on Builder, it returns Command executor. Command executor is already configured to execute desired stored procedures with parameters and map output parameters after execution.

I have cheated a bit with ErrorCodeHandler, it is a builder and an executor in the same time (say hello to SRP), but it doesn't causes much damage for now. The execution interface is hidden by IErrorCodeHandlerBuilder.

public class ErrorCodeHandler : IErrorCodeHandlerBuilder
{
 private readonly IDictionary>int,type< _ErrorsDictionary = new Dictionary>int,type<();

 private readonly string _ProcedureName;
 private string _ParameterName;

 public string ParameterName
 {
  get
  {
   return _ParameterName;
  }
 }

 public ErrorCodeHandler(string ProcedureName)
 {
  _ProcedureName = ProcedureName;
 }

 public IErrorCodeHandlerBuilder Handle(int ErrorCode, Type Exception)
 {
  _ErrorsDictionary.Add(ErrorCode, Exception);
  return this;
 }

 public IErrorCodeHandlerBuilder Handle<T>(int ErrorCode)
 {
  _ErrorsDictionary.Add(ErrorCode, typeof(T));
  return this;
 }

 public IErrorCodeHandlerBuilder Parameter(string Name)
 {
  _ParameterName = Name;
  return this;
 }

 public void ThrowOnError(int ErrorCode)
 {
  Type ExceptionType;
  if (_ErrorsDictionary.TryGetValue(ErrorCode, out ExceptionType))
  {
   var Exception = (Exception)Activator.CreateInstance(
    ExceptionType,
    String.Format("Stored procedure {0} returned error code {1}", _ProcedureName, ErrorCode));
   throw Exception;
  }
 }
}

The output parameter mapper is a bit tricky. It introduces 2 classes Map<T> and Map to bypass C# generic typing systems, and make polymorphism to work.

public class OutputParameterMapper
{
 private readonly List<IMap> _Map = new List<IMap>();
 private interface IMap
 {
  string ParameterName { get; set; }
  void InvokeSetter(object Value);
 }
 public void AddMap<T>(string ParameterName, Action<T> Setter)
 {
  _Map.Add(new Map<T>()
  {
   ParameterName = ParameterName, 
   Setter = Setter
  });
 }

 public void MapParameters(DbParameterCollection Parameters)
 {
  foreach (var Map in _Map)
  {
   var Value = Parameters[Map.ParameterName].Value;
   Map.InvokeSetter(Value);
  }
 }
 private class Map<T> : IMap
 {
  public Action<T> Setter { get; set; }
  public string ParameterName { get; set; }
  public void InvokeSetter(object Value)
  {
   Setter((T)Value);
  }
 }
}

Command executor class, when called blows all that stuff (triggers exception throwing and parameters mapping)

public class CommandExecutor
{
 private readonly DbCommand _Command;
 private readonly OutputParameterMapper _Mapper;
 private readonly ErrorCodeHandler _ErrorHandler;

 public CommandExecutor(DbCommand Command, OutputParameterMapper Mapper)
 {
  _Command = Command;
  _Mapper = Mapper;
 }

 public DbCommand Command
 {
  get
  {
   return _Command;
  }
 }

 public void ExecuteUpdate()
 {
  using (_Command.Connection.CreateConnectionScope())
  {
   _Command.ExecuteNonQuery();
   _Mapper.MapParameters(_Command.Parameters);
  }
 }

 public T ExecuteScalar<T>()
 {
  using (_Command.Connection.CreateConnectionScope())
  {
   var Scalar = (T)_Command.ExecuteScalar();
   _Mapper.MapParameters(_Command.Parameters);
   return Scalar;
  }
 }
}

The idea of builder pattern was given to me by my colleague, thanks. :)