Aplicar o no: Cuándo elegir Nativo o Web

Rate this content
Bookmark
Slides

En el panorama actual, decidir entre construir una aplicación nativa o una aplicación web puede impactar significativamente en el éxito de tu proyecto y en la experiencia del usuario. A medida que la tecnología avanza y las expectativas de los usuarios continúan evolucionando, el proceso de toma de decisiones se vuelve cada vez más complejo. Profundicemos en las consideraciones clave que pueden ayudarte a determinar qué es lo correcto para ti, una aplicación nativa o una aplicación web. También veremos ejemplos reales de aplicaciones y examinaremos las razones detrás de su elección de enfoque de desarrollo.

23 min
12 Dec, 2023

AI Generated Video Summary

La Charla discute la elección entre construir aplicaciones nativas o aplicaciones web para el desarrollo de software. Explora los beneficios de construir aplicaciones web, como el desarrollo rápido, la depuración fácil y la representación universal. También destaca el poder de las aplicaciones nativas, con sus características avanzadas, mejor experiencia sin conexión y oportunidades de monetización. La Charla sugiere el uso de bibliotecas como Capacitor o React Native para combinar los beneficios de ambas, las aplicaciones web y nativas.

1. Introducción y Distribución de Aplicaciones

Short description:

Tengo una oportunidad para que todos ustedes se unan a mí en la construcción del último y mejor producto. Incluye una atractiva biblioteca de interfaz de usuario y IA para información contextual. Necesito ayuda para averiguar la mejor manera de distribuirlo ya que hay múltiples caminos a elegir. ¿Deberíamos construir una aplicación nativa o una aplicación web?

Bueno, solo tengo unos 20 minutos pero tengo una oportunidad para todos ustedes y me gustaría invitarlos a unirse a mí. Así que estoy construyendo el último y mejor producto estos días. Tiene una atractiva biblioteca de interfaz de usuario que personalmente conozco y amo. Incluye un montón de IA para que podamos proporcionar información contextual a todos nuestros usuarios. Tengo que averiguar la última parte pero tiene que ver con cómo podemos hacer que esa aplicación llegue a todos. Y esa es la parte en la que me gustaría invitarlos a ayudarme a averiguar. ¿Cuál es la mejor manera de distribuir esto? Realmente al final del día quiero asegurarme de que esta aplicación esté disponible para todos. Es algo realmente muy difícil de averiguar porque hay múltiples caminos de distribución para cómo puedes enviar una aplicación y el camino que elijas va a influir en cómo realmente vas a construir la aplicación. Así que vamos a intentar recorrer este proceso. Vamos a averiguar si debemos hacer una aplicación o no, si debemos enviar esta aplicación como una aplicación nativa o como una aplicación web.

2. La Primera App y Nativa vs. Web

Short description:

Esta es la historia de la primera aplicación que construí en 2012. Fue una época en la que las aplicaciones móviles eran necesarias para ser tomadas en serio como empresa. Como desarrollador web, tuve que aprender Xcode y lidiar con lenguajes de bajo nivel. El desarrollo de Android también fue un desafío en ese momento. Sin embargo, tanto iOS como Android han avanzado mucho desde entonces. Me pregunté por qué no construimos simplemente una aplicación web, pero esa era la época de las aplicaciones nativas.

Soy Mike Hardington, trabajo en una empresa llamada Ionic. Puedes encontrarme básicamente en todas partes en línea como mhardington.

Antes de hacer eso, hagamos un viaje al pasado a la primera aplicación que construí. Esta es una aplicación, no te preocupes, los logotipos, los nombres de las empresas han sido un poco ofuscados. Pero esta fue una aplicación que construí alrededor de 2012. Fue un momento muy interesante en ese espacio, esto es antes de iOS 7, así que todavía estamos lidiando con algo de este esquemorfismo de bloques. Pero lo que tenemos es una aplicación que estaba cargando un montón de contenido de un servicio remoto. Estamos extrayendo imágenes, estamos extrayendo descripciones de productos. Quiero decir, incluso estamos extrayendo algunos de los estilos que se usaban en ese producto porque esta aplicación fue construida usando una carcasa de aplicación y cargando HTML, CSS y JavaScript. Esto era realmente como la vanguardia en ese momento, pero nos permitió construir este demo de producto completo que luego podríamos distribuir a todos nuestros vendedores y a todos nuestros formadores técnicos y darles la información que necesitan directamente en su dispositivo.

