Cosas que aprendí mientras escribía aplicaciones de JavaScript de alto rendimiento

Rate this content
Bookmark

Durante los últimos meses, desarrollé Lyra, un motor de búsqueda de texto completo increíblemente rápido escrito íntegramente en TypeScript. Me sorprendió ver cómo podía competir con soluciones escritas en Rust, Java y Golang, todos idiomas conocidos por ser típicamente "más rápidos que JavaScript"... ¿pero es eso cierto? En esta masterclass, compartiré algunas lecciones que aprendí mientras desarrollaba aplicaciones complejas y críticas para el rendimiento en JavaScript.

FAQ

Elasticsearch es una plataforma de búsqueda de texto completo que utiliza Apache Lucene como su motor de búsqueda subyacente. Es importante porque ofrece una interfaz RESTful, capacidades de sistema de discapacidad, fragmentación, consistencia de data, monitoreo y gestión de clústeres, facilitando así el manejo de grandes volúmenes de datos.

El ponente quería aprender más sobre los motores de búsqueda de texto completo y resolver algunos problemas personales que tenía con software existente como Elasticsearch y Algolia, que encontraba difíciles de desplegar, actualizar y personalizar, entre otros retos.

Con Elasticsearch, el ponente encontró desafíos como la dificultad de despliegue, actualización, gran consumo de memoria y CPU, y costos de gestión. En el caso de Algolia, los problemas incluían el alto costo a escala y su naturaleza de caja negra por ser de código cerrado.

Orama es un motor de búsqueda de texto completo, de código abierto y gratuito, diseñado para ejecutarse en cualquier entorno que soporte JavaScript. Ofrece características como soporte para conjuntos de caras, filtrado, tipo de tolerancia, derivación, y soporte para múltiples idiomas, entre otros.

Para optimizar rendimiento en JavaScript, se sugiere evitar funciones polimórficas en bucles, entender y utilizar correctamente el monomorfismo, y explorar bibliotecas como '2-Fast Properties' que mejora la eficiencia al editar la forma de un objeto.

Orama ofrece ventajas como la extensibilidad en JavaScript puro, velocidad de búsqueda medida en microsegundos, y la capacidad de ejecutarse en cualquier entorno JavaScript. Además, al estar basado en una CDN, elimina la necesidad de gestión de clústeres y aprovisionamiento de servidores.

Michele Riva
Michele Riva
31 min
14 Apr, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta masterclass explora la creación de un motor de búsqueda de texto completo en JavaScript, destacando los desafíos con los motores de búsqueda existentes como Algolia y las ventajas de usar JavaScript. El orador enfatiza la importancia de la optimización de código y las técnicas de mejora del rendimiento en JavaScript. La charla también discute la evolución del motor de búsqueda Lyra en el proyecto de código abierto Orama, que ofrece un motor de búsqueda de texto completo rico en características y de alto rendimiento para JavaScript. El orador aborda preguntas sobre la elección del lenguaje, la escalabilidad y la implementación, y muestra los beneficios de implementar una base de datos inmutable en una CDN.

1. Introducción a la búsqueda de texto completo

Short description:

Bienvenidos a mi charla sobre Cómo interrumpir la búsqueda de texto completo con JavaScript. Me encanta Elasticsearch por su rendimiento y escalabilidad. Elasticsearch se basa en Apache Lucene, una potente biblioteca de búsqueda de texto completo. Sin embargo, también me encantan otros motores de búsqueda como Algolia, MeliSearch y MiniSearch. Decidí recrear un motor de búsqueda con mi equipo para aprender más y abordar problemas personales que tenía con el software existente, como dificultades de despliegue, actualizaciones, uso de memoria y costos elevados.

