Frameworks de Javascript y ejemplo para empezar

Los frameworks de JS, el requisito de moda en cualquier oferta de programador front que se precie. Angular, React y Vue.js son los más conocidos, pero si quieres investigar, verás que hay muchos más (Ember.js, Meteor, Mithril…)

Son los culpables de que muchos maquetadores / programadores se hayan estancado, pues supone un aprendizaje diferente al acostumbrado (el rey hasta su llegada era jQuery, era el día a día del frontend). Pero como ya avanzamos aquí, el estudio es un requisito fundamental en este sector, así que cosas como «no voy a llegar a casa después de trabajar y ponerme a estudiar» no tienen cabida por estos lares.

«¿Con cuál empiezo?» Pues si lo haces por el mero hecho de aprender, el que más te apetezca. Si lo haces para tu desarrollo profesional y con miras a que repercuta en tu salario, date una vuelta por las ofertas y busca el más solicitado.

Aquí vamos a contar cómo crear un aplicación de inicio con React, te invito a que lo hagas con el resto de frameworks que te llamen la atención, todos suelen tener una documentación bastante extensa y no te será difícil reproducir lo que hagamos aquí en los demás.

Lo primero, necesitas Node y NPM: Node es un entorno de tiempo de ejecución de JavaScript, y NPM es el sistema de gestión de paquetes por defecto para Node. «¿Cómo los instalo?» Pues tira de Google, que así te vas situando un poco y también entras más en detalle en ambos conceptos. La página de React nos dice que necesitaremos Node >= 14.0.0 y npm >= 5.6.

Con todo listo en tu equipo, abrimos la consola (CMD o la que tengas instalada y más te guste) y ejecutamos:

React, el framework mantenido por Facebook
npx create-react-app my-app
cd my-app
npm start

Sí, pone npx, no está mal escrito: es una herramienta de ejecución de paquetes del NPM que instalaste.

Y ya tienes levantada tu versión de desarrollo de tu primera aplicación en React. Recuerda que cuando acabes tu proyecto y quieras desplegar a producción, tendrás que generar una build. En desarrollo, se mantienen muchos archivos para poder debuggear; en producción, se compila y comprime al máximo todo. Para conseguir esta versión build, solo tienes que volver a tu consola:

npm run build

Y en directorio build verás tu compilación optimizada.

Te invito a que hagas lo mismo con Angular y Vue.js, verás que el proceso es casi el mismo. Ahora toca meterse en materia del framework que hayas elegido, por aquí iremos viendo cosas de vez en cuando, pero confío en tus habilidades para que, antes de que yo publique un post, seas capaz de hacer llamadas a una API, pintar los resultados… Ya me contarás.

¡Hasta la semana que viene!

Entradas relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada.