Dominando el Web Scraping con Scrapoxy: ¡Desata tu Magia de Extracción de Datos!

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
See JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

¡Desbloquea el potencial del web scraping con esta masterclass!

1/ Construyendo Web Scrapers - El Arte Revelado

2/ Aventura de Proxies y Granjas de Navegadores

3/ Orquestación con Scrapoxy - Eleva tu Escalabilidad

4/ Medidas de Protección Reveladas

Esta sesión concisa te sumergirá en el mundo del web scraping.

#WebScraping #Proxy #ReverseEngineering 🕵️‍♂️

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

Fabien Vauchelles
Fabien Vauchelles
21 min
04 Apr, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Fabien Vauchel es un desarrollador de software apasionado por el web scraping y el creador de Scrapoxy, un agregador de proxies. Isabella, una estudiante, utilizó el web scraping para recopilar datos para su herramienta de viaje. La charla discute diversas técnicas para el web scraping, incluyendo el uso de modelos de lenguaje y proxies para evadir las protecciones de los sitios web. El orador también presenta ScrapOxy, un super agregador de proxies, y explica cómo integrarlo en proyectos de web scraping. Se destaca el uso de Playwright, un navegador sin cabeza, para manejar errores de huellas digitales. En última instancia, la charla enfatiza la importancia de ajustar las zonas horarias para completar con éxito las solicitudes de web scraping.

1. Introducción a la Extracción de Datos de la Web y Sistemas de Proxy

Short description:

Hola, soy Fabien Vauchel. He sido apasionado por la extracción de datos de la web durante años. Trabajo en Wiremind, una increíble empresa especializada en gestión de ingresos en la industria del transporte. También soy el creador de Scrapoxy, un agregador de proxy gratuito y de código abierto. Admite importantes proveedores de servicios en la nube y servicios de proxy. Está completamente escrito en TypeScript con los marcos de NetJS y Angular.

Hola, soy Fabien Vauchel. He sido apasionado por la extracción de datos de la web durante años. Mi entusiasmo me llevó a explorar el fascinante mundo de los sistemas de proxy y antibots.

Trabajo en Wiremind, una increíble empresa especializada en gestión de ingresos en la industria del transporte. Nuestro trabajo en Wiremind implica manejar millones de precios a diario, lo cual requiere una inversión considerable en tecnologías de extracción de datos de la web.

También soy el creador de Scrapoxy. Scrapoxy es un agregador de proxy gratuito y de código abierto. Te permite gestionar y dirigir el tráfico a través de proveedores de servicios en la nube y servicios de proxy. Admite importantes proveedores de servicios en la nube como AWS, Azure, GCP y DigitalOcean. Admite servicios de proxy como Zyte, Railbite, IPRail y muchos otros. Está completamente escrito en TypeScript con los marcos de NetJS y Angular.

2. Isabella's Journey to Web Scraping

Short description:

Antes de sumergirnos en este increíble producto, permítanme compartir con ustedes una pequeña historia. Isabella, una estudiante de último año en una escuela de TI, notó una brecha en el mercado y se dio cuenta de que necesitaba una gran cantidad de datos para crear su herramienta definitiva de viaje. Decidió centrarse en alojamientos y se aseguró de considerar todos los aspectos legales. Ahora, permítanme presentarles el sitio web que eligió para hacer scraping, TrekkieReviews.com. Es el lugar ideal para consultar alojamientos en cualquier ciudad. A Isabella le interesa analizar las reseñas para ver lo que la gente piensa sobre los alojamientos.

