La présentation lumineuse de DHH #rails #javascript

Lors de la Railsconf 2011 à Baltimore, David Heinemeier Hansson créateur de Ruby on Rails à fait une présentation remarquable .

S'il ne fallait retenir qu'une diapo  ce serait celle ci :

Je l'ai modifié pour illustrer le propos :

 
Il y a une pléthore de langages pour la partie serveur, Mais IL Y EN A QU'UN qui est universel sur le client (navigateur) c'est le javascript.

Aussi , ergoter  sur les avantages de tel ou tel langage n'a plus vraiment de sens car du coté client : il n'y que javascript.
Rails au lieu de  chercher à s'approprier  du coté serveur le javascript, met le framework au  service du développeur javascript. Pour cela Rails dans la version 3.1 proposera par défaut coffeeScript. 

 Ce DSL permet d'écrire facilement du javascript, il génère du javascript. 

L'autre ajout est SaSS : c'est l'équivalent de coffeeScript pour le CSS.

Enfin cerise sur le gateau, un utilitaire permettra de rassembler tous vos petits morceaux de javascript, css , images pour ne faire qu'un seul fichier compressé.

C'est Sprockets qui se charge de tout ca.

Donc, au lieu que la partie javascipt , css soit cachée sous le tapis, dans Rails, elle est mise en avant au service de : jquery. 

Ruby on Rails ne veut pas dominer le monde comme les autres framework, il ne cherche qu'a le rendre plus facile pour nous, pauvres développeurs.

La version 3.1 de rails s'annonce comme un tournant historique.C'était  déja le cas pour la version 3.0 avec la fusion réussie avec Merb.

Rails est un outil pour simplifier le travail du développeur, ce n'est pas un boulet à trainer.
Comment voyez vous votre framework :

Comme ca ? :un outil à votre service 

Ou est ce  vous qui êtes à son service ? :dans une machine infernale

#Rails plugin Activeadmin.

Le plugin Activeadmin pour Ruby on Rails (ROR) vient enrichir l'offre d'interface d'administration pour Rails.

A l'inverse de django sur Python, rails ne propose pas nativement une interface d'administration de ses ressources. Cette position vient constat très simple: chaque entité a sa propre gestion des utilisateurs et des roles. Faire un outil natif qui convienne à tous est un peu illusoire. 

La statégie innovante d'activeadmin est d'utiliser  un véritable DSL (Domain specific language). Lien ici vers formtastic.

 

API #REST faciles avec GRAPE en #ruby

La partie la plus fastidieuse dans le développement d'un module est la mise en place de l'interface.

Le gem GRAPE prend en charge pour vous toute cette partie interface. Il fournit a votre module une interface REST. Grace à un DSL (Domain Specific language) aussi simple que Sinatra, la déclaration des URL dévient un jeu d'enfant.

ex :

    get :home_timeline do
      authenticate!
      current_user.home_timeline
    end

    get '/show/:id' do
      Tweet.find(params[:id])
    end

(source complet ici)

Grape est capable de définir des espaces de nommage et des numéros de version.Grape repose en grande partie sur RACK.

Pour un de mes modules, j'avais utilisé sinatra pour la partie REST et cela donnait :


(avec  Sinatra)

get '/delete_row' do
  dbconfig= YAML::load(File.open('database.yml'))
  schema= Nosql.new(dbconfig)
  schema.delete_row
"{\"reponse\":\"ok\"}"
 end 
GRAPE prend à sa charge  la partie formatage de la réponse en JSON 

 Un article en francais ici.

firebug : un ami qui vous veut du bien #javascript

Firebug possède une série d'option très pratique comme par exemple le 'profiler'. Ce dernier permet de mesurer le temps d'exécution de chaque fonction javascript.
Voici une copie d'écran.

Le profiler.
L'utilisation est assez simple:

• Aller sur le site concerné.
• Activer firebug (F12) 
• Vérifier que l'option 'script' de firebug est active.(volet script) 
• Puis aller dans l'onglet 'console' 
• Commencer l'opération de profilage en cliquant sur le bouton profile.
• Naviguer sur la page.
• Arrêter le profilage en cliquant à nouveau sur le bouton profile. 

Les informations s'affichent dans la fenêtre firebug. Il est possible d’insérer des demandes de profilage dans le code source. (voir lien)

Les autres outils livrés avec firebug.

Les informations de log. En plus du simple console.log(), javascript propose des niveaux de log.
Il est possible d'avoir un affichage différencié en fonction du niveau de log. Celui ci va de debug à error.
Si une des méthodes de console.NIVEAU() est appelée avec un objet en paramètre, un lien hypertexte pointera sur la ligne et l'objet.
Aussi, il est préférable d'écrire console.niveau("ceci est mon message",object) au  lieu d'écrire ("ceci est mon message de log"+object)

