Desarrollo front-end para Aplicaciones Móviles con frameworks Javascript. Front-end, HTML5/CSS3/JS, Preprocesadores CSS, Build System y Entorno de desarrollo

El mundo de JavaScript es un entorno rico con docenas de herramientas, bibliotecas y frameworks. El objetivo de este artículo es analizar cómo aprovechar estos framework para la creación de soluciones adaptadas a los dispositivos móviles.

Para ello recomiendo resolver las siguientes preguntas

1. Definición de Front-end

Indica cuáles y explica por qué algunas de las siguientes afirmaciones son falsas :

Hoy en día, front-end es un término ligado exclusivamente a los navegadores web y el desarrollo de aplicaciones para smartphones y tablets.
Falso. Front-end en la actualidad no está ligado solamente a un lenguaje de programación dentro del proceso de un proyecto web. La adaptación de las tecnologías y lenguajes web ha provocado su inclusión en desarrollos para infinidad de dispositivos como teléfonos inteligentes, tabletas, televisores, consolas e incluso wearables.
Una de las áreas donde no usaremos nunca el desarrollo Front-End es en el desarrollo de aplicaciones de servidor.
Falso. El salto de JavaScript al lado de servidor con Node.js ha permitido el desarrollo de aplicaciones Front-End en servidor.
El desarrollo de aplicaciones SmartTV es uno de los ámbitos de aplicación para el desarrollo front-end.
Verdadero.
El desarrollo Front-End a través del navegador solo es posible en los navegadores más modernos que han implementado todos los estándares HTML5.
Falso. EL estándar HTML5 ha supuesto un salto cuantitativo y cualitativo en las capacidades que ofrecen los navegadores pero ya existían desarrollos Front-End con el estándar HTML4.
El uso intensivo y globalizado de Internet ha favorecido el auge del desarrollo FrontEnd.
Verdadero.
La aparición del iPhone y su pantalla táctil supusieron un cambio notable en el enfoque del Front-End móvil
Verdadero

2. HTML5/CSS3/JS

HTML5/CSS3/JS son los pilares en torno a los que gira el desarrollo front-end moderno.
Indica y explica brevemente el significado de:

Al menos 3 etiquetas HTML5 que haya incorporado esta versión del lenguaje.
section: El elemento de HTML section ( <section> ) representa una sección genérica de un documento.
form: El elemento HTML form ( <form> ) representa una sección de un documento que contiene controles interactivos que permiten a un usuario enviar información a un servidor web.
canvas: El elemento HTML canvas (canvas) se puede utilizar para dibujar gráficos a través de secuencias de comandos
Al menos 3 APIs que han sido introducidas con HTML5.
- API para elementos multimedia. Esta API nos permite la reproducción de vídeos
- API para impresión (print). Esta API nos permite adaptar un diseño web para su impresión. Por ejemplo, con esta api, podemos diseñar una factura con herramientas HTML para después imprimirlas.
- API para la interacción con el usuario (alert,confirm, prompt). Esta API nos permite mayor interacción con el usuario final incluyendo funcionalidades muy útiles para esta finalidad.
Cita 2 características de CSS3 que nos permiten animar elementos de nuestra aplicación, tarea que en el pasado estaba exclusivamente reservada al uso de Javascript.
- Selectores: Los selectores nos permiten acceder a un elemento a través de valores de sus atributos, acceder a un elemento de un conjunto de nodos hermanos filtrados por un tipo, elementos vacíos, etc.
- Calc: La expresión matemática calc permite emplear operadores de suma, resta, multiplicación y división lo que cubre gran cantidad de escenarios.
Cita que opción aporta CSS3 para el desarrollo Front-End con fuentes tipográficas que no tenga instaladas el usuarioCSS3 aporta la regla @font-face que nos permite enlazar con una fuente en los formatos correspondientes. Utilizando esta regla podríamos utilizar tipologías alojadas en el propio servidor del proyecto o incluso utilizar repositorios existentes.
Cita que opción aporta CSS3 para permitir el diseño responsive de aplicaciones(diseño que se adapte a las dimensiones de nuestro dispositivo)Layout Flexible o Flexbox es un mecanismo de maquetación muy ligado al diseño líquido. Este modo de layout incorpora gran cantidad de características propias y de nuevos conceptos que permite elementos adaptables dentro de un contenedor,remontándonos automáticamente dependiendo del tamaño de la pantalla o dispositivo.
Al menos 1 “alternativa” a Javascript que nos permita aprovechar en los navegadores actuales de amplias funcionalidades soportadas por la nueva versión de JavascriptES6.La alternativa a Javascript es Typescript, un lenguaje creado por Microsoft, que es compilado a JavaScript convencional, haciéndolo por tanto compatible con cualquier navegador. Este lenguaje calificado como "tipado estricto", permite trabajar con JavaScript de una manera mucho más convencionales, como es el caso de Java, dando la posibilidad a los editores de disponer sugerencias y control de errores en tiempo de edición. Como sus principales caracterizada nos encontramos:
- Tipos de datos enumerados.
- Definición de clases (incluido las abstractas),uso de la herencia y las interfaces.
- Definición de constructores.
- Módulos
- Reusabilidad de código.
- Mixins
- Soporte para JSX

