W28Y16 – Fibonacci implementation, compare JS UI frameworks performance, Android viz libraries and Hungarian notation

Fibonacci implementation

Why fibonacci ? Hum, juste because I was asked for this on my last interview and I stupidly failed with it… So, you’ll two different ways of implementing this algorithm:

  • recursive
  • iterative

The first one (recursive), is more elegant but not performant for big numbers (in fact, you’ll crash your memory by doing a recursive fibo for a number like 10000). The second one is in basic iterative loop do/while.

Mathmatics fonction: fibonacci(x) = fibonacci(x-1) + fibonacci(x-2)

Recursive

function fibonacci(n) {
  if (n < 2) {
    return 1;
  } else {
    return fibonacci(n - 2) + fibonacci(n - 1);
  }
}

Iterative

function fibonacci(n) {
  var a = 0, b = 1, f = 1;
  for(var i = 2; i <= n; i++) {
    f = a + b;
    a = b;
    b = f;
  }
  return f;
}

The fibo implementation in a looooot of different languages: http://www.scriptol.fr/programmation/fibonacci.php

JS UI framework perfs

ui_frameworks_comparison My colleague Justin (the tech surveillance killer) just sent me a nice repo about the comparaison most famous UI frameworks you could find. This dashboard allows you to decide regarding performances on:

  • rows creation
  • rows upodating
  • partial rows updating
  • selection of rows
  • swapping
  • etc, etc…

Just follow this link to see the comparison: HERE
And here to see the github repository: HERE

Hungarian notation

The Hungarian notation is very useful for languages with a loosely type like Javascript. This notation method is also used like an identifier to know the expected type of the variable. Some examples of naming variables using this convention:

  • bBusy : boolean
  • chInitial : char
  • cApples : count of items
  • fBusy : float (or flag)
  • nSize : integer (Systems) or count (Apps)
  • iSize : integer (Systems) or index (Apps)
  • dbPi : double (Systems)
  • rgStudents : array, or rangee
  • fnFunction : function name

Wikipedia about Hungarian notation

Android chart/viz libraries

I just tested two different Android chart/viz libraries from this github repo who regroups a good exhaustive list of viz libraries for a lot a languages (including Android of course)

HelloCharts

Very good if you only want to show some column charts, bar charts, lines charts, donuts. Charts are highly customizable :

  • fonts
  • sizes
  • colors (lines, points, axes, …)
  • background
  • with/without points
  • filled spaces
  • etc, etc…

HelloCharts Github Repository

I’ll stress a point, you don’t have any legends for your charts! that’s important because if you want one, you want need to create it manually…

MPAndroidChart

I’ve got some problems while adding MPAndroidChart as a dependency to my Android project, so I switched to HelloCharts. Maybe the wiki was deprecated, in the middle of a new version ?… I don’t know.
Anyway, this library is more complete, and maybe better, so if you are successful on adding this lib to your project: use it!

Animation concept

Nice animation concept by Mario Wahl that you can find on Dribbble.

Because code without design is not really usable, I’ll share, in each weekly article, a design creation that I liked (icon, animation, UI, workflow, …).

preview

Javascript : Savoir si deux élements du DOM se chevauchent ou se superposent

Les méthodes isOverlapping() et isInside() ont déjà le premier avantage d’être en pur javascript. Leurs fonctionnalités sont donc de déterminer si deux éléments se chevauchent ou se superposent. C’est très pratique lorsque qu’on veut gérer la superposition des labels pour masquer ceux qui sont partiellement visibles par exemple.

getBoundingClientRect

La méthode getBoundingClientRect() est appliquée sur chacun des éléments du DOM afin de déterminer leurs propriétés (en pixels) :

  • left
  • top
  • right
  • bottom

Ces valeurs sont propres au viewport (zone de visualisation) du client sur lequel cette fonction est exécutée.

isOverlapping

[javascript]function isOverlapping (elem1, elem2) {
var rect1 = elem1.getBoundingClientRect();
var rect2 = elem2.getBoundingClientRect();

return !(rect1.right < rect2.left ||
rect1.left > rect2.right ||
rect1.bottom < rect2.top ||
rect1.top > rect2.bottom);
}[/javascript]

La fonction isOverlapping() renvoie donc true si elem1 et elem2 se chevauchent.

