EXT JS : Article 1 : Présentation générale

Présentation générale

Ext JS est un framework Javascript développé par Sencha Inc. et sous licence GPLv3 ou commerciale en fonction des besoins. Il existe cinq versions majeures qui offrent des services similaires, mais dont l'architecture ou les widgets ont été repensés. Ce qu'il faut en retenir c'est que Sencha garantie une compatibilité ascendante entre ses évolutions mineures (Ex : 4.0.0-4.23), mais ne la garantie pas pour ses évolutions majeures. D'après mon expérience, la phrase précédente n'est pas vraie et pose de gros problèmes lorsqu'on veut profiter des corrections de bugs des versions suivantes. Cela sera plus flagrant avec l'exemple du Plugin RowExpander en 4.0.7 et 4.2.1.

A travers cet article, je vous propose de découvrir ce framework afin que vous puissiez vous en faire une opinion.

Ext JS Payant ?

Oui et non. Si vous désirez créer une application open-source, vous pouvez utiliser la licence GPLv3 d'Ext JS. En revanche, si vous voulez créer une application commerciale, il faudra acheter une licence commerciale. Mais ce n'est pas tout. Sencha propose des packs (recommandés pour une prise en main) avec une licence et des services allant de la maintenance au support. Voici un tableau récapitulatif de leurs offrent actuelles :

Contenu du pack Crédits* Prix
Pack 1 développeur :
1 licence commerciale + 1 an de support et maintenance premium
40 ~520 €
Pack 5 développeurs :
1 licence commerciale + 1 an de support et maintenance premium
175 ~2505 €
Pack 20 développeurs :
1 licence commerciale + 1 an de support et maintenance premium
750 ~9700 €
*Quand les crédits arrivent à 0 vous n'avez plus accès aux services de support et maintenance. Les crédits diminuent en fonction des services consommés. 

Développer avec les bons outils

Les IDEs

On ne peut pas développer en EXT JS avec n'importe quels outils, ne serait-ce que pour la coloration syntaxique. Malheureusement je n'ai pas trouvé d'IDE gratuit qui permet de combiner pratique et confort d'utilisation. Personnellement j'utilise Sublime Text dans sa version 3 pour développer mes couches JavaScript et je reviens sur Eclipse lorsque j'ai besoin de modifier mon code Java. Eclipse seul n'est pas équipé pour manipuler correctement du Javascript. J'ai testé le plugin Spket pour avoir l'auto-complétion mais sans résultat en version 5 d'EXT JS.

IntelliJ (IDE dont la licence est payante) propose une excellente alternative. Il peut :

  • Reconnaître le code Ext JS
  • Colorier syntaxiquement le code Ext JS
  • Auto-compléter le code Ext JS
  • Lorsque vous cliquez sur CTRL + Nom de la classe, l'éditeur bascule sur la définition de la bonne classe
  • Souligner les erreurs de syntaxe

L'aide en ligne

La documentation :
La force de ce framework réside dans sa documentation. Chaque élément de Ext JS (classe, plugin, composant) est documenté scrupuleusement et s'agence de la manière suivante :

  • Les Configs
  • Les Properties
  • Les Methods
  • Les Events
  • Les SASS (pour les composants uniquement)

Exemple avec la documentation Ext JS 5 sur le composant MessageBox :

Figure 1 : Agencement de la documentation Ext JS 5

Figure 1 : Agencement de la documentation Ext JS 5

Forum Sencha :
Il existe différentes possibilités d'obtenir de l'aide en ligne. La plus simple et la plus logique est le forum de sencha. Bien sûr si vous voulez une réponse rapide et/ou que vous utilisez une des dernières versions de Ext JS, la section premium du forum est pour vous. Pour y accéder il vous suffit d'acheter l'un des packs présentés ci-dessus.

Stack Overflow :
Stack Overflow est un forum d'entraide pour les programmeurs de tout bord. Une grande communauté, bien plus nombreuse que sur le forum de Sencha, existe pour Ext JS. Lorsque vous ne trouvez pas la réponse sur le forum officiel, dirigez vous ici.

Les Fiddles

Lorsque vous postez une question sur un forum, souvent en anglais, les gens qui répondent à votre demande ont besoin d'un exemple, sans pour autant mettre en place un serveur pour déployer votre application. Les fiddles sont là pour ça. Sencha propose un Fiddle sur lequel vous pourrez tester votre application sur les différentes versions de Ext JS. Pratique pour les migrations.

Sencha CMD

Sencha CMD est un outil en ligne de commande capable :

  • De générer un squelette et l'arborescence d'une application
  • De migrer en version une application (théoriquement)
  • De monter votre application sur un serveur interne (pratique pour tester rapidement une application)

Cet outil compile le javascript, le versionne, l'obfusque et génère le CSS à partir du SASS.

Spécificité de la version 5

Pour ma mission j'ai utilisé la version 5 de Ext JS.

Versions des navigateurs supportés

Depuis Ext JS 5, les versions supportées des navigateurs ont évolués.  Voici la liste :

  • IE8+ (Mode standard seulement)
  • Firefox 12+ (PC & Mac)
  • Safari 6+
  • Chrome 18+
  • Opera 12+ (PC & Mac)

 Architecture

A partir de Ext JS 5 vous aurez le choix entre la mise en place d'une architecture Model-View-Controller et d'une architecture Model-View-ViewModel. Sans trop rentrer dans les détails, dans MVC le Controller est au centre des actions métiers alors qu'en MVVM c'est la View qui centralise l'action.

Communication avec le serveur

Ext JS emploie différents modes de communication (via des Proxy) dont HTTP, AJAX, REST (Create-PUT, Read-GET, Update-POST, Delete-DELETE). Le retour serveur doit se faire en JSON.

Comment intégrer simplement les librairies Ext JS

Pour pouvoir utiliser Ext JS au sein de votre code, il vous faut télécharger le framework puis ajouter la ligne suivante dans la balise head de votre page :

<head>
<script type="text/javascript" src="<chemin vers le framework>/ext-all [-debug].js"/>
</head>

A suivre ...

Dans un prochain billet, je vous présenterais les différents objets d'Ext JS : Application, Controller, View, Model, Store ...

Liens utiles :
Documentation Sencha : http://docs.sencha.com/
Eclipsehttps://www.eclipse.org/downloads/
Ext JS : http://www.sencha.com/products/extjs/
Fiddle Sencha : https://fiddle.sencha.com/#home
Fonctionnement des crédits Senchahttp://www.sencha.com/support/using-sencha-care-support
Forum Sencha : http://www.sencha.com/forum/
Sencha CMD : http://www.sencha.com/products/sencha-cmd/
Spket : http://www.spket.com/
Stack Overflow
http://stackoverflow.com/
Sublime Text : http://www.sublimetext.com/3 (Si vous téléchargez l'outil sans payer la licence, tous les X sauvegardes, un message apparaît pour vous demander d'acheter la licence. Là il suffit de faire annuler)

Un commentaire

  1. Bonjour,

    Je vois que la version 5 d’ExtJS est payante pour une  » application commerciale ». Qu’est ce qu’une application commerciale ? (Cette application sert à la vente de produits ou services ?)
    Peut-on utiliser gratuitement ExtJS v5 gratuitement dans une entreprise si l’application créée de rapporte pas d’argent à l’entreprise ?

    Je vous remercie, par avance, pour la réponse que vous apporterez.

    Cordialement,

    Marion

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.