Cómo mejorar el performance | Boletín de Frontend #3

Llega nuestra tercera edición para compartir información sobre distintas prácticas que te ayudarán a mejorar el performance de tu aplicación web, algunas novedades del ecosistema, eventos próximos de frontend y herramientas recomendadas que harán más efectivo tu día a día.

Mejorando el performance

Un tema de alta importancia en Htech para nuestros proyectos es, además de garantizar su correcto funcionamiento, lograr y mantener un nivel alto de performance. Es decir, una carga y respuesta rápida para que el usuario pueda interactuar con el sitio de forma efectiva.

Esto no es algo que se logre solo trabajando en el desarrollo con normalidad. Requiere prestarle atención, aplicar ciertas prácticas y medir constantemente.

Algunas recomendaciones son:

Dividir los archivos compilados en pedazos menores, por vista, por ejemplo, para que cada vista solo cargue lo necesario, especialmente en la primera página que el usuario ve, normalmente la landing page. Esto es vital, pues si el sitio se tarda más de 2 segundos en estar listo para usarse, la tasa de rebote, es decir, el porcentaje de usuarios que se va, inmediatamente aumentará considerablemente.

Relacionado a este primero, algunas funcionalidades no necesitan cargarse desde el principio al ingresar en una vista, se pueden cargar en paralelo o al momento de dar clic en un botón, por dar un ejemplo. Esto hace que los pedazos que se cargan durante el flujo sean más ligeros aún.

Revisar el peso de las imágenes y archivos multimedia. Si bien se puede mediar con estrategias para mantener la calidad de los assets, al tiempo que se mantienen ligeros, también es importante analizar qué y cuándo se carga, solo en el momento preciso, y además, que el sitio no se perciba incompleto mientras sucede (manejar estados de carga y esqueletos apropiadamente).

También ayuda comprimir el código compilado con estrategias como gzip o brotli, para que la información transmitida del servidor al cliente sea menor y suceda más rápido.

Prevenir el bloqueo de la aplicación es clave. Esto sucede cuando ciertos procesos, especialmente complejos, o cargas de funcionalidades que provienen de herramientas externas o de otra url, hacen que el sitio se demore más en estar completamente listo para ser usado o se percibe lento. Esto afecta, por supuesto, en la tasa de rebote. Se pueden configurar dichas herramientas y procesos para que carguen en paralelo evitando dicho bloqueo.

Para este escenario hay que considerar, cuando sea viable, diferir estas funcionalidades a un medio paralelo que conocemos como webworker. Éste ejecutará lo necesario en segundo plano y sin apenas bloquear al centro de la aplicación.

Hay más, pero en resumen, la clave es reducir los pesos de lo que se transfiere o carga, y prevenir bloquear el funcionamiento principal de la plataforma.

Buenas prácticas, actualizaciones y novedades

Buenas prácticas para testing en JavaScript

javascript-testing-best-practices/readme-es.md at master · goldbergyoni/javascript-testing-best-practices
📗🌐 🚢 Comprehensive and exhaustive JavaScript & Node.js testing best practices (April 2022) - javascript-testing-best-practices/readme-es.md at master · goldbergyoni/javascript-testing-best-prac...

Pinia vs Vuex

Complex Vue 3 state management made easy with Pinia - LogRocket Blog
Build a basic blog engine using Pinia, a state management tool for Vue apps, and its main features, including state, getters, and actions.

Node.js se actualiza a la versión 18

Node.js 18 is now available! | Node.js
Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine.

React Boilerplate

⚛️ ReactJS folder structure + Boilerplate.
There are many folders structure to follow in ReactJS , And you might be confused which one you have...

Próximos eventos

En puerta hay algunos eventos top del ecosistema JavaScript y frameworks. Estaremos atentos a las novedades que surjan.

VueConf US / 8 - 10 de Junio

VueConf US 2022 – June 8-10 in Fort Lauderdale, FL | Vue.js Conference
VueConf US 2022 – June 8-10 in Fort Lauderdale, FL | Vue.js Conference

OpenJS World / 6 - 10 de junio

OpenJS World | Linux Foundation Events
June 6-10 Austin, Texas register sponsor EXPLORE THE SCHEDULE OpenJS Foundation’s annual event brings together the JavaScript and web ecosystem Learn and engage with leaders building modern…

JSNation / 26 - 20 de Junio

JSNation Conference 2022
JSNation Amsterdam is conference focusing exclusively on JavaScript development. At our conference, inspiring talks meet fresh ideas and good people - you’ll hear all you need to know about the latest trends in JS tech, see stellar speakers, meet new friends and colleagues, and connect with key peop…

React Summit / 17 y 21 de Junio

React Summit – The Biggest React Conference Worldwide
React Summit is an in-person and remote first (hybrid) conference of all things React, gathering OSS authors, top trainers and speakers, as well as web engineers across the globe to meet in Amsterdam and online.

Vue.js Forge / 29 - 30 de Junio

Vue.js Forge - The largest hands-on Vue.js Event | Join FREE
The largest hands-on Vue.js event, offering 1000s of developers the opportunity to network, receive expert advice and learn in this free virtual conference.

Herramientas recomendadas

Les compartimos, como siempre, algunas herramientas que pueden ayudarte en el día a día.

code-complexity
Measure the churn/complexity score. Higher values mean hotspots where refactorings should happen.. Latest version: 4.1.0, last published: 8 months ago. Start using code-complexity in your project by running `npm i code-complexity`. There are no other projects in the npm registry using code-complexit…
Refactoring UI
Learn how to design awesome UIs by yourself using specific tactics explained from a developer’s point-of-view.
CSS loaders and spinners
CSS Loader is a collection of different types of loaders, spinners and their source code. There are no image dependencies in this. It’s is done using pure CSS. Hence it is easily customization too.
Announcing Rome Formatter
Release of Rome Formatter, a super fast formatter for JavaScript and TypeScript