Categories: Archives Jobprod.comArticles tech

Retour d’expérience sur Sencha / ExtJS

Sencha, anciennement ExtJS a été un des premiers frameworks permettant de développer des applications web riches de manière relativement simple. J’ai eu l’occasion de l’utiliser de manière intensive il y a quelques années, et après renseignement il se trouve qu’il n’a pas changé tant que ça. Aussi j’en profite pour vous faire un retour d’expérience dessus.

L’application pour laquelle j’ai utilisé Sencha est un client web pour une application de partage de fichiers en ligne, et je vais en profiter ici pour détaillé ce que j’ai aimé… ou pas avec ce framework.

Débloque les + belles offres tech en 10 mins

Ce que j’ai aimé dans Sencha

Pour un développeur venant des clients lourds, l’approche du monde JS n’est pas trop violente. En effet, programmer en Sencha ressemble beaucoup à programmer en Swing. A première vue il n’est pas forcément nécessaire de maîtriser vraiment les CSS ou le HTML. D’ailleurs pour donner une idée pour créer un nouveau Panel il suffit de taper var p = new Ext.Panel({width: 200px; height: 150px;}) ce qui ressemble quand même pas mal à du Swing.
Sencha offre un grand nombre de composants tous faits, comme les grilles, des date pickers et autres. Il n’y a qu’à les invoquer avec les bons paramètres et ils s’intègrent sans vraiment de souci.
Sencha existe aussi sur mobile, aussi quelqu’un qui connaît la version normale du framework pourra aussi développer des applications pour mobile et inversement.
Le rendu fait penser à des applications de bureau. On aime ou on n’aime pas, mais je me souviens qu’en 2008 la version bêta du Yahoo Mail de l’époque m’avait frappé au niveau de sa ressemblance avec Outlook. Il se trouve qu’elle était faite avec YUI framework, qui a un lien de parenté avec Sencha.

Ce que je n’ai pas aimé dans Sencha

Le premier reproche que j’aurais à faire vient de l’expérience utilisateur procurée par Sencha. En effet, même en version minifiée la librairie avec ses JS, les CSS et les images pèse pas loin d’un méga octet à elle seule. C’est énorme, et ça fait qu’une application développée avec cette technologie mettra plusieurs secondes à se charger avec une connexion ADSL à 5 ou 6 Mbits / sec. Quand on sait qu’un délai d’attente de quelques secondes a un impact direct sur la fréquentation de votre application, c’est un point à considérer.
Javascript est un langage orienté prototype, comme détaillé dans cet ouvrage, or Sencha essaie de mimer un comportement orienté objet. Ainsi l’usage du mot-clef new est très fréquente en Sencha, alors que c’est plutôt une mauvaise pratique en JS. Bref en quelque sort Sencha « tord » le langage Javascript… Et d’autre part avec un tel système il n’est pas simple de faire des composants réutilisables.
Avec Sencha, on ne manipule pas directement le HTML. Enfin c’est possible, mais horriblement compliqué. Aussi ça comporte deux implications principales :
- Si une librairie non Sencha vous plaît et que vous voulez l’incorporer dans votre application, ça peut être très compliqué. Ca ira si la librairie est en overlay, comme HighSlide, auquel cas un point d’ancrage suffit. Par contre, si votre composant s’intègre dans une fenêtre applicative Sencha, ça peut être plus compliqué.
- Mais surtout le plus gênant est que l’affichage de votre appli peut être incorrect avec certains navigateurs, et corriger le souci peut alors être très compliqué étant donné que vous n’avez que difficilement la main sur le HTML.
Globalement, Sencha génère de très nombreuses DIV dans ses pages, et autres tags HTML. A terme ça a une influence non négligeable sur la charge mémoire de l’application, et pendant longtemps il y a eu de nombreux problèmes de fuite mémoire, d’ailleurs tous ne sont pas corrigés.
D’une version à l’autre, la compatibilité n’a tendance à pas être bien respectée. Ainsi je me souviens que quand on a migré notre application de ExtJS 2.x vers ExtJS 3.x on a dû faire un gros travail pour que le tout se remette à fonctionner. En particulier il a fallu rajouter le flag forceLayout un peu partout, et aussi modifier les records, car un changement non documenté faisait que le type booléen devait être mentionné comme « bool » et non plus « boolean », ou inversement ! Et malheureusement il est nécessaire de temps à autre de migrer d’une version à l’autre pour supporter les derniers navigateurs.
Pour la même raison, je déconseille fortement de tenter de créer des variantes personnalisées des composants Sencha, en effet l’effort de développement sera à refaire à la nouvelle version de la librairie.

En conclusion

Il est clair que Sencha et son ancêtre YUI ont été des précurseurs dans le domaine des clients légers Web, permettant d’obtenir des résultats proches des clients lourds auxquels nous sommes habitués. Cela dit à mon sens ce framework traîne aussi pas mal de casseroles, du fait de son fonctionnement « non conventionnel » par rapport à bien d’autres frameworks comme jQuery ou plus récemment AngularJS. Ces derniers sont d’ailleurs nettement plus respectueux de l’approche orientée prototype de JS et permettent de manipuler le DOM.

Aussi, si vous avez une application à maintenir utilisant Sencha, j’aurais tendance à vous dire de continuer avec dans un premier temps. Cela dit pour une nouvelle application je vous conseillerais vivement d’opter pour jQuery ou AngularJS.

Débloque les + belles offres tech en 10 mins

Julien
Moi c’est Julien, ingénieur en informatique avec quelques années d’expérience. Je suis tombé dans la marmite étant petit, mon père avait acheté un Apple – avant même ma naissance (oui ça date !). Et maintenant je me passionne essentiellement pour tout ce qui est du monde Java et du système, les OS open source en particulier.

Au quotidien, je suis devops, bref je fais du dév, je discute avec les opérationnels, et je fais du conseil auprès des clients.

Son Twitter – Son LinkedIn

gojul

Next [We Want You !] : Cirruseo cherche un ingénieur logiciel et un chef de projet »

Previous « [Tests techniques] Sondage !

View Comments

Webplus says:

14 octobre 2016 at 17 h 29 min

Il est à noté que jquery n'est pas un framework, mais une librairie. Donc pas de comparaison possible.
Angular par contre pèche par son manque de composants.

En ce qui concerne Extjs, cela fait plus de 5 ans que je développe avec.
En ce moment la version 6 apporte pas mal de nouveauté et de correction de bugs, notamment les fuites mémoire.

En revanche, si vous voulez utiliser extjs dans de très bonnes conditions, je vous conseille d'utiliser leur IDE (sencha architec). Très bien pensé, sauf l'éditeur ( ... ) . J'aurai nettement préférer l'éditeur de phpstorm :) .