Superpoderes de la API Web del Navegador

Rate this content
Bookmark
Project website

Cuando escribimos código para la Web, hay muchas capacidades que nuestros navegadores ofrecen de manera predeterminada. Si alguna vez escribiste un componente de carga de archivos, usaste temporizadores e intervalos, interactuaste con el DOM, o almacenaste algo en el Almacenamiento Local/De Sesión, tuviste que ir a los documentos de la API Web de MDN, para encontrar información relevante sobre cómo implementar ese código.

En esta sesión, nos adentraremos en el emocionante mundo de las APIs Web del navegador que no se utilizan tan comúnmente (aunque deberían) y exploraremos sus increíbles capacidades 🚀

Todas estas características ofrecen nuevas oportunidades para crear experiencias web inmersivas que pueden ayudar a las empresas a crecer y conectarse con los clientes.

Así que si eres el tipo de ingeniero que quiere estar a la vanguardia en el desarrollo web, aprende cómo Intersection Observer, Background Sync API, Screen Wake Lock API (y muchas más) pueden ayudarte a crear mejores aplicaciones web que mantendrán a los usuarios comprometidos y volverán por más!

25 min
15 Nov, 2023

AI Generated Video Summary

La charla de hoy cubre la API Web, incluyendo APIs exóticas y no comúnmente utilizadas que pueden mejorar las aplicaciones web. La API de IntersectionObserver permite la carga perezosa de imágenes y listas de desplazamiento infinito. La API de Screen Wake Lock evita que los dispositivos se bloqueen, asegurando un uso ininterrumpido. La API de Wake Lock es útil para varios escenarios, pero el soporte de navegador y dispositivo varía. Las APIs de Background Sync y Broadcast Channel permiten la funcionalidad fuera de línea y la comunicación entre contextos. Por último, se destaca el impacto del código en el planeta, enfatizando la necesidad de un desarrollo web más eficiente.

1. Introducción a la Web API

Short description:

La charla de hoy cubrirá la Web API, que es una colección de interfaces incorporadas que permiten a los desarrolladores interactuar con las páginas web y proporcionar funcionalidades interesantes. La naturaleza de un solo hilo de JavaScript y el bucle de eventos juegan un papel en cómo se comporta setTimeout. Las WebAPIs, proporcionadas por los navegadores, ofrecen una amplia gama de APIs e interfaces para el desarrollo web. Vamos a explorar algunas APIs exóticas y no comúnmente utilizadas que pueden dar a nuestras aplicaciones web superpoderes. Soy Nikola Mitrović, y estos son mis aspectos destacados de las Web APIs para hoy.

¡Hola React Summit US! Les doy una cálida bienvenida a la charla de hoy. Hoy vamos a hablar de algo llamado Web API. Pero antes de hacerlo, necesitaremos dar un pequeño paso atrás y repasar algunos conceptos básicos de JavaScript.

Si vemos este ejemplo, y les hago la pregunta, ¿cuál sería el orden de los registros en la consola?, probablemente la mayoría de ustedes diría 1, 3, 2. Y eso es correcto. Pero, ¿cómo lo sabemos? ¿Cómo sabemos cómo se comporta setTimeout?

Como sabemos, JavaScript es un lenguaje de un solo hilo. Vamos a visualizar esto un poco. Hay una pila de llamadas, ejecutamos la primera función que es sincrónica, y luego registramos el 1 como valor inmediatamente. Pero la segunda es asíncrona, y necesita ir a otro lugar, para no bloquear ese único hilo. Y va a la cola una vez que el temporizador ha terminado. Mientras tanto, la pila de llamadas continúa ejecutando las funciones, luego el bucle de eventos verifica si la pila de llamadas está vacía, y devuelve la devolución de llamada con el valor de 2. Pero la pregunta principal es, ¿dónde espera el setTimeOut mientras continuamos con la ejecución de nuestro código?

