Edición de Video en el Navegador

Rate this content
Bookmark

La edición de video es un mercado en auge con influencers siendo la sensación con Reels, TikTok, Youtube. ¿Sabías que los navegadores ahora tienen todas las APIs para realizar edición de video en el navegador? En esta charla te daré una introducción sobre cómo funciona la codificación de video y cómo hacer que funcione dentro del navegador. Spoiler, ¡no es trivial!

24 min
06 Jun, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta charla discute los desafíos de la edición de video en el navegador y las limitaciones de las herramientas existentes. Explora técnicas de compresión de imágenes, incluyendo la transformada de Fourier y la codificación de Huffman, para reducir el tamaño de los archivos. Se explica el códec de video y el proceso de decodificación de fotogramas, destacando la importancia de los fotogramas clave y los fotogramas delta. Se identifica el cuello de botella de rendimiento como el códec, y se enfatiza la necesidad de hardware especializado para una edición de video eficiente. La charla concluye con un llamado a crear una API simplificada para la edición de video en el navegador y el potencial de la edición de video impulsada por IA.

Available in English

1. Introducción a la Edición de Video en el Navegador

Short description:

Hola a todos. Hoy quiero hablar sobre la edición de video en el navegador. Pasé mucho tiempo haciendo edición de video durante la pandemia. Sin embargo, me di cuenta de que las herramientas existentes no tenían los avances de IA que necesitaba. Quería eliminar el fondo verde y las sombras, y cortar según las palabras habladas. Por otro lado, vi desarrollos emocionantes en JavaScript, como WebCodecs, TensorFlow.js y Whisper. Esta charla explicará por qué no pude lograr completamente un buen editor de video impulsado por IA. Comencemos pensando en cómo hacer un video.

Mi nombre es Christophe Archido, también conocido como Vegeux en Internet. Y he hecho algunas cosas para la comunidad de React. Co-creé React Native, Prettier, Excalibur, CSS en JS, pero hoy quiero hablar sobre algo diferente. Quiero hablar sobre la edición de video en el navegador.

Así que durante la pandemia, pasé mucho tiempo haciendo edición de video. Incluso estaba pensando en convertirme en un YouTuber a tiempo completo. Pero luego me di cuenta de que con este número de visitas, probablemente debería mantener mi trabajo como ingeniero de software por un poco más de tiempo.

Entonces, ¿qué significa editar videos? Usé una herramienta llamada Final Cut Pro. Y sentí que estaba construida hace muchos, muchos años y no tenía todos los avances de IA que hemos visto recientemente. Por ejemplo, compré una pantalla verde de $20. Y necesito seleccionar el color verde y el rango para eliminarlo. Y como puedes ver, hay algunas sombras detrás de mí en la imagen. Y no se eliminaron correctamente. Luego, para cortar, quiero saber qué estoy diciendo para saber qué parte debería cortar. Pero solo obtuve las ondas de sonido y no las palabras habladas reales. Por otro lado, estaba mirando las noticias de JavaScript, como el navegador, y vi muchas cosas súper emocionantes sucediendo. Así que podemos comenzar a hacer codificación y decodificación con WebCodecs. TensorFlow.js te permite eliminar el fondo del video. Y luego, Whisper te permite convertir lo que estoy diciendo en palabras reales. Así que aparentemente teníamos todos los bloques de construcción para poder hacer un buen editor de video impulsado por IA, pero desafortunadamente no pude llegar hasta allí. Y esta charla será la historia de por qué.

Por lo general, cuando me enfrento a un nuevo producto como este, hay algunas cosas que creo que son verdaderas y en las que baso todo lo que hago. Pero en este caso, había tres cosas que no eran ciertas. La primera es que el tiempo solo avanza hacia adelante. La segunda es que cuando codificas un fotograma, obtienes un fotograma de vuelta. Y finalmente, que WASM es más rápido que JavaScript para la decodificación de video. Entonces, si quieres saber por qué esto no es cierto, prepárate. Vamos a ello. Así que comencemos pensando en cómo hacer un video.

