JavaScript moderno y frameworks frontend para aplicaciones moviles
Este articulo resume la segunda parte de las notas sobre desarrollo frontend para aplicaciones web moviles. El foco esta en sintaxis ES6, librerias JavaScript, repaint, redraw, reflow, plantillas y el papel de los frameworks frontend cuando una interfaz debe funcionar en escritorio y dispositivos moviles.
Por que ES6 cambio el JavaScript cotidiano
ES6 hizo que JavaScript fuese mas facil de organizar en proyectos reales. Las arrow functions reducen codigo y conservan el contexto de this, let y const hacen el ambito mas predecible, y las clases aportan una estructura familiar para componentes, servicios y logica reutilizable.
La consecuencia practica no es solo una sintaxis mas limpia. Tambien resulta mas sencillo dividir una aplicacion web movil en piezas pequeñas: manejo de datos, renderizado, gestion de eventos y comunicacion con APIs.
Repaint, redraw y reflow
Las interfaces moviles son sensibles al trabajo de layout innecesario. Un reflow ocurre cuando el navegador debe calcular de nuevo la geometria de los elementos; un repaint ocurre cuando cambian pixeles visuales sin que tenga por que cambiar el layout. Demasiadas escrituras en el DOM, lecturas de layout o recalculos de estilos pueden hacer que una app se sienta lenta.
- Agrupar escrituras en el DOM en vez de cambiar el layout repetidamente.
- Evitar medir layout justo despues de modificar estilos.
- Preferir transformaciones CSS para animaciones cuando sea posible.
- Controlar listas y elementos repetidos en pantallas pequeñas.
Plantillas y frameworks frontend
Las plantillas permiten describir la interfaz a partir del estado en vez de ensamblarla manualmente con cadenas. Frameworks como Angular añaden rutas, inyeccion de dependencias, herramientas de build, formularios y composicion de componentes sobre esa idea. En aplicaciones moviles, el beneficio importante es la consistencia: el mismo estado deberia producir la misma vista independientemente del tamaño de pantalla.
La contrapartida es que un framework añade convenciones. Eso es util cuando el proyecto crece, pero exige una estructura clara: rutas, componentes, servicios, assets y metadatos deben mantenerse como parte de la aplicacion, no como fragmentos aislados.
Checklist de decision
- Usa JavaScript plano para widgets muy pequeños y con poco estado.
- Usa un framework cuando importen rutas, componentes reutilizables y coordinacion de estado.
- Mide rendimiento de layout en moviles reales, no solo en escritorio.
- Cuida el SEO si la pagina es publica: SSR, title, description y un solo H1 siguen importando.