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!

principal-herramientasES6/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 plataformaAngular2 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

VS Code

Hablando de IDE’s y herramientas de desarrollo, en Front-End han coexistido dos grandes editores de texto: Sublime Text y Atom.

Personalmente, estuve desarrollando con ambos, hasta que recientemente me cambie de Atom a Visual Studio Code. ¿Por qué? Más que todo rendimiento, ya no podía con el hecho de que el editor se quedara colgado al abrir un archivo grande.

Quién diría que algo de Microsoft, (si, lo sé, Microsoft) fuese referencia para la comunidad front-end hoy en dia y es que Microsoft son los creadores también de Typescript (el ES6 tipado que usa Angular2) por lo que dulcemente van de la mano

VS Code ofrece todo lo bueno de Sublime y Atom pero más estable. Ahora que quieres adentrarte al mundo del Typescript sería una muy buena herramienta para empezar.

UI/UX con accesibilidad

Es una realidad que día a día hay más personas con limitaciones y discapacidades, por eso, aparte de ofrecer una experiencia de usuario respetable, es necesario adaptar las web y sus diseños a las personas que enfrentan estos problemas y darles acceso a todo lo que el mundo web y móvil tiene para ofrecer.

Pruebas de contraste para personas con daltonismo, elementos con audio para guiar al usuario en las interfaces son sólo unas pocas características que se pueden ofrecer.

Amazon web Services

Uno puede pensar que Amazon solo sirve para comprar ese adaptador de cable, pero Amazon es mucho mas. Es uno de los referentes en servicios de cloud hoy en día junto a Digital Ocean. 

AWS ofrece servicios de cloud computing escalables (literalmente un montón de servicios para todo)

Desde una red social, hasta bigdata, un cms o el backend de cualquier aplicación es posible utilizando Amazon Web Services, por lo tanto, las empresas, cada vez solicitan mas y mas experiencia desplegando soluciones en este mundo cloud.

Hay muchos cursos preparativos para la certificación de AWS, es algo que daría un salpimentado importante a tu curriculum, asi que es importante considerarlo.

2017 es un año muy retador para el desarrollador Web y para las empresas que se dedican a este negocio. Es momento de dejar la zona de confort y evolucionar a este nuevo pack de tecnologías.

Si quieres tener una visión más amplia esta este excelente mindmap de LeanCode.academy

 

Recommended Posts

Leave a Comment