Les presento a Isabella. Es una estudiante de último año en una escuela de TI. Isabella tiene una mente brillante y mucha energía, y también tiene sed de viajar. Cada año, emprende un viaje de mochilero de un mes a un país al azar. Pero aquí hay un giro. Este nivel de planificación consumió todo su año en preparación para solo un mes de viaje. Isabella no pudo evitar notar una brecha en el mercado. ¿Por qué no existía una herramienta así en una era digital llena de IA? Esto podría ser su boleto hacia un negocio exitoso. Se dio cuenta de que necesitaba una gran cantidad de datos para crear esa herramienta. Esta gran cantidad de datos entrenará un gran modelo de lenguaje para crear su viaje definitivo. Sin embargo, ella es una principiante total en la industria del web scraping. ¿Cómo recolectar una gran cantidad de datos? Para comenzar, decidió centrar todos sus esfuerzos en los alojamientos.

Sin embargo, Isabella es muy cuidadosa en su enfoque empresarial. Antes de comenzar a recolectar datos, se asegura de considerar todos los aspectos legales. Sabe que es importante no abrumar al sitio web haciendo demasiadas solicitudes demasiado rápido. También respeta la privacidad. Solo recopila información que ya es pública, como las reseñas, y no recopila ningún dato personal como nombres. Tampoco acepta los términos y condiciones del sitio web. Está libre de cualquier contrato. Ahora que todo está claro, está lista para recolectar los datos. Permítanme presentarles el sitio web que eligió para hacer scraping, TrekkieReviews.com. ¿Entonces, de qué se trata TrekkieReview? Es el lugar ideal para consultar alojamientos en cualquier ciudad que te interese. Así es como funciona. Simplemente ingresas el nombre de la ciudad que deseas explorar en la barra de búsqueda y verás una lista de todos los alojamientos disponibles. Digamos que Isabella sueña con París. Encontrará 50 alojamientos. Si hace clic en un hotel, obtendrá toda la información como su nombre, descripción, dirección, correo electrónico y reseñas. A Isabella le interesan las reseñas. Se trata de analizar esas reseñas para ver lo que la gente piensa sobre los alojamientos.

3. Profundizando en el Web Scraping

Short description:

Con los últimos modelos de lenguaje grandes, Isabella puede realizar análisis de sentimientos y evadir protecciones de sitios web. Siguiendo las solicitudes utilizando la herramienta de inspección de Chrome, Isabella se enfoca en extraer contenido HTML y utiliza bibliotecas como Axios y Cheerios para una extracción eficiente de texto. Su spider le permite recuperar información de hoteles de manera estructurada.

Con los últimos modelos de lenguaje grandes, ella puede profundizar en el análisis de sentimientos y extraer el sentimiento principal o el problema. ¡Pero espera! Hay más. El sitio web también es súper seguro. He implementado diferentes niveles de protección para mantener el lugar seguro. Y durante esta presentación, Isabella intentará evadir cada protección una por una.

Para comprender mejor cómo se encadenan las solicitudes, abramos la herramienta de inspección de Chrome. Aquí tienes un adelanto. Cuando llegas a una página web, es como recibir un gran paquete de entrega en tu puerta. Dentro de este paquete, hay un montón de cosas. Tienes HTML, CSS, JavaScript e imágenes. Pero mantengámoslo simple. Solo nos interesa el HTML. Hago clic en `dock` y me aseguro de preservar los registros para no perder el rastro de nada. Ahora sigamos la solicitud.

La primera es un formulario de búsqueda con el nivel de URL 1. La segunda es una lista de hoteles y paginaciones con la URL `cities` y los parámetros `cities` establecidos en París. La última es un detalle del hotel con la URL `hotel/ID`. Si hacemos clic en la pestaña de respuesta, verás el contenido HTML completo para extraer las calificaciones del hotel. Sin embargo, puede ser complejo ejecutar solicitudes y analizar HTML manualmente. Por eso quiero destacar dos bibliotecas poderosas: Axios y Cheerios. Axios es una biblioteca de JavaScript diseñada para manejar solicitudes. Cheerios es otra biblioteca de JavaScript que analiza HTML utilizando selectores CSS, lo que facilita la extracción de texto. Muy bien, desglosemos nuestros spiders.