Ahora las preguntas que tenía eran, bueno, si estamos extrayendo todo este contenido web, ¿por qué necesitamos una aplicación móvil? Y en ese momento, el consenso general era, bueno, necesitas una aplicación para convertirte en una empresa seria. Y eso fue el fin de la discusión. Eso fue lo suficientemente fácil para el jefe de la empresa decirlo, pero yo, como un humilde desarrollador web, una de las cosas con las que tuve que lidiar fue aprender Xcode. Y este fue realmente el momento en que Xcode parecía iTunes. Había mucho de Objective C, incluso C, C++, como cosas realmente, realmente de bajo nivel. Y esto es que, como desarrollador de JavaScript, no estaba bien equipado para manejar esto. Básicamente me tropecé a través de ello. Afortunadamente, los tiempos han evolucionado desde entonces donde tenemos un IDE de aspecto mucho más agradable para el desarrollo de iOS, pero también tenemos mejores lenguajes que son más accesibles para las personas que vienen de lenguajes de sistema no de bajo nivel.

Android no era tan genial como, bueno, ni siquiera teníamos un IDE en ese momento. Estábamos usando cosas como Eclipse con el plugin del SDK de Android habilitado para que pudiéramos seguir adelante y hacer algo de desarrollo de Android. Esto no era el gran desarrollo de Android de Kotlin. Todavía estábamos escribiendo Java. Todavía estábamos lidiando con algunos de estos enfoques anticuados para construir aplicaciones de Android y hacer cosas para Android pre 4.0 era bastante desafiante. Afortunadamente, como iOS, Android también ha avanzado mucho, donde el Java que escribimos es en realidad mucho más familiar para las personas que han hecho JavaScript ahora y TypeScript, y el IDE es, si has usado cualquier producto de IntelliJ, va a ser el mismo IDE, porque está basado en toda su experiencia de editor principal.

Pero de nuevo, seguí presionando para, ¿por qué no hacemos esto como una aplicación web? Este es el momento de la web, ¿verdad? Todo va a ser genial. No necesitaba construir y desplegar mi aplicación web. Solo necesitaba agrupar todos mis scripts y luego abrir el cliente FTP. Tenía mis credenciales. Sabía dónde estaba la carpeta en mi escritorio. Podía simplemente arrastrarla a nuestro proveedor de hosting, subirla, y ya está, ¿verdad? Y eso fue en 2012.

3. Construyendo una Aplicación Web

Short description:

La web ha mejorado con el tiempo, con compilaciones y despliegues automatizados. Como desarrolladores, a menudo debatimos si construir una aplicación móvil o web. Exploremos los beneficios de construir una aplicación web. Con HTML, CSS y JavaScript como bloques de construcción fundamentales, podemos crear experiencias convincentes. El modelo basado en componentes de la web y la funcionalidad incorporada eliminan la necesidad de bibliotecas adicionales. El desarrollo en la web es rápido, permitiendo cambios instantáneos y una fácil depuración. La web es universal, se representa en varios dispositivos y plataformas. Ofrece características poderosas como WebRTC, notificaciones push, USB y NFC.

Y, ya sabes, solo ha mejorado para la web, donde ahora, en lugar de tener que lidiar con FTP, podemos simplemente hacer un commit y subirlo a nuestro principal servicio Git y luego desencadenar una serie de acciones, ya sea que estemos usando algo como CircleCI, GitHub Actions. Todas nuestras compilaciones y despliegues pueden ser automatizados, de manera que, tan pronto como hagamos push Netlify, Vercel, Firebase, lo que sea, pueden recoger esos cambios y manejar todo lo demás por nosotros.

Entonces, es fácil ver que todas esas tres plataformas, Android, iOS e incluso la web, han mejorado mucho con el tiempo. Y todavía tenemos esta eterna pregunta como desarrolladores, ya sabes, ¿deberíamos construir una aplicación móvil o no? ¿Deberíamos construir una aplicación web o no? Y quiero repasar algunos de los pros y contras de cada una de estas plataformas. Soy un fan de largo tiempo de la web, así que intentaré no ser tan parcial hacia ella, pero hay muchas grandes capacidades de ambas plataformas que realmente deberíamos considerar a medida que empezamos a construir nuestros productos.