2. API de Edición de Video y Compresión de Imágenes

Short description:

Desafortunadamente, la API deseada para la edición de video en el navegador no es posible debido al tamaño de los archivos involucrados. Una sola imagen de mil por mil píxeles puede tener alrededor de cuatro megabytes de tamaño. Con 60 fotogramas por segundo, un video de un segundo tendría alrededor de 200 megabytes. Esto es demasiado grande para los navegadores y computadoras actuales. Sin embargo, se han desarrollado técnicas de compresión de imágenes para abordar este problema, que se discutirán en los próximos minutos.

Desafortunadamente, no puedo estar aquí en persona hoy, así que decidí traer un poco del soleado California a Ámsterdam. Para esto, puse una palmera en todas las imágenes. En este caso, tenemos la cumbre de React en el fondo y luego se mueve al primer plano y la palmera se desvanece. ¿Cuál sería la API que esperaría poder hacer eso? Inicialmente, quería una API de carga de video. Que tome una ruta de archivo y me devuelva una lista de imágenes. Luego modificaría las imágenes, eliminaría el fondo, cortaría y pegaría y muchas otras cosas. Y luego una API de guardado de video que tome la ruta de archivo y renderice, y una lista de imágenes y realmente guarde el video.

Desafortunadamente, esta API no puede existir. Veamos por qué. Veamos una imagen de todo este video. No demasiado grande, no demasiado pequeña. Una imagen de mil por mil. ¿Y qué tan grande es en realidad para representar esto? Será de mil por mil píxeles, alrededor de un megabyte. Y luego tenemos rojo, verde y azul. Así que estamos hablando de alrededor de cuatro megabytes de tamaño. Y esto es solo para una imagen. Ahora, si queremos 60 fps, como un segundo, estaríamos hablando de alrededor de 200 megabytes por cada segundo. Esta charla dura alrededor de 20 minutos, así que esto sería grande. Y en realidad sería demasiado grande para el navegador o cualquier computadora en este momento. ¿Y qué hacemos? Afortunadamente, muchas personas muy inteligentes han estado trabajando en esto durante años. Y lo que han construido es una máquina de reducción. Bueno, no exactamente. Lo que las personas han estado haciendo es compresión de imágenes. Y hablaré durante los próximos minutos sobre diferentes tipos de compresión de imágenes. Y no solo porque me parezca interesante, que lo es, sino porque realmente tienen un gran impacto en la API utilizada para la codificación de video. Así que veamos las ideas principales sobre la compresión de imágenes.

3. Técnicas de Compresión de Imágenes

Short description:

En los fotogramas de video con solo dos colores, podemos usar la codificación de longitud de ejecución para reducir el tamaño. Sin embargo, esta técnica no es efectiva para imágenes con colores de píxeles variables. Exploraremos otras técnicas para abordar este problema.

Entonces, si observamos este fotograma, una cosa que podemos ver es que solo se están utilizando dos colores y hay muchos píxeles blancos y oscuros. En lugar de mostrar siete píxeles oscuros seguidos con rojo, verde, azul, rojo, verde, azul, rojo, verde, azul, lo que podemos hacer es comenzar a escribir un byte, que es un número del píxel, y luego el rojo, verde, azul una vez, y luego podemos repetirlo así. Y esto es una técnica llamada codificación de longitud de ejecución. Ahora, esta técnica en sí misma es muy útil para imágenes con solo dos colores, pero si tomas una foto con tu cámara, nunca verás dos píxeles uno al lado del otro con el mismo color exacto. Y veremos a continuación cómo ayudar con esto, pero ten en cuenta que este es un bloque de construcción para comprimir imágenes que se utilizará en el proceso.

4. Técnicas de Compresión de Imágenes Continuadas

Short description:

