Vocabulary FrontEnd

En este artículo se describe la parte cliente de la aplicación Vocabulary.

Está dividida en dos zonas:

Para el FrontEnd se han las siguientes tecnologías: Yeoman (Yo + Bower + Grunt), AngularJS, Jasmine y Karma.

Yeoman estandariza un flujo de trabajo que promueve buenas prácticas y hacen más sencillo la construcción de software.

  1. La herramienta "Yo", generamos automáticamente la estructura de carpetas y archivos base del proyecto.
  2. La herramienta Bower nos facilita la gestión de dependencias de nuestro proyecto respecto a las librerías de terceros.
  3. La herramienta Grunt nos proporciona tareas como el análisis estático del código fuente, la ejecución de nuestros tests, etc.

Puedes leer un completo tutorial de Yeoman: Yo, Bower y Grunt.

Un software de calidad, debe ser desarrollado realizando pruebas unitarias durante todo el ciclo de vida del desarrollo. Jasmine se ha convertido en el Framework más usado a la hora de crear pruebas unitarias en JavaScript, hablaremos de el junto con KarmaJS como motor de ejecución de tests.

Código fuente

El código fuente de esta parte puede ser encontrado en el siguiente repositorio: https://bitbucket.org/cgarciap/learnapp_front

Puntos más importantes del código fuente

Como instalar e iniciar la aplicación

Para ejecutar la aplicación en un entorno de producción sólo es necesario cualquier navegador web moderno con JavaScript habilitado, Chrome, Firefox, etc.

Como en este apartado vamos a iniciar la aplicación en un entorno de desarrollo vamos a requerir la instalación de más herramientas.

Previamente, debemos instalar NodeJS Package Manager (NPM) el cuál es necesario para instalar el resto de herramientas:

https://nodejs.org/download/

Instalamos las herramientas de Yeoman a través del comando:

npm install -g yo bower grunt-cli

Instalamos los plugins de desarrollo que usará Grunt (package.json):

npm install (Se descargan en el directorio node_modules.)

Instalamos las librerías JavaScript (bower.json):

bower install (Se descargan en el directorio bower_components.)

 

   Todo lo anterior sólo hay que hacerlo una vez por máquina.

Para terminar, lanzamos la aplicación a través del comando:

bower serve

Bibliografía y Refencias