Don’t code JavaScript without jsFiddle and Chrome

As you all know I started my venture in to knock out some period now and I always relay on my trusty Visual Studio and the new comer Web Matrix for development and debugging.  But when you start development, heavy JavaScript, then you need to have these two with you all the time. The first and foremost is jsFiddle. I did mention it in my previous blog, to be honest, without it I would have spend lot more time trying to debug the code. It is very easy to create a small code snippet and try it out in the jsFiddle to make sure the view, viewmodel logic work together correctly without all the noises of your complex code.

Not only you can try to figure out the problem easily and suppose you are stuck and can not go anywhere and not sure how to troubleshoot, your next best bet to ask the question in stack overflow or in some other forum. Normally you will end up putting the code in the question and you hope you explained the problem properly so that someone could answer. Well, with jsFiddle all these issues are gone, explain the problem, share the jsFiddle link where you recreated the problem so that people can really see what is the real problem and they can easily identify the problem and help resolve your issue. Trust me with jsFiddle link in your question, the turn around time for your answer will be very short.

So if you do not have jsFiddle account, go create one and you will thank me later. Smile

The second trusty took you need is Chrome (IE also have developer tool support). Try to browse the web site in chrome and pressing F12 will give ton of features which will make your debugging so easy. Day before yesterday I ran into a problem when I was using web matrix. I was trying to read a JSON file from my data directory and no data returned. By using Chrome, I could see, the call was going out in the network tab and server was returning 404 error. So I know it was not my program problem. Also when the program is running, you can inspect all the local variables, execute simple comments on console. There are lot of link on both of them, use it, it will help your development a lot.

Advertisements

Starting out with KnockOut JS–Don’t do it without WebMatrix

So far all my development was using Silverlight. Now that Microsoft officially killed (I know, I know and lets not go there) Silverlight, we started looking at future alternatives. One of the task was to look at knockout JS. One of the reason was as a Silverlight developer who enjoys MVVM pattern, I should be able to adapt to it fast. So in this blog I am not going to talk about how to do things in Knockout JS, rather the tools you need to have to get started.

One thing I really I love about Knockout JS is, amount of documents available for newbie like me to get started. First of the links that you must have

The mother ship is @ Knockout JS. In my opinion you will not need anything else. This has fantastic starter tutorials, excellent documents. I wish every one creates web site like this some day. One another site you need to have in your bookmark if you decide to develop is Knock me out. This blog lots of tips and tools that is going to make your coding life so easy.

There are two forums that you can get answers from. Google groups and of course Stack overflow. In my opinion, I would recommend you guys to use Google Forums, I seem to get more response there than stack over flow. Oh by the way, I asked one question on Stack overflow, guess who answered, John Papa himself. I was so happy to see, John Papa is on Knockout camp. I will come to that in a minute.

Ok development environment. So you decided to start testing and play around with Knockout JS. One thing you need to think about is, how are you planning to develop the app. As you all know, I am more inclined to Microsoft IDEs so I am going to talk about only MS IDEs. You could develop Knockout sites using ASP.Net MVC templates. You will end up using ASP.Net features inter mingled with Knock out. I wanted to learn Knockout with out the noises of other technologies and focus purely on Knockout. I still want ease of development and of course intellisense. I came across Web Matrix day before yesterday and I fell in love immediately. Please remember to download the beta (2/18/12) It is so easy to develop and file based operation make it easy to drag and drop files and make it available to the solution etc., One good thing is if you want to develop ASP.Net MVC model you can develop it in there also, if you want to develop pure HTML model, you can do that also, that is what drawn me to this. So if you are setting up environment like me

1. Download Web Matrix Beta.

2. Download Knockout JS

3. Download jQuery js.

4. Download knock out mapping. (If you plan to do JSON)

Now that you have all in place, lets start building our first knock out code. Fire up Web matrix

image

In here, click on templates and create an empty site as shown below, name the site as HelloWorld

image

Now the site is created and it will take you a page something like

image

Please make sure you have downloaded knockout JS (KO) (step 2 of the download). Now click on the Files option on bottom left hand side

