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

Rate this content
Bookmark

¡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 🕵️‍♂️

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.

Available in English

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

Don't Solve Problems, Eliminate Them
React Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world.
Jotai Atoms Are Just Functions
React Day Berlin 2022React Day Berlin 2022
22 min
Jotai Atoms Are Just Functions
Top Content
Jotai is a state management library. We have been developing it primarily for React, but it's conceptually not tied to React. It this talk, we will see how Jotai atoms work and learn about the mental model we should have. Atoms are framework-agnostic abstraction to represent states, and they are basically just functions. Understanding the atom abstraction will help designing and implementing states in your applications with Jotai
Debugging JS
React Summit 2023React Summit 2023
24 min
Debugging JS
Top Content
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.
Fighting Technical Debt With Continuous Refactoring
React Day Berlin 2022React Day Berlin 2022
29 min
Fighting Technical Debt With Continuous Refactoring
Top Content
Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt. In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.
AHA Programming
React Summit Remote Edition 2020React Summit Remote Edition 2020
32 min
AHA Programming
Top Content
Are you the kind of programmer who prefers to never see the same code in two places, or do you make liberal use of copy/paste? Many developers swear the Don't Repeat Yourself (DRY) philosophy while others prefer to Write Everything Twice (WET). But which of these produces more maintainable codebases? I've seen both of these approaches lay waste to codebases and I have a new ideology I would like to propose to you: Avoid Hasty Abstractions (AHA). In this keynote, we'll talk about abstraction and how you can improve a codebase applying and creating abstractions more thoughtfully as well as how to get yourself out of a mess of over or under-abstraction.
The Epic Stack
React Summit US 2023React Summit US 2023
21 min
The Epic Stack
Top Content
Modern web development is fantastic. There are so many great tools available! Modern web development is exhausting. There are so many great tools available! Each of these sentiments is true. What's great is that most of the time, it's hard to make a choice that is wrong. Seriously. The trade-offs of most of the frameworks and tools you could use to build your application fit within the constraints of the vast majority of apps. Despite this, engineers consistently struggle with analysis paralysis.Let's talk about this, and a solution I am working on for it.

Workshops on related topic

React, TypeScript, and TDD
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
Web3 Workshop - Building Your First Dapp
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
Nader Dabit
Nader Dabit
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
Remix Fundamentals
React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Top Content
Featured WorkshopFree
Kent C. Dodds
Kent C. Dodds
Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems
Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?
Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?
At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions
Vue3: Modern Frontend App Development
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
Mikhail Kuznetcov
Mikhail Kuznetcov
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Top Content
Featured WorkshopFree
Alba Silvente Fuentes
Roberto Butti
2 authors
This SvelteKit workshop explores the integration of 3rd party services, such as Storyblok, in a SvelteKit project. Participants will learn how to create a SvelteKit project, leverage Svelte components, and connect to external APIs. The workshop covers important concepts including SSR, CSR, static site generation, and deploying the application using adapters. By the end of the workshop, attendees will have a solid understanding of building SvelteKit applications with API integrations and be prepared for deployment.
Back to the Roots With Remix
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)