Am�lioration codage en Javascript avec outils

Version imprimable

30/12/2012, 18h19
g�g�140488

Am�lioration codage en Javascript avec outils

Bonjour,

Je participe au d�veloppement d'un projet dont une partie est cod�e en javascript.
J'utilise un simple eclipse pour d�velopper et une interface chrome en debug pour debugguer mon code. Mon projet utilise des lib comme jquery et nodejs.

je voudrais savoir s'il existe des outils, des frameworks, des librairies qui permettraient d'am�liorer mon experience de d�veloppement en Javascript? (gestion du code, mesure de performance, analyse de code, fuite m�moire etc etc..)

Merci d'avance pour vos r�ponses.
31/12/2012, 00h16
SylvainPV

Citation:

je voudrais savoir s'il existe des outils, des frameworks, des librairies qui permettraient d'am�liorer mon experience de d�veloppement en Javascript? (gestion du code, mesure de performance, analyse de code, fuite m�moire etc etc..)

Il y a �norm�ment � dire sur le sujet, il faut dire que tu vises large ! :)

Eh bien tout d'abord tu peux prendre un IDE plus appropri� qu'Eclipse pour le Javascript. Par exemple Aptana en gratuit et bas� sur Eclipse. En payant, je te conseille Webstorm qui reste le meilleur IDE front web que j'ai pu tester (Node.js y est int�gr� et tr�s facile � d�bugger).

L'inspecteur de Chrome (Webkit Developer Tools) est un excellent outil de debug, tr�s complet. C'est un Firebug avec davantage de fonctionnalit�s, je n'ai pas trouv� mieux pour le moment.

Concernant les librairies, il y en a des milliers avec chacune leurs atouts. Pour te conseiller, il faudrait qu'on en sache plus sur ton projet et quels points penses-tu �tre bloquants.
31/12/2012, 09h56
g�g�140488

Merci pour ta r�ponse.

Effectivement, j'ai vis� assez large comme tu dis.

Au niveau des outils, j'ai d�j� test� Aptana studio qui est tr�s bien oui.
Je voulais savoir s'il en existait d'autres. Merci pour le conseil sur le payant.

En fait, je cherchais des outils qui permettent d'am�liorer ou de d�celler des erreurs de codage en javascript, ou des outils ou librairies qui permettent d'identifier les fuites m�moires par exemple.

Tu as d'autres id�es?
31/12/2012, 10h13
John Blobsmith

Citation:

Envoy� par g�g�140488

Au niveau des outils, j'ai d�j� test� Aptana studio qui est tr�s bien oui.
Je voulais savoir s'il en existait d'autres. Merci pour le conseil sur le payant.

Netbeans est pas mal mais tr�s g�n�raliste, rien � voir avec webstorm.
31/12/2012, 10h37
Bovino

Je rejoins les avis d�j� donn�s : si Aptana et Netbeans (par exemple) sont de tr�s bons EDI, WebStorm, m�me payant, est � mon sens un cran au-dessus pour du d�veloppement front.
31/12/2012, 10h43
SpaceFrog

le couple Komodo Edit firebug me suffit ...

Parfois il m'arrive de g�n�rer mon propre bugTracer en JS

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
/**
* @author Sébastien DAMA
*
*/
String.prototype.repeat=function(val){
	var s='',t=this.toString();
	while(--val>=0) s+=t;
	return s;
}
Tryable=function(){
	/*tester chaque el de l'objet savoir si c'est une méthode*/
	for(var el in this){
		if(typeof this[el] == "function"){/*Modifier la méthode */
		fncTry(this,el);
	}
}
}
/*Encupsuler la fonction dans un try...catch*/
function fncTry(obj,fnc){
	var fct=obj[fnc];/*<= référence locale à la méthode*/
	/*on souhaite redéfinir la méthode dans un try...catch*/
	try{
		fct.apply(obj,arguments);
	}/*En cas d'érreur*/
	catch(e){
		/*Si c'est la première*/
		if(!e.stackCounter)
			e.stackCounter=1;
		else
			e.stackCounter++;
		/*générer le message à montrer à l'utilisateur*/
		msg_err=' '.repeat(e.stackCounter-1);
		msg_err+=(e.stackCounter>1)?'à cause de':'';
		if(obj.constructor.name!="")
		msg_err+="erreur obj "+obj.constructor.name;
		else
			msg_err+="Anonymous object,";
		msg_err+=" sur la méthode "+fnc;
		console.log(msg_err);
		/*En cas de première intération
		On en a plus d'info*/
		if(e.stackCounter==1){
			msg_err="à la ligne "+e.lineNumber;
			if(e.description!=undefined)
			msg_err+=","+e.description;
			else
				msg_err+=","+e;
			console.log(msg_err);	
		}
		/*On fait remonter l'erreur au catch supérieur*/
		return true;		
	}
 
}

Ainsi si une erreur survient, peut me dire exactement � quoi elle est d�e.

31/12/2012, 11h32
Kaamo

Ca fonctionne sur FF aussi ? J'ai des probl�mes avec FF pour retrouver la ligne d'erreur JS alors que Chrome est beaucoup plus pr�cis.

Sinon un autre nom, non cit� ici : Wakanda, le sp�cialiste pour construire des appli m�tiers 100% JS (aussi bien c�t� client que serveur)
31/12/2012, 11h42
John Blobsmith

Citation:

Envoy� par Kaamo

Sinon un autre nom, non cit� ici : Wakanda, le sp�cialiste pour construire des appli m�tiers 100% JS (aussi bien c�t� client que serveur)

�a sent la publicit� mal plac�...:mrgreen: ta lu le magazine developpez num�ro 112243445454 ou tu travail chez Wakanda:mouarf:
31/12/2012, 12h01
Kaamo

Ni l'un ni l'autre :mrgreen:
j'apporte juste un autre nom pour qu'il puisse comparer toutes les offres. Personnellement j'utilise Aptana
31/12/2012, 12h07
SpaceFrog

wakanda ? pour moi c'est juste un bonne blague ce truc ^^
31/12/2012, 12h32
Kaamo

C'est clair que si tu veux maitriser ton code de bout en bout .. c'est pas la bonne solution du tout :)

Mais c'est bien, je pense, pour les entrepreneurs qui ne veulent se concentrer sur l'apprentissage que d'un seul langage (JS), les adeptes du WYSIWYG, qui veulent "coder" avec une approche plus fonctionnelle que technique et pour monter rapidement l'application

Bref, �a doit toucher pas mal de cible sinon �a ne marcherait pas autant
31/12/2012, 12h48
sekaijin

pour �clipse il y a http://www.spket.com/

support de js mais aussi de lib comme
Ext JS
jQuery
YUI
MooTools
qooxdoo
Prototype/script.aculo.us
Adobe AIR

de php, asp, xul/xbl, laszlo, svg, flex, silverlight, yahoo widgets, python etc.

A+JYT
31/12/2012, 14h54
SylvainPV

Voil� notre liste d'outils web front au boulot. C'est un gros fourre-tout, � consommer avec mod�ration donc, mais on peut y faire de bonnes d�couvertes :

Web front development tools

More productivity and less stress thanks to a robust front-end toolchain
As developers, we are asked to build rich and responsive web apps, with a great user experience and large support across all the different devices and browsers on the market.
This is quite a challenge and we have to consider many aspects while developing. To prevent time wasting and errors, we would like to rely on tools which manage common tasks in order to focus on what makes our application unique.
That�s why we think it is essential to get a wise strategy, an efficient workflow and the relevant tools before starting development of a web project.
Here is a (not exhaustive) list of web front development tools sorted by categories, which represents very well the extent of problems and needs to cover :

Preprocessors and language abstractions
- Style : Sass, Less, Stylus, Compass
- Script : Coffeescript, DART, TypeScript
- Markup: markdown, HAML, Jade
Code Helpers
- Boilerplates : H5BP, Twitter Bootstrap, Initializr
- General frameworks: jQuery, Zepto, Prototype, Mootools
- Code architecture & data binding : Backbone, Ember, Knockout, Angular
- Dependency management : require, headJS, LABJS
- Templating: mustache, handlebars
- Standardization and patches: HTML5shiv, Modernizr, Polyfills
UI Helpers
- UI Frameworks: jQuery Mobile, Sencha, jQuery UI�
- Templates, specific UI components
- Resource packs : icons, color sets, fonts
Testing tools
- Continuous Integration: Jenkins
- Unit testing: QUnit, Jasmine
- Test frameworks: Mocha, chaijs
Code quality & performance
- JSHint, JSLint and other linters
- Guidelines and best-practices
- Audit tools in WebKit Developer Tools, PageSpeed Insights
Build process tools
- Concatenation : ant, make, rake, wepp
- Minification : Closure Compiler, UglifyJS, html-minifier, css-base64-images
- Image compression tools : jpegrtan, optipng
- Full-stack : HTML5BP build, no-build-conf-build-script
Versioning tools
- Source Code Managers: GIT, SVN, Mercurial
- Release cycle management: beta, integration, staging�
Good IDEs :
- general: Eclipse
- front: WebStorm - Sublime Text � Aptana
- PHP: PhpStorm
- node: WebStorm
- Java: Eclipse � Netbeans � IntelliJ
IDE enhancements
- Syntax checking and integrated linter
- Zen coding, live templates
- Integrated source code manager
- Live reload, automatic remote update
Issue trackers
http://en.wikipedia.org/wiki/Compari...acking_systems

D'ailleurs, �a serait int�ressant un petit topic quelque-part avec le recensement de tous les outils JS / front web existants.