image

which will toggle the top left hand side to show the files instead of site.

image

First thing I do, is to create Scripts folder, where I am going to house all my scripts. So right click on the HelloWorld and create a new folder

image

call it Scripts. Next, open the Script folder so that you can copy knockout js that you have downloaded. One thing, I need to point out here, there is no solution or project model that we used to in Visual Studio. If a file is available in the directory structure then the file is available to use. So the idea here is that, if you want a file added to script, all you have to do is drop the file in Scripts folder. So, to do that, right click on Scripts folder and make it show the folder in windows explorer. Now copy KO js into the folder from your download directory. If you copied the file and if it does not show up in the web matrix view, make sure you right click on the directory and do ‘Refresh’. That’s is it, now we have the environment setup to write the code.

image

We could write the Hello world like java script model all in view, but we are doing knock out, so lets do it like we do it in MVVM, we will use binding to show Hello World. We are going to create a view model and setup a property which will have a string value of Hello World which is what we are going to bind in the view to show hello world. So do that, we click on Scripts folder and add a new java script file called ViewModel.js

image

image

Paste the code from below to make your view model java script

   1:  /// <reference file="knockout-2.0.0.js" />
   2:   
   3:  function ViewModel() {
   4:      var self = this;
   5:      self.helloWorld = "Hello World";
   6:  };
   7:   
   8:  var viewModel;
   9:   
  10:  function init(){
  11:      this.viewModel = new ViewModel();
  12:      ko.applyBindings(viewModel);
  13:  }
 

1 –> it is a required line, you add the reference to the javascript library so that web matrix can give you intellisense. If you do not have this line, then line 12, when you type ko. it will not show available methods.

3-6 –> This is our view model. Here we have one property called helloWorld which has ‘Hello World’ string assigned to it.

8 –> define the view model variable to be used in binding.

10-13 –> This is a very important method. This is required if you would want to separate the view and view model separate. You will see in a minute, this method is called on html body load so that, view model is created and also all the ko binding are applied as well.

Now lets look at our view. For our view, I am using the default.cshtml file.

   1: <!DOCTYPE html>

   2: <script src="Scripts/knockout-2.0.0.js" type="text/javascript"></script>
   1:  

   2: <script src="Scripts/ViewModel.js" type="text/javascript">

</script>

   3: <html lang="en">

   4:     <head>

   5:         <meta charset="utf-8" />

   6:         <title></title>

   7:     </head>

   8:     <body onload="init()">

   9:         <p><span data-bind="text: helloWorld"></span></p>

  10:     </body>

  11: </html>

2 –> references the ko js library and viewmodel java script.

8 –> instantiate the view model on the html load.

9 –> binds the helloWorld property of the view model to the DOM element.

That’s all folks. There is a clear separation of view and view model. Not only there is separation, this allows us to do unit testing of view model easy.

Few points to remember;

1. Make sure every html tag have associated end tag. If you do not, the ko will not come around and inject the code for you. I had a code like

<strong data-bind=”text: helloWorld”/> <—– this will not work.

<strong data-bind=”text: helloWorld”></strong> <— this works.

2. When using web matrix, in your view model, add reference to all the js library you are using so that web matrix can help you with intellisense.

3. I like web matrix model of developing KO application since, it is file based, I can just copy files without dependencies and is pure HTML/JS development. But if you choose to develop using ASP.Net MVC, that is also build into it.

Missing Assembly even though it is in the same project

Yesterday I ran into a very interesting problem. I have a solution with three projects. When I compile, I get an error saying namespace not found or might be missing assembly. The error was pointing one of the project in the same solution. So I ended up building each project by itself and two projects compiled properly but the one kept failing with the same error.  Initially I thought, something might have messed up in the project dependencies and it turned out, that is not the case.

After looking at the properties of each project I found the real culprit. It is the target system in properties. So if you run into a problem, make sure Target Frame of all projects pointing to same type. In my case the failing one was pointing to .Net Framework 4 Client for some reason.

image

Hope this saves someone’s valuable development time.