Podemos usar una transformada de Fourier para descomponer la imagen en funciones sinusoidales y reducir la información necesaria para codificarla. Otra técnica es la codificación de Huffman, que remapea patrones de 0s y 1s para comprimir la imagen. Estos bloques de construcción, junto con otros, permiten reducir el tamaño de la imagen en 10 veces. Sin embargo, para los videos, podemos mejorar aún más la compresión codificando solo las diferencias entre fotogramas consecutivos y prediciendo el siguiente fotograma.

Entonces, ahora la otra estrategia de la que voy a hablar, necesitas tener algo de imaginación para esto. En este caso, vamos a pensar en la imagen no como una serie de píxeles, sino como una función continua. Y una de las cosas que podemos hacer con una función continua es aplicar una transformada de Fourier sobre ella, lo que va a descomponer esta función continua en una suma infinita de funciones sinusoidales como seno y coseno con alguna variación. Entonces, ¿por qué querrías eso? ¿Cómo es útil? Lo que puedes ver en la ilustración son las primeras funciones sinusoidales, que en realidad terminan siendo muy similares a la función final, y a medida que te adentras en esas funciones sinusoidales, tienen menos información.

En la práctica, si solo mantienes las primeras y las vuelves a codificar, obtendrás una imagen muy similar pero perderás muchos detalles que es posible que no puedas percibir. Ahora, cada una de estas funciones requiere aproximadamente la misma cantidad de bits para codificar, por lo que al hacer esto puedes reducir la información que debes codificar para comprimir la imagen. Y la tercera técnica de la que voy a hablar... También debes pensar en la imagen de una manera diferente, en este caso como una serie de 0s y 1s. Y lo que podemos observar es que están surgiendo algunos patrones.

Por ejemplo, la secuencia 0 1 0 1 está presente 15 veces. Luego, la secuencia 1 1 0 solo está presente unas 7 veces, y así sucesivamente hasta que en algún momento algunas de ellas solo estarán presentes una vez. La idea detrás de la compresión es que puedes hacer un remapeo. Puedes remapear 0 1 0 1 al bit 0, luego puedes remapear 1 1 0 a los 2 bits 1 0, y así sucesivamente, hasta que en algún momento, debido a que has mapeado varias cosas a cosas más pequeñas, algunas cosas deberán ser mapeadas a cosas más grandes. Pero si observas todas las secuencias de 0s y 1s, se comprimirán utilizando esta técnica si también agregas la tabla de mapeo. Esto se llama codificación de Huffman. Estos son como tres bloques de construcción para comprimir la imagen. ¿Y cuál es el resultado de esto? Podemos reducir el tamaño de la imagen en 10 veces. Es decir, pasamos de tener 4 MB a aproximadamente 400K. Y esto se llama compresión de imagen. Los formatos de compresión de imagen más populares son JPEG, WEBP y PNG. Estos utilizan todos estos bloques de construcción y algunos más para comprimir la imagen. Hemos logrado un gran avance en la reducción del tamaño de la imagen, pero aún así, para nuestro video, sigue siendo demasiado, alrededor de 20 MB por segundo. Entonces, ¿qué más podemos hacer? Para esto, podemos pensar en nuestro video como una serie de imágenes. Pero ahora puedes ver que todas las imágenes una al lado de la otra son muy, muy similares. Y probablemente haya algo que podamos hacer al respecto. La primera idea es hacer una diferencia entre la imagen anterior y la imagen siguiente. Y codificar solo la diferencia utilizando las estrategias anteriores. Esto funciona y da mejores resultados, pero podemos hacerlo aún mejor. Lo que podemos hacer es comenzar a predecir cuál será la siguiente imagen.

5. Video Codec and Frame Decoding

Short description:

El códec de video reduce drásticamente el tamaño de los fotogramas. Hay dos tipos de fotogramas: fotogramas clave y fotogramas delta. Para decodificar el video, se requiere una API con estado y los fotogramas deben enviarse en un orden específico. Los fotogramas bidireccionales (B-frames) optimizan la codificación de video decodificando los fotogramas en ambas direcciones. Esto introduce dos nociones de tiempo: tiempo de presentación y marca de tiempo de decodificación. La API debe incluir una API de carga de video y una API de decodificador.