Entonces, echemos un vistazo a la web y lo que obtenemos cuando decidimos que queremos construir una aplicación web. Bueno, en primer lugar, tenemos que mencionar los lenguajes que estamos usando en la web. HTML, CSS, y JavaScript. Estos son los fundamentos básicos para construir una aplicación web que realmente nos ayudan a construir cosas increíbles y convincentes. Sí, podemos traer cosas como React o Next, pero si por alguna razón, React y Next desaparecieran, todavía tendríamos estos bloques de construcción básicos que podríamos utilizar y construir cosas bastante convincentes. Sé que la gente todavía está indecisa sobre los componentes web, pero una vez que empiezas a construir cosas en un modelo basado en componentes usando la funcionalidad incorporada del navegador y JavaScript, básicamente miras esto y dices, huh, ¿cuál es la razón para traer todas estas otras bibliotecas? La web es una plataforma bastante convincente en ese caso.

Y los lenguajes que conocemos para construir estas características y estas interfaces de usuario también son convincentes. Con esas herramientas y estos lenguajes en nuestro conjunto de habilidades, nuestra capacidad para construir algo en la web es increíblemente rápida. Comparado con lo que podemos hacer en nativo, no estamos gastando mucho tiempo con este ciclo de construcción, compilación. Literalmente estamos abriendo nuestro servidor de desarrollo y luego podemos ver los cambios que ocurren instantáneamente en la aplicación en el cliente. Lo cual es súper valioso. La capacidad de poder inspeccionar todo en el entorno en el que realmente se va a desplegar, y realmente mirar todos esos nodos, significa que estamos gastando menos tiempo teniendo que depurar la aplicación en sí y más tiempo simplemente averiguando, ¿cómo estamos construyendo el diseño? ¿Por qué este estilo no se está aplicando? ¿Dónde puedo hacer algunos cambios para optimizarlo para la usabilidad? Nuestra capacidad para tomar todo esto y simplemente iterar e iterar muy rápidamente, no puede ser subestimada.

Ahora, esto puede parecer el símbolo de USB, pero en realidad es el símbolo de universal. Al menos en mi canon personal. La capacidad de poder tomar algo para la web y desplegarlo, es bastante universal. Solo puedo pensar en quizás un puñado de dispositivos que realmente no pueden renderizar contenido web. Mientras que puedo pensar en tantos lugares donde el contenido web puede ser renderizado. Obviamente, tenemos nuestros entornos de escritorio, tenemos nuestros navegadores móviles, pero también tenemos quioscos de pago. También tenemos el centro de control de la NASA. Todos están usando tecnologías web para renderizar la interfaz de usuario. Porque es tan rápido, porque es universal, porque son cosas que todos conocen, y pueden ser productivos muy rápidamente.

Siguiendo con eso, tenemos cosas como, tenemos características poderosas dentro de la web que nos permiten construir mejores aplicaciones de las que hemos podido. Si echamos un vistazo a algunas de las características de lo que la web puede hacer, puedes mostrarnos que obviamente podemos hacer cosas como WebRTC, podemos hacer algunas notificaciones push, podemos hacer USB y NFC, todas estas características geniales que están incorporadas en el navegador que los desarrolladores nativos siempre han colgado sobre nuestras cabezas como, oh, la web nunca podrá hacer esto. Pero la web es una historia de siempre poder alcanzar. Y con esas características, estamos viendo que la web puede ser empujada hacia adelante para hacer cosas nuevas y increíbles.

4. Beneficios del Desarrollo Web

Short description:

La web no solo proporciona características potentes y de alto rendimiento, sino que también ofrece una experiencia de desarrollo divertida y agradable. Construir para la web permite a los desarrolladores divertirse con CSS, trabajar con los últimos frameworks de JavaScript y explorar el potencial futuro de la web. Estas características hacen de la web una plataforma súper atractiva.

Y no solo de una manera que nos brinda características poderosas, sino de una manera que nos va a proporcionar características muy eficientes. Vamos a ser conscientes de la huella energética de lo que construimos. No vamos a enviar cosas que puedan reducir la batería del dispositivo del usuario. Así como su escritorio. Porque simplemente no vamos a hacer eso. Es simplemente una mala experiencia para los usuarios.

