ExtJS 4 : Premiers pas avec SenchaSDKTools

Retours sur l'outil de gestion des "builds" du framework JavaScript

Le 2011-06-08 15:45:44, par sekaijin, Expert éminent

Bonjour

tout premier essais avec SenchaSDKTools-1.1
tout d'abord beaucoup de bug dans les versions précédentes.
pour cette version quelques petits pb mais rien de catastrophique.

tout d'abord un bug dans le fichier
...SenchaSDKTools-1.1\jsbuilder\src\Project.js
sous windows pas de pb sur les autre plateforme
dans la méthode compressTarget commentez la ligne
Fs.remove(source);

en effet la comment de compression est lancée en asynchrone et le fichier est supprimé avant le compression

il restera un fichier temporaire mais c'est pas très grave.
toujours pour windows la méthode
getCompressor : ajoutez des " autour du path ycompressor.jar (pb avec les espaces.

voilà pour les prérequis.

créez votre application comme vous en avez l'habitude sur votre serveur local.
ajoutez les classes de votre choix
pensez au requires dans les classe pour les classe requise
pensez à bien référencer tous les js à charger (comme d’habitude) si tout est bien référencé en statique ou en require (les vues controleurs etc suffisent pour les classes MVC)

votre application doit être pleinement fonctionnelle avec le chargement statique ou dynamique.
ouvrez un terminal est depuis le dossier de votre application tapez

Code shell :

sencha create jsb -a index.html -p app.jsb3

index.html est le fichier de démarrage de votre application le nom du fichier jsb3 est à votre convenance.

le fichier jsb3 vas être créé.

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{ 
    "projectName": "Project Name", 
    "licenseText": "Copyright(c) 2011 Company Name", 
    "builds": [ 
        { 
            "name": "All Classes", 
            "target": "all-classes.js", 
            "options": { 
                "debug": true 
            }, 
            "files": [ 
                { 
                    "path": "extjs/src/util/", 
                    "name": "Observable.js" 
                }, 
...

changez le nom du projet et la licence si besoin
notes l'attribut files qui référence tous les composants classes etc que vous utilisez dans votre application.
le build va produire un fichier all-classes.js qui contient tout le nécessaire.

c'est ici que sous windows ça se complique un peu. le buil ne sais pas gérer plusieurs disque. si vous avez les outils sur C: et le source sur D: vous allez avoir de soucis.
pourquoi ? je ne sais pas toujours est-il que nombre de vos fichier js situés dans un sous dossier de l'application sont réfférencés ../../../app ....
supprimer tous les ../../

Code :

1
2
3
4
5
6
7
8
                { 
                    "path": "../../../../app/store/", 
                    "name": "Users.js" 
                }, 
                { 
                    "path": "../../../../app/model/", 
                    "name": "User.js" 
                },

Code :

1
2
3
4
5
6
7
8
                { 
                    "path": "app/store/", 
                    "name": "Users.js" 
                }, 
                { 
                    "path": "app/model/", 
                    "name": "User.js" 
                },

une fois le fichier prêt tappez

Code shell :

sencha build -p app.jsb3 -d mydir

ou mydir et le dossier de livraison de votre application.
dans celui-ci remplacez dans index.html les références à ext-debug.js par ext.js et tous vos script par app-all.js

vous pouvez utiliser l'application buildée.
ext.js ne contient que le strict nécessaire et app-all.js contient tout votre code plus les classe et compoant ext que vous utilisez sous forme compressé.

si vous en voulez un forme non compressé le fichier temporaire (dû au bug) qui est resté sur le disque contient tout votre source.

sous chrome le temps de chargement de l'exemple extjs en dev chargement dynamique ets d'environ 3,14s après le buils ext pèse 168 ko et l'application avec les composant Ext 476ko avec un temps de chargement de 532 ms

pour tous ceux qui se pose la question de savoir si Ext-all n'est pas trop lourd si on utilise que quelque composants cet outil apporte une réponse en permettant de ne charger que les élément nécessaires.

A+JYT

Discussion forum

2 commentaires

Phoenix132

Candidat au Club

Bonjour,

quand vous dites

Envoyé par sekaijin

pensez au requires dans les classe pour les classe requise
pensez à bien référencer tous les js à charger (comme d’habitude) si tout est bien référencé en statique ou en require (les vues controleurs etc suffisent pour les classes MVC)

que cela veut exactement dire?

car à ce jours, je charge les scripts nécessaires dans ma page et construit mes objets Extjs avec la syntaxe

Code :

viewport = Ext.create('Ext.container.Viewport', {...

Hors, si j'essaye avec ou sans un require:

Code :

Ext.require('Ext.container.Viewport');

dans le fichier *.jsb3, je n'ai jamais rien :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
    "projectName": "Project Name",
    "licenseText": "Copyright(c) 2011 Company Name",
    "builds": [
        {
            "name": "All Classes",
            "target": "all-classes.js",
            "options": {
                "debug": true
            },
            "files": []
        },
        {
            "name": "Application - Production",
            "target": "app-all.js",
            "compress": true,
            "files": [
                {
                    "path": "",
                    "name": "all-classes.js"
                },
                {
                    "path": "",
                    "name": "app.js"
                }
            ]
        }
    ],
    "resources": []
}

Pouvez-vous donner un exemple simple de code extjs et le rendu du fichier jsb3

Merci beaucoup

le 23/11/2011 à 17:14

moezBH
Nouveau membre du Club
mon environnement de travail est visual studio et ma page de démarrage c'est Default.aspx, l'exécution ce fait a travers le serveur IIS de VS.
comment je peux créer le fichier .jsb3 ?
ce ligne de code où je dois le taper ?
Code :
```
sencha create jsb -a index.html -p app.jsb3
```
Merci de me répondre svp
le 29/11/2011 à 17:01