Si buscamos esta función en Google, el primer resultado que obtenemos es este. Así que hay una documentación de MDN donde podemos ver algunas cosas sobre la función setTimeOut. Y aquí podemos ver que está bajo una pestaña llamada WebAPIs. Si hacemos clic en eso, podemos ver que básicamente las WebAPIs es una colección, una lista de APIs e interfaces que podemos usar directamente al desarrollar aplicaciones web. Básicamente, es una funcionalidad proporcionada por los entornos de runtime. En este caso, nuestros navegadores. Y si nos desplazamos un poco, podemos ver que hay muchas APIs, una lista realmente, realmente larga de APIs. Y aquí podemos observar que hay algunas APIs bastante conocidas y utilizadas, como WebRTC, almacenamiento de sesión, almacenamiento local, API de carga de archivos, una API DOM, y así sucesivamente. Pero al mirar esta lista, me preguntaba, ¿cuáles son algunas de las APIs exóticas y no tan comúnmente utilizadas que podríamos usar y que podrían dar a nuestra aplicación web ciertos superpoderes en ciertos casos de uso? Así que básicamente, estamos aquí para averiguar eso hoy. Y como hemos establecido, la respuesta a esta pregunta sobre setTimeout es Web API, que es básicamente una colección de interfaces incorporadas que permiten a los desarrolladores interactuar con nuestras páginas y proporcionar alguna funcionalidad interesante.

Voy a presentarme rápidamente. Cuando estaba en la escuela secundaria, siempre quise estudiar psicología. Ahora trabajo en mi trabajo soñado en Wega IT con sede en Noišac, Serbia, donde trabajo como desarrollador, lo que significa que enseño a las personas soft skills, cómo comunicarse con los clientes, cómo lidiar con el estrés, cómo hacer presentaciones como esta, por qué no, y así sucesivamente. Mi nombre es Nikola Mitrović y estos son mis aspectos destacos de las Web APIs para ustedes hoy. OK, ahora vamos a nuestro primer ejemplo para hoy. Digamos que tenemos una página como esta y no hay nada allí excepto el fondo, pero una vez que nos desplazamos un poco hacia abajo podemos empezar a observar que hay algo en la esquina inferior izquierda. Es un pequeño astronauta, que cuando está completamente visible dice, hola mundo. Una vez que nos desplazamos un poco hacia arriba y el astronauta no está completamente visible, el mensaje desaparece. Nos desplazamos de nuevo un poco hacia abajo y de nuevo, una vez que el astronauta está completamente visible de nuevo dice hola mundo.

2. Uso de la IntersectionObserverAPI

Short description:

La IntersectionObserverAPI es una API que determina si un elemento es visible en una página. En React, podemos crear un hook llamado useVisible para observar elementos. El hook acepta la referencia del objeto y opciones de configuración como la raíz y el umbral. Al usar esta API, podemos cargar imágenes de manera perezosa, crear listas de desplazamiento infinito y diferir animaciones. Es importante considerar el soporte del navegador, pero esta API es totalmente compatible con los principales proveedores.

Entonces, ¿cómo logramos hacer esto? Existe una API llamada IntersectionObserverAPI que básicamente determina si el elemento es visible en una página o no. Si construyéramos un hook en React para esto, probablemente lo llamaríamos useVisible y ese hook aceptaría dos parámetros.

Aceptaría la referencia del objeto que estamos tratando de observar y tenemos ciertas opciones de configuración. Una de esas opciones es la raíz. Si pasamos null, entonces asumimos que estamos observando el elemento de acuerdo con todo el documento. Básicamente significa que podemos tener containers más pequeños con áreas desplazables más pequeñas y podemos observar algunos elementos allí, pero si pasamos null miramos de acuerdo con todo el documento. Podemos tener un margen alrededor de esa raíz, por lo que podemos captar esa intersección un poco antes si es necesario. Y tenemos un cierto umbral, lo que significa que si pasamos este valor necesitamos un 100% de visibilidad para el elemento, por lo que podemos ajustar esto en consecuencia. Luego tendríamos un estado llamado isVisible, y luego instanciamos el objeto IntersectionObserver. En la devolución de llamada obtenemos el objeto Entry, que tiene una propiedad llamada isIntersecting. Esta propiedad contiene la información sobre la visibilidad de un elemento, y luego podemos establecer eso en nuestro estado. Así que ahora lo que queda por hacer es simplemente llamar al método observe en esa referencia y devolver ese estado. Y eso sería todo.