Y en este caso, la palmera va desde la esquina superior izquierda hasta la esquina inferior derecha. Y así puedes empezar a predecir dónde estará la próxima imagen y luego hacer el delta basado en esta predicción. Y así se llama un códec de video. Y los códecs de video más populares son H.264 y AVC, que son lo mismo pero con un nombre diferente como JavaScript y Xamarin. Y también está AV1, VP8, VP9.

Entonces este códec de video es capaz nuevamente de reducir drásticamente el tamaño. Entonces en este caso, así es como se ve nuestra configuración. Ahora tenemos dos tipos de fotogramas. Tenemos fotogramas clave, así que en este caso, el primer fotograma, que utiliza algo como JPEG para comprimirlo, y luego tenemos fotogramas delta. Entonces en este caso, como cada uno en esta imagen.

Y ahora, para decodificar el video, ya no es simplemente, oh, dame una imagen y puedo hacerlo. Ahora necesitas comenzar con el fotograma clave. Y luego, para decodificar el segundo, necesitas haber decodificado el fotograma clave, hacer la predicción de dónde estará a continuación y luego hacer el delta para decodificarlo. Así que ahora vemos que necesitamos una API con estado y en un orden específico. Pero esta es solo una parte del panorama, porque las personas que hacen la codificación y compresión de video querían hacerlo aún mejor. Una cosa que se dieron cuenta es que puedes hacer esta optimización avanzando. Pero también puedes hacerlo hacia atrás. Entonces puedes comenzar desde el final, hacer la predicción, la codificación y luego comenzar a ver en qué dirección obtenemos el mayor ahorro. Y tomar el que en realidad será el más pequeño en general. Y aquí es donde entra en juego la noción de fotogramas bidireccionales o B-frames. Entonces en este caso, el fotograma número 5 es un B-frame, lo que significa que para decodificarlo, necesitas decodificar el número 4 y el número 6. Y también para decodificar el número 6, necesitas hacer el 7, y el 7 necesitas el 8 y el 8 necesitas el 9, y lo mismo en la otra dirección. Y ahora lo que estás viendo es que para decodificar la secuencia de video en orden, necesitas enviar todos los fotogramas en un orden diferente. Y aquí es donde tenemos dos nociones de tiempo. Entonces tenemos el tiempo de presentación, que es el que esperas ver en la duración de la película, y luego el segundo es la marca de tiempo de decodificación. Y esta es la marca de tiempo en la que debes enviar los fotogramas para que se decodifiquen en el orden correcto. Y aquí es donde tenemos nuestra primera, en realidad no hay verdad, donde el tiempo solo avanza hacia adelante. Ahora que hemos visto las primeras cosas rompedoras, volvamos a la API, en realidad la API real. Entonces en este caso, necesitamos tener algún tipo de API de carga de video para que nos dé todos los fotogramas. Y luego queremos una API de decodificador.

6. Video Decoding and Performance

Short description:

Los códecs web proporcionan un decodificador de video con opciones, incluyendo una devolución de llamada en los fotogramas decodificados. La decodificación de los fotogramas puede no devolverlos en el mismo orden en que se enviaron. La API de carga de video requiere almacenar metadatos, como el tiempo de los fotogramas, tipos, marcas de tiempo y dependencias. Los contenedores de video como mp4, move, avi y mkv contienen los fotogramas para el códec. El cuello de botella de rendimiento es el códec, que maneja la compresión de imágenes, descompresión, predicciones y codificaciones.