Y probablemente, sabes, mi característica favorita de la web es que es simplemente divertida. No es necesariamente algo que puedas usar como un efecto medible. Pero encuentro que construir para la web es una experiencia agradable. Lo menciono porque si te lo estás pasando bien construyendo para la plataforma en la que estás, te va a importar. Realmente vas a querer construir para esa plataforma. Hemos oído hablar de cosas como usadas con ira o usadas con frustración. Me gusta pensar que la web me permite construir y usar una web con disfrute. Me divierto lidiando con CSS. Me divierto trabajando con los últimos frameworks de JavaScript. Me divierto siendo capaz de ver qué puede traer el futuro de la web y cómo puedo aprovechar eso ahora. Para mí, todas estas características realmente hacen de la web una plataforma súper atractiva.

5. El Poder de lo Nativo

Short description:

Los dispositivos nativos tienen características poderosas que están muy por delante de lo que podemos hacer en JavaScript. Envían un solo binario que contiene todo el conocimiento de la aplicación, lo que la hace más eficiente. Las aplicaciones nativas son resistentes a los cambios de red y proporcionan una mejor experiencia sin conexión. Tienen características de dispositivo de bajo nivel y un modelo de permisos claro para los usuarios.

Pero seríamos negligentes si no hablamos de las increíbles habilidades de lo nativo. Ahora, los dispositivos nativos siempre han tenido un conjunto de características principales que realmente se destacan de lo que hacemos en la web. En primer lugar, son características poderosas. Hay una intersección realmente interesante cuando ves el entorno en el que estos dispositivos funcionan, los lenguajes que se utilizan en estos dispositivos, y luego las personas que los construyen y básicamente los poseen. Son capaces de hacer muchas suposiciones sobre tu código. De esa manera, para cuando realmente presionas Construir, están haciendo cosas muy por delante, años luz de lo que podemos hacer en JavaScript en este momento. Eliminación de código, ser capaz de hacer reescrituras para asegurarse de que es más eficiente, optimizaciones y minificaciones.

Luego, al final del día, cuando están construyendo esa aplicación, no están enviando un montón de archivos que necesitan ser cargados y buscados. Están enviando un solo binario, lo cual es increíble, lo que significa que no tenemos que tener todo este extra, solo tenemos un solo binario que contiene todo el conocimiento de nuestra aplicación. Y, realmente, eso es todo. El aspecto de optimización de estas cadenas de construcción no puede ser subestimado. Puedes escribir Swift en Java realmente mal, y luego el optimizador va a entrar allí y realmente asegurarse de que se convierta un poco más eficiente. Lo cual es realmente agradable, especialmente si no sabes lo que estás haciendo, como yo.

Las aplicaciones nativas tienden a ser un poco más resistentes a los cambios de red. Si alguna vez has intentado cargar una aplicación nativa cuando no tienes Wi-Fi, ni red celular, todavía vas a obtener una instantánea de cualquiera que sea el último estado de tu aplicación, y vas a seguir siendo capaz de decir, si estás en Twitter, podrías desplazarte hacia arriba y hacia abajo, ver algunos de los tweets que la gente ha publicado, fotos de perfil. Es posible que no puedas entrar en detalles e interactuar con dichos tweets, pero todavía obtienes algo mejor que lo que tienes en la web. Ahora, la web tiene cosas como los trabajadores de servicio, que te permiten almacenar en caché todos tus activos y respuestas y poder mostrar a tus usuarios algo cuando la aplicación está sin conexión. Pero lo cierto es que necesitas poder almacenar en caché algo de eso antes de que tu aplicación realmente pueda mostrar un modo sin conexión. Con lo nativo, realmente puedes descargar una aplicación, apagar el Wi-Fi, apagar el celular, abrir la aplicación, y todavía vas a obtener alguna interfaz de usuario que se puede mostrar. No tiene que llamar a casa a alguna red para descargar algunos activos. Ya tiene todo instalado. Tienes la pantalla principal de la aplicación que la gente va a ver para iniciar sesión. Tienes toda la lógica de la barra de pestañas, toda la interfaz de usuario que se va a representar a tus usuarios, porque de nuevo, estamos compilando todo en un solo binario, y estamos enviando eso a los usuarios, no un montón de archivos JavaScript separados. Ahora, lo nativo también tiene la ventaja de poder obtener muchas características de dispositivo de bajo nivel, cosas como Bluetooth, NFC, geolocalización más refinada, y acceso al sistema de archivos. Estas son cosas que la web está tratando de obtener hoy en día, y si has estado siguiendo algunas de las características que se están intentando enviar en el navegador, es un debate bastante contencioso que se está teniendo. Muchos de esto está siendo liderado por personas que vuelan bajo una cierta bandera de navegador. Aunque el paso hacia el progreso es genial, se están perdiendo muchas características y alienando a muchos otros navegadores y proveedores de navegadores. Compáralo con lo nativo, que tiene todas estas características y luego es capaz de proporcionar un sistema de gestión de permisos para que los usuarios sepan exactamente por qué el dispositivo está pidiendo poder conectarse a cosas en Bluetooth, poder conectarse a cosas en NFC, o en tu red local, o incluso almacenar datos en el sistema de archivos. Hay un modelo de permisos que no existe en la web que es claro para los usuarios, y los desarrolladores tienen la capacidad de proporcionar descripciones significativas. Si resulta que un desarrollador está haciendo alguna acción nefasta, su aplicación puede ser terminada.