Si abro mi spider, tengo mucha información y muchos métodos. El primero es un método para ir a la página de inicio. Después de eso, puedo buscar hoteles y ciudades. Aquí voy a París y recupero los enlaces de los hoteles. Cuando tengo los enlaces, puedo obtener los hoteles, los detalles, extraer el nombre, el correo electrónico y la calificación. Ejecutemos este spider. Si ejecuto este spider, tengo 50 elementos y puedo verificar la información de manera estructurada.

4. Aumentando la seguridad e introduciendo proxies

Short description:

Aquí tengo diferentes información, nombres, correos electrónicos y calificaciones. Al identificar y modificar las cabeceras de las solicitudes, puedo evadir la detección de spiders del sitio web y aumentar la seguridad. Al pasar al nivel tres, me encuentro con el problema de demasiadas solicitudes desde la misma dirección IP. Para resolver esto, introduzco un sistema de proxy que retransmite las solicitudes y enmascara la fuente original. Los proxies de centro de datos, alojados en servicios como AWS, Azure o GCP, son rápidos y confiables pero pueden ser fácilmente detectados por soluciones Antibot.

Es perfecto. Puedo aumentar el nivel de seguridad. Pasemos al nivel dos. Es perfecto, está aquí. Entonces, si me encuentro con un spider, obtengo un error de navegador desconocido. Esto se debe a que un spider se identificó como Axios. El sitio web rechazó el spider. Si abrimos Chrome y verificamos las cabeceras de las solicitudes, veremos que Chrome envía información detallada, como el agente de usuario, Chrome se identifica como Mozilla en Linux. Además, hay otras cabeceras asociadas al agente de usuario. Agregaré esa información a los spiders. Escribiré el agente de usuario y diré que es Windows. También agregaré otra información como cabeceras sexyh, sexyh mobile, sexyh UA platforms. Y si me encuentro con un spider esta vez, obtengo mis 50 elementos. Es perfecto. Ahora pasemos al siguiente nivel.

Me estoy moviendo al nivel tres y estoy ejecutando mi spider. El spider tiene algunos retrasos y obtendré un error que indica demasiadas solicitudes. Esto se debe a que estoy haciendo muchas solicitudes desde la misma dirección IP. Mi computadora portátil está enviando todas las solicitudes al servidor web desde la misma dirección IP y el servidor me está rechazando porque estoy haciendo demasiadas solicitudes. Necesito muchas direcciones IP para enviar la solicitud. Ahí es donde quiero introducir un proxy. ¿Qué es un proxy? Un proxy es un sistema que se ejecuta en Internet. Reenvía las solicitudes a un servidor y el servidor cree que la solicitud proviene del proxy, no de la fuente real. Y, por supuesto, hay muchos tipos de proxy. El primer tipo es el proxy de centro de datos. Este tipo de proxy se ejecuta en AWS, Azure o GCP. Es el primer tipo de proxy serio que puedes usar. Son rápidos y confiables. Sin embargo, pueden ser fácilmente identificados por soluciones Antibot.

5. Comprendiendo los Proxies de ISP

Short description:

Los rangos de IP están asociados con números de sistema autónomo como Amazon o Microsoft. Para evadir las soluciones Antibot, se pueden utilizar proxies de ISP. Estos proxies alquilan direcciones IP de números de sistema autónomo limpios, como proveedores móviles, y mezclan tu actividad con otras direcciones IP.

Para explicarte, los rangos de IP están asociados a números de sistema autónomo. Y el nombre de los números de sistema autónomo puede ser Amazon o Microsoft. Por lo tanto, puede ser fácilmente identificado por las soluciones Antibot. Pero hay un truco para evitarlo. Y esto se llama proxy de ISP. Proxy del Proveedor de Servicios de Internet. Hablemos sobre los proxies de ISP y cómo funcionan. Los proxies autónomos se configuran en centros de datos, pero no utilizan direcciones IP de estos centros de datos. En cambio, alquilan direcciones IP de un número de sistema autónomo limpio como los proveedores móviles como Verizon. Obtienen un montón de direcciones IP y el proxy utiliza una de ellas. Esto significa que cuando estás usando el proxy, tu actividad se mezcla con todas las direcciones IP que te mantienen oculto.

