De nada sirve el mejor desarrollo front-end si no se hace lo propio en cuanto a funcionalidad, comodidad y experiencia del usuario. Por eso Alvaro Saburido, Tech Leader Cross en SlashMobility, nos pone al día sobre las nuevas tendencias relacionadas con el trabajo del desarrollador Front-End este año. ¡Mira, Mira!
ES6/ES2015 (Babel)
ES6 es un súper set del estándar ECMASCRIPT 5 soportado por la mayoría de navegadores. En “mortal” web funciona con Javascript, un lenguaje de script que sigue el estándar antes nombrado. Con la evolución de la web hacia el paradigma de los Web Components era natural la evolución del lenguaje atrás de la funcionalidad de ese bonito slider que tienes en tu aplicación web.
Funciones de orden superior (map, reduce), promesas, funciones lambda, y más conceptos que emocionan hasta el más friki: ES6 las tiene. Es imprescindible para sobrevivir en el mercado empezar ya a desarrollar en ES6, Javascript abandona poco a poco el lastre de ser el “lenguaje” de programación odiado por los expertos a ser un lenguaje bastante más serio.
Webpack
Es una herramienta de agregación de recursos para aplicaciones web que permite generar una distribución única para desarrollo y producción. Esto va de la mano con la evolución del ECMAScript 2015 que separa tu código en múltiples archivos para luego de manera automática (siempre con un poco de configuración). Puedes ver los módulos y componentes de ES6 como piezas de lego, Webpack es el niño que los junta para crear un coche de carreras. Es un must hoy en día ya que grandes plataformas y frameworks como Angular y React lo utilizan.Gulp
¿Se acuerdan de la época donde había que copiar a mano e insertar todos los scripts en el index.html? Se compilaba sass con ruby y se copiaban manualmente todos los archivos a una nueva carpeta para llevar a producción… ni hablar de tener que refrescar el browser cada vez que se realizaba un cambio en el código. ¡Pues nunca más! Gulp es ese asistente supercool que hace todo por ti. Sólo tienes que darle las instrucciones en un archivo gulpfile.js de las tareas automatizadas que quieres realizar y ver, la magia.React
2017 es el año de los Web Components, y la librería React.js de Facebook lleva la delantera. Es la favorita en la comunidad Front-End, incluso por encima de Angular y Polymer y va maravillosamente de la mano con ES6. Una de las ventajas que tiene React aparte de su curva de aprendizaje sencilla es que solo provee la “V” del Modelo MVW (Modelo- Vista- Whatever), lo que no lo ata a un framework completo para poder funcionar sino que se puede integrar con otras arquitecturas como Flux/Redux y múltiples frameworks. Es muy demandada en el mercado por su rapidez y la facilidad para sacar versiones mantenibles de componentes individuales que son fáciles de mantener, mejora muchísimo la experiencia de usuario. Incluso para el mundo mobile en 2015 nació React Native que lleva las bondades de esta biblioteca al mundo de desarrollo móvil.Angular2
El robusto framework de Google ocupa junto a React el panorama de los must do de desarrollo Front-End en este 2017, la mayoría de empresas a nivel global piden como requisitos mínimos conocimientos de esta plataforma. Angular2 fue un cambio radical con respecto a su predecesor, en plan borrón y cuenta nueva, parece que esta vez Google dió con el clavo, a la comunidad y a nosotros, nos encanta. Orientado a Web Components, con Typescript (ES6 con esteroides) cuenta con todo lo necesario, manejo de formularios, routing, cliente HTTP, herramientas para Unit Testing, es decir, el pack completo para un buen desarrollo. Ha impulsado el desarrollo de Ionic v2 para desarrollo mobile que recién acaba de lanzar su versión final.Flexbox
Front-end no es sólo picar código, sino también traspasar fielmente el diseño a una maquetación. Por ello la evolución en tema de CSS (Estilos) es muy importante. La maquetación ha sufrido modas y diferentes etapas. La primera, maquetación por tablas, presente en todas esas espantosas páginas de intranet de los años 90 fue evolucionando a un modelo por bloques o cajas y posicionamientos absolutos, relativos. ¿Os acordáis de lo complicado que era alinear verticalmente un elemento como el formulario de un Login en cualquier pantalla y que quedará perfectamente centrado? Pues Flexbox es un nuevo modelo de layouts que hace este trabajo como si fuese magia con un par de atributos. Flexbox aplica los atributos al contenedor padre y no a los hijos, permitiendo alinear ya sea vertical u horizontalmente todos sus elementos hijos, ordenarlos, cambiar su orientación y muchas cosas mas. Poco a poco todas las web y frameworks visuales como Bootstrap y Material lo están utilizando, asi que sería bueno que le echaras un ojo.Unit testing
Una prueba unitaria verifica que un bloque de código se ejecuta como se espera. Las pruebas unitarias son usadas comúnmente en el desarrollo tradicional de software y ahora también en el desarrollo web. Por lo tanto, una prueba unitaria ejecuta un segmento de tu programa verificando la entrada y la salida del mismo. Estas pruebas permiten a los desarrolladores validar áreas individuales de un programa para ver dónde y cómo ocurre un error. En el ámbito del desarrollo web Front-End, no hay necesidad de elaborar pruebas sobre HTML y CSS ya que estos solo permiten definir la estructura y el estilo respectivamente. En cambio, JavaScript representa la parte lógica y es sobre este donde realizan dichas pruebas. Un punto de frecuente de debate es si emplear TDD o BDD para realizar pruebas unitarias. Desarrollo Orientado a Pruebas (TDD) es básicamente los mismo que Desarrollo Orientado a Comportamiento (BDD) pero con una terminología y aproximación diferente. La mayor diferencia entre ambos es que TDD sigue una implementación basada en pruebas y BDD se trata de concentrar más es el comportamiento. Algunas herramientas para pruebas de JavaScript son:- Jasmine.js
- QUnit
- Mocha.js