El ejemplo con el astronauta fue agradable y lindo, pero probablemente ahora te estés preguntando cuáles son algunos casos de uso reales donde podemos usar esta API. Podríamos cargar imágenes de manera perezosa, ¿verdad? Así que cargamos el contenido inicial para la página y todo lo que está debajo del pliegue, lo que no se necesita inicialmente, podemos diferir y cargar de manera perezosa. Y una vez que nos desplazamos a una cierta sección, entonces comenzamos a descargar imágenes y otros activos. Podríamos crear listas de desplazamiento infinito. Por ejemplo, no necesitamos una biblioteca para esto. Podríamos tener una lista de 10 elementos. Podríamos tener un separador al final de esa lista. Y una vez que nos desplazamos hacia atrás y ese separador es visible, entonces activamos la siguiente solicitud. Podríamos diferir animations. Así que no necesitamos ejecutar animations si algo no es... Si el cierto elemento no es visible en esa página. Y al hacerlo, podemos ahorrar algo de energía de la computadora. Así que no necesitamos ejecutar algo de JavaScript si el elemento no es visible en el viewport. Una cosa a considerar siempre al usar algunas de estas APIs es el soporte del navegador. Si miramos a los principales proveedores, podemos ver que esta API está totalmente soportada. Así que buenas noticias, podemos usar esto de manera segura en todos los navegadores. OK.

3. Ejemplo de Screen Wake Lock API

Short description:

En este ejemplo, demuestro cómo la Screen Wake Lock API puede evitar que un dispositivo se bloquee. Configuré mi laptop y mi teléfono para apagarse después de un minuto de inactividad. Sin embargo, gracias a la Screen Wake Lock API, la pantalla de mi teléfono se mantuvo encendida mientras cocinaba. Esta API es una herramienta útil para garantizar el uso ininterrumpido del dispositivo.

Ahora pasamos a otro ejemplo para hoy. Ahora, voy a hacer algo con mis preferencias personales. Voy a decir que, primero noten que mi laptop no está en el cargador. Y luego, si no está en una batería, voy a decir, si mi laptop está inactiva durante un minuto, se apagará. Además, tengo mi teléfono conectado a mi lado, que tiene la misma configuración. Y vamos a tener la misma aplicación. Así que noten por la URL que tenemos la misma aplicación y el mismo código corriendo detrás de estos dos ejemplos.

Ahora, voy a reiniciar el temporizador para ambas aplicaciones al mismo tiempo, con suerte. Bueno, y aquí voy a hacer clic en este interruptor, pero para la versión móvil, no. Pueden haber notado al principio, no hablé mucho de mí mismo, pero ahora tenemos un minuto para gastar y es mi momento de brillar. Bueno, me gusta viajar, y cuando lo hago, Italia es uno de mis destinos favoritos para ir. La architecture, la gente, el vino, la pasta, todo es increíble para mí. Así que, está inspirado en eso. Recientemente, cuando llego a casa, me gusta preparar comida para mí mismo. Entonces, voy a algún sitio web de recetas de cocina. Mi teléfono está al lado en la encimera junto a mí y estoy preparando esa comida. Pero después de un minuto, algo sucede. Y solo vamos a esperar unos segundos. Bueno. Después de un minuto, mi teléfono se apaga. Y ahora, con los dedos pegajosos, tengo que desbloquear mi teléfono de nuevo. Noten que el temporizador se fue a los cero segundos aquí, pero se fue a un segundo en mi teléfono. Es simplemente porque mi teléfono se apagó. Y hemos perdido la conexión con mi teléfono. Una vez que lo toqué de nuevo, mi teléfono se encendió. Pero de nuevo, necesitamos desbloquearlo y usar el teléfono de nuevo correctamente. Aquí no lo hizo. Porque tenemos la característica más increíble, que dice, básicamente, hey, estoy cocinando. No apagues mi pantalla. Entonces, ¿cómo logramos hacer esto? Existe una API llamada Screen Wake Lock API, que evita que el dispositivo se bloquee.

4. Uso de la Wake Lock API

Short description:

En React, creamos un hook llamado Use Wake Lock para solicitar una función Wake Lock Sentinel. Esta función es una promesa y necesita ser puesta en una referencia para preservar el estado anterior. Devolvemos si tenemos el bloqueo o no y lo liberamos llamando al método release en la referencia. Los casos de uso incluyen la lectura de libros electrónicos, la presentación a una audiencia, el seguimiento de una receta, la navegación por mapas o el escaneo de un código QR o de barras. El soporte del navegador varía, con los navegadores basados en Chromium que soportan la característica, Firefox no la soporta, y Safari está en fase experimental. El soporte del dispositivo también varía.

Aunque nuestras preferencias personales decían algo diferente. Y sólo puede funcionar si el documento es visible en nuestra página.

