npm vs grunt vs gulp vs webpack vs .. ¡vaya lío de frontend!

¡Vaya lío de frontend! Existen 1000 herramientas con las que trabajar. Buscamos en internet, nos encontramos con muchísimos post sobre distintas tools para hacer frontend. Además, si somos más de backend puede “cortocircuitarnos”.

Hoy vamos a ver unas cuantas herramientas para mejorar nuestro flujo de trabajo en front. Como ya hemos visto, el “flujo de trabajo” de un programador es una tarea compleja a la que debemos dedicar tiempo para ser más productivos y aprovechar nuestro tiempo en tareas que aportan valor.

2968210374_0c6b4ba435_z
three-headed MacBook 2008

¿Por qué hablamos de esto? Imaginemos que estamos en un proyecto y usamos un framework css, da igual que sea foundation, bootstrap, algo de material design,… Además tenemos que usar un preprocesador para css Less o Saas y cómo no es necesario que usemos algo de javascript, al menos JQuery, o VueJS, o Angular, o mejor React ¿Cómo unimos todo esto? y encima tenemos que minimizarlo para ganar performance,…

Continúa leyendo “npm vs grunt vs gulp vs webpack vs .. ¡vaya lío de frontend!”

Aprendiendo a validar formularios con Liferay IDE y AlloyUI

Ya hemos visto en anteriores post como crear portlets, incluso hemos realizado un portlet pequeño con Spring y hemos utilizado Service Builder para conectarnos con la base de datos.

Ahora llega el momento de intentar “poner bonito” a nuestros portlet. He de decir que no se mucho de frontend, más bien sé lo básico. Aunque estoy aprendiendo mucho con el libro de Liferay in Action. En él hay un capitulo donde se habla de AlloyUI y la verdad, me ha parecido una utilidad muy interesante, así que voy a crear un pequeña introducción sobre AlloyUY.

Que es AlloyUI

En pocas palabras, AlloyUI es un metaframework  de interfaz, esto quizás suene un poco raro, pero tranquilo, ahora daremos más detalles.

El frontend de las páginas web (normalmente) se crean utilizando un combinación de 3 tecnologías: HTML, CSS y Javascript. Estas 3 tecnologías unidad constituyen la experiencia de Usuario (UX) para cualquier sitio web.

Básicamente, HTML proporciona la estructura de la página, CSS proporciona la capa visual, es decir cómo se representan visualmente los elementos y Javascript ofrece la interacción de los elementos de la página. Si algo se mueve, cambia de forma, se arrastra “es culpa” de Javascript.

Continúa leyendo “Aprendiendo a validar formularios con Liferay IDE y AlloyUI”