3. Preprocesadores CSS

El lenguaje CSS es uno de los puntos en el desarrollo Front-End que por la rigidez de su lenguaje es más difícil de mantener y editar. La aparición de preprocesadores CSS cumplen con la tarea de facilitar una mayor flexibilidad.

Cita 2 preprocesadores actualmente en uso.
LESS Es un procesador CSS caracterizado por su facilidad de uso y su sintaxis sencilla. Su popularidad radica en su diversidad. Este compilador ha sido exportado a muchos lenguajes pero el que más fama ha conseguido es la versión en JavaScript que permitía realizar una compilación al vuelo sobre la propia página.
Sass: Es en procesador, portado a diferentes lenguajes que puede ejecutarse directamente en el navegador. Sass cuenta con dos sintaxis disponibles que son:
- SCSS: una extensión de CSS, que simplemente permite utilizar hojas CSS como SCSS.
- Sass: Posee mecanismos de reducción de código como la utilización de llaves y su indexación.
Cita 4 mejoras que aportan el uso de preprocesadores CSS en nuestro flujo de trabajo con hojas de estilo en cascada (CSS).
- Reutilización de código mediante mixing y herencia.
- Mejor gestión de ficheros relacionados y dependencias.
- Optimización del código resultante
- Mejor testeo y detección de errores en el código.
Explica el flujo de trabajo para incorporar el uso de preprocesadores en un proyecto Front-End.
El flujo de trabajo para incorporar el uso de preprocesadores en un proyecto Front-End se basa en la organización del proyecto y la realización de un proceso de compilación previo antes de publicar el proyecto.
Para poder ejecutar un procesador es necesario distribuir el trabajo en diferentes carpetas, cada una con diferentes funcionalidades para optimizar y hacer más fácil la tarea de compilación del proyecto. Nosotros, cuando necesitemos realizar una publicación de nuestro trabajo o testeo del mismo en el entorno de pruebas, será necesario aplicar una compilación de todos los ficheros utilizados y, para realizar esta tarea, será necesario configurar dónde y qué ficheros son.

4. Build Systems

Los Build Systems se han convertido en una de las principales piezas del desarrollo front-end por múltiples razones.

Define qué es un build system
Un build system es una herramienta que nos facilita los procesos necesarios para construir nuestro proyecto. Está enfocado a realizar todas aquellas tareas repetitivas que se han de llevar a cabo en cada versión cuando se produzca un cambio en el proyecto.
Por lo tanto, esta herramienta, creada como un task runners, nos permite ejecutar determinadas tareas de forma automatizada sobre un conjunto de ficheros en función de unas condiciones específicas. Es Decir,este software se encarga de la ejecución de tareas sobre nuestro proyectos según le indiquemos en los ficheros de configuración.
Para que funcionen estos sistemas, todas las versiones repartidas del proyecto deben poseer la misma estructura de ficheros, ya que el Build System solamente estará configurado para ello.
Indica y explica brevemente al menos 4 áreas de trabajo en las que un Build System puede ayudar notablemente en el desarrollo front-end.
Entre las diferentes ayudas que nos proporcionan los Build System, según mi opinión estas son las 4 más importantes:
- Testeo unitario para JavaScript. Nos permite ganar en estabilidad.
- Minimización y combinación de ficheros (CSS, JavaScript, etc.)
- “Compiladores” de lenguajes (TypeScript, Babel, Traceur…)
- Automatización de procesos de subida a un servidor web (deploy).Este punto nos permite actualizar rápidamente nuestro proyecto y, incluso, realizar subidas a servidores git donde almacenar copias de este o realizar proyectos colaborativos.
Cita dos build systems destacables en la actualidad
Grunt es un Build System disponible a través del gestor de paquetes para node npm. Su popularidad reside en su sencillez, una persona sin muchos conocimientos puede interactuar con esta herramienta sin necesidad de conocerla.
Su estructura se basa en ficheros de configuración, por lo que prácticamente no es necesario código con lógica de programación para poder comenzar a usarlo, sino simplemente configurar los plugins siguiendo las reglas marcadas por cada uno de ellos.
Aparte, esta aplicación dispone de diversos plugins, cada uno con su propio formato de configuración a través de un objeto JavaScript, aunque es muy habitual que la sintaxis y estructura sean muy similar entre ellos, lo que acelera la curva de aprendizaje en su uso.
Gulp
Gulp es una alternativa más joven que Grunt pero que pronto ha ganado muchos adeptos y que en la actualidad se considera más flexible que Grunt y empieza a ser más usado.
Si bien el resultado final de ambas herramientas es el mismo, en el caso de Gulp lo que cambia es el enfoque que se le dá a cómo configurar y gestionar las tareas automatizadas, de hecho Gulp se aleja del concepto de “configuración” para retomar el control mediante código JavaScript.
Esta característica lo hace notablemente más flexible que Grunt al disponer de todos los mecanismos que nos ofrece un lenguaje de programación como JavaScript para aplicar lógica a nuestros procesos, frente a la rigidez de un fichero de configuración mediante objetos definidos con formato JSON, aunque esa flexibilidad requiere de un mayor conocimiento, lo que lo hace menos accesible para perfiles front end que no sepan programar.