Si hacemos esto en React, haremos un hook llamado Use Wake Lock y se ve algo así. Pasamos ese Booleano de alternancia, que se enciende o apaga, ¿verdad? Y si está encendido, entonces llamamos a una función de solicitud Wake Lock Sentinel. Esa función, la llamaré en un navegador, tenemos el objeto Wake Lock y un método de solicitud con el parámetro de pantalla. Y esa llamada a la función es una promesa. Es una promesa porque puede fallar en ciertos casos de uso. Por ejemplo, si nuestra batería está demasiado baja y ahora la situación es un poco más complicada que en el ejemplo anterior, porque necesitamos poner esto en una referencia. Necesitamos hacer eso porque si lo ponemos en un estado, entonces perderemos el estado anterior y esta función devuelve un cierto valor. Necesitamos borrar ese valor exactamente ese valor en la memoria después cuando liberamos el bloqueo, de lo contrario no funcionará. Por eso necesitamos ponerlo en una referencia. Luego devolvemos si tenemos el bloqueo o no. Y cuando liberamos, una vez que volvemos a desactivar, entonces necesitamos llamar al método de liberación en esa misma referencia y necesitamos borrar esa referencia. Esos son todos los pasos necesarios a realizar, de lo contrario el bloqueo permanecerá en la memoria.

De nuevo, algunos de los casos de uso para esto, leer un libro electrónico, presentar a una audiencia, seguir una receta, navegación por mapas, o escanear un código QR o de barras. De nuevo, si miramos el soporte del navegador para esta API. Ahora podemos ver que la situación, de nuevo, es un poco diferente. Los navegadores basados en Chromium soportan esta característica, Firefox no. Y este signo significa que está en fase experimental para Safari. Así que tienen algún trabajo en marcha pero no completamente. Una cosa más a tener en cuenta sobre esta API es que hay un cierto soporte de dispositivo. Así que algunos de los dispositivos soportan esta característica, algunos no. Por ejemplo, tengo un iPhone y haga lo que haga, no pude hacer que esta característica funcionara aunque uso Chrome. Creo que esto tiene que ver con el hecho de que Chrome es sólo la piel para el iPhone y básicamente es Safari bajo el capó. Utiliza el motor WebKit para ejecutar el código, pero eso es algo con lo que tenemos que lidiar cuando usamos esta API.

5. APIs de Sincronización en Segundo Plano y Canales de Difusión

Short description:

En este último ejemplo, exploramos svemirko.rs, una aplicación futurista que se comunica con la API de la NASA para obtener una lista de planetas habitables. Podemos buscar y elegir destinos de vacaciones, incluso con problemas de conectividad fuera de línea. La API de Sincronización en Segundo Plano nos permite ejecutar tareas en un trabajador de servicio, asegurando que las solicitudes se envíen una vez que volvamos a estar en línea. El soporte del navegador para esta API todavía es limitado. Además, la API de canales de difusión permite la comunicación entre contextos de mismo origen.

Y pasamos a nuestro último ejemplo de hoy. Aquí tenemos un ejemplo de svemirko.rs que traducido al inglés significa astronauta. Svemirko es una aplicación un poco futurista, unos miles de años en el futuro, donde en el backend, estamos comunicándonos con la API de la NASA que nos proporciona la lista de todos los planetas habitables.

Ahora podemos buscar en esa lista y elegir a dónde queremos ir de vacaciones. Pero en el futuro también, tenemos algunos problemas de conectividad fuera de línea. Si nos quedamos sin conexión y si te digo que pasar el ratón sobre este botón de explorar desencadenará la solicitud, probablemente esperarías que esa solicitud ocurra en la red. Pero si estamos sin conexión, esa solicitud de red fallaría, por supuesto. Podemos notar que no está pasando nada en la red. Pero en la pestaña de Aplicaciones bajo Sincronización en Segundo Plano, hay algo más sucediendo. Si hacemos clic, veremos el cargador. Básicamente, nuestra solicitud aún no se ha ido. Y aquí en la Sincronización en Segundo Plano, podemos ver que hay algo llamado RegisterEvent. RegisterSync. Una vez que volvamos a estar en línea, entonces tendremos este evento PepsSync. Nuestra solicitud se fue. Y si esperamos un poco, una vez que esa solicitud se haya completado, entonces tendremos el tercer evento, que se llama SyncCompleted. Ahora tenemos la lista de nuestros planetas. Y podemos buscar y decidir a dónde queremos ir de vacaciones.

¿Cómo logramos hacer esto? Existe una API llamada API de Sincronización en Segundo Plano, que básicamente proporciona una forma de hacer el fuego tarea a un trabajador de servicio, que podemos ejecutar en segundo plano. Si construimos este ejemplo en React, tenemos ese enlace. Una vez que pasamos el ratón por encima, hay en un navegador, dentro de un trabajador de servicio, hay un objeto listo, que es básicamente el registro para la sincronización en segundo plano. Y después de eso, necesitamos llamar a sync y al método de registro y pasar una etiqueta de una tarea. Hacemos eso porque podríamos tener múltiples tareas ejecutándose en segundo plano mientras estamos sin conexión. Y dentro de nuestro trabajador de servicio, lo que queda por hacer es simplemente comparar el nombre de esa etiqueta. Y una vez que obtenemos ese evento, entonces podemos continuar con nuestra solicitud. Por supuesto, algunos de los casos de uso son UX sin conexión y tal vez queremos enviar un correo electrónico, pero nos quedamos sin conexión en ese mismo momento, podemos recuperarnos de eso y ejecutar esa tarea en segundo plano que se continuará una vez que volvamos a estar en línea. De nuevo, comprobando el soporte del navegador para esta API. No tan bien en este momento, pero esperaremos un poco para esto porque esta es una característica bastante impresionante.

En el ejemplo anterior, si te has preguntado cómo logramos pasar los data de los trabajadores de servicio a nuestro componente. Bueno, hay una API llamada API de canales de difusión, que es básicamente un canal para la comunicación entre los mismos contextos, lo que significa, si tenemos las mismas ventanas, pestañas, marcos o iframes, que están en el mismo origen, entonces podemos comunicarnos entre esos orígenes.

6. API de Canales de Difusión y Otros Aspectos Destacados

Short description:

En nuestro ejemplo anterior, nos conectamos a un canal en el trabajador de servicio y enviamos información a nuestro componente. Los casos de uso incluyen la detección de acciones del usuario desde otro origen y la sincronización de acciones en múltiples pestañas. Hay varias otras API que vale la pena explorar, como la API de baliza, la API de voz web, la API de visibilidad de página, la API de red, la API de compartir web, la API de búsqueda en segundo plano y la API de autenticación web. Estas API proporcionan código estandarizado y eliminan la necesidad de contraseñas, ofreciendo una experiencia de desarrollo web más segura y eficiente.

Y funciona en ambos sentidos. En nuestro ejemplo anterior, en nuestro trabajador de servicio, necesitamos conectarnos a un canal. Creamos un nuevo canal de difusión y nos conectamos a él. Y, a través del mensaje de publicación, podemos enviar cierta información a nuestro componente. En nuestro componente, nos suscribimos a ese mismo canal y en un evento de mensaje, obtendremos como parámetro, obtendremos los data que enviamos desde un trabajador de servicio.

Nuevamente, algunos de los casos de uso útiles son detectar la acción del usuario desde otro origen. O si tenemos varias pestañas abiertas para la misma aplicación, si cerramos sesión en una, queremos cerrar la sesión del usuario en todas las pestañas. El soporte del navegador en este caso dice que todo está bien, todo está bien. Podemos usar esta API de forma segura.

Desafortunadamente, porque no tenemos mucho tiempo, tenemos que detenernos aquí por hoy, pero voy a darles algunos puntos extra y espero, los inspiré lo suficiente para ir y buscar algunas de estas API por su cuenta. Pero aquí hay algunos más de mis aspectos destacados. Existe una API de baliza, que básicamente se usa cuando quieres enviar una solicitud, pero no te importa la respuesta. Útil para análisis. Existe una API de voz web. API de visibilidad de página, si quieres rastrear la visibilidad de todo el documento y ciertos elementos. Existe una API de red que te da la información de tu sistema de red. Existe una API de compartir web que puede compartir información, compartir archivos entre diferentes dispositivos. Existe una API de búsqueda en segundo plano. Básicamente, si quieres descargar un documento enorme pero luego te quedas sin conexión, puedes continuar con la descarga una vez que vuelvas a estar en línea. Y por supuesto, una de las probablemente más emocionantes y nuevas son la API de authentication web, que básicamente es una forma para las experiencias sin contraseña. No necesitaremos contraseñas en el futuro. En el futuro podríamos simplemente autenticarnos con nuestro Touch ID con nuestra cara o con nuestra llave USB o algunos otros dispositivos. Es realmente emocionante ver cómo resultará esta API. Y al final algunas de las conclusiones. Hemos visto que algunas de estas API no tienen soporte de navegador en este momento. Alguno de ese soporte está en fase experimental. Tenemos que estar atentos al soporte del dispositivo en algunos casos y hay cierto soporte de TypeScript que falta. Pero, ¿por qué deberíamos usar esta API y adoptar esta mentalidad? Porque es código estandarizado, es código estandarizado, es código estandarizado. Probablemente no puedo enfatizar lo suficiente cuán importante es esto, especialmente en el desarrollo web de hoy donde tenemos un nuevo marco, una nueva biblioteca cada semana. Esto es como una única fuente de verdad.

7. El Impacto de Nuestro Código en el Planeta

Short description:

Al utilizar estas API, podemos aumentar el rendimiento y construir características por nuestra cuenta. Nuestro código tiene un impacto en nuestro planeta, ya que Internet consume el 21% de toda la electricidad. Utiliza la Calculadora de Carbono de Sitios Web para verificar la huella de carbono de tu sitio web. Tomemos medidas y unamos fuerzas para marcar la diferencia.

Este es un código estandarizado, podemos usarlo en todos los navegadores. Así que es realmente, realmente importante. La mayoría de estas API son realmente fáciles de aprender y al adoptar esta mentalidad y usar algunas de las funcionalidades incorporadas en nuestros navegadores, y no usar demasiado las bibliotecas, podemos tener, podemos aumentar el performance como un efecto secundario. Por supuesto, no estoy diciendo que no debamos usar bibliotecas y no debamos reinventar la rueda en ciertos casos de uso, pero en algunos casos de uso, probablemente podemos construir algunas características por nuestra cuenta con la ayuda de estas API.

Y eso me lleva a mi punto, que con gran poder viene una gran responsabilidad. Así que sentí que es mi responsabilidad decírtelo. Quería hablar un poco sobre nuestro planeta. Si estás teniendo una expresión facial 404, como no encontrada en este mismo momento, como qué, ¿qué tiene que ver nuestro código con nuestro planeta? Bueno, en cierto modo sí. Construimos nuestra aplicación React. Ejecutamos una compilación. Hay una salida para esa compilación. Desplegamos eso, nuestros archivos HTML, CSS y JavaScript a algunos proveedores de cloud, que están distribuidos por todo el mundo. Están en los centros de data. Esos centros de data tienen muchas computadoras, básicamente son esencialmente muchas computadoras una al lado de la otra, y todas están conectadas a la electricidad. De hecho, tanto que Internet consume el 21% de toda la electricidad en todo el mundo, lo cual es realmente una información asombrosa para mí, si me preguntas.

Pero afortunadamente para nosotros, hay una aplicación muy interesante llamada Calculadora de Carbono de Sitios Web, que puede verificar la huella de carbono, el tráfico de nuestro sitio web, la intensidad energética y las transferencias de data. Así que te recomendaría encarecidamente que uses esta aplicación y vayas a comprobar cuán verde eres. Esto es súper importante porque solo tenemos un planeta. Este planeta es nuestro hogar y si no somos amables con él, un día será demasiado tarde. Así que lo que podemos hacer es que todos nosotros podemos tomar medidas, unir fuerzas, y en ese sentido podemos proporcionar grandes, grandes resultados todos juntos.

Muchas gracias por venir hoy y por escucharme. Si quieres las diapositivas para repasar y volver a verlas, este es el código QR. Puedes escanearlo. Puedes escribirme. Este es mi correo electrónico. Puedes ir a mi GitHub y revisar todos los ejemplos que he construido. Gracias. Muchas gracias por venir.

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

React Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
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.
React Summit 2023React Summit 2023
24 min
Debugging JS
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.
React Day Berlin 2022React Day Berlin 2022
22 min
Jotai Atoms Are Just Functions
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
React Day Berlin 2022React Day Berlin 2022
29 min
Fighting Technical Debt With Continuous Refactoring
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.
React Summit Remote Edition 2020React Summit Remote Edition 2020
32 min
AHA Programming
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.
React Summit US 2023React Summit US 2023
21 min
The Epic Stack
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 Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Featured WorkshopFree
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.
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Featured WorkshopFree
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.
React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Featured WorkshopFree
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
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Featured WorkshopFree
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
JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Featured WorkshopFree
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.
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
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)