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.

This talk has been presented at Node Congress 2023, check out the latest edition of this JavaScript Conference.

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 2022React Advanced 2022
25 min
Una Guía del Comportamiento de Renderizado de React
Top Content
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
Escalando con Remix y Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Escalando con Remix y Micro Frontends
Top Content
This talk discusses the usage of Microfrontends in Remix and introduces the Tiny Frontend library. Kazoo, a used car buying platform, follows a domain-driven design approach and encountered issues with granular slicing. Tiny Frontend aims to solve the slicing problem and promotes type safety and compatibility of shared dependencies. The speaker demonstrates how Tiny Frontend works with server-side rendering and how Remix can consume and update components without redeploying the app. The talk also explores the usage of micro frontends and the future support for Webpack Module Federation in Remix.
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
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Concurrencia en React, Explicada
React Summit 2023React Summit 2023
23 min
Concurrencia en React, Explicada
Top Content
React 18's concurrent rendering, specifically the useTransition hook, optimizes app performance by allowing non-urgent updates to be processed without freezing the UI. However, there are drawbacks such as longer processing time for non-urgent updates and increased CPU usage. The useTransition hook works similarly to throttling or bouncing, making it useful for addressing performance issues caused by multiple small components. Libraries like React Query may require the use of alternative APIs to handle urgent and non-urgent updates effectively.
Entendiendo la Arquitectura Fiber de React
React Advanced 2022React Advanced 2022
29 min
Entendiendo la Arquitectura Fiber de React
Top Content
This Talk explores React's internal jargon, specifically fiber, which is an internal unit of work for rendering and committing. Fibers facilitate efficient updates to elements and play a crucial role in the reconciliation process. The work loop, complete work, and commit phase are essential steps in the rendering process. Understanding React's internals can help with optimizing code and pull request reviews. React 18 introduces the work loop sync and async functions for concurrent features and prioritization. Fiber brings benefits like async rendering and the ability to discard work-in-progress trees, improving user experience.
El Futuro de las Herramientas de Rendimiento
JSNation 2022JSNation 2022
21 min
El Futuro de las Herramientas de Rendimiento
Top Content
Today's Talk discusses the future of performance tooling, focusing on user-centric, actionable, and contextual approaches. The introduction highlights Adi Osmani's expertise in performance tools and his passion for DevTools features. The Talk explores the integration of user flows into DevTools and Lighthouse, enabling performance measurement and optimization. It also showcases the import/export feature for user flows and the collaboration potential with Lighthouse. The Talk further delves into the use of flows with other tools like web page test and Cypress, offering cross-browser testing capabilities. The actionable aspect emphasizes the importance of metrics like Interaction to Next Paint and Total Blocking Time, as well as the improvements in Lighthouse and performance debugging tools. Lastly, the Talk emphasizes the iterative nature of performance improvement and the user-centric, actionable, and contextual future of performance tooling.

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 🤐)
Domina los Patrones de JavaScript
JSNation 2024JSNation 2024
145 min
Domina los Patrones de JavaScript
Top Content
Featured Workshop
Adrian Hajdin
Adrian Hajdin
Durante esta masterclass, los participantes revisarán los patrones esenciales de JavaScript que todo desarrollador debería conocer. A través de ejercicios prácticos, ejemplos del mundo real y discusiones interactivas, los asistentes profundizarán su comprensión de las mejores prácticas para organizar el código, resolver desafíos comunes y diseñar arquitecturas escalables. Al final de la masterclass, los participantes ganarán una nueva confianza en su capacidad para escribir código JavaScript de alta calidad que resista el paso del tiempo.
Puntos Cubiertos:
1. Introducción a los Patrones de JavaScript2. Patrones Fundamentales3. Patrones de Creación de Objetos4. Patrones de Comportamiento5. Patrones Arquitectónicos6. Ejercicios Prácticos y Estudios de Caso
Cómo Ayudará a los Desarrolladores:
- Obtener una comprensión profunda de los patrones de JavaScript y sus aplicaciones en escenarios del mundo real- Aprender las mejores prácticas para organizar el código, resolver desafíos comunes y diseñar arquitecturas escalables- Mejorar las habilidades de resolución de problemas y la legibilidad del código- Mejorar la colaboración y la comunicación dentro de los equipos de desarrollo- Acelerar el crecimiento de la carrera y las oportunidades de avance en la industria del software
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.
Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web
React Summit 2024React Summit 2024
92 min
Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web
Featured Workshop
Vivek Nayyar
Vivek Nayyar
Sumérgete en el mundo de la IA con nuestro masterclass interactivo diseñado específicamente para desarrolladores web. "Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web" ofrece una oportunidad única para cerrar la brecha entre la IA y el desarrollo web. A pesar de la prominencia de Python en el desarrollo de IA, el vasto potencial de JavaScript sigue siendo en gran medida inexplorado. Este masterclass tiene como objetivo cambiar eso.A lo largo de esta sesión práctica, los participantes aprenderán cómo aprovechar LangChain, una herramienta diseñada para hacer que los modelos de lenguaje grandes sean más accesibles y útiles, para construir agentes de IA dinámicos directamente dentro de entornos JavaScript. Este enfoque abre nuevas posibilidades para mejorar las aplicaciones web con funciones inteligentes, desde el soporte al cliente automatizado hasta la generación de contenido y más.Comenzaremos con los conceptos básicos de LangChain y los modelos de IA, asegurando una base sólida incluso para aquellos nuevos en IA. A partir de ahí, nos sumergiremos en ejercicios prácticos que demuestran cómo integrar estas tecnologías en proyectos reales de JavaScript. Los participantes trabajarán en ejemplos, enfrentando y superando los desafíos de hacer que la IA funcione sin problemas en la web.Este masterclass es más que una experiencia de aprendizaje; es una oportunidad de estar a la vanguardia de un campo emergente. Al final, los asistentes no solo habrán adquirido habilidades valiosas, sino que también habrán creado funciones mejoradas con IA que podrán llevar a sus proyectos o lugares de trabajo.Ya seas un desarrollador web experimentado curioso acerca de la IA o estés buscando expandir tus habilidades en áreas nuevas y emocionantes, "Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web" es tu puerta de entrada al futuro del desarrollo web. Únete a nosotros para desbloquear el potencial de la IA en tus proyectos web, haciéndolos más inteligentes, interactivos y atractivos para los usuarios.
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.