5. Entorno de desarrollo

Como profesional del desarrollo front-end es fundamental contar con un entorno y herramientas de trabajo que nos permita centrarnos en el desarrollo y no en otras tareas que con el estado actual de la tecnología pueden optimizarse e incluso automatizarse.

Cita los diferentes apartados relacionados con la creación de un entorno de trabajo para el desarrollo front-end y realiza una propuesta combinada de entorno, herramientas, lenguajes y flujo de trabajo para disponer de garantías para agilizar y controlar el desarrollo. Explica brevemente la causa o característica que hace que apuestes por esa elección en cada apartado, en comparación con otras soluciones alternativas existentes.

A continuación voy a analizar los diferentes programas que he utilizado para el desarrollo de front-end en Windows, explicando los motivos de mi elección y su comparación con otros sistemas.

Sistema Operativo: En mi caso, mi entorno de desarrollo está instalado en una máquina Windows 10 por la comodidad que supone tener al alcance una gran cantidad de programas adaptados al SO. Otros sistemas como Os de Mac o Mint de linux, los conozco, son muy potentes pero en ocasiones algunos programas me han proporcionado problemas de compatibilidad.
Servidor Web Como servidor web utilizaremos XAMPP disponible gratuitamente para las diferentes plataformas Mac,Windows y Linux. En mi caso, mi segunda opción era instalar una Máquina virtual con Virtualbox y realizar una configuración de una máquina Mint manualmente, instalando Mysql y apache del repositorio y configurando todo el entorno según las necesidades del proyecto. Esta segunda opción da muchos más problemas y es más complicada que la primera, sin pensar que consumo muchos recursos.
Otra opción nativa en Windows podría ser EasyPHP, un software parecido a XAMPP muy utilizado pero, en mi opinión, no tan sencilla.
Editores e IDEs Existen dos maneras habituales de trabajar con código serían el uso de un Entorno de desarrollo integrado (IDE) o bien el uso de un editor moderno añadiendo los plugins adecuados para nuestro trabajo.
Yo personalmente, he utilizado IDE Webstorm. Lo conozco de utilizarlo con Symfony y reconozco que ayuda en la edición, organización del proyecto y facilidad para instalar plugins. Otro sistema parecido, pero no tan potente en el entorno web es Eclipse (según mi opinión tiene más plugins pero es mucho más difícil de configurar y adaptar). Visual Studio también es una herramienta interesante pero sin tantos complementos como WebStorm.
Cuando quiero realizar una tarea de supervisión rápida, y no quiero cargar todo el IDE que consumo muchos recursos utilizo un editor de texto para Windows llamado Notepad ++. Este editor posee bastantes plugins, consume pocos recursos y permite editar ficheros rápidamente. Otras opciones que no me gustan tanto sería el Bloc de notas (prácticamente imposible editar nada).
Control de versiones Para control de versiones utilizaremos Git. Como gestor de repositorios utilizaremos Gitlab. Es gratuito y permite tener tanto repositorios públicos como privados.
Finalmente, y aunque se puede trabajar con Git directamente vía la línea de comandos (command line), para ciertas tareas suele ser mucho más práctico el uso de una Interfaz Gráfica de Usuario (Graphical User Interfaces = GUI). Por ello para gestionar nuestros repositorios podéis instalar SourceTree que es una herramienta gratuita y multiplataforma. Otras opciones podrían ser GitHub o Bitbucket, aunque no la conozco mucho, GitHub no permite proyectos privados sin cuentas premium.
Otra opción, es utilizar repositorios svn como Tortoise SVN, pero al funcionar únicamente con Window podría suponer un problema si realizamos una migración de nuestro entorno de trabajo.
NVM, NODE.JS y NPMLa aparición de node.js, y sobretodo de su gestor de paquetes npm, es uno de los mayores avances de los últimos años en el desarrollo profesional en Javascript. A nivel práctico Npm nos permitirá instalar fácilmente miles de herramientas open-source que iremos viendo a medida que avancemos en el curso.
Profesionalmente puede ocurrir que para diferentes proyectos tengáis que trabajar con versiones diferentes de Node.js (proyectos antiguos, incompatibilidades entre algunos paquetes, etc). Esto puede suponer tener que instalar/desinstalar a menudo versiones de node.js, lo que puede resultar engorroso y no muy aconsejable desde un punto de vista productivo. Por ello os aconsejo que instaléis nvm (Node Version Manager). Una vez instalado nvm entonces podéis a través de este instalar/añadir las versiones de node.js que os convenga. Con una simple instrucción en línea de comandos podréis pasar de utilizar una versión a otra.
BUILD SYSTEM: Automatizar tareas con GulpPara automatizar tareas haremos uso de Gulp. La instalación se realiza muy fácilmente vía npm y viene explicada en la página oficial. Como ya hemos comentado anteriormente, es una alternativa más joven que Grunt pero que pronto ha ganado muchos adeptos y que en la actualidad se considera más flexible que Grunt y empieza a ser más usado. La automatización de tareas que nos proporciona Gulp es mejor que Grunt debido a:
- Gulp en general ofrece un mejor rendimiento que Grunt al hacer uso del concepto de stream existente en nodeJS, que permite ejecutar tareas con la máxima concurrencia.
- Gulp ofrece una mayor flexibilidad al alejarse de la rigidez de las estructuras de configuración y basarse en código JavaScript puro, con toda su lógica a nuestro alcance.
- Gulp nos proporciona una API sencilla y unificada para los principales mecanismos de acción, como hemos visto antes.
- Gulp soporta tareas asíncronas.
- Toda la funcionalidad de Grunt está basada en plugins, en el caso de Gulp se pueden realizar muchas tareas sin requerir un plugin para ello.
- En Gulp se ha aprendido de los errores de Grunt y se ha sido mucho más estricto y se han establecido unas guías de estilo a cumplir, para todo aquel que quiera desarrollar un plugin, lo que se traduce en una consistencia mayor en todos los plugins.
- Gulp permite usar librerías estándar para lograr lo que deseamos, al ser JavaScript convencional.
- Los plugins en Gulp tienen mucho más acotada su funcionalidad, hacen menos y por tanto son más simples, porque el objetivo para las tareas es combinarlos.
JavaScript En nuestro entorno deberíamos utilizar Typescript, un superset de Javascript compatible con nuestro IDE. Otra opción sería Traceur con caracteristicas similares pero no tan expandido.
Preprocesadores CSSComo preprocesador haremos uso de SASS (en su extensión de ficheros .scss). Cabe destacar que históricamente LESS y Sass han sido los principales competidores, habiendo cogido algo de ventaja Sass en la actualidad, como demuestra el hecho de que algunos de los principales frameworks front end, como Bootstrap, que estaban basados en LESS han migrado a Sass en sus últimas versiones. Otro aspecto a comentar es que normalmente los entornos de GULP utilizan Sass.
Depuración y testeoCon este fin podemos utilizar la depuración y testeo Webstorm (depuración, testeo y ayuda para typescript, posibilidad de añadir watchers para detectar cambios en el código y lanzar una acción, etc). Además ofrece una extensión gratuita para Chrome y Firefox que puede ser muy útil.
Además con Browsersync no solamente nos permite refrescar los cambios realizados en el código en múltiples navegadores a la vez, sino que permite que los navegadores pertenezcan a equipos diferentes, incluidos dispositivos móviles. Además, como su nombre indica su principal funcionalidad es que sincroniza todos estos navegadores para mantener la vista en el mismo lugar incluyendo acciones como scroll, clicks, rellenado de campos de formulario, simulación de diferentes estados de red para testear escenarios menos favorables, gestión de histórico de URLs para recuperarlas en todos los dispositivos, etc.
Finalmente los propios navegadores ofrecen cada vez más herramientas de depuración y testeo muy aconsejables. Entre ellos quizás os aconsejaría sobretodo el uso de Google Chrome que a nivel de Angular ofrece, al menos actualmente, un depurador más preciso.

6. Gitlab

En la url https://github.com/al118345/todo-app/tree/master puedes encontrar un ejemplo de proyecto javascript para dispositivos móviles.