6. Aplicaciones Nativas vs. Aplicaciones Web

Short description:

Las aplicaciones nativas tienen una mejor capacidad de descubrimiento y oportunidades de monetización en comparación con las aplicaciones web. Las aplicaciones nativas se pueden encontrar y descargar fácilmente desde las tiendas de aplicaciones, mientras que las aplicaciones web dependen de las clasificaciones de los motores de búsqueda. Las aplicaciones nativas permiten a los desarrolladores cobrar por sus aplicaciones o ofrecer compras dentro de la aplicación, proporcionando más oportunidades para monetizar su trabajo. Por otro lado, las aplicaciones web a menudo dependen de anuncios de terceros o del apoyo directo de los usuarios. Sin embargo, es posible combinar los beneficios de las aplicaciones web y nativas utilizando bibliotecas que mejoran las aplicaciones web con funcionalidad adicional y acceso a la plataforma.

Existe una seguridad en el hecho de que estamos dando acceso privilegiado a esas características que las tiendas y los proveedores de la plataforma pueden proteger a los usuarios, lo cual es realmente, realmente, realmente agradable. Además de eso, lo Nativo también tiene un poco mejor historia de descubrimiento. Ahora, el descubrimiento puede significar muchas cosas. Puede significar simplemente, hey, aquí está el enlace a la aplicación, adelante y haz clic en él y automáticamente se descarga para ti desde la tienda. O puede significar simplemente entrar en la tienda y poder buscar la aplicación que quieres y la tienda dice, te tenemos cubierto, no necesitas proporcionar nada más, aquí están las sugerencias de búsqueda, aquí está la aplicación que quieres. Compara esto con el descubrimiento en la web. La gente realmente tiene que saber lo que está buscando para poder buscarlo a través de varios motores de búsqueda. Y si no has jugado realmente buenos juegos de SEO, no vas a clasificar bien. Tenemos que jugar el juego de clasificación dentro de estos motores de búsqueda. De lo contrario, simplemente no vamos a estar disponibles. Podrías ser tercero, cuarto, quinto, podrías estar en la temida página dos de tus resultados de búsqueda. Y si no eres el primero, eres el último. Así que el descubrimiento para las aplicaciones nativas tiende a ser un poco mejor. Y creo que lo más importante es la monetización. No me gusta hablar demasiado de la monetización porque sabes, es un tema muy sensible para la gente, pero construir una aplicación nativa realmente te da más oportunidades para monetizar tu trabajo. Mientras que en la web, una de las formas comunes de monetizar tu trabajo es con anuncios. Puedes cobrar por tu aplicación en la App Store, 99 centavos, $1.99, $4.99 he visto donde la gente realmente quiere subir, la gente realmente ve la cantidad de valor que proporcionas y se anima a pagar por ello. Y si esa no es tu forma de trabajar, podrías proporcionar una versión gratuita de tu aplicación y luego añadir características usando compras dentro de la aplicación. Ahora bien, tienes que pagar un poco de impuesto a las plataformas, tanto a Google como a Apple. Pero aún tienes la oportunidad de recuperar algo de dinero por el tiempo y esfuerzo que pusiste en construir tu producto versus una web donde, sí, tienes anuncios de terceros. A nadie le gustan realmente. Tienes bloqueadores de anuncios. Realmente no es una gran historia a menos que alguien te esté apoyando directamente a través de, ya sabes, Patreon u otros modelos de monetización directa de creadores. La web no tiene éxito aquí. Lo Nativo realmente hace un buen trabajo con esto. Así que volvemos a la pregunta. Hay muchas cosas buenas de ambos lados. ¿Hay alguna forma de que podamos combinar esos dos para crear los beneficios de la web pero con las capacidades, el alcance, la security de la plataforma, y los esfuerzos y detalles adicionales de lo Nativo? Bueno, sí, hay formas de hacerlo. Hay bibliotecas que existen hoy en día que te permiten tomar, digamos, tu simple aplicación de React, proporcionar alguna funcionalidad extra a través de bibliotecas adicionales donde puedes decir, hey, quiero tener acceso a un sistema de archivos. Quiero poder desplegar esto en iOS, en Android.