isInside

[javascript]function isOverlapping (elem1, elem2) {
var rect1 = elem1.getBoundingClientRect();
var rect2 = elem2.getBoundingClientRect();

return (
((rect2.top <= rect1.top) && (rect1.top <= rect2.bottom)) &&
((rect2.top <= rect1.bottom) && (rect1.bottom <= rect2.bottom)) &&
((rect2.left <= rect1.left) && (rect1.left <= rect2.right)) &&
((rect2.left <= rect1.right) && (rect1.right <= rect2.right))
);
}[/javascript]

La fonction isInside() renvoie donc true si elem1 est entièrement à l’intérieur de elem2 (ou inversement…).

Debugger Node.js avec node-inspector (Chrome Dev Tools)

La première solution pour débugger la partie serveur en Node est de créer des traces via des console.log, console.info, console.error etc… mais ce n’est pas le but de cet article puisqu’il existe une autre manière beaucoup plus efficace de debugger ce code là grace au plugin node-inspector (Chrome Dev Tools).

Au cas où, je mets quand même les différentes options pour ceux qui souhaitent débugger dans la console :

  • console.log([data], […]);
  • console.info([data], […]);
  • console.error([data], […]);
  • console.warn([data], […]);
  • console.dir(obj);
  • console.time(label);
  • console.timeEnd(label);
  • console.trace(label);
  • console.assert(expression, [message]);

Utiliser son browser

Le gros avantage de debugger dans le Chrome Dev Tools c’est de faire du pas à pas et de pouvoir examiner les variables, objets etc à la volée! Pour en profiter, il suffit d’installer le package node-inspector (à propos de package).

[javascript]npm install -g node-inspector[/javascript]

Au moment du démarrage du serveur, il faudra simplement rajouter le flag –debug

[javascript]node –debug server.js[/javascript]

Ou pour mettre un break sur le serveur dès son démarrage…

[javascript]node –debug-brk server.js[/javascript]

Le serveur a été démarré en mode debug, dernière étape, il faut maintenant lancer node-inspector qui va démarrer sur un autre port : 8080

[javascript]node-inspector &amp;[/javascript]

nodeinspector_command_line

Votre debugger est prêt à l’URL : http://127.0.0.1:8080/debug?port=5858

node_inspector_debugger_tool

Et voilà! Vous pouvez debugger côté serveur like a boss.

Optimisation #2 Javascript : Réduction du nombre de variables globales

En créant un nouvel objet (et un seul!), on évite de créer pleins de variables globales.

On gagne donc en :

Propreté de code
Performance (très peu avec les navigateurs actuels)

Et surtout, on évite les conflits de noms avec d’autres applications, widgets et librairies!

BAD

[javascript]
var firstName = ‘Joey’;
var lastName = ‘Bronner’;
function sayHello() {

}
console.log(firstName);
[/javascript]

GOOD

[javascript]
var User = {
firstName : ‘Joey’,
lastName : ‘Bronner’,
sayHello : function() {

}
}
console.log(User.name);
[/javascript]

Optimisation #1 Javascript : Mise en cache de la longueur d’un array

Pour optimiser un peu plus son code Javascript (pour ceux qui n’appliquent pas encore cette astuce bien sûr), je vais partager une petite best practice lors de l’itération d’une boucle for.

La boucle for « normale » ressemble à ça…
BAD

[javascript]
var tab = [‘element1’, ‘element2’, ‘element3’];
for (var i= 0 ; i<tab.length ; i++) {
// le reste du code
}
[/javascript]

Dans le code ci-dessus on constate qu’à chaque itération, la taille du tableau (tab) est recalculée via la commande tab.length. Mauvais!
Le but est de calculer cette longueur qu’une seule fois :
GOOD

[javascript]
var tab = [‘element1’, ‘element2’, ‘element3’];
for (var i= 0, iLen = tab.length ; i<iLen ; i++) {
// le reste du code
}
[/javascript]

Dans le code ci-dessus, on constante donc que la longueur est calculée la première fois et qu’elle est ensuite stockée dans la variable iLen.

Remarque
Pour des tableaux avec seulement quelques éléments l’optimisation ne se fait pas ressentir mais quand on travaille sur des milliers de lignes c’est plutôt pas mal!