Nativescript sigue la filosofía de obligar a unas determinadas convenciones, tanto en la estructura de directorios y ficheros, como a los nombres de éstos. Nativescript es dogmático en el sentido de que tenemos que escribir el código, nombrar los ficheros/directorios y organizar los componentes de cierta forma, obligatoriamente. Si no se siguen estas reglas, la aplicación no se ejecutará.
Esto tiene ventajas e inconvenientes. El principal inconveniente es que no deja lugar a la creatividad del programador. Pero todo lo demás son ventajas, sobre todo, el hecho de que cualquier programador que herede una aplicación Nativescript puede comprender rápidamente su estructura.
Estructura de la aplicación
Cuando creamos una aplicación con tns create appname, el CLI crea una serie de directorios:
/appname
/app
.xml, .js, .css
references.d.ts
app.js y app.css
/App_Resources
/Android
/iOS
/node_modules
/platforms
/android
/ios
package.json
En principio, y salvo excepciones, el programador sólo debe modificar lo que hay debajo del directorio /app.
package.json
El fichero package.json que hay en el directorio raíz de la aplicación contiene algunas características de la aplicación y dependencias.
{
"description": "NativeScript Application",
"license": "SEE LICENSE IN <your-license-filename>",
"readme": "NativeScript Application",
"repository": "<fill-your-repository-here>",
"nativescript": {
"id": "com.joseanquiles.mylistview",
"tns-ios": {
"version": "3.1.0"
},
"tns-android": {
"version": "3.1.1"
}
},
"dependencies": {
"nativescript-theme-core": "~1.0.2",
"tns-core-modules": "3.1.0"
},
"devDependencies": {
"babel-traverse": "6.25.0",
"babel-types": "6.25.0",
"babylon": "6.17.4",
"lazy": "1.0.11"
}
}
La sección nativescript.id contiene el identificador único de la aplicación. Este identificador se utiliza cuando se construye la aplicación para iOS o Android, y cuando la subamos a los market correspondientes: AppStore, Google Play. Podemos definir este identificador al crear la aplicación con el parámetro --appid. También se puede cambiar después editando el fichero package.json, pero entonces tendremos que eliminar las plataformas, añadirlas y volver a construir la aplicación.
La sección dependencies indica una serie de paquetes npm (y su versión) que utiliza la aplicación. Al menos, siempre tendremos la dependencia tns-core-modules.
node_modules
El directorio node_modules está relacionado directamente con el fichero package.json. Contiene una copia local de los módulos de los cuales depende la aplicación.
Durante el desarrollo de la aplicación, se puede utilizar npm para añadir módulos a la aplicación, los cuales se meterán en este directorio.
platforms
Después de crear la aplicación, este directorio está vacío. Se rellena cuando se ejecuta el comando tns platform add android (ios).
Contiene ficheros que son necesarios para el despliegue de la aplicación tanto en emulador como en dispositivo.
app
En el directorio app están los ficheros que componen la aplicación: xml, js y css.
app/App_Resources
El directorio App_Resources tiene dos subdirectorios: Android e iOS. En estos directorios se guardan ficheros específicos para cada una de las plataformas. Por ejemplo, en Android se guardan ficheros que sólo necesita la plataforma Android.
En cierto sentido, los directorios platforms y App_Resources son similares, porque contienen ficheros específicos de cada plataforma. Sin embargo, los ficheros del directorio platforms no los podemos modificar, y los de App_Resources sí.
Cada vez que se modifique algo debajo del directorio App_Resources es necesario ejecutar tns prepare android (o ios). Este comando lee los cambios realizados y los pasa al directorio platforms.
references.d.ts
Este fichero sólo se utiliza si empleamos Typescript como lenguaje de programación (en lugar Javascript).
En este fichero se guarda información útil para los IDEs (autocompletado, chequeos, etc).
Ficheros .xml .css y .js
Cada página de nuestra aplicación se compone de 3 ficheros (aunque podrían ser menos si alguno no se utiliza). Los tres ficheros tienen el mismo nombre y se distinguen por la extensión, por ejemplo: edit_user.xml, edit_user.css y edit_user.js
El fichero .xml contiene el layout y los controles de UI de la página.
El fichero .css contiene estilos específicos de la página (sólo se aplican a esta página).
El fichero .js contiene el código javascript con la lógica (inicialización, manejo de los eventos, etc).
app/package.json
Este fichero no tiene nada que ver con package.json que encontramos en el directorio raíz de la aplicación. En este caso, se describe la configuración y contenido del directorio app.
El directorio app es realmente un paquete npm y por tanto, se requiere el fichero package.json para describir el paquete npm.
El comando tns create, internamente descarga e instala un paquete npm llamado tns-template-hello-world en el directorio app: https://www.npmjs.com/package/tns-template-hello-world
El fichero app/package.json contiene en main el fichero .js que es el punto de entrada de la aplicación (normalmente el fichero app.js).
app.js y app.css
El fichero app.js es el punto de entrada de la aplicación (tal y como se define en app/package.json).
El fichero app.css contiene definiciones de estilos que se aplican a toda la aplicación.
El fichero app.js contiene el código que arranca la aplicación:
vap application = require("application");
application.start( { moduleName : "main-page" } );
La primera línea carga el módulo "application" (este módulo tiene métodos para manejar la aplicación).
La segunda línea indica a Nativescript que cargue y ejecute una página llamada "main-page" (la cual puede estar definida en los tres ficheros main-page.xml, main-page.js y main-page.css).
No hay comentarios:
Publicar un comentario