Y así en este caso, los códecs web, como el navegador, nos proporcionan un decodificador de video con un montón de opciones, incluyendo una devolución de llamada en el fotograma decodificado. Y ahora necesitas hacer decoder.decode, enviarlo como el primer fotograma, y luego se procesará, y en algún momento nos dará una devolución de llamada con la primera imagen. Y luego lo hacemos con el número dos, número tres, número cuatro, y los estamos obteniendo en orden. Pero ahora, ¿qué sucede con nuestros fotogramas B? Ahora lo que necesitamos hacer es enviar el fotograma número nueve, y luego el fotograma número ocho, y luego los fotogramas siete y seis. Pero nuestra devolución de llamada no se llamará. Es como si no pasara nada, pero en la práctica, muchas cosas están sucediendo detrás de escena. Y solo cuando enviamos el fotograma número cinco, ahora va a hacer toda la cadena nuevamente y va a llamar a todos nuestros fotogramas en el orden correcto para que podamos usarlos. Y así es donde la verdad número dos es una mentira. Entonces, si estás decodificando un fotograma, no obtienes un fotograma de vuelta. En la práctica, puedes obtener cero o puedes obtener cinco según cómo se haya hecho la codificación. Y así esto es muy confuso porque todas las APIs que puedo pensar, incluso la API asincrónica, cuando llamas algo, te lo devuelve después de algún tiempo, pero nunca es como que obtienes uno o diez o cero, y de una manera muy impredecible. Ahora que hemos visto otra verdad, vayamos aún más profundo. Entonces pensemos en esta API de carga de video de la que hablé. ¿Cómo codificarías toda esta información? Ahora hay muchos metadatos que necesitamos. Necesitamos tener, por ejemplo, ¿cuánto tiempo dura un fotograma? ¿Cuál es la lista de fotogramas? ¿Cuáles son nuestros tipos? ¿Cuáles son las marcas de tiempo? ¿Cuáles son nuestras dependencias entre ellos? Entonces, muchos metadatos que deben almacenarse. Y si lo hiciéramos hoy, probablemente lo implementaríamos en JSON. Pero todos esos cinco formatos se escribieron hace unos 20 años. Y así todos están en binario, pero la idea es la misma. Entonces, ¿cómo se llama este paso? ¿Cómo se llama esto? Esto se llama un contenedor de video. Y en la práctica, los cuatro más conocidos son mp4, move, avi y mkv. Y todos ellos utilizan diferentes codificaciones y diferentes formas de representarlo, pero todos tienen información muy similar que se trata de un contenedor para luego llamar al códec. Y este paso de leer estos formatos de archivo y luego enviar todos los fotogramas en el orden correcto al códec se llama demultiplexación. Entonces ahora se llama demultiplexación. Ahora hablemos un poco sobre el rendimiento. Entonces, ¿qué lleva tiempo en todo este proceso? En la práctica, el códec es la parte que lleva más tiempo. Y para refrescar tu mente, el códec está haciendo toda la compresión de imágenes, descompresión, todas las predicciones, todos los deltas, todas estas codificaciones. Y una de las formas de pensarlo es simplemente mirar el tamaño de las cosas. Entonces, los datos binarios son de decenas a cientos de kilobytes. Pero luego, los metadatos reales para cada fotograma son de decenas de caracteres. Y así puedes ver un cambio muy grande.

7. Video Editing Challenges and Call to Action

Short description:

La edición de video en el navegador es compleja y consume mucho tiempo, requiriendo hardware especializado para un rendimiento óptimo. WebCodecs permite el uso de JavaScript para aprovechar las funcionalidades aceleradas por hardware. Sin embargo, el uso de WebAssembly (Wasm) para la lectura y decodificación de archivos presenta desafíos debido a la copia de memoria. Wasm no es más rápido que JavaScript puro para la decodificación de video, pero puede ser útil para reutilizar código. Aunque aún no está disponible un editor de video completamente funcional con capacidades de IA, es posible decodificar y volver a codificar archivos de video en el navegador con un buen rendimiento. El llamado a la acción es crear una API similar a jQuery para la edición de video en el navegador, simplificando el proceso y permitiendo la edición de video con IA.

Y esto es tan consumidor de tiempo y complicado y requiere tanto rendimiento que ahora hay unidades especializadas de hardware junto a la CPU o la GPU que realizan todas las operaciones que mencioné, como la Transformada Rápida de Fourier, la codificación Huffman y todas esas cosas en el hardware. Y la razón por la que está en el hardware es porque hacerlo solo en la CPU normalmente, incluso con el código C++ más optimizado, no era lo suficientemente rápido. Y ahora, si quieres usar Wasm, ahora tendrías que no solo tener algo que no es tan rápido porque se ejecuta en la CPU, sino también con cierta sobrecarga por Wasm. Y hacerlo de esta manera será más lento. Y aquí es donde WebCodecs es muy emocionante, ahora podemos usar una API de JavaScript y enviar todos estos datos binarios y la API de WebCodecs utilizará todas esas funcionalidades aceleradas por hardware. Así que esto es emocionante. Ahora, esto es solo una parte de la ecuación. La segunda parte es lo que necesitamos hacer para leer este archivo, este archivo binario, como hacer esta demultiplexación. ¿Podríamos usar Wasm para esto? Nuevamente, la historia es un poco más complicada. La forma en que funciona Wasm es que crea un nuevo montón de memoria, como un espacio de memoria. Y para codificar en él y hacer que haga su trabajo, debes copiar toda la información a este nuevo espacio, luego hacer su trabajo y luego copiarlo y luego devolvértelo. Y aquí estamos hablando de cientos de kilobytes, como megabytes de información, y hacer una copia para hacer no mucho trabajo para decodificar esto, y luego copiarlo de vuelta y luego enviarlo de vuelta a la API de WebCodecs. Y hacer esta copia en realidad anula cualquier ventaja que puedas tener al usar Wasm, que es más rápido. Así que aquí es donde nuestra tercera verdad se convierte en una mentira, donde Wasm no es más rápido que usar JavaScript puro para la decodificación de video. Ahora, una advertencia que voy a decir es que en la práctica, la demultiplexación no es parte de la API de WebCodecs. No es parte del navegador. Entonces, debes hacerlo por tu cuenta. Y se han escrito muchas API en C++ para la demultiplexación a lo largo de los años. Y así, para reutilizar código, en realidad es una forma legítima de usar Wasm para esto. Pero en realidad no es por razones de rendimiento. Ahora que hemos desacreditado estos tres mitos, ¿en qué punto nos encontramos? En la práctica, desearía haber terminado la charla diciendo que puedes usar este editor de video con todas sus funcionalidades. Aún no he llegado a ese punto. Lo que he logrado hacer es decodificar un archivo de video completo y volver a codificarlo sin hacer nada. Y en el navegador. La buena noticia es que, uno, es posible y funciona. Y la segunda es que es realmente rápido. Debido a que estamos utilizando las características aceleradas por hardware, es tan rápido como usar Final Cut Pro en el navegador. El rendimiento está ahí. La capacidad está ahí. Pero el problema es que hacerlo lleva cientos de líneas de código complicado que es muy difícil de depurar y que necesita comprender todas las cosas de las que te he hablado hasta ahora. Y aquí es donde mi llamado a la acción para cada uno de ustedes es que necesitamos tener un jQuery de edición de video en el navegador. Necesitamos limpiar la API y empaquetarla de manera que sea posible crear un editor de video con IA. Entonces, ¿serás tú quien lo construya? Este es mi llamado a la acción. Gracias, que tengas un buen día.

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

TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
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 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 Advanced Conference 2022React Advanced Conference 2022
22 min
Monolith to Micro-Frontends
Top Content
Many companies worldwide are considering adopting Micro-Frontends to improve business agility and scale, however, there are many unknowns when it comes to what the migration path looks like in practice. In this talk, I will discuss the steps required to successfully migrate a monolithic React Application into a more modular decoupled frontend architecture.
React Advanced Conference 2023React Advanced Conference 2023
22 min
Power Fixing React Performance Woes
Next.js and other wrapping React frameworks provide great power in building larger applications. But with great power comes great performance responsibility - and if you don’t pay attention, it’s easy to add multiple seconds of loading penalty on all of your pages. Eek! Let’s walk through a case study of how a few hours of performance debugging improved both load and parse times for the Centered app by several hundred percent each. We’ll learn not just why those performance problems happen, but how to diagnose and fix them. Hooray, performance! ⚡️
React Summit 2023React Summit 2023
32 min
How Not to Build a Video Game
In this talk we'll delve into the art of creating something meaningful and fulfilling. Through the lens of my own journey of rediscovering my passion for coding and building a video game from the ground up with JavaScript and React, we will explore the trade-offs between easy solutions and fast performance. You will gain valuable insights into rapid prototyping, test infrastructure, and a range of CSS tricks that can be applied to both game development and your day-to-day work.

Workshops on related topic

React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
Top Content
WorkshopFree
Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment.
JSNation 2022JSNation 2022
41 min
Build a chat room with Appwrite and React
WorkshopFree
API's/Backends are difficult and we need websockets. You will be using VS Code as your editor, Parcel.js, Chakra-ui, React, React Icons, and Appwrite. By the end of this workshop, you will have the knowledge to build a real-time app using Appwrite and zero API development. Follow along and you'll have an awesome chat app to show off!
GraphQL Galaxy 2021GraphQL Galaxy 2021
164 min
Hard GraphQL Problems at Shopify
WorkshopFree
At Shopify scale, we solve some pretty hard problems. In this workshop, five different speakers will outline some of the challenges we’ve faced, and how we’ve overcome them.

Table of contents:
1 - The infamous "N+1" problem: Jonathan Baker - Let's talk about what it is, why it is a problem, and how Shopify handles it at scale across several GraphQL APIs.
2 - Contextualizing GraphQL APIs: Alex Ackerman - How and why we decided to use directives. I’ll share what directives are, which directives are available out of the box, and how to create custom directives.
3 - Faster GraphQL queries for mobile clients: Theo Ben Hassen - As your mobile app grows, so will your GraphQL queries. In this talk, I will go over diverse strategies to make your queries faster and more effective.
4 - Building tomorrow’s product today: Greg MacWilliam - How Shopify adopts future features in today’s code.
5 - Managing large APIs effectively: Rebecca Friedman - We have thousands of developers at Shopify. Let’s take a look at how we’re ensuring the quality and consistency of our GraphQL APIs with so many contributors.
JSNation 2023JSNation 2023
57 min
0 To Auth In An Hour For Your JavaScript App
WorkshopFree
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool.
We will enhance a full-stack JS application (Node.js backend + Vanilla JS frontend) to authenticate users with One Time Passwords (email) and OAuth, including:
- User authentication – Managing user interactions, returning session / refresh JWTs- Session management and validation – Storing the session securely for subsequent client requests, validating / refreshing sessions
At the end of the workshop, we will also touch on another approach to code authentication using frontend Descope Flows (drag-and-drop workflows), while keeping only session validation in the backend. With this, we will also show how easy it is to enable biometrics and other passwordless authentication methods.
JSNation 2023JSNation 2023
87 min
Build a Collaborative Notion-Like Product in 2H
WorkshopFree
You have been tasked with creating a collaborative text editing feature within your company’s product. Something along the lines of Notion or Google Docs.
CK 5 is a feature-rich framework and ecosystem of ready-to-use features targeting a wide range of use cases. It offers a cloud infrastructure to support the real-time collaboration system needs. During this workshop, you will learn how to set up and integrate CK 5. We will go over the very basics of embedding the editor on a page, through configuration, to enabling real-time collaboration features. Key learnings: How to embed, set up, and configure CK 5 to best fit a document editing system supporting real-time collaboration.
Table of contents:- Introduction to the CK 5 ecosystem.- Introduction to a “Notion-like” project template.- Embedding CK 5 on a page.- Basic CK 5 configuration.- Tuning up CK 5 for a specific use case.- Enabling real-time editing features.