Bonjour à tous,

Je sorts d'un projet web au boulot qui intégrait une page avec un formulaire complexe à gérer. Pour éviter le code spaghetti j'ai utilisé la pseudo POO de JS pour bien séparer mes différents blocs qui inter-réagissent entre eux suivant le choix de l'utilisateur et l'état dans lequel ils se trouvent, gérer le côté asynchrone de l'interface en utilisant les events et les callback, etc. Bref j'en ai eu pour 3 semaines de développement et de galères avec un code js final de 3000 lignes qui me satisfait moyennement ...

En discutant avec mes collègues je me suis rendu compte qu'ils nous arrivaient régulièrement dans nos projet de tomber sur une page avec une interface complexe à gérer et que ça finissait souvent (par manque de temps ou de connaissance) en un code monstreux à comprendre et à remprendre... Du coup j'ai commencé à chercher une solution pour coder différemment, une librairie, un framework, bref quelque chose.
Je suis tombé sur une floppé de technos que je ne connaissais pas et j'ai besoin d'avis et de retour sur celles-ci pour répondre à ma problématique de développer plus simplement des interfaces complexes et "occasionnelles" sur un site. (Et par la même occasion me mettre à jour sur ce qui existe en JS)

Bon après cette put*** d'introduction voici ce que j'ai trouvé :

Les librairies :

  • Bien sûr JQuery que j'ai d'ailleurs utilisé pendant mon projet mais que bcp le critique car la librairie est lourde à charger et bien plus lente que du code natif. (Mon avis est qu'au moins c'est multi navigateur et on a un code bien plus clair... Et ça, ce n'est pas négligeable).
  • Une alternative à JQuery qui se veut plus performante et légère, Zepto. Des avis ? Est-elle aussi complète ?
  • J'ai aussi pas mal entendu parler de Underscore Js qui apportent de nouvelles fonctionnalitées. Pour l'instant je n'ai pas bien compris son intéret, si quelqu'un peut m'éclaircir =P

Langages qui compilent du JS :

Beaucoup disent que pour coder des choses complexe en JS, il vaut mieux passer par un langage qui complie en JS. Cela permet d'avoir entre autre un réel typage des données et de vraiment programmer en objet. Voilà ce que j'ai trouvé :

  • CoffeeScript qui m'a l'air bien sympa mais sa synthaxe va en repousser plus d'un. Je n'ai rien contre les synthaxes Python like et je suis même plutôt pour mais je sais que bcp de personnes, dont mes collègues, y sont allergiques... =/ D'autres avis sur cette techno ? Difficile d'utiliser des librairies JS avec ?
  • TypeScript dont j'ai entendu le plus de bien. Si j'ai bien compris le langage rajoute seulement des contraites supplémentaires au code natif. Ce qui permet d'intégrer du JS natif à l'intérieur sans problèmes. Il est possible de typer ses données, mais ce n'est pas obligatoire. Un retour d'expérience avec cette techno ?
  • Dart le soit disant tueur du JS créé par Google dont je n'entends plus du tout parler. Quelqu'un l'a essayé ? Vaut-il vraiment le coup de s'y intéresser ?

Les frameworks :

Surement la partie qui va répondre à ma problématique de base, développer des interfaces complexes plus simplement en JS. Par contre c'est la folie au niveau du choix ! Angular, Backbone, React, Riot, Aurelia et j'en passe... On s'y perd.
Dans toute la liste je ne connais (et ai testé un peu) que AngularJS. D'après mes collègues et ce que j'ai compris, Angular est plus adapté pour faire un site entièrement monopage et pas gérer une interface complexe qui est "occasionnelle" sur mon site.
Du coup voilà j'attends vos retours d'expériences et avis !

Bon je sais que j'ai chier un sacré pavé et que ce n'est pas sûr que bcp me liront ^^"" Mais j'aimerais vraiment avoir vos avis sur cette jungle de technos ! Si j'ai pas mal de retour je pourrais même faire un article sur le blog du site pour en faire profiter tout le monde !

Merci d'avance ! =D

6 réponses


j'ai utilisé la pseudo POO de JS

Le JavaScript est loin d'avoir une "pseudo POO", au contraire... C'est un langage qui amène une approche différente de la programmation orienté objet. Effectivement, ce n'est pas un langage où la simplicité d'écrire du code est mis en avant-plan. Il y a aussi autre facteur, c'est que les langages les plus populaires utilisent une synthaxe pour déclarer un prototype, ou autrement dit, une classe. D'ailleurs, on voit bien que l'institue de standardisation de ECMAScript se ravise à ce sujet, il proposera une version de JavaScript plus agréable, comme pour d'autres langages comme C#, PHP et Java. Il faut juste retenir que JavaScript n'est pas un langage "moins orienté objet", c'est une langage qui offre plusieurs paradigmes de programmation, tout simplement.

Pour les libraries, transcompilateurs et frameworks, c'est au choix. Je peux juste te garantir que tu ne seras pas un meilleur programmeur parce que tu utilises un de ces outils. Tu dois juste déterminer comment ton projet doit évoluer pour faire un chose. Il y a aussi une question de goût, par exemple, moi j'aime pas dutout le style de programmation proposé par CoffeeScript, parce que j'ai appris à programmer dans C#, C, C++ et Java. Ainsi, le TypeScript est nettement plus intéressent pour moi. Néanmoins, je trouve qu'il n'est pas super confortable d'approche pour le moment. Donc, de mon côté, je suis resté avec le JavaScript, mais je tente de me perfectionner dans ce langage, puisqu'il s'agit selon moi d'un langage qui aura probablement plus de succès dans le futur de maintenant, c'est un choix. Je mise beaucoup sur les technologies relatives au Web, JavaScript en fait partie donc. :-)