7. Construyendo Aplicaciones Web y Nativas

Short description:

Capacitor y React Native permiten a los desarrolladores crear tanto aplicaciones web como nativas, llegando a más usuarios y obteniendo lo mejor de ambos mundos. Elija la web para lenguajes familiares, desarrollo rápido y despliegue ubicuo. Elija Nativo para la resistencia a los cambios de red, acceso a características avanzadas y un buen modelo de monetización. Para combinar los beneficios, use Capacitor o React Native para aprovechar el conocimiento web existente y construir un producto mejor.

Y aquí, podemos ver que simplemente estamos llamando a file system.makdir, file system.readdir. Incluso podemos conectarnos a esos modelos de permisos usando file system.request.permissions. Ahora, esto es algo que se hace usando una biblioteca llamada Capacitor. Te permite tomar tu aplicación web, empaquetarla como una aplicación nativa, y aún tener acceso a toda la configuración del proyecto nativo y el código nativo que podrías agregar además de lo que estás haciendo en la web.

Y sería negligente si no mencionara cosas como React Native, donde puedes tomar tu aplicación nativa existente y empezar a espolvorear algo de ese código React también. Ahora, ambas opciones permiten a los desarrolladores crear no solo una aplicación web sino también una aplicación nativa y poder llegar a más usuarios y obtener lo mejor de ambos mundos.

Entonces, ¿cómo desglosamos esto de nuevo? Vamos a elegir la web si queremos lenguajes familiares, un entorno de desarrollo muy rápido, y un enfoque común y ubicuo para poder desplegar y cargar esa aplicación en todas partes. Bueno, también vamos a elegir Nativo si queremos algo que sea resistente a los cambios de red, tener acceso a características avanzadas como Bluetooth y NFC, y si queremos tener un buen modelo de monetización. Pero si queremos lo mejor de ambos mundos, vamos a querer optar por algo como Capacitor o React Native, donde podemos tomar nuestro conocimiento web existente, y realmente seguir adelante y cargar todo eso y construir un producto mejor.

Ahora, estoy sesgado porque trabajo en algunas de las cosas dentro de Capacitor, y te animaría mucho a que lo pruebes. Si vas a CapacitorJS.com, puedes ver lo fácil que es adoptar Capacitor en tus proyectos existentes sin tener que pasar por ninguna migración o corrección de errores. Evaluación de tus bibliotecas existentes. Puedes simplemente soltarlo allí, y estás listo para comenzar. Así que con eso, creo que tengo una buena idea de cómo quiero construir mi aplicación, así que animaría a todos ustedes a salir y construir cosas realmente geniales. Estoy curioso por ver lo que todos ustedes construyen, y mucha suerte. ¡Salud!

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
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
24 min
Video Editing in the Browser
Video editing is a booming market with influencers being all the rage with Reels, TikTok, Youtube. Did you know that browsers now have all the APIs to do video editing in the browser? In this talk I'm going to give you a primer on how video encoding works and how to make it work within the browser. Spoiler, it's not trivial!

Workshops on related topic

React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
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.