6. Rotating Residential Proxies and ScrapOxy

Short description:

El último tipo de proxy es el proxy residencial rotativo. Utiliza direcciones IP de dispositivos como laptops o teléfonos móviles, que provienen de usuarios reales. ScrapOxy, el superagregador de proxies, se utiliza para gestionar la estrategia de proxy. Ofrece una interfaz de usuario fácil de usar y permite agregar fácilmente conectores para diferentes tipos de proxies. Los conectores de AWS se pueden crear con solo unos pocos clics, y ScrapOxy se encarga de todas las instalaciones y gestiones de instancias. Los proxies se pueden monitorear para verificar su estado, métricas e información real de dirección IP y geográfica.

Y está el último tipo de proxy, el proxy residencial rotativo. La dirección IP proviene de un dispositivo que puede ser una laptop o un teléfono móvil. ¿Cómo funciona? Cuando un desarrollador quiere ganar dinero con su aplicación, tiene 3 soluciones. Primero, puede vender suscripciones como suscripciones mensuales o anuales que desbloquean características. Segundo, puede agregar publicidad, como tener un anuncio en la parte inferior de la aplicación. Y tercero, puede compartir el ancho de banda del dispositivo, por supuesto, solo con el consentimiento del usuario. Pero ahí es donde proviene la dirección IP. Este es el tipo de proxy que es muy poderoso porque las direcciones IP provienen de usuarios reales. Y, por supuesto, hay millones de puntos finales disponibles.

Ahora usaremos ScrapOxy, el superagregador de proxies, para gestionar nuestra estrategia de proxy. Iniciar ScrapOxy es muy fácil. Es solo una línea de docker para ejecutarlo. Así que estoy ejecutando eso. En un segundo, tengo ScrapOxy listo y funcionando. Puedo ir a la UI aquí e ingresar mis credenciales. Ya tengo un proyecto creado. En este proyecto, puedo agregar fácilmente un nuevo conector. Así que voy al mercado y tengo 100 conectores disponibles. Puedo agregar conectores de centro de datos, conectores de ISP, conectores residenciales, conectores móviles 4G, conectores de hardware, lo que sea. Si quiero agregar un conector de AWS, solo hago clic en crear e ingreso mis credenciales. ScrapOxy se encargará de todas las instalaciones, iniciará y detendrá la instancia por ti. Ya no tienes que gestionarlo.

Permíteme demostrarte eso. Ya he creado un conector de AWS. Si inicio este conector, creará rápidamente diferentes proxies en AWS. Ahora tengo 10 instancias en AWS. Puedo ver el estado y las métricas. También tengo la dirección IP real del proxy aquí y la información geográfica. Estos proxies están basados en Dublín. Y puedo confirmarlo con el mapa de cobertura, todos los proxies están en Dublín.

7. Integrando ScrapOxy y Pasando al Nivel 5

Short description:

Integremos ScrapOxy en las arañas agregando la configuración del proxy. Al utilizar redes residenciales como ProxySeller, podemos evitar el error de que los centros de datos estén prohibidos. Después de agregar el conector a ScrapOxy, puedo ver toda la información del hotel recopilada por la araña. Ahora, pasemos al nivel 5.

Entonces, ahora integremos ScrapOxy en las arañas. Copiaré el nombre de usuario y volveré a mi araña. Así que puedo agregar el proxy aquí, localhost, puerto 8888, protocolo HTTP y mis credenciales. Necesito la contraseña. Y si vuelvo allí, puedo agregar la contraseña. Eso es perfecto. Reiniciemos la araña.