Pour les frameworks, c'est à toi de déterminer ce que tu as besoin. C'est certain que j'ai une préférence pour un de ces frameworks, mais ce n'est pas parce que les autres sont moins bon. J'ai appris ce dernier en premier et puis j'apprécie beaucoup de ce qu'il permet de faire. Encore une fois, tu seras pas une meilleur programmeur JavaScript en connaissant un de ces frameworks. :-)

Bonne chance !

Thoumou
Auteur

Oui bien sûr le JS a sa propre logique de l'objet avec les prototypes mais j'ai l'impression que ce système atteind vite ses limites lorsque l'on a quelque chose de complexe. J'ai vu les dernières nouveautés d'ECMAScript 6 et il y a plein de belles choses qui vont facilité la vie =)

Devenir meilleur programmeur c'est un grand mot, seul le temps, la curiosité et les projets feront que je progresserai ^^ Non je cherche plus quelque chose qui pourra faire gagner du temps et gagner en lisibilité tout en augmentant la complexité des applications. C'est pour ça que je cherche des avis et des retour sur les différentes technos (ou même méthodes) qu'on pu essayer les gens. Toi tu as utilisé un framework js, il est pratique pour quoi faire ? Il fait le café et la vaisselle mais est dur à apprendre ? Il est plus adapté s'occuper d'un site en entier ou seulement d'une page ?

Alors j'ai eu le meme type de problématique récement, et j'ai decouvert webpack ( alternative a browserify et gulp ) et j'ai redécouvert le JS.

Alors pour demarrer simplement, j'ai utiliser quelque nouveauté d'ES6 ( compilé en ES5 par webpack ) tel que la création de class. du coup j'ai des class avec des methode public et des methode static comme pas mal de languages.

deuxiemement, webpack gère nativement la commande require, ce qui te permet de morcelé ton code en module a la facon node.js et en plus inclure avec ce fameux require, du css et des images propre au composant que tu developpe.

troisiemement, ES6 met en place un heritage simpa avec donc une class enfant qui extend d'une class mere

var poire = require('./poire.js');

class pomme extends poire {

}

Avec juste ces 3 element, j'ai reussi a palié a un code mega chaud a maintenir en le separant en module et le structurant en class

j'ai biensur dégagé jquery qui au final m'encombré plus qu'autre chose mais avec webpack tu peut le require comme un module node du moment que tu l'install avec npm et c'est pareil pour tous, bootstrap, font-awesome et toutes les librairies js/css compatible NPM

ps: un article et une video devrait arrivé bientot sur graf j'ai soumis une introduction a webpack a graf qui vas faire la video des qu'il as du temps

Salut ! Pour ce qui est des interfaces complexes certaines librairies sont quand même intéressantes et ont piqués la curiosité d'une bonne partie de la communauté des développeurs front-end. De manière très subjective je suis tombé amoureux de angular.js qui me permet de palier à ces problèmes (ce framework a été pensé pour créer des applications). Si tout ton site tourne autours de technologies JavaScript (client et serveur) tu pourrais te tourner vers meteor.js qui est vraiment pas mal. Pour ce qui est des transcompilateurs (typescript, coffee, dart, ...) là c'est à toi de juger. Pour ma part je trouve le coffee vraiment intéressant même si j'ai testé les 3. Enfin pour ce qui est de la POO JavaScript, ce n'est pas de la "pseudo programmation orientée objet" mais une approche objet par prototypage de fonctions qui est un paradigme très puissant quand bien maîtrisé (malheureusement c'est l'un des rares langages à le faire, je pense que la communauté de devs' sous estiment beaucoup cette notion).

Pour revenir à underscore et Jquery, ces deux librairies ne t'aideront pas à penser une application complexe comme celle que tu décris mais à optimiser le code que tu écrits au niveau de la compatibilité / facilité de développement (par exemple les animations avec jquery ou le traitement de tableaux avec underscore)

En espérant t'avoir aidé !

Thoumou
Auteur

Désolé de ne pas avoir répondu plus tôt j'ai eu une grosse semaine =/

Je n'avais pas du tout entendu parler de Webpack, j'ai jeté un rapide coup d'oeil et si j'ai bien compris il regroupe toutes les sources que t'as besoin et envoie un pack au client selon les besoins et gère les dépendances entres elles ? ES6 j'ai hâte de l'utiliser, y'a des nouveautés supers cool mais c'est pas près d'être compatible x) mais si c'est compris par webpack c'est pas mal en effet.

J'ai regardé un peu meteor.js et ça m'a l'air complètement tarré ^^ C'est vrai que Node.js c'est vraiment génial avec sa gestion par évènements, j'ai de plus en plus envie de l'essayer. C'est vrai que j'ai commencé à bien comprendre comment fonctionne les objets en JS mais je ne vois pas l'avantage que ça apporte par rapport à la POO par class. Ce qui est vraiment cool en JS c'est la gestion par évènements.

Je pense que je vais essayer d'utiliser un petit framework JS pour voir ce que ça donne. D'autres avis sur des technos JS ?

Bon weekend tout le monde ^^

En faite, non webpack ca te permet de te dedoiner de certain tache gulp par exemple tous en rajoutant des gestionnaire de module a la commonJs

si tu veut voir un peut le fonctionnement d'un projet webpack, j'ai fait un petit repos github pour le taf montrer un peut comment cela fonctionne a notre equipe de dev avec ES6 et du coup c'est un projet bidon a moitié fini niveau JS mais avec tout plein de chose cool ES6 plus l'utilisation de webpack

le repos github

il y as deux commande a lancer

webpack --watch -d

qui bundle les package pour le dev avec les soucres map et qui watch les fichier et

webpack -p 

pour minifier le js et le css en production