Bienvenidos a todos a mi charla, Interrumpiendo la búsqueda de texto completo con JavaScript. Ya me han presentado, así que no seguiré con eso. Y estoy aquí para hablar de la búsqueda de texto completo porque es un dominio que me encanta y algo que realmente me mantiene despierto por la noche porque me gusta tanto que no puedo dejar de pensar en ello. Y hay una buena razón por la que me gusta tanto, y es principalmente por Elasticsearch. ¿Cuántos de ustedes conocen Elasticsearch? Todos. ¿Cuántos de ustedes han usado Elasticsearch? De nuevo, casi todos. Y debo decir que me introduje en el software de código abierto principalmente por Elasticsearch. Así que tengo una relación muy apasionada con él y tuve el placer y el honor de trabajar en Apache You Know Me, que es una plataforma de data de clientes que utiliza Elasticsearch como una database líder en su infraestructura. Y cuando era un poco más junior, no sé, hace casi 10 años, me impresionó el rendimiento de un sistema tan complejo y distribuido. Me impresionó ver que podía lanzar millones y millones de registros contra él y no degradaría el rendimiento tanto. Eso fue realmente impresionante para mí, y es ahí donde decidí entrar en el software de código abierto e intentar entender cómo funciona Elasticsearch. Así que mi primera pregunta como un ingeniero junior curioso fue ¿cómo es eso posible? Quiero decir, ¿cómo puede un software mantener un rendimiento tan bueno incluso con mil millones de registros? Más tarde descubrí que Elasticsearch no es en realidad un motor de búsqueda de texto completo, sino Apache Lucene. Así que Apache Lucene es la biblioteca de búsqueda de texto completo, que Elasticsearch envuelve proporcionando una interfaz RESTful, capacidades de sistema de discapacidad, fragmentación, consistencia de data, monitoreo, gestión de clústeres y así sucesivamente. Así que un gran saludo a Elasticsearch.

Y antes de continuar, permítanme aclarar que de nuevo me encanta Elasticsearch y me encanta Algolia. Me encanta MeliSearch. Me encanta MiniSearch. Me encanta cada motor de búsqueda que existe. Y la razón por la que, por supuesto, estaré hablando de algo que recreé con mi equipo. La razón por la que hice eso en primer lugar es porque quería aprender más y, por supuesto, quería resolver algunos problemas muy personales que tenía con ese software. Así que nada personal. Por favor, si estás usando Elasticsearch, sigue usándolo, si te sientes cómodo con él. No hay problema con eso, por supuesto. Estaba hablando del hecho de que tenía algunos problemas personales con Elasticsearch. Mi primer problema personal era que es bastante difícil de desplegar, en mi opinión. Podría ser simplificado. Difícil de actualizar. Tiene una gran huella de memoria. El consumo de CPU se vuelve terrible tan pronto como

2. Desafíos con Java y Algolia

Short description:

No me gusta Java. Prefiero JavaScript. Algolia es caro y difícil de extender. Hacer software simple es extremadamente difícil, pero como ingenieros, tenemos que intentarlo.

