Antes que te vayas
Inscríbete en nuestro curso gratuito de Laravel
En este tutorial vamos a aprender qué es webpack, su importancia, y cómo podemos empezar a usarlo en nuestros desarrollos.
En lo que respecta al desarrollo web en el lado del cliente, el uso de Javascript es indispensable para lograr una interacción con los usuarios que visitan y usan nuestras aplicaciones web.
Decimos "aplicaciones web" y no "páginas web" porque una página web es en general un sitio web informativo. Mientras que "aplicaciones web" es un término que demanda un mayor nivel de interacción con el usuario.
¿Cómo así?
Nuestra aplicación web va a reaccionar ante los eventos que desata un usuario.
Un usuario que hace clic aquí y allá, a fin de gestionar su información.
Como ejemplo de aplicaciones tenemos a Facebook y Gmail. Podemos editar nuestros datos, y somos usuarios. No simples visitantes como ocurre generalmente en un portal de noticias.
Entonces, en un mundo cada vez más exigente, se requiere que estas aplicaciones permitan una interacción lo más fluida posible.
Eso implica que no hayan actualizaciones en el navegador.
Y la solución ideal es el desarrollo de Single Page Applications
.
Es decir, aplicaciones que carguen una única vez y que demanden nuestros datos al servidor conforme se requiera, en segundo plano.
El servidor continúa encargándose de todas las validaciones serias, sin embargo, en vez de responder como habitualmente lo hace, ya no devuelve código HTML con datos, sino simplemente datos.
Es ahora una tarea de la tecnología de lado del cliente renderizar los contenidos (y exacto, esto se logra con Javascript).
En resumen:
Eso es lo que demandamos nosotros mientras desarrollamos. Pero a final de cuentas, antes de subir a producción requerimos de otros procesos:
Webpack es un module bundler
, es decir, un empaquetador de módulos.
Hace un momento hablamos que muchos archivos vienen a ser unos pocos, al final.
Generalmente estos archivos van a representar módulos, cuando de Javascript se trata.
Cada módulo representa un conjunto de código que cumple con un objetivo determinado.
Módulos dependen de otros, y esta gestión de dependencias es posible gracias a algún module system
de Javascript (es decir, una especificación sobre cómo importar y exportar estos módulos).
Si no estás familiarizado con el tema de módulos en Javascript, por favor lee este artículo antes de continuar.
Webpack permite optimizar todo este proceso:
Aprender Webpack, o alguna otra herramienta equivalente (que nos permita empaquetar módulos y optimizar todo este proceso), es indispensable para empezar a usar adecuadamente un framework Javascript moderno.
Tenemos muchas alternativas:
Nuestra elección dependerá del tipo de aplicación que pensamos desarrollar, y las ventajas que esperamos obtener (cada framework tiene su propio ecosistema).
Tenemos una serie sobre Webpack. Si te ha parecido interesante, por favor ayúdame a compartir el artículo, y luego:
Domina JS con este curso práctico y completo! Fundamentos, ejemplos reales, ES6+, POO, Ajax, Webpack, NPM y más.
Ingresar al cursoDesarrollemos un Messenger! Aprende sobre Channels, Queues, Vuex, JWT, Sesiones, BootstrapVue y mucho más.
Ingresar al cursoAprende Laravel desde cero y desarrolla aplicaciones web reales, en tiempo récord, de la mano de Laravel.
Ingresar al cursoInscríbete en nuestro curso gratuito de Laravel
Cargando comentarios ...