• console.debug(object[, object, ...])
• console.info(object[, object, ...])
• console.warn(object[, object, ...])
• console.error(object[, object, ...])  

	<script type="text/javascript" >
	var obj= {tostring: "je suis la representation sous forme chaine"} ;
	function niveaulog(chaine) {
	console.log("chaine:" + chaine) ; // forme standard mais n'affichera pas le numero de ligne ni de lien
	console.error("chaine:" , chaine); // Cette forme permet de metttre plusieurs variables sur la même ligne
	console.warn("chaine:" , chaine) ;
	console.info("chaine:" , chaine) ;
	console.debug("chaine:" , chaine) ;
	};
	var a= "afficher ceci";
	niveaulog(a);
	var obj= {tostring: "je suis la representation sous forme chaine"} ;
	console.log("affiche:",obj) ; // affiche le message , l'objet et un lien vers la DOM.
	</script>

view raw log.js hosted with ❤ by GitHub

Les timers.
Firebug vous donne la possibilité d’insérer des  timers pour mesurer des temps exécution sur des portions de code. 
console.time(nom_timer) ;       //pour démarrer le chronomètre
console.timeEnd(nom_timer);  //pour arrêter le chronomètre

La trace d'un appel de fonction.
En insérant  un console.trace()au sein d'une fonction, la console affichera tous les appels de fonctions avec les paramètres.


Les assertions.
L'ajout de console.assert(condition,objet)  permet de lever une exception  si la condition est fausse. 
Il est donc possible de créer des tests de non régression en javascript     

En conclusion.

Firebug reste avant tout un vrai  débugger. Avec des possibilités d'exécution pas à pas, d'examen des variables ou encore la pose de point d'arrêt.

Cours 102 : les fonctions en javascript

En javascript tout est objet. Il existe certains types de base en javascript comme les Strings, les Dates. Une fonction est aussi un type de base comme un autre. Une fonction est un objet. On put assigner une fonction à une variable.

Ci-dessous des exemples de fonction:
Une fonctino peut etre anonyme , nommée, autoexecutée.
Enfin une fonction peut etre utilisée comme constructeur.

	function fonc1() {
	console.log("je passe par appel de fonc1");
	};
	//Appel de la fonction
	fonc1();
	var b= function fonc() {
	console.log("je passe par appel de fonc via la varible b");
	};
	// La variable 'b' est initialisée avec une fonction
	// mais la fonction n'est pas appelée
	b();
	// appel de la fonction fonc via la varible qui contient la fonction
	//appel de fonct sans passer par b.
	// fonc(); !!! Erreur d exécution fonc n'est pas déclaré
	var c= function(){
	console.log("je passe par appel d une fonction anonyme via la varible c");
	};
	//appel de la fonction anonyme via la variable qui contient sa reference
	c();
	// les fonctions autoexecutées
	var a= function auto() {
	console.log("je passe");
	}();
	// la variable 'a' est initalisée avec le corps d'une fonction et les parenthèses (); de fin de déclaration
	// provoque l exécution de la fonction.
	(function auto() {
	console.log("je passe anom");
	})();
	//la fonction anonyme est autoexecutée, elle ne pourra pas etre appelée par ailleurs.
	// fontion qui sert de constructeur
	function MyClass(n){
	this.nom= n;
	};
	une_instance= new MyClass('spiderman');
	console.log("fonction constructeur " + une_instance.constructor.name );
	for (x in une_instance) {
	console.log("je trouve:"+ x);
	};

view raw fonction.js hosted with ❤ by GitHub

L'exécution donnera :

 node essaifunc.js
je passe par appel de fonc1
je passe par appel de fonc via la varible  b
je passe par appel d une fonction anonyme via la varible  c
je passe
je passe anom
fonction constructeur MyClass
je trouve:nom
 
Pour qu'une fonction soit autoexecutée , sa définition doit se terminer par (); ou (arg);
Ce type de fonction est utile pour lancer des actions dès la déclaration de la fonction (exemple à partir de son chargement dans un navigateur).

Une fonction se rapproche un peu de la notion de méthode dans des langages à base de classe. Mais il y plus de ressemblance avec la notion de bloc en tant que paramètre en Ruby.
 
Une fonction en javascript  accepte m'importe quel nombre de parametre.

 En cas d'absence d'un parametre , il sera assigné à la valeur indéfinie , mais la fonction ne levera pas d'exception.
Les parametres passées en plus sont disponibles dans un tableau arguments.

cours 101 javascript: apprendre javascript

ce post n'a pas pour vocation d'etre un tutorial javascript,  mais plutot une série de conseil.
Pour apprendre javascript:
Un livre (gratuit) : Eloquent javascript.
Des sites: suivre le lien.



Bon, commençons par le niveau 0 en javascript.

0: Javascript est un langage interprété, orienté objet.


1: Comment tester votre code javacript ?
Le moyen le plus simple est de l'exécuter dans votre navigateur. Tous les navigateurs intègrent un moteur (interpreteur) javascript (dont le fameux V8 de chrome). Vous pouvez aussi utiliser du javascript en ligne de commande. L'exécution d'un javascript dans un terminal se fait  avec 'js'  qui est un interpreteur javascript en JAVA issu du projet Rhino. Le projet spidermonkey de Mozilla propose lui aussi un 'js' en C. Enfin, le projet node.js propose un serveur d'exécution pour du javascript


2: Comment debugger du javascript.
Réponse simple: utilisez firebug qui est une extension  de firefox. Firebug est indispensable pour un  développeur, c'est le couteau suisse de web.

vous pouvez ajouter l'appel à la fonction alert() pour afficher une popup de mise au point. Mais, il faut prendre l'habitude d'écrire  les messages de mise aupoint sur la console par l'appel  à la méthode  console.log() . Vous pouvez ainsi avoir plusieurs messages en sortie. La console est disponible sur tous les navigateurs


3: Faire un javascript affiché par  un navigateur.
Cela commence par la création d'un fichier d'extension html. Cette page sera minimaliste: une balise de page html et une balise pour le script.
 Le test se fera en ouvrant cette page dans un navigateur (fichier/ouvrir) . Cette méthode est suffisante pour commencer. Mais très vite il faudra isoler le javascript dans un fichier différent de celui  la page HTML.

	<html>
	<script type="text/javascript" >
	var a;
	a= "rien du tout";
	console.log(a);
	</script>
	</html>

view raw pageminimale.html hosted with ❤ by GitHub

le résultat du script sera visible dans la console.


4: La base: les variables et leur portée (scope).
C'est l'élément clé de tous les langages informatiques. C'est lui qui provoque les effets de bords, les régressions de code et qui engendre des heures de recherche dans le code. On fait souvent la distinction entre  une variable globale et une variable locale. Ce classement ne s'applique pas tel quel à javascript.
Rien de plus facile pour créer une variable globale: il suffit de ne pas la déclarer.
ex:

var a= 10 // variable locale
b=10 // variable globale

 
Mais locale à quoi ?  question épineuse (réponse ultérieusement).
Une variable locale de peut etre locale qu'a l'intérieur d'une fonction.

Aussi : toujours déclarer les variables (c'est une bonne habitude).
Un bloc ({ ..} n'isole pas une variable.

	var a;
	var b;
	a = 5;
	b = 1;
	function scope(n) {
	a = n;
	var b = a + 1;
	var c = 3;
	console.log("a dans la fonction " + a);
	console.log("b dans la fonction " + b);
	console.log("c dans la fonction " + c);
	if (1) {
	var d = 4; // Le var la déclare comme locale A LA Fonction pas du bloc
	e = 6; // sans le var la variable est globale
	console.log("d dans la sous portee " + d);
	console.log("e dans la sous portee " + e);
	}
	console.log("d dans la fonction " + d);
	}
	console.log("a avant " + a);
	console.log("b avant " + b);
	scope(10);
	console.log("a apres " + a);
	console.log("b apres " + b);
	console.log("e apres " + e);
	//console.log("d apres " +d);
	//#console.log("c apres " +c); //erreur d 'execution c n'existe plus

view raw javascript-scope hosted with ❤ by GitHub

Résultat d'exécution :

root@eric-1001PX:~# node essaiscopenode.js
a avant 5
b avant 1
a dans la fonction 10
b dans la fonction 11
c dans la fonction 3
d dans la sous portee 4
e dans la sous portee 6
d dans la fonction 4
a apres 10
b apres 1
e apres 6

5: Le passage de paramètre à une fonction.
C'est aussi un un point critique de programmation. Javascript utilise le passage par valeur pour certains types  de parametre et le passage par réference pour les autres. Les tableaux et les objets sont passés aux fonctions par référence.

Démonstration:

	var a;
	var b;
	a = 5;
	b = "jesuisunechaine";
	var tab = [1, 2, 3];
	function passageParametre(a, b, tab) {
	a = 9;
	b = "chainelocale"
	tab[1] = 10;
	console.log("a dans la fonction " + a);
	console.log("b dans la fonction " + b);
	console.log("tab dans la fonction " + tab);
	}
	console.log("a avant " + a);
	console.log("b avant " + b);
	console.log("tab avant " + tab);
	passageParametre(a, b, tab);
	console.log("a apres " + a);
	console.log("b apres " + b);
	console.log("tab apres " + tab);

view raw javascript-passage hosted with ❤ by GitHub

Résultat :

root@eric-1001PX:~# node essainode2.js 
a avant 5
b avant jesuisunechaine
tab avant 1,2,3
a dans la fonction 9
b dans la fonction chainelocale
tab dans la fonction 1,10,3
a apres 5
b apres jesuisunechaine
tab apres 1,10,3

Pour terminer, il faut savoir qu'il n'y a pas d'espace de nommage natif en javascript, c'est au développeur à le prendre en charge.

Avec ces 6 elements vous avez franchi un niveau dans la maitrise du javascript.