añades más data. Es realmente costoso de gestionar y ejecutar. Difícil de extender y personalizar. Pero lo más importante, Java. Sabía que la gente se reiría de esto. Pero es una preocupación real, de hecho. Como, no me gusta Java. He estado programando en Java un poco. Prefiero JavaScript para siempre y siempre. También, probé diferentes soluciones, como Algolia, que es, de nuevo, un software extremadamente extraordinario. Y no estoy exagerando aquí. Los problemas que tuve con Algolia es que es increíblemente caro a scale. Es una gran caja negra, ¿verdad? Es de código cerrado. Y por lo tanto, es difícil de extender e intentar entender qué está pasando con él. Pero de nuevo, como dije, estos son mis problemas personales con ellos. Y tal vez cuando tuve estos problemas en primer lugar, era un poco demasiado inexperto en ese dominio. Elasticsearch y Algolia eran un poco demasiado para mí. Tal vez vale la pena tener tales problemas, ¿verdad? Porque la gente los está usando. Así que debe haber una razón por qué. Y también entiendo ahora que soy un poco más experimentado, que hacer software simple es extremadamente difícil. Pero siento que, como ingenieros,

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Una Guía del Comportamiento de Renderizado de React
React Advanced Conference 2022React Advanced Conference 2022
25 min
Una Guía del Comportamiento de Renderizado de React
Top Content
React es una biblioteca para "renderizar" UI a partir de componentes, pero muchos usuarios se encuentran confundidos acerca de cómo funciona realmente el renderizado de React. ¿Qué significan términos como "renderizado", "reconciliación", "Fibers", y "committing"? ¿Cuándo ocurren los renderizados? ¿Cómo afecta el Contexto al renderizado, y cómo las bibliotecas como Redux causan actualizaciones? En esta charla, aclararemos la confusión y proporcionaremos una base sólida para entender cuándo, por qué, y cómo React renderiza. Veremos: - Qué es realmente el "renderizado" - Cómo React encola los renderizados y el comportamiento de renderizado estándar - Cómo se utilizan las claves y los tipos de componentes en el renderizado - Técnicas para optimizar el rendimiento del renderizado - Cómo el uso del contexto afecta al comportamiento del renderizado - Cómo las bibliotecas externas se integran en el renderizado de React
Escalando con Remix y Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Escalando con Remix y Micro Frontends
Top Content
¿Tienes un producto grande construido por muchos equipos? ¿Estás luchando para lanzar a menudo? ¿Se convirtió tu frontend en un monolito inmantenible masivo? Si, como yo, has respondido sí a cualquiera de esas preguntas, ¡esta charla es para ti! Te mostraré exactamente cómo puedes construir una arquitectura de micro frontend con Remix para resolver esos desafíos.
Acelerando tu aplicación React con menos JavaScript
React Summit 2023React Summit 2023
32 min
Acelerando tu aplicación React con menos JavaScript
Top Content
¿Demasiado JavaScript te está agobiando? Los nuevos marcos que prometen no usar JavaScript parecen interesantes, pero tienes una aplicación React existente que mantener. ¿Qué tal si Qwik React es tu respuesta para un inicio de aplicaciones más rápido y una mejor experiencia de usuario? Qwik React te permite convertir fácilmente tu aplicación React en una colección de islas, que pueden ser renderizadas en el servidor y rehidratadas con retraso, e incluso en algunos casos, se puede omitir la rehidratación por completo. Y todo esto de manera incremental sin una reescritura.
Concurrencia en React, Explicada
React Summit 2023React Summit 2023
23 min
Concurrencia en React, Explicada
Top Content
¡React 18! ¡Funciones concurrentes! Tal vez ya hayas probado las nuevas APIs como useTransition, o tal vez solo hayas oído hablar de ellas. Pero, ¿sabes cómo React 18 logra las mejoras de rendimiento que trae consigo? En esta charla, echemos un vistazo bajo el capó de las características de rendimiento de React 18: - Cómo React 18 reduce el tiempo que tu página permanece congelada (también conocido como TBT) - Qué sucede exactamente en el hilo principal cuando ejecutas useTransition() - Cuál es la trampa con las mejoras (¡no hay torta gratis!), y por qué Vue.js y Preact se negaron rotundamente a lanzar algo similar
El Futuro de las Herramientas de Rendimiento
JSNation 2022JSNation 2022
21 min
El Futuro de las Herramientas de Rendimiento
Top Content
Nuestra comprensión del rendimiento y la experiencia del usuario ha evolucionado mucho a lo largo de los años. Las herramientas de desarrollo web necesitan evolucionar de manera similar para asegurarse de que sean centradas en el usuario, accionables y contextuales donde se refiere a las experiencias modernas. En esta charla, Addy te guiará a través de cómo Chrome y otros han estado pensando en este problema y qué actualizaciones han estado haciendo a las herramientas de rendimiento para reducir la fricción para construir grandes experiencias en la web.
Componentes de Full Stack
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Componentes de Full Stack
Top Content
Remix es un marco de trabajo web que te ofrece el modelo mental simple de una aplicación de múltiples páginas (MPA) pero el poder y las capacidades de una aplicación de una sola página (SPA). Uno de los grandes desafíos de las SPA es la gestión de la red que resulta en una gran cantidad de indirecciones y código defectuoso. Esto es especialmente notable en el estado de la aplicación que Remix elimina por completo, pero también es un problema en los componentes individuales que se comunican con un punto final de backend de un solo propósito (como una búsqueda de combobox, por ejemplo).
En esta charla, Kent demostrará cómo Remix te permite construir componentes de interfaz de usuario complejos que están conectados a un backend de la manera más simple y poderosa que hayas visto. Dejándote tiempo para relajarte con tu familia o lo que sea que hagas para divertirte.

Workshops on related topic

Masterclass de Depuración de Rendimiento de React
React Summit 2023React Summit 2023
170 min
Masterclass de Depuración de Rendimiento de React
Top Content
Featured WorkshopFree
Ivan Akulov
Ivan Akulov
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Vería una interacción lenta, intentaría una optimización aleatoria, vería que no ayudaba, y seguiría intentando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Haría una grabación en Chrome DevTools o React Profiler, la examinaría, intentaría hacer clic en cosas aleatorias, y luego la cerraría frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos a analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, estaremos cubriendo el rendimiento de la interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)
IA a demanda: IA sin servidor
DevOps.js Conf 2024DevOps.js Conf 2024
163 min
IA a demanda: IA sin servidor
Top Content
Featured WorkshopFree
Nathan Disidore
Nathan Disidore
En esta masterclass, discutimos los méritos de la arquitectura sin servidor y cómo se puede aplicar al espacio de la IA. Exploraremos opciones para construir aplicaciones RAG sin servidor para un enfoque más lambda-esque a la IA. A continuación, nos pondremos manos a la obra y construiremos una aplicación CRUD de muestra que te permite almacenar información y consultarla utilizando un LLM con Workers AI, Vectorize, D1 y Cloudflare Workers.
Construyendo aplicaciones web que iluminan Internet con QwikCity
JSNation 2023JSNation 2023
170 min
Construyendo aplicaciones web que iluminan Internet con QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
Construir aplicaciones web instantáneas a gran escala ha sido elusivo. Los sitios del mundo real necesitan seguimiento, análisis y interfaces y interacciones de usuario complejas. Siempre comenzamos con las mejores intenciones pero terminamos con un sitio menos que ideal.
QwikCity es un nuevo meta-framework que te permite construir aplicaciones a gran escala con un rendimiento de inicio constante. Veremos cómo construir una aplicación QwikCity y qué la hace única. El masterclass te mostrará cómo configurar un proyecto QwikCity. Cómo funciona el enrutamiento con el diseño. La aplicación de demostración obtendrá datos y los presentará al usuario en un formulario editable. Y finalmente, cómo se puede utilizar la autenticación. Todas las partes básicas para cualquier aplicación a gran escala.
En el camino, también veremos qué hace que Qwik sea único y cómo la capacidad de reanudación permite un rendimiento de inicio constante sin importar la complejidad de la aplicación.
Next.js 13: Estrategias de Obtención de Datos
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Estrategias de Obtención de Datos
Top Content
WorkshopFree
Alice De Mauro
Alice De Mauro
- Introducción- Prerrequisitos para la masterclass- Estrategias de obtención: fundamentos- Estrategias de obtención – práctica: API de obtención, caché (estática VS dinámica), revalidar, suspense (obtención de datos en paralelo)- Prueba tu construcción y sírvela en Vercel- Futuro: Componentes de servidor VS Componentes de cliente- Huevo de pascua de la masterclass (no relacionado con el tema, destacando la accesibilidad)- Conclusión
Uso de CodeMirror para construir un editor de JavaScript con Linting y AutoCompletado
React Day Berlin 2022React Day Berlin 2022
86 min
Uso de CodeMirror para construir un editor de JavaScript con Linting y AutoCompletado
Top Content
WorkshopFree
Hussien Khayoon
Kahvi Patel
2 authors
Usar una biblioteca puede parecer fácil a primera vista, pero ¿cómo eliges la biblioteca correcta? ¿Cómo actualizas una existente? ¿Y cómo te abres camino a través de la documentación para encontrar lo que quieres?
En esta masterclass, discutiremos todos estos puntos finos mientras pasamos por un ejemplo general de construcción de un editor de código usando CodeMirror en React. Todo mientras compartimos algunas de las sutilezas que nuestro equipo aprendió sobre el uso de esta biblioteca y algunos problemas que encontramos.
Pruebas de Aplicaciones Web utilizando Cypress
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Pruebas de Aplicaciones Web utilizando Cypress
WorkshopFree
Gleb Bahmutov
Gleb Bahmutov
Este masterclass te enseñará los conceptos básicos de cómo escribir pruebas de extremo a extremo utilizando Cypress Test Runner.
Cubriremos la escritura de pruebas, abarcando todas las características de la aplicación, estructurando las pruebas, interceptando solicitudes de red y configurando los datos del backend.
Cualquier persona que conozca el lenguaje de programación JavaScript y tenga NPM instalado podrá seguir el masterclass.