Making of Anima: UNICO – Estructura general

 This post is available in english.

En la última entrada repasé las principales herramientas que estoy empleando para crear Anima: UNICO. He de añadir una que olvidé: SourceTree, una interfaz gráfica para git muy cómoda y agradable que permite seguir fácilmente el patrón GitFlow. Obviamente, no necesito usar GitFlow (y realmente no lo uso al 100%), pero como base para organizarme me gusta.

Y, ahora, pasaré a entrar en materia de verdad. Primero, ¿cómo organizar una aplicación javascript del tamaño de Anima: UNICO? Tras mis primeras exploraciones, llegué al siguiente flujo de trabajo:

  1. Creo tantos ficheros javascript como me sea cómodo, normalmente uno por clase.
  2. Para publicarlos, empleo Grunt para concatenarlos todos, minificarlos y ofuscarlos, y así obtengo un único archivo javascript para publicar en la web.

En cuanto al modo de organizar los archivos javascript, me he basado en patrones Modelo-Vista-Controlador

  • js/ – Carpeta general de archivos javascript
    • controller/ – Controladores.
    • data/ – Datos.
    • view/ – Vistas.
    • model/ – Modelos.
    • locale/ – Localización.
    • libs/ – Librerías de terceros
    • vendor/ – Librerías de terceros
  • sass/ – Ficheros SASS.
  • img/ – Imágenes
  • fonts/ – Fuentes
  • css/ – Ficheros CSS.
  • index.html – La página principal.
  • indexLocal.html – Versión de la página principal para depuración local.
  • Gruntfile.js – Instrucciones para Grunt.

Controladores

Se encargan de interacción entre modelos, de preparar los datos que se presentarán al usuario y de interpretar las acciones de usuario.

Datos

Los datos de las instancias concretas de cada clase. Es decir, los datos de cada ventaja,  conjuro, arte marcial, etc…

Hay varias formas de almacenar los datos. Como quería que la aplicación funcionara offline, no podía usar una base de datos. Al final, los almaceno en su propia inicialización. Esto es… mala idea. Debería haberlos guardado desde el principio en formato JSON, y en algún momento del futuro seguramente haga el cambio.

Un ejemplo:

addVentaja(new Ventaja( VENT_APRENDIZAJE_INNATO_EN_UN_CAMPO, «», VENT_APRENDIZAJE_INNATO_EN_UN_CAMPO_DESC, REPETIBLE_OPCIONES, [2,3], [], true, [LISTA_TIPOS_SECUNDARIAS], [aprendizajeInnatoCampo], GRUPO_SECUNDARIAS ));

Esta línea de código inicializa la ventaja «Aprendizaje innato en un campo».

Vistas

Las vistas son las encargadas de generar la interfaz de usuario y de interactuar con él.

Modelos

Los modelos son las clases básicas. Personaje, Raza, ArteMarcial, etc…

Localización

La localización es todo lo relacionado con mostrar la aplicación en varios idiomas. Actualmente esto incluye español e inglés, y el francés está en proceso. Cuento para este paso con la ayuda totalmente inestimable e imprescindible de Andrew «Dynaes» Reich y de Vincent «Moklo» Bouscarle.

En otro artículo entraré en detalle en cómo realizo la localización, ya que me parece un punto interesante.