Hello, Code Project again

To learn or not to learn, I think, for a programmer, that is matter of life or death situation.

Knowledge is powerless without execution. Translate in coding, that means, if you do not code it, see your code run in action, technologies are nothing but mere words. Words that are obtuse, funny-sounding, most likely hard to pronounce, utterly meaningless.

So I decided to code a little sample web application using SignalR, the asp .net way of socket programming. Further more, I submitted to CodeProject.com, a website that I randomly "self"-published a couple of silly things ages ago.

So here it is, however humble, it is mine, alive and well in CodeProject.com.

SignalR: ASP .net way of socket programming

Teach kids a bit of coding. Part II: The beloved JavaScript

So onward and fast forward from running through one learn-to-code app to another, I finally decided to go straight back to my home camp, the JavaScript camp.

The whys

Why not? For all the good reasons, convenience, resources, usefulness ... why not?

In this coding kingdom, nothing is more convenient and ubiquitous than JavaScript, the language of the web. Who does not use the web? Even on your phone. Even some of your favorite apps.

Resources? There is more libraries, frameworks than you can count.

Comfortable? Yes, I am utterly at home with JavaScript.

Useful? Yes, I am done with building just another play thing living in someone else website.

Yet another back story is that, unlike a lot of game kids, my kids are not so deeply immersed in the game culture. Rather, they are utilitarian; Unlike me, who always checkout and use whatever is out there, my kids want to build their own tools. For example, they want to build a student bean counter so the teacher can easily track at any given time on any given day, which kid is missing; they want to build a Knock-knock-who-is-there joke factory.

Now, they want to build a star/sticker chart, which gives out (online) stickers whenever someone does a good (or not so goo) job , for example, playing violin.

So there we go.

JavaScript can do math homework

Honestly, coding does look daunting. So the first thing I tried is lure my kids by showing off some of the awesome homework-checking capabilities of JavaScript. Like the following. Using FireBug console.

Ok, it is not quite JavaScript yet, but by using FireBug, the little adds-on for Firefox, I gave her a glimpse of JavaScript

Get in touch with basic html tags

A little quick math quickly lost its shine. So I set out to show the basic html dress code, tags like <p>, <img> and the basic html page structure, head, body, title, etc. Luckily for me, I have Visual Studio, so creating a page is a breeze. The next thing, adding some tags, <p>, <img>. So quickly we have a page (ugly it is) set up that have a image from Google, and some text goes with it.

My daughter was having trouble remembering put the text inside of the <p> tag.

Introduce the concept of array

So far so good. My daughter was mildly interested and amused to see her own page actually come alive!

Yet, we need a lot of knock knock jokes. So I have her to drop more <p>, <img> It was getting very very boring and error prone, so obviously, computer should be more fun and intelligent than this.

So let's see if we can handle an array.

Every programming term sounds so alien. She does not get the name variable or array.

What is an array?
Eh, Emma, an array is a collection of things. Ok?
What does it do?
Eh, it let you put things together, then you can use a loop to go through them one by one.
What is a loop?
A loop is just a loop ...

I am always a person who is short at words, now I am out of words.

No matter. Let's build an array anyway.

In JavaScript, you put similar things inside a pair of square bracket. Like this:

var knockknockJokes = [
            { who: 'lettuce', whoIs: 'lettuce in!', image: "" },
            { who: 'figs', whoIs: "Figs the doorbell, it's broken!", image: "" },
            { who: 'Avenue', whoIs: 'Avenue heard this joke before?', image: "" },
            { who: 'Aunt', whoIs: "Aunt you glad Granny's gone ?", image: "" },
            { who: 'Orange.', whoIs: 'Orange you going to let me in?', image: "" }

It took more explanation, the object inside of the array, the properties inside of the object, etc. I wish i knew better, more kids-friendly words.

Anyway, the array is done. Let's spill all of our knock-knock jokes.

I wrote the loop for her. And our page is done. We are happy.
The Knock Knock page

Next time, I will tell how I get her to know a bit of JavaScript function, the very core of JavaScript.

Teach kids a bit of coding. Part I: a look at current Learn-to-code-for-kids resources

Trend dictates that everyone needs to code and be able to code. Who does not want to be the next Mark Zuckerberg or Larry Page, or at least, their employees?

There is an abundance of resources and teaching initiatives.

Code.org (backed by Mark  Zuckerberg, Bill Gates, etc. etc., anyone who is somebody across all social walks) had some online tutorials interspersed with inspirational videos;

Khan Academy has dedicated computer programming courses where you can clone and create your JavaScript project;

MIT has Scratch, where kids can drag and drop coding blocks, cartoon characters, video/audios and build simple video games, animations, or simply tell a story.

There are all sort of coding games, which are more game than coding, that try to introduce the ideas about functions, loops, variables, and some logic training. My favorite is Kodable.

As a professional programmer and a mom who also eagerly wants to pass on some of the coding skills to my kids, I have ambiguous feelings about all of the programs I have tried with my kids, and I have very limited success getting my kids interested.

For example, Khan academy has simple ideas about teaching kids drawing with JavaScript. With that, you need some fine sense of coordinates. It is supposedly a very visual task however it requires you to plot all the spacial points out of thin air. My kids quickly gave up trying to draw a duck with a plump body and 2 yellow eyes.

Code.org is fine too, it teaches basic programming concepts such  as Conditionals, Loops, functions, It is all done in some format of half gaming. Instead of instant feedback from video games, you point, you shoot, something happens, With code.org games, you stack up your instructions, then hit run to see if your angry bird will get the pig while also evade a potential disaster.

As a matter of fact, most of current coding games are done in this fashion.

Kodable, where fuzzes run through a maze collecting coins; Tykner, has different set of games, Dragons and Firefly; Candy Catcher, etc,, etc.. I like Kodable a lot, it has cute and simple interface, very helpful and non-intrusive instructions and contextual hints, very clear objective and path of execution.

However, Tykner, I found it very annoying. It is hyper-active, lacking clear instructions, sometimes logically confusing. Do you jump on the candy, or jump over the candy in order to eat it?

Then there is Scratch from MIT, where kids or anyone can drag and drop instructions, sprites (images) and start building animated stories. It is very popular and admired for its versatility, and people have created millions of projects with it. Some of the projects are quite fun.

I tried Scratch with my kids and we created a few projects. Still, a lot of things feel very retro. the sprite set is very old fashioned, you need to watch some tutorials to realize how to coordinate your sprites, it is not easy to create simple variable and make them behave dynamically. To master Scratch, the effort is no less than a full-blown language. Make everything graphic on the surface may seem to have simplify coding, but in the end, it actually creates more obstacles and complexities.

That is why I eventually went to JavaScript.

Until next time.

Dapper and Dapper Async


Dapper is an object-relational mapping (ORM) solution for the Microsoft .NET platform. It is written for and used by stackoverflow. It has the signatures of a stackoverflow baby, hugely popular, no-bullshit/lightweight, effective and efficient, stellar performance.

We have been using Dapper for a couple of years. We love it, for its simplicity and performance. It is so simple, whether we do select, insert or update, whether we use stored procedures or ad-hoc sql.

using (var connection = new SqlConnection(myConnectionString))
                const string sqlStatement = @"select client_id As Id, client_name As Name from dbo.client with(nolock) ";
                return connection.Query(sqlStatement);

.NET async 

.net 4.5 came out about 2 years ago, and asynchronous programming with async and await is one of the big features. async/await allows you to define a Task that you can await on, and then continue execution once the work is done, all without blocking the calling thread unnecessarily. async and await operations took away the programmatic complexity from programmers, however, under the hood the compiler still does the heavy lifting of setting up a waiting context/state machine so a task can get back to exactly where it has begun.

 The overhead of async/await in NET 4.5 demonstrates that "Despite this async method being relatively simple, ANTS Performance Profiler shows that it’s caused over 900 framework methods to be run in order to initialize it and the work it does the first time that it’s run."

 It is agreed upon that async/await should be limited to only I/O heavy operations, web access, working with files, working with images.

How about database calls? Turned out database calls are by nature blocking. It blocks the calling thread even if you stamp your method as async and use the await keyword.

 To allow asynchronous database queries and other crud operation, dapper added a set of QueryAsync methods using .NET Framework 4.5's Task-Based Asynchronous Pattern. Under the hood, the asyn dapper methods uses connection.OpenAync, executeReaderAsync to allow connections to be opened and queried in asynchoronous mode.
      public static async Task> QueryAsync(this IDbConnection cnn, CommandDefinition command)
            object param = command.Parameters;
            var identity = new Identity(command.CommandText, command.CommandType, cnn, typeof(T), param == null ? null : param.GetType(), null);
            var info = GetCacheInfo(identity, param);
            bool wasClosed = cnn.State == ConnectionState.Closed;
            using (var cmd = (DbCommand)command.SetupCommand(cnn, info.ParamReader))
                    if (wasClosed) await ((DbConnection)cnn).OpenAsync().ConfigureAwait(false);
                    using (var reader = await cmd.ExecuteReaderAsync(command.CancellationToken).ConfigureAwait(false))
                        return ExecuteReader(reader, identity, info).ToList();
                    if (wasClosed) cnn.Close();

Should you use asynchronous database calls?

 Just because you can do it does not mean you should do it, says RickAndMSFT at here.


 It does your more harm than good if you queryAsync a small query that takes a few millisecond, however for long running database calls you may consider using querySync feature to avoid bottleneck and gain some responsiveness.

 Check out some benchmark testing from this article Asynchronous Database Calls With Task-based Asynchronous Programming Model (TAP) in ASP.NET MVC 4.

W3 layouts and mobile brower detection in Asp .net

Let's face it, designing a web template is quite some work, not to mention it takes an eye of aesthetics and the fact that it has to look good on both web and mobile devices. Yes, any web is declaring its own death if it looks crappy on mobile.  So unless you are a professional designer and swimming in loads of money, if you need a quick template, you probably just grab one out there and tweak it and style it to your heart's desire.

That is what I did. And that is why I am so delighted by the various templates at W3 layouts. It has a big collection, and FREE and RESPONSIVE. None of the other template sites come close. (Other popular ones are templates at http://html5up.net/, but frankly I think they are mostly ugly or perfunctory. WrapBootStrap has some nice ones, but they are not free, though most of them do not cost you most 4 cups of Starbucks.)

Peculiar enough, the templates at W3 layouts often come in three flavors: web, mobile, smart phone. It took me a while to find out that smart phones are for our regular mobile chops: IPhone, android, windows etc. And Mobile templates are designed to use wap 2.0 standards with xhtml where javaScript is not supported. Heck, I guess i can safely discard mobile templates.

Then, the nagging question (quotes from w3 layouts.com):

When we have responsive WEB template why we need separate SMARTPHONE and MOBILE template?

Responsive design is good for users having speed network connection (WIFI, 3G). Responsive design will load the whole HTML, CSS and images which are used for desktop design, users in slow data connection have to wait and spend lot of data, time and money to load page. To save users Money and load time we have to use separate design depending on device compatibility.

So I set out to create my little personal site with the fancy and pleasant designs of W3 layouts. Oops, seems that a big part of the world still has not convert to the Microsoft/Asp .net camp, sadly, seems that more and more developers are parting their ways from the gloriously clunky world of Microsoft. (Proof: Why I Left the .NET Framework).

So W3 layouts is in the php camp, and they use a bit of php code to detect user browsers/devices. I would love to use php, but with the time constraint, I am also happy to stick to asp.net.

So happily and quickly searching (since everything is out somewhere if you search!). I found the following nifty code to get just what I want (got to say it is much more neat and clever than the php code provided by w3 layouts.

C# code (from Mobile Device Detection in asp.net)

  public static bool IfBrowserIsMobile()
            Debug.Assert(HttpContext.Current != null);

            if (HttpContext.Current.Request != null && HttpContext.Current.Request.ServerVariables["HTTP_USER_AGENT"] != null)
                var u = HttpContext.Current.Request.ServerVariables["HTTP_USER_AGENT"].ToString();

                if(u.Length < 4)
                    return false;

                if (MobileCheck.IsMatch(u) || MobileVersionCheck.IsMatch(u.Substring(0, 4)))
                    return true;

            return false;

The following is the php counterpart:

JavaScript MVC frameworks

MVC has been having a great run for a while (a long while). It was introduced in the computer's stone age (the 70s, the first micro processor, the floppies, main frames), morphed into a well-accepted architectural theory in the bronze age (the 80s, IBM, computers for personal use became possible). Then computers and the internet and mobile devices became our overlords, exploding in power and complexity. To rein in the complexity and keep us from being entangled in the web of our own weaving, MVC becomes the default and de facto application architecture.

We all know now the three legs of the MVC stool:
Models - Data, business rules, logic, etc.
Views - Presentation layer, be it a chart, a table, an image gallery. The front end of things
Controllers - The link between model and view, the commander-in-chief that takes signals and issues command.

On the server side, we have a set of big players and well established design patterns and architectures. Ruby is the trail blazer that first goes MVC in full throttle. ASP .net MVC soon followed suit, moved over from the web form development model where UI is tightly coupled with the code-behind logic. ASP .net MVC provides powerful view engine, various routing techniques, and flexible controllers that accept and return data in the formats requested.

On the client/JavaScript side, the playground is always more diverse therefore more interesting and more confusing.

JavaScript MVC frameworks

Briefly searching the web on JavaScript MVC frameworks, you get a dozen and still counting. According to infoQ's research, the following are the top MVC frameworks:

Backbone.js: Provides models with key-value binding and custom events, collections, and connects it all to your existing API over a RESTful JSON interface.
AngularJS: A toolset based on extending the HTML vocabulary for your application.
Ember.js: Provides template written in the Handlebars templating language, views, controllers, models and a router.
Knockout: Aims to simplify JavaScript UIs by applying the Model-View-View Model (MVVM) pattern.
Agility.js: Aims to let developers write maintainable and reusable browser code without the verbose or infrastructural overhead found in other MVC libraries.
CanJS: Focuses on striking a balance between size, ease of use, safety, speed and flexibility.
Spine: A lightweight framework that strives to have the most friendly documentation for any JavaScript framework available.
Maria: Based on the original MVC flavor as it was used in Smalltalk - aka "the Gang of Four MVC".
ExtJS: Amongst other things offers plugin-free charting, and modern UI widgets.
Sammy.js: A small JavaScript framework developed to provide a basic structure for developing JavaScript applications.
Stapes.js: A tiny framework that aims to be easy to fit in an existing codebase, and because of its size it's suitable for mobile development.
Epitome: Epitome is a MVC* (MVP) framework for MooTools. soma.js: Tries help developers to write loosely-coupled applications to increase scalability and maintainability.
PlastronJS: MVC framework for Closure Library and Closure Compiler. rAppid.js: Lets you encapsulate complexity into components which can be easy used like HTML elements in your application.
Serenade.js: Tries to follow the ideas of classical MVC than competing frameworks.
Kendo UI: Combines jQuery-based widgets, an MVVM framework, themes, templates, and more.

Why so many frameworks? Why JavaScript MVC? What is MVC in JavaScript? Which one or ones to choose?

Well, if you were me, you probably would try to dismiss all those frameworks as noise. You may just want to bury you head in the sand, keep piling another jQuery plugin or another Ext js feature. But before long, the chorus of MVC became deafening, and you found your project on the JavaScript gradually spiraled out of control, and it becomes more and more difficult to track what triggers from what controls have changed the state of your data. The JavaScript become yet again become a multi-million lines of mess.

So think again about a JavaScript MVC framework.

Flavors of JavaScript MVC

MVC on the JavaScript side is a little different from the server side MVC you know, or the ASP .net MVC i know. In fact, MVCs are a little different from the JavaScript frameworks within. First and foremost, the frameworks try to clearly separate data and presentation, views and models.

Models: data that flows underneath your site. More precisely, data models that represents the structure/schema of your data. Data relationship, constraints can be defined and verified. Think of a user data model, it will have typical elements like age, gender, name, etc.

Views: layout, templates and interface. The side that your users can see and manipulate. They are your models marked up as photo galleries, task list, a table of data, etc.

Different frameworks have different takes when it comes to controllers. For some, the line between controllers and views are blurred, or views simply initiate the actions that theoretically would have belong to controllers. For example, backbone.js. Others do make controllers an command center that launches an application, initializes data models, monitors data changes and calls for appropriate actions. For example, Ext Js, Ember js.

There are also other flavors of JavaScript MVC. The most notably, the MVVM (Model-View-View Model) implemented by Knockout.js. Knockout.js has your typical views and models, however the controller part is termed as View Models, which bind DOM elements with data models and automatically refresh UI when data changes.

It is hard to get to know therefore evaluate each of the frameworks which all carry with them oh-so-good halos and incredibly cool demos and live websites, so we have to heavily rely on word of mouth that is circling on the internet. Some articles provide just that, for example:

Essential JavaScript: the top five MVC frameworks
Journey Through The JavaScript MVC Jungle

Of the JavaScript frameworks, Backbone.js sits on top of the list and it has an impressive list of heavy-weight players, such as USA Today, LinkedIn mobile. Backbone.js has a collection of methods that manipulate data models, get/set, construct, make a collection, push/pop, extend. The whole backbone.js is revolving around data models and data handling logic.

var user = Backbone.Model.extend({
    name: 'Annoymous',
    age: 18,
    initialize: function() { ... },

    email: function() { ... }

Knockout.js is particular hit with ASP .net MVC, I do not know why. And the heart of Knockout.js is view-model.

The following (from Creating a Dynamic UI with Knockout.js)populates a products array from data requested from a web API.
function ProductsViewModel() {
    var self = this;
    self.products = ko.observableArray();

    // New code
    var baseUri = '@ViewBag.ApiUrl';
    $.getJSON(baseUri, self.products);

Ext Js
Dealing mostly with Ext Js in my professional life, I have to give Ext Js MVC a mention. Ext Js 4 makes data packages center of its library, it also has an extensive set of data model mechanisms to define, validate, populate and manipulate data. As typical of Ext Js, it goes on the verbose mode. An Ext Js MVC application would have the following file structure:

 Ext Js Controller establishes awareness of its view through the init method:
Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',
    init: function() {
            'viewport > panel': {
                render: this.onPanelRendered
    onPanelRendered: function() {
        console.log('The panel was rendered');
And an Ext Js View use an Ext Js component for display.
Ext.define('AM.view.user.List' ,{
    extend: 'Ext.grid.Panel',
    alias : 'widget.userlist',
    title : 'All Users',
    initComponent: function() {
        this.store = {
            fields: ['name', 'email'],
            data  : [
                {name: 'Ed',    email: 'ed@sencha.com'},
                {name: 'Tommy', email: 'tommy@sencha.com'}
        this.columns = [
            {header: 'Name',  dataIndex: 'name',  flex: 1},
            {header: 'Email', dataIndex: 'email', flex: 1}
So which JavaScript MVC framework would you choose?


The MVC Application Architecture
Essential JavaScript: the top five MVC frameworks
Journey Through The JavaScript MVC Jungle

Ext Js Buffered Store getGroups Error

Ext Js has many features that rock. One of them is buffered grid. So unlikely traditional grid where pagination is done through navigating with a set of controls. Ext buffered grid panel allows you to scroll through the grid infinitely, the same way you would scroll up and down with a long web page. Behind scene, this is made possible by a buffered data store that fetches extra pages of data and cache them in page cache. A buffered store is configured as:
 buffered= true

However with this powerful feature comes with unanticipated bugs (oh, boy, do not we developers live with bugs.)

 The bug today I found is that buffered grid does not go well with grouping and column reordering. So using the sample infinite-grid provided by Sencha, I made a minor modification to have the grid group by author, and I get the following grid:


All is well, until I started to drag and drop to reorder the columns. Oops, after one successful drag-n-drop, the grid frozen.

After a little debugging, I found that the columnMove event triggered a refresh grid call, which in turn triggered a getGroups call, which in turn triggered an unhandled undefined error. StackTrace and error screenshot as the following:

So after some noodling around, I made the following changes and made the grid happy again.
 Ext.define('Ext.csx.data.BufferedJsonStore', {
    extend: 'Ext.data.Store',
    getGroups: function (requestGroupString) {
        if (!this.data.items) {
            return [];

Complete code available at: https://github.com/xunxdd/extjs.git