Sunday, 26 October 2014

Kata 1 - FizzBuzz in Java ( step by step)


It has been a long time since the last time I wrote here. This time I'm going to write about a completely different thing.

One week ago I started reading about Katas and TDD. Since then I have been doing two Katas every day. With this I am improving my Java skills and learning how to use TDD.

TDD (Test-driven development) is a software development process  that relies on the repetition of a very short development cycle: first the developer writes an (initially failing) automated test case that defines a desired improvement or new function, then produces the minimum amount of code to pass that test, and finally refactors the new code to acceptable standards.

KATA  is an exercise in programming which helps a programmer hone their skills through practice and repetition.

In this article I will do FizzBuzz Kata step by step. This is one of the easiest Katas.

FizzBuzz Kata has 4 easy rules :


  1. If the number is divisible by 3 should return "Fizz" .
  2. If the number is divisible by 5 should return "Buzz" .
  3. If the number is divisible by 15 should return "FizzBuzz" .
  4. If the number is not divisible by 3, 5 or 15 should return that number as String.

First of all you need an IDE with some unitary testing plugin. I am going to use eclipse with Junit because is the one that comes with it. You can do  Katas with the IDE you want, the unitary testing plugin you want and the programming language you prefer.

When you have your IDE ready, you have to create two classes, one FizzBuzzTest.java and FizzBuzz.java and put them in the same package.

Video step by step :



In the next video I will try to explain what I am doing, this is a first try.

For any question leave a comment.



Saturday, 1 March 2014

Perfomance Dart Vs Dart2JS vs JavaScript Managing the DOM

After the result seen in the other post I decided to write this post about the performance of the browsers managing the DOM.

As in the other post, I have written a Dart code for inserting and removing an input from the DOM. I tried to do it as easy as I can. These are  the source codes :






The result are these :

NUMBERCREATEDELETETOTAL
Dartium DART
13,714,478,18
23,754,488,23
33,844,548,38
43,744,568,3
53,764,58,26
63,844,628,46
73,624,688,3
83,975,329,29
94,034,989,01
103,714,498,2
AVERAGE3,7974,6648,461
Chrome Dart2JS
10,244,354,59
20,253,824,07
30,243,633,87
40,233,563,79
50,243,693,93
60,244,334,57
70,254,044,29
80,243,623,86
90,243,84,04
100,243,733,97
AVERAGE0,2413,8574,098
Firefox Dart2JS
10,2621,7321,99
20,2221,4221,64
30,2320,9621,19
40,2322,9423,17
50,2321,4121,64
60,2320,6720,9
70,2320,8321,06
80,2320,6320,86
90,2320,9421,17
100,2320,7420,97
AVERAGE0,23221,22721,459
IE Dart2JS
10,9120,6621,57
20,9520,9621,91
30,9620,7821,74
4121,1222,12
50,8922,2123,1
60,9623,9624,92
71,0325,426,43
81,0123,224,21
91,0222,6923,71
101,0223,924,92
AVERAGE0,97522,48823,463



NUMBERCREATEDELETETOTAL
Chrome JS
10,230,030,26
20,280,040,32
30,280,030,31
40,270,030,3
50,260,030,29
60,280,040,32
70,270,040,31
80,290,030,32
90,290,030,32
100,270,040,31
AVERAGE0,2720,0340,306
Firefox JS
10,230,20,43
20,210,20,41
30,210,20,41
40,210,20,41
50,210,20,41
60,210,20,41
70,210,20,41
80,210,20,41
90,210,20,41
100,210,20,41
AVERAGE0,2120,20,412
IE JS
10,9345,846,73
20,9846,1947,17
30,9846,2947,27
40,9745,9246,89
50,9845,8246,8
60,9746,2947,26
70,9648,1549,11
81,0547,7548,8
90,9645,8546,81
100,9847,0248
AVERAGE0,97646,50847,484

The conclusions are weird this time:

  • The code converted from Dart to JS is lot of times slower than the JS, instead  in Internet Explorer that is 50% faster.
  • Firefox has the same problem with the converted code that had in the previous post.
  • Chrome is the faster in all the cases.
  • Creating things in the DOM is faster than deleting them, instead in Chrome and Firefox with JS.

Sunday, 23 February 2014

Performance Dart vs Dart2JS vs JavaScript