Entonces, ahora está funcionando y tengo mis 50 elementos. Pasemos al siguiente nivel, nivel 4. Si ejecuto nuevamente la araña, obtengo un gran error, los centros de datos están prohibidos. Es porque el sistema Antibot detecta el número de sistema autónomo, que es Amazon 02. Así que necesito usar una red residencial para eso. Hoy usaré la red residencial de ProxySeller. Proporcionan proxy de centro de datos, proxy de ISP, proxy residencial y proxy móvil. Ya he creado las credenciales de ProxySeller en ScrapOxy y agregaré un conector. Primero, detengo el conector de AWS para evitar pagar más. Y crearé un conector. Necesito 50 proxies, basados en los EE. UU. Y comienzan en un segundo. Sí, eso es perfecto. Así que estoy revisando la lista de proxies y puedo ver que ScrapOxy detiene las instancias de AWS. Y puedo ver el nuevo proxy de la red residencial. Si voy al mapa de cobertura, en un minuto veré todos los nuevos proxies. Aquí tengo 50 proxies en los EE. UU.

Entonces ahora puedo volver a la araña. Como puedes ver, no toqué la araña. Solo agregué un conector a ScrapOxy. Y si ejecuto nuevamente la araña, puedo ver que se recopila toda la información del hotel. Tengo mis 50 elementos, es perfecto. Ahora pasaré al siguiente nivel, nivel 5.

8. Usando Playwright y Manejando Errores de Huella Digital

Short description:

Encontré un error sin huella digital al ejecutar la araña. Para resolver esto, utilicé Playwright, un navegador sin cabeza que me permite enviar solicitudes con información de navegador real. Al ejecutar la solicitud de huella digital y enviar la información al antibot, puedo hacer cada solicitud rápidamente. Sin embargo, los sistemas de antibot también buscan consistencia, lo que causó un error con zonas horarias inconsistentes al pasar al siguiente nivel.

Esta vez, al ejecutar la araña, obtuve un gran error, sin huella digital. Y para entender eso, necesito volver a mi navegador. Y en el navegador, como puedes ver, hay muchas solicitudes POST. El navegador está enviando mucha información al sistema Antibot. Así que voy a verificar qué tipo de información estoy enviando. Estoy enviando el tipo de plataforma, la zona horaria y los agentes de usuario reales. Ya no podemos falsificar este tipo de información.

Necesito un navegador real para enviar mi solicitud en lugar de acceder y ejecutar JavaScript, un navegador que puede ser controlado por un script. Usaré Playwright. Entonces, Playwright es un navegador headless. Podemos ver que es útil para las presentaciones. Puedo ejecutar JavaScript y funciona con Chrome, Firefox, Edge y Safari. Es de código abierto y mantenido por Microsoft. Así que veamos cómo podemos adaptar nuestras arañas.

Ahora puedo crear un script de Playwright basado en la araña anterior. En el script de Playwright, tengo los mismos métodos. Voy a la página de inicio. Envío un formulario y obtengo una lista de hoteles. Y obtengo los detalles de cada hotel. Extraigo nombres, correos electrónicos y calificaciones. Entonces, si ejecuto esta araña, verás un navegador que se abre y va a la página de inicio. Estoy ejecutando la solicitud de huella digital y enviando toda la información al antibot. Y ahora puedo hacer cada solicitud muy rápidamente. Como puedes ver, no podemos ver la página porque solo descarga contenido sin renderizar. Así que tengo mis 50 elementos. Pero por supuesto, los sistemas de antibot no solo capturan información de huella digital. Capturan consistencia.

Entonces, si paso al siguiente nivel, el LoveX6, y ejecuto nuevamente la araña de Playwright, la araña se conecta a la página de inicio, envía una huella digital. Pero cuando ejecuto otras solicitudes, obtengo un gran error, zona horaria inconsistente. Esto sucede porque estamos enviando la zona horaria real del navegador.

