Sencha Touch - Construit
La demande actuelle pour une application Web est de développer une application rapide avec moins d'efforts de développement. Sencha Touch aide à le faire avec facilité car il fournit un certain nombre de bibliothèques de construction parmi lesquelles choisir, en fonction du code de développement ou de production, ainsi que la possibilité de créer une version personnalisée.
Les bibliothèques de construction Sencha Touch charge les classes de manière dynamique. Le chargement dynamique correspond aux classes qui sont chargées lorsque cela est nécessaire et seules les classes requises dans l'application seront incluses. Cela accélère l'exécution de l'application car le nombre de fichiers à charger diminue, ce qui diminue simultanément le temps de chargement.
Sencha Touch 2.x fournit les cinq bibliothèques de construction suivantes.
| N ° Sr. | Constructions et utilisation |
|---|---|
| 1 | sencha-touchdebug.js Cette version est utilisée lors du développement de l'application localement. Il s'agit d'une version non réduite avec tous les commentaires et journaux de débogage pour un débogage facile pendant le développement. |
| 2 | senchatouch.js Ce fichier est utilisé à des fins de production. C'est la version minifiée lorsque nous avons une version personnalisée. |
| 3 | sencha-touchall.js Ce fichier est utilisé à des fins de production. C'est la version minifiée lorsque nous n'avons pas de build personnalisé. |
| 4 | sencha-touchall-debug.js Ce fichier est utilisé pour le débogage en production. Il n'est pas minifié et contient tous les commentaires et les journaux de débogage. |
| 5 | sencha-touchall-compat.js Cette version est utilisée pour migrer la version 1.x vers la version 2.x. Il donne un avertissement lorsque le code de la version 1.x n'est pas compatible et nécessite une modification de code. |
Avec les builds mentionnés ci-dessus, Sencha Touch fournit une installation pour créer des builds personnalisés.
Avantages d'avoir une version personnalisée
La construction personnalisée ne charge pas tous les fichiers tactiles. Il ne charge que les fichiers que nous utilisons dans l'application, ce qui rend l'application plus rapide et facilement maintenable.
Sencha CMD est utilisé pour créer une version personnalisée. Pour créer une build personnalisée dans Sencha CMD, accédez au répertoire où réside le fichier d'application et tapez l'une des commandes suivantes pour créer une build.
| N ° Sr. | Commande et utilisation |
|---|---|
| 1 | sencha app build native Construit l'application et prépare un fichier appelé packager.temp.json que vous pouvez utiliser pour empaqueter une application - le packager.temp.json est le même que packager.json, mais contient des chemins supplémentaires. |
| 2 | sencha app build -run native Construit et conditionne automatiquement l'application, et lance le simulateur approprié. |
| 3 | sencha app build package Construit l'application avec la prise en charge de l'empaquetage, mais ne configure pas de fichier JSON du conditionneur. Ceci est utile pour les projets qui gèrent manuellement plusieurs fichiers packager.json. |
Une fois la construction réussie, elle générera le fichier all-classes.js que nous devons inclure dans notre index.html pour le rendre prêt pour la production.
Le code suivant montre les modifications à effectuer pour le code prêt pour la production.
Index.html before building application
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-debug.js"></script>
<script type = "text/javascript" src = "app.js"> </script>
</head>
<body>
</body>
</html>Index.html after building the application
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch.js"></script>
<script type = "text/javascript" src = "app.js"> </script>
<script type = "text/javascript" src = "app-classes.js"> </script>
</head>
<body>
</body>
</html>