JavaScript es incre铆ble pero el primer lanzamiento fue creado y dise帽ado en 10 d铆as. Nadie se imagin贸 que tomar铆a el control de la web y se transformar铆a en un gigante, pero que visiblemente necesita organizaci贸n, por lo que analizaremos concepto de agrupaci贸n para principiantes.
En este aspecto interviene el t茅rmino de agrupaci贸n. Las herramientas de agrupaci贸n como Webpack y Browsify organizan y colocan todo: JavaScript, HTML, CSS, im谩genes y todo lo dem谩s concentr谩ndolo en peque帽os archivos para ayudar a que su aplicaci贸n web funcione sin problemas. Estas herramientas de agrupaci贸n vienen dentro de Angular y React CLIs.
Detr谩s de los m贸dulos
JavaScript sali贸 con la capacidad de usar m贸dulos en ES6. Sin embargo, a los navegadores les tom贸 un poco de tiempo actualizarse. Chrome, por ejemplo, implement贸 este soporte a mediados de 2017, dos a帽os despu茅s de que los m贸dulos se lanzaran por primera vez como una funci贸n de idioma. A veces, la tecnolog铆a parece moverse r谩pido, pero su adaptaci贸n a veces puede ser lenta.
驴Qu茅 son exactamente los m贸dulos?
Los m贸dulos son un m茅todo para organizar cuerpos de c贸digo que permiten al desarrollador segmentar y digerir una parte en particular de la aplicaci贸n. Brinda la capacidad de usar bits de c贸digo en un archivo y crear c贸digo para usarlo en otro. El objetivo de estos es dar a los desarrolladores la capacidad de crear de manera sencilla modularidad.
Sin embargo, la importaci贸n es otro problema. En circunstancias normales, JavaScript se usa en el front-end junto con HTML y CSS. Esto significa que si se ejecuta el c贸digo, se necesitar谩n etiquetas de script. Lo siguiente que se debe tener presente es que la p谩gina est谩 llena de peque帽os m贸dulos escritos. Empeora cuando se comienza agregar bibliotecas que tienen sus propias dependencias. Ahora imagina tener que averiguar cu谩l es necesario y cu谩l no, y en qu茅 contexto de representaci贸n.
Las cosas se pueden complicar
En este punto entra el agrupamiento. Las herramientas de agrupamiento se ocupan de todo y empaquetan las cosas, lo minimizan y aseguran el servicio de limpieza para mantener las cosas funcionando como se espera.
Agruparse de forma nativa
No existe una forma nativa de ‘construir’ una aplicaci贸n JavaScript. No es como C ++ o Java, donde se necesita compilar el programa para que funcione. JavaScript se ejecuta sobre la marcha en el navegador, por lo que la eficiencia no es parte del proceso.
‘Construir’ una aplicaci贸n JavaScript va relacionado con minimizar la aplicaci贸n actual y crear una salida optimizada. Esto no es sobre la legibilidad o comprensi贸n humana, acortando sus valores y variables en los lugares que puede. Las herramientas de agrupaci贸n como Webpack simplemente reempacan ECMAScript que es una forma m谩s eficiente para el archivo final producido. La consola de confianza podr谩 ser el portal para realizar este acto de magia.
Un paquete es la mejor salida de un proceso que fusiona todo en pocos archivos de la manera m谩s optimizada.
Webpack
Cada herramienta de agrupaci贸n tiene su m茅todo para compactar cosas en un ‘paquete’. Webpack se integra en proyectos generados por Angular CLI y act煤a como la herramienta que pone los activos: JavaScript, im谩genes, fuentes, CSS y dem谩s en algo llamado como gr谩fico de dependencia.
En los primeros d铆as, mantuvimos las dependencias de JavaScript incluy茅ndolas a trav茅s de etiquetas de script en la p谩gina HTML. Estas etiquetas de script tambi茅n tienen que estar en un orden particular o de lo contrario la aplicaci贸n no funcionar谩.
Si codificaste codificar a principios de la d茅cada de 2000, los siguientes includes podr铆an ser familiares:
<script src=”jquery.min.js”></script>
<script src=”jquery.some.plugin.js”></script>
<script src=”main.js”></script>
<script src=”header.js”></script>
<script src=”mainbody.js”></script>
<script src=”starpower.js”></script>
<script src=”slowflakeeffect.js”></script>
<script src=”carousel.js”></script>
<script src=”amillionmorefileslater.js”></script>
<script src=”footer.js”></script>
Esto puede parecer un campo mental para los desarrolladores, especialmente cuando los scripts se dividen entre la parte superior e inferior de la p谩gina. Las solicitudes HTTP excesivas tambi茅n reducen la velocidad de la p谩gina.
Un gr谩fico de dependencia es posible mediante m贸dulos ES6 que nos permiten crear peque帽os archivos que describen detalladamente lo que necesita. Cuando se ejecuta Webpack en la aplicaci贸n, se puede recorrer y crear una versi贸n de c贸digo de un gr谩fico de dependencia que asigna los requisitos para un bloque de c贸digo.
La diferencia entre Webpack, Grunt y Gulp es que las dos 煤ltimas no admiten im谩genes y solo funcionan con archivos, tampoco tienen un concepto gr谩fico de dependencia. Los beneficios del gr谩fico de dependencia de Webpack es que elimina activos muertos, es decir los fragmentos de c贸digo extraviados que se escribieron pero que nunca se utilizaron; s贸lo crea el CSS y las im谩genes que realmente necesita.
El 煤nico inconveniente con Webpack es que la documentaci贸n no es tan buena. Sin embargo, React y Angular vienen con Webpack precargado en la aplicaci贸n CLI, lo que quiere decir que solo se necesita ejecutar el comando de compilaci贸n y todo estar谩 listo para ir dentro de la carpeta dist.
No es la mejor pr谩ctica enviar la solicitud tal cual. Parecer铆a r谩pido usar localhost pero en realidad, hay vigas ocultas para compilar y unir la aplicaci贸n que se ha creado. El espacio muerto y c贸digo eventualmente se sumar谩n al tama帽o final y cuando se trata de velocidad, cuanto m谩s r谩pido se pueda cargar su aplicaci贸n, mejor ser谩 para su experiencia de usuario.
La agrupaci贸n es un concepto importante y aunque la mayor铆a est谩 automatizada, sigue siendo bueno conocer lo que se hace exactamente en el proceso.
Le铆ste: Concepto de agrupaci贸n para principiantes, te recomendamos: C贸mo automatizar el perfil de GitHub Readme
Te invitamos a que nos sigas en nuestras redes sociales: Facebook, Twitter, Instagram y Youtube con el perfil:聽@tortugacode
