Flujos de trabajo para frontend

¿Cómo se distribuye una aplicación web?

¿Cómo se distribuye una aplicación web?

Una aplicación web, se distribuye descargando archivos directamente al navegador o al cliente.

Un conjunto de archivos usualmente es llamado "bundle"

La forma Old-school

  • Escribir todo el CSS inline o en un solo archivo
  • Escribir el JS inline o en un solo archivo
  • Un HTML por página
  • Tomar todos los archivos y subirlos a través de FTP al servidor

Consideraciones importantes

  • El tamaño de los archivos al transmitirse 
  • El tamaño de los archivos al ejecutarse
  • Partes críticas de la aplicación
  • Disponibilidad inmediata del contenido
  • SEO / Performance

¿Ingeniería inversa?

Debido a la naturaleza de la web sería muy sencillo inferir cómo está construida una aplicación y clonarla para uso malicioso, dando paso al "Phishing"

Construyendo bundles

Uglificación: Cambiar el nombre de variables y funciones de tal forma que sean ilegibles para el ojo humano

Minificación: Reducir el tamaño de los archivos, removiendo caracteres necesarios únicamente para el ojo humano

Construyendo bundles

Compresión: Eliminar la cantidad de bytes usados por un archivo, reutilizando bytes comunes a través de un algoritmo

Unificación: Reducir la cantidad de archivos que hacen funcionar una aplicación web

Pre-procesamiento

Basándonos en el principio DRY y las buenas prácticas de programación, es más sencillo separar una aplicación en archivos individuales e independientes que permitan el mantenimiento a largo plazo

Pre-procesamiento CSS

Supersets de CSS cuya finalidad es agregar características que simplifican la escritura/reutilización de las hojas de estilos 

  • SASS/SCSS
  • LESS
  • Stylus
  • Postcss

Pre-procesamiento JS

Supersets de JS/Lenguajes de scripting cuya finalidad es agregar características que simplifican la escritura/reutilización del código Javascript y que se compilan/transpilan a javascript 

  • Typescript
  • Elm
  • CoffeeScript
  • Flow
  • ....

Bundlers
Automatización

  • Vite
  • Webpack
  • Rollup
  • Parcel

 

  • Gulp
  • Grunt
  • Browserify
Made with Slides.com