9. Ajustando la Zona Horaria y Completando las Solicitudes

Short description:

El antibot tiene una zona horaria real, lo que causó inconsistencias con la zona horaria del navegador. Al cambiar la zona horaria del navegador a América, Chicago, pude ejecutar todas las solicitudes con éxito utilizando Playwright. ¡Gracias!

Entonces, el antibot tiene una zona horaria real. Y la zona horaria del navegador es Europa, París. Y estamos utilizando direcciones IP de los Estados Unidos. Hay una diferencia de cinco horas en la zona horaria. Necesito corregir eso. No puedo corregir la zona horaria de la dirección IP. Pero puedo corregir la zona horaria del navegador. Para hacer eso, necesito ir a la configuración aquí y cambiar el ID de la zona horaria a América, Chicago.

Si ejecuto nuevamente la araña, la araña se conecta a la página de inicio, envía la huella digital información. Y esta vez, la zona horaria de la dirección IP es consistente con la zona horaria del navegador. Puedo ejecutar todas las solicitudes. Y como puedes ver, tengo cada solicitud ejecutada por Playwright. Y tengo mis 50 elementos.

Eso es todo por mi parte. Muchas gracias. Descarga Scrapoxy y únete a Wiremind.

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

No resuelvas problemas, elimínalos
React Advanced 2021React Advanced 2021
39 min
No resuelvas problemas, elimínalos
Top Content
Kent C. Dodds discusses the concept of problem elimination rather than just problem-solving. He introduces the idea of a problem tree and the importance of avoiding creating solutions prematurely. Kent uses examples like Tesla's electric engine and Remix framework to illustrate the benefits of problem elimination. He emphasizes the value of trade-offs and taking the easier path, as well as the need to constantly re-evaluate and change approaches to eliminate problems.
Los Átomos de Jotai Son Simplemente Funciones
React Day Berlin 2022React Day Berlin 2022
22 min
Los Átomos de Jotai Son Simplemente Funciones
Top Content
State management in React is a highly discussed topic with many libraries and solutions. Jotai is a new library based on atoms, which represent pieces of state. Atoms in Jotai are used to define state without holding values and can be used for global, semi-global, or local states. Jotai atoms are reusable definitions that are independent from React and can be used without React in an experimental library called Jotajsx.
Depuración de JS
React Summit 2023React Summit 2023
24 min
Depuración de JS
Top Content
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
El Epic Stack
React Summit US 2023React Summit US 2023
21 min
El Epic Stack
Top Content
This Talk introduces the Epic Stack, a project starter and reference for modern web development. It emphasizes that the choice of tools is not as important as we think and that any tool can be fine. The Epic Stack aims to provide a limited set of services and common use cases, with a focus on adaptability and ease of swapping out tools. It incorporates technologies like Remix, React, Fly to I.O, Grafana, and Sentry. The Epic Web Dev offers free materials and workshops to gain a solid understanding of the Epic Stack.
Una Mirada al Futuro del Desarrollo Web en 2025
JSNation US 2024JSNation US 2024
32 min
Una Mirada al Futuro del Desarrollo Web en 2025
Top Content
Today, Wes Boss introduces the new features of the web, including customizable select and temporal, a standardized API for working with dates, time, and duration. The current date API in JavaScript has some problems related to time zones and date manipulation. With the temporal API, you can create dates without a time zone, specify dates without a year, and create durations without being attached to a specific date. The API also provides features for finding the difference between two dates. Invokers is a declarative click handlers API that eliminates the need for JavaScript. Speculation API enables pre-rendering and pre-loading of pages, improving performance. The CSS Anchor API allows positioning elements based on another element's location. Web components are encapsulated, framework-agnostic, and easy to use, offering a standardized approach for building reusable UI components. Building media UI components, like video players, is made easier with web components like Shoelace. Transformers JS allows running AI models in JavaScript for tasks like emotion detection and background removal. Python doesn't run in the browser, but JavaScript does. Small AI models can be loaded and executed faster in the browser using technologies like WebGPU. Animate height auto transition using calc size. Apply starting styles to elements for smooth animations. Use Vue transition for CSS and JavaScript animations. Syntax website with Vue transition for smooth page transitions. CSS relative colors allow for lighter or darker shades. Scope CSS ensures styles only apply to specified div containers. Web primitives facilitate modern JavaScript code. You can create web requests and receive web responses using the same primitives on both the client and server. There are many new web standards that work everywhere and frameworks like Hano and Nitro are built upon them. The select and Popover elements are accessible by default. Most of the discussed features will be available in all browsers by 2025. The future of web development with AI is uncertain, but web developers should embrace AI tools to improve efficiency. Implicit CSS lazy loading depends on whether it's prefetching or pre-rendering. Wes Boss discusses the specific features he is excited about in web development, including starting style, calc auto, and allowed discrete. He shares his preferred way of staying informed on new web development discoveries, emphasizing the importance of being part of the community and keeping up with industry discussions. Wes also mentions reading W3C meeting notes and recommends following the Twitter account Intent2Ship to stay updated on upcoming CSS features. Lastly, he discusses the potential impact of the new Scope CSS feature on developers' management of styles.
Luchando contra la Deuda Técnica con la Refactorización Continua
React Day Berlin 2022React Day Berlin 2022
29 min
Luchando contra la Deuda Técnica con la Refactorización Continua
Top Content
This Talk discusses the importance of refactoring in software development and engineering. It introduces a framework called the three pillars of refactoring: practices, inventory, and process. The Talk emphasizes the need for clear practices, understanding of technical debt, and a well-defined process for successful refactoring. It also highlights the importance of visibility, reward, and resilience in the refactoring process. The Talk concludes by discussing the role of ownership, management, and prioritization in managing technical debt and refactoring efforts.