After some time without having time for Dart I decided to do a little web project with Dart and MongoDB.
For doing that I have to go deeper in to the language.  I started reading "Dart in action" (I completely recommend this book for learning in Dart).

While I was reading the book, I read a chapter about the dart2js function. This function converts dart source code to JavaScript code. The author speaks about the hard work made by google to try to do the conversion between Dart and JavaScript as efficient as they can. After reading this I thought about writing an article about this topic.

What I am going to prove is the performance of Dart, JavaScript converted from Dart and JavaScript doing a easy task: Calculate the first 250.000 prime numbers.

There are thousand different forms to calculate if a number is prime or not. I am not trying to prove what is the most efficient one, what I am trying to prove what is the fastest combo (browser + "language") to calculate them using the same algorithm.

These are the source codes I have used.


performace_js.dart

import 'dart:html';
import 'dart:core';
import 'dart:async';

void main() {
  InputElement start = querySelector("#start");
  start.onClick.listen(prime_number);
}

void prime_number(Event e){
  for(int w=0;w<10;w++){
    int numberOfPrimes =0;
    var start = new DateTime.now();
    for (int i=0;i<=250000;i++){
      if (isPrime(i)) numberOfPrimes++;
    }
    var end = new DateTime.now();
    var timeElasped= end.difference(start);
    print(timeElasped);
  }
}

bool isPrime(int number){
 
  for(int i=2;i<number;i++) {
    if(number%i==0)
      return false;
  }
  return true;
}
performace_js.html

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title>Performace JS</title>
<link rel="stylesheet" href="performace_js.css">
</head>
<body>
  <h1>Performace JS</h1>

  <div id="sample_container_id">
    <input type="button" id="start" value="Click_me" />
  </div>

  <script type="application/dart" src="performace_js.dart"></script>
  <script src="packages/browser/dart.js"></script>
</body>
</html>
performace_js2.html (HTML+JAVASCRIPT)

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title>Performace JS</title>
<link rel="stylesheet" href="performace_js.css">
<script>
     function isPrime(num) {
        if(num < 2) return false;
        for (var i = 2; i < num; i++) {
           if(num%i==0)
               return false;
        }
      return true;
  }
     
     function prime_number(){
       for (var w=0;w<10;w++){
            var numberOfPrimes=0;
            var start = new Date().getTime();
          for (var j=0;j<=250000;j++){
            if(isPrime(j)==true){
              numberOfPrimes++; 
            }
          }
          var end = new Date().getTime();
          var time = end - start;
          console.log('Execution time: ' + time + ' aaaaa '+ numberOfPrimes);
       }
     }
</script>
</head>
</head>
<body>
  <h1>Performace JS</h1>
  <div id="sample_container_id">
    <input type="button" id="start" value="Click_me" onclick="prime_number()" />
  </div>
</body>
</html>

With this code we get an easy web page :



After testing the Dart, JavaScript converted from Dart and the JavaScript code the results are these:

Run/BrowserDartiumChrome dart2jsFirefox dart2jsIE dart2jsChromium JSChrome JSFirefox JSIE
 JS
110,9013,6722,9434,7810,8110,8112,3420,74
210,8613,1122,9034,8810,8610,7811,5720,57
310,8913,1022,8934,6510,7910,7611,5720,58
410,9013,0922,8934,7010,7710,8411,5820,56
510,8913,1122,8734,6510,7510,7711,5320,65
610,8413,0922,8734,6810,8110,8011,5520,63
710,8013,1522,8834,6810,8310,8011,5320,66
810,8513,1322,8934,6710,8910,7811,5520,69
910,8413,2022,8934,6510,7810,8011,5520,89
1010,9413,2522,9134,6810,7710,8211,5620,62
Average10,871613,18922,89334,703410,805610,795511,631720,6599

From this research we can get several conclusions:
  • Dart is close to be as fast as JavaScript.
  • The conversion from dart to JavaScript is close to 2 seconds slower than pure JavaScript.
  • The JavaScript engine of Internet Explorer (version 11.0.96) is shit.
  • Firefox doesn't like working with JavaScript generated by dart2js.

This are the conclusions I can get. This week I will do another research about how they manage the DOM and I will write a post like this to try to explain what I find out.

P.S.: The number of prime number between 0 and 250.000 are 22044.