Thursday, July 17, 2014

Extending the Number object in JavaScript & the int type in C#

We will add a method to the Number prototype property in JavaScript. In C#, we will code the equivalent functionality with an extension method on int. Yep, we're going native! I'm hoping this will help somebody trying to move from C# to JavaScript or vice versa.

The JavaScript code can be found on GitHub here. The C# code can be found on GitHub here. You can fork the projects or just copy the code you need. Everything you need to run and test the code are in the projects. There is a QUnit page for the JavaScript project and a Unit Testing project for the C# project.

Let's start with JavaScript. All you need to do is add a method to the Number prototype property. I'm wanting to check if the Number is divisible by the dividend argument's value. I add isDivisibleBy to the prototype property and set it to an anonymous function with a dividend parameter. The function returns a Boolean:

 Number.prototype.isDivisibleBy = function(dividend){  
   return this % dividend == 0;  
 }  

You use it like so:

 var i = 6;  
 if (i.isDivisibleBy(3)) {  
       //it is and so do stuff  
 }  

There's a little bit more to do in C# but not much. We will add an extension method for int. Here, the first parameter is the type preceded by this and in our case it is our denominator. We also add our dividend parameter.

 public static bool IsDivisibleBy(this int denominator, int dividend)  
 {  
    return denominator % dividend == 0;  
 }  

To use it, it is EXACTLY the same syntax as JavaScript. The only difference is the method naming style. The method name starts with lowercase in JavaScript and starts with uppercase in C#. You could also use int instead of var in C#. But, it's all the same in the end.

 var i = 6;  
 if (i.IsDivisibleBy(3))  
 {  
     //it is so do stuff  
 }  

Tuesday, July 15, 2014

KnockoutJS Mapping to PHP & MySQL


A little while back I wrote a post called ‘Hello LAMP with Codio’. I wanted to leverage that example and create one that also uses KnockoutJS and the ko.mapping plugin.

So, I added a few files to the project on Codio. First, I added the Knockout script and the mapping plugin mentioned above. I also created knockout.php and ShowMsgs.html. You can view and run them from the Codio project.

The important part of knockout.php is fetching an object instead of an array and then echoing JSON back to the requesting ajax call that will be shown below.

image

If you actually browse to knockout.php, you will see the JSON:

image

The piece you’re probably searching for: In ShowMsgs.html, I code my viewModel (which I actually leave to ko.mapping), my template and the jQuery.


image

Please note that you’re going to need that jQuery reference as well. I used their CDN but you can reference it any way you wish. Also, in production, you don’t want to use the Debug version of any script but we are just creating a demo that we want to step through here.

Here’s what we get when we browse to ShowMsgs.html

image

Please see the original post “Hello LAMP with Codio” to see how the MySQL data was setup along with how to set up a Codio project in general.

Thursday, July 10, 2014

Pretty beautiful optimized JavaScript


I obviously try to use best practices to make my code as optimized and nicely formatted as possible. But, I use two tools pretty consistently during and after writing a script.

The first thing I do is run it through Google’s Closure Compiler. I use the “SIMPLE_OPTIMIZATIONS” compilation level.

Next, I paste the output from Closure Compiler in to jsbeautifier. They have some great options. I wont get in to how I like my braces. Those conversations can get ugly. :-)

You might ask why I don’t just use the “pretty_print” formatting with Closure Compiler. Well, I like the options with jsbeautifier. It may also just be habit.

I do drop by JSLint on occasion. It is good to get all the feedback I can on my JavaScript code.

There are a zillion IDE, online and local tools to help you optimize, minimize and pretty up your code. I find that these tools are more about learning how to write better JavaScript than any significant performance boost. That is, if you’re starting out with halfway decent code.

Let me know your process. Hopefully it includes peer and up code reviews!