Sencha Touch - Builds
Die heutige Nachfrage nach einer Webanwendung besteht darin, eine schnelle Anwendung mit weniger Entwicklungsaufwand zu entwickeln. Sencha Touch hilft dabei auf einfache Weise, da es eine Reihe von Build-Bibliotheken zur Auswahl bietet, die auf dem Entwicklungs- oder Produktionscode basieren, sowie die Möglichkeit, einen benutzerdefinierten Build zu erstellen.
Sencha Touch Build-Bibliotheken laden die Klassen dynamisch. Dynamisches Laden steht für die Klassen, die bei Bedarf geladen werden, und es werden nur die Klassen aufgenommen, die in der Anwendung erforderlich sind. Dadurch wird die Anwendung schneller ausgeführt, da sich die Anzahl der zu ladenden Dateien verringert und gleichzeitig die Ladezeit verkürzt.
Sencha Touch 2.x bietet die folgenden fünf Build-Bibliotheken.
| Sr.Nr. | Builds & Nutzung |
|---|---|
| 1 | sencha-touchdebug.js Dieser Build wird bei der lokalen Entwicklung der Anwendung verwendet. Es ist eine nicht minimierte Version mit allen Kommentaren und Debug-Protokollen für ein einfaches Debuggen während der Entwicklung. |
| 2 | senchatouch.js Diese Datei wird zu Produktionszwecken verwendet. Es ist die minimierte Version, wenn wir einen benutzerdefinierten Build haben. |
| 3 | sencha-touchall.js Diese Datei wird zu Produktionszwecken verwendet. Dies ist die minimierte Version, wenn wir keinen benutzerdefinierten Build haben. |
| 4 | sencha-touchall-debug.js Diese Datei wird zum Debuggen in der Produktion verwendet. Es wird nicht minimiert und enthält alle Kommentare und Debug-Protokolle. |
| 5 | sencha-touchall-compat.js Dieser Build wird verwendet, um die Version 1.x auf Version 2.x zu migrieren. Es gibt eine Warnung aus, wenn Code der Version 1.x nicht kompatibel ist und eine Codeänderung erforderlich ist. |
Mit den oben genannten Builds bietet Sencha Touch die Möglichkeit, benutzerdefinierte Builds zu erstellen.
Vorteile eines benutzerdefinierten Builds
Beim benutzerdefinierten Build werden nicht alle Touch-Dateien geladen. Es werden nur die Dateien geladen, die wir in der Anwendung verwenden, wodurch die Anwendung schneller und einfacher zu warten ist.
Sencha CMD wird verwendet, um einen benutzerdefinierten Build zu erstellen. Um einen benutzerdefinierten Build in Sencha CMD zu erstellen, wechseln Sie in das Verzeichnis, in dem sich die App-Datei befindet, und geben Sie einen der folgenden Befehle ein, um einen Build zu erstellen.
| Sr.Nr. | Befehl & Verwendung |
|---|---|
| 1 | sencha app build native Erstellt die App und bereitet eine Datei mit dem Namen packager.temp.json vor, mit der Sie eine Anwendung packen können. Packager.temp.json ist identisch mit packager.json, enthält jedoch zusätzliche Pfade. |
| 2 | sencha app build -run native Erstellt und packt die Anwendung automatisch und startet den entsprechenden Simulator. |
| 3 | sencha app build package Erstellt die App mit Paketunterstützung, konfiguriert jedoch keine Packager-JSON-Datei. Dies ist nützlich für Projekte, die mehrere packager.json-Dateien manuell verwalten. |
Sobald der Build erfolgreich ist, generiert er die Datei all-classes.js, die wir in unsere index.html aufnehmen müssen, um die Produktion vorzubereiten.
Der folgende Code zeigt die Änderungen, die für den produktionsbereiten Code vorgenommen werden müssen.
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>