Sencha Touch - Construye
La demanda actual de una aplicación web es desarrollar una aplicación rápida con menos esfuerzos de desarrollo. Sencha Touch ayuda a hacerlo con facilidad, ya que proporciona una serie de bibliotecas de compilación para elegir, según el código de desarrollo o producción junto con la posibilidad de crear una compilación personalizada.
Las bibliotecas de compilación de Sencha Touch cargan las clases de forma dinámica. La carga dinámica se refiere a las clases que se cargan cuando es necesario y solo se incluirán aquellas clases que sean necesarias en la aplicación. Esto hace que la aplicación se ejecute más rápido a medida que se reduce la cantidad de archivos a cargar, lo que al mismo tiempo disminuye el tiempo de carga.
Sencha Touch 2.x proporciona las siguientes cinco bibliotecas de compilación.
| No Señor. | Construcciones y uso |
|---|---|
| 1 | sencha-touchdebug.js Esta compilación se utiliza al desarrollar la aplicación localmente. Es una versión no reducida con todos los comentarios y registros de depuración para facilitar la depuración durante el desarrollo. |
| 2 | senchatouch.js Este archivo se utiliza para fines de producción. Es la versión minificada cuando tenemos una compilación personalizada. |
| 3 | sencha-touchall.js Este archivo se utiliza para fines de producción. Es la versión minificada cuando no tenemos una compilación personalizada. |
| 4 | sencha-touchall-debug.js Este archivo se utiliza para depurar en producción. No está minimizado y tiene todos los comentarios y registros de depuración. |
| 5 | sencha-touchall-compat.js Esta compilación se utiliza para migrar la versión 1.xa la versión 2.x. Da una advertencia cuando el código de la versión 1.x no es compatible y necesita modificación de código. |
Con las compilaciones mencionadas anteriormente, Sencha Touch ofrece la posibilidad de crear compilaciones personalizadas.
Ventajas de tener una construcción personalizada
La compilación personalizada no carga todos los archivos táctiles. Carga solo los archivos que estamos usando en la aplicación, lo que hace que la aplicación sea más rápida y fácil de mantener.
Sencha CMD se utiliza para crear una compilación personalizada. Para crear una compilación personalizada en Sencha CMD, vaya al directorio donde reside el archivo de la aplicación y escriba uno de los siguientes comandos para crear una compilación.
| No Señor. | Comando y uso |
|---|---|
| 1 | sencha app build native Compila la aplicación y prepara un archivo llamado packager.temp.json que puede usar para empaquetar una aplicación; el packager.temp.json es el mismo que packager.json, pero contiene rutas adicionales. |
| 2 | sencha app build -run native Construye y empaqueta automáticamente la aplicación e inicia el simulador apropiado. |
| 3 | sencha app build package Crea la aplicación con soporte de empaquetado, pero no configura un archivo JSON empaquetador. Esto es útil para proyectos que mantienen manualmente varios archivos packager.json. |
Una vez que la compilación sea exitosa, generará el archivo all-classes.js que debemos incluir en nuestro index.html para que esté listo para producción.
El siguiente código muestra los cambios que se deben realizar para el código listo para producción.
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>