Mantenimiento de un PhoneGap Hybrid / Web App Codebase

Hace poco tuve la misma pregunta. Realmente no podía encontrar mucho en línea en relación con esto, así que decidí bucear profundamente en Grunt, Node y Git.

Gruñido y nodo

En la carpeta raíz de mis proyectos de Cordova (junto con las carpetas www, platform, merges y plugins) tengo un proyecto grunt. Almacenar archivos JavaScript modulares y archivos CSS que pueden o no depender de la plataforma dentro de una carpeta src dentro de la raíz del proyecto Cordova. Este proyecto grunt construye el JavaScript y CSS almacenados en la carpeta src y coloca los archivos resultantes en la carpeta www o fusiona según corresponda.

Incluso escribí una tarea grunt que hará una producción de la aplicación de la aplicación mediante la optimización y minifying css, javascript y plantillas html, a continuación, reconstruye los proyectos de la plataforma Cordova para incluir estos archivos de producción.

Debido a que no hay #IF_DEF en JavaScript, tengo que usar Grunt (mencionado anteriormente) para construir el JavaScript para cada plataforma. Yo modularizar casi todas las funciones de JavaScript por plataforma. Si no hay diferencias de plataforma para esa función (no hay ganchos nativos), sólo necesito un archivo. Si hay diferencias, necesito crear un archivo separado para cada plataforma para esa función. Por ejemplo, mi función onDeviceReady y onResume de Cordova normalmente difieren de una plataforma a otra. Creo archivos llamados

CordovaEvents-ios.js and CordovaEvents-android.js 

Dentro del archivo package.json , describo las "características" que quiero en mi aplicación. CordovaEvents es un ejemplo de una característica.

También apoyo "argumentos". Utilizo el mismo enfoque anterior en los nombres de archivo de los archivos modulares. Un argumento podría ser así

 CordovaEvents-ios--production.js and CordovaEvents-android--production.js 

En este caso, el código necesario en una aplicación de producción diferirá del código de no producción. Puedo pasar simplemente este argumento (o lista de argumentos) durante el proceso de la estructura, y los archivos correctos serán recogidos y construidos. Creo que esto más de cerca se dirige a su pregunta si hay un enfoque para mantener una base de código que puede adaptarse a diferentes plataformas y requisitos. Los requisitos son los nombres y argumentos de las características. El argumento puede ser cualquier cosa que desee, tal vez utilizando un plugin u otro complemento.

También describo las plataformas que quiero soportar ("iOS", "Android" y "Escritorio"). Grunt procesa cada plataforma en un MultiTask, y luego mira las características que quiero apoyar. Intentará encontrar un archivo llamado feature-platform.js . Si no puede encontrar este archivo, sólo intentará buscar feature.js. Después de concatenar todas las funciones necesarias para la plataforma, copiará el archivo a la carpeta de combinaciones para iOS o Android. Normalmente todos los archivos guardados en la carpeta WWW del proyecto raíz funcionarán en un escritorio porque no hay corchetes nativos de Cordova … esto me permite depurar en Chrome. Todos los archivos que contienen ganchos nativos se almacenan en la carpeta de combinaciones. Una vez construido el proyecto Cordova para la plataforma respectiva, el código se puede probar en un simulador de dispositivo.

Si eres nuevo en Grunt, te sugiero que eches un vistazo a su guía de inicio.

http://gruntjs.com/getting-started

Git

También utilicé Git para la versión de mi código. Utilicé SourceTree para crear el repositorio de Git en la carpeta raíz de mi proyecto Cordova, y tengo un repositorio remoto en mi servidor Mac Mini que puedo empujar conmigo también. Esto nos permite tener una copia de seguridad del código, y lo hace así que mi equipo también puede trabajar en el código fuera de banda.

I Git ignorar las siguientes carpetas:

• Node_modules
• Plugins
• Plataformas
• Plugins

Todos los demás archivos y carpetas contenidos en el directorio raíz de mi proyecto de Cordova están versionados. Utilicé el siguiente enlace como referencia para ayudar a definir mi estrategia de Git para Córdoba:

https://leanpub.com/developingwithcordovacli/read#version-control

No me tomó durante la noche para calcular todas estas cosas, en realidad tardó un poco más de dos meses. Espero que mi respuesta puede servidor como una guía para usted y otros para abordar sus preocupaciones que mencionó en su primer puesto.

Estoy usando gruntjs, javascript, jade, bower y phonegap para construir aplicaciones web híbridas y aplicaciones móviles phonegap. Después de alguna investigación, decidí usar el lenguaje de plantilla de jade para crear mis archivos html y javascript. Esta es mi configuración.

 //begin grunt module module.exports = function(grunt) { var $jadeConfigObject = { compileDevelopment: { options: { pretty: true, data: { debug: true, **phonegap : '<%= isPhonegapBuild %>'** } }, files: [{ expand: true, cwd : "src", src: "**/*.jade", ext: ".html", dest:"dist/development/www/" }] } }; grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), clean: [$dist_folder,"www"], jade: $jadeConfigObject // other gruntjs tasks }) grunt.registerTask('setPhonegap', 'Set Phonegap related values.', function(n) { **grunt.config.set('isPhonegapBuild', true);** }); grunt.registerTask('buildPhonegap', ['setPhonegap','buildDevelopment' ,'copy:phonegap_www']); 

}

Ahora explicacion

Utilice la tarea setPhonegap de gruntjs para distinguir entre build de phonegap y compilación normal de aplicaciones web. Tarea setPhonegap set isPhonegapBuild propiedad de configuración, esta propiedad, a su vez, es utilizada por el objeto de configuración de jade. Entonces puedo usar declaraciones de " si telefono " en archivos jade.

Tengo la siguiente línea en mi archivo de diseño jade

 include ../includes/mainJavascript.jade 

MainJavascript.jade

 if phonegap script(type='text/javascript',src='#{mainFolder}/cordova.js') script(type='text/javascript',src='#{mainFolder}/cordova_plugins.js') script(type='text/javascript',src='#{mainFolder}/plugins/org.apache.cordova.device/www/device.js') script(type='text/javascript',src='#{javascriptServicesFolder}/pushTokenService.js') script(type='text/javascript',src='#{javascriptFolder}/plugins/com.phonegap.plugins.PushPlugin/www/PushNotification.js') script(type='text/javascript',src='#{javascriptFolder}/phonegap/pushNotificationHelper.js') 

De esta manera tengo las siguientes características

• Mi aplicación web no contiene ninguna secuencia de comandos relacionadas con el teléfono o html
• Puedo usar layouts de jade (Master Page) para simplificar mis archivos muy fácilmente.
• Agregar nuevo javascript a cada página o cambiar cada html para cada página en la aplicación muy fácil.

Tenga en cuenta que phonegap quiere www carpeta para sus scripts de construcción, por lo tanto, crear siguiente estructura de directorios.

 src -- every code file here, jade, javascript www -- only created for phonegap build dist/development/www -- normal development www build dist/production/www -- production www build 

Ignoro www / * y dist / * en mi control de código fuente. Sólo trabajo con jade src y archivos javascript. Añadir esta configuración a bower, creo que es una buena opción.