Workshops on related topic

React, TypeScript y TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript y TDD
Top Content
Featured Workshop
Paul Everitt
Paul Everitt
ReactJS es extremadamente popular y, por lo tanto, ampliamente soportado. TypeScript está ganando popularidad y, por lo tanto, cada vez más soportado.

¿Los dos juntos? No tanto. Dado que ambos cambian rápidamente, es difícil encontrar materiales de aprendizaje precisos.

¿React+TypeScript, con los IDEs de JetBrains? Esa combinación de tres partes es el tema de esta serie. Mostraremos un poco sobre mucho. Es decir, los pasos clave para ser productivo, en el IDE, para proyectos de React utilizando TypeScript. En el camino, mostraremos el desarrollo guiado por pruebas y enfatizaremos consejos y trucos en el IDE.
Masterclass Web3 - Construyendo Tu Primer Dapp
React Advanced 2021React Advanced 2021
145 min
Masterclass Web3 - Construyendo Tu Primer Dapp
Top Content
Featured Workshop
Nader Dabit
Nader Dabit
En esta masterclass, aprenderás cómo construir tu primer dapp de pila completa en la blockchain de Ethereum, leyendo y escribiendo datos en la red, y conectando una aplicación de front end al contrato que has desplegado. Al final de la masterclass, entenderás cómo configurar un entorno de desarrollo de pila completa, ejecutar un nodo local e interactuar con cualquier contrato inteligente usando React, HardHat y Ethers.js.
Fundamentos de Remix
React Summit 2022React Summit 2022
136 min
Fundamentos de Remix
Top Content
Workshop
Kent C. Dodds
Kent C. Dodds
Construir aplicaciones web modernas está lleno de complejidad. Y eso solo si te molestas en lidiar con los problemas
¿Cansado de conectar onSubmit a las API del backend y asegurarte de que tu caché del lado del cliente se mantenga actualizada? ¿No sería genial poder utilizar la naturaleza global de CSS en tu beneficio, en lugar de buscar herramientas o convenciones para evitarla o trabajar alrededor de ella? ¿Y qué te parecería tener diseños anidados con una gestión de datos inteligente y optimizada para el rendimiento que simplemente funciona™?
Remix resuelve algunos de estos problemas y elimina completamente el resto. Ni siquiera tienes que pensar en la gestión de la caché del servidor o en los conflictos del espacio de nombres global de CSS. No es que Remix tenga APIs para evitar estos problemas, simplemente no existen cuando estás usando Remix. Ah, y no necesitas ese enorme y complejo cliente graphql cuando estás usando Remix. Ellos te tienen cubierto. ¿Listo para construir aplicaciones más rápidas de manera más rápida?
Al final de esta masterclass, sabrás cómo:- Crear Rutas de Remix- Estilizar aplicaciones de Remix- Cargar datos en los cargadores de Remix- Mutar datos con formularios y acciones
Vue3: Desarrollo Moderno de Aplicaciones Frontend
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Desarrollo Moderno de Aplicaciones Frontend
Top Content
Workshop
Mikhail Kuznetsov
Mikhail Kuznetsov
Vue3 fue lanzado a mediados de 2020. Además de muchas mejoras y optimizaciones, la principal característica que trae Vue3 es la API de Composición, una nueva forma de escribir y reutilizar código reactivo. Aprendamos más sobre cómo usar la API de Composición de manera eficiente.

Además de las características principales de Vue3, explicaremos ejemplos de cómo usar bibliotecas populares con Vue3.

Tabla de contenidos:
- Introducción a Vue3
- API de Composición
- Bibliotecas principales
- Ecosistema Vue3

Requisitos previos:
IDE de elección (Inellij o VSC) instalado
Nodejs + NPM
Construye un potente DataGrid en pocas horas con Ag Grid
React Summit US 2023React Summit US 2023
96 min
Construye un potente DataGrid en pocas horas con Ag Grid
Top Content
WorkshopFree
Mike Ryan
Mike Ryan
¿Tu aplicación React necesita mostrar eficientemente muchos (y muchos) datos en una cuadrícula? ¿Tus usuarios quieren poder buscar, ordenar, filtrar y editar datos? AG Grid es la mejor cuadrícula de JavaScript en el mundo y está llena de características, es altamente eficiente y extensible. En esta masterclass, aprenderás cómo empezar con AG Grid, cómo podemos habilitar la ordenación y el filtrado de datos en la cuadrícula, la representación de celdas y más. Saldrás de esta masterclass gratuita de 3 horas equipado con el conocimiento para implementar AG Grid en tu aplicación React.
Todos sabemos que crear nuestra propia solución de cuadrícula no es fácil, y seamos honestos, no es algo en lo que deberíamos estar trabajando. Estamos enfocados en construir un producto e impulsar la innovación. En esta masterclass, verás lo fácil que es empezar con AG Grid.
Prerrequisitos: React y JavaScript básicos
Nivel de la masterclass: Principiante
Desarrollando Blogs Dinámicos con SvelteKit & Storyblok: Una Masterclass Práctica
JSNation 2023JSNation 2023
174 min
Desarrollando Blogs Dinámicos con SvelteKit & Storyblok: Una Masterclass Práctica
Top Content
WorkshopFree
Alba Silvente Fuentes
Roberto Butti
2 authors
Esta masterclass de SvelteKit explora la integración de servicios de terceros, como Storyblok, en un proyecto SvelteKit. Los participantes aprenderán cómo crear un proyecto SvelteKit, aprovechar los componentes de Svelte y conectarse a APIs externas. La masterclass cubre conceptos importantes incluyendo SSR, CSR, generación de sitios estáticos y despliegue de la aplicación usando adaptadores. Al final de la masterclass, los asistentes tendrán una sólida comprensión de la construcción de aplicaciones SvelteKit con integraciones de API y estarán preparados para el despliegue.