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.

This talk has been presented at React Day Berlin 2023, check out the latest edition of this React Conference.

FAQ

Capacitor es una biblioteca que permite tomar una aplicación web y empaquetarla como una aplicación nativa, manteniendo acceso a la configuración del proyecto nativo y el código nativo adicional. Facilita la integración de características nativas en aplicaciones web, optimizando el alcance y las capacidades de ambas plataformas.

Desarrollar una aplicación web ofrece ventajas como tiempos de desarrollo más rápidos, capacidad de inspección y prueba directa en el entorno de despliegue, y la universalidad de la web, que es accesible en una amplia gama de dispositivos y plataformas sin necesidad de distribución especial.

Al decidir entre una aplicación nativa y una web, se deben considerar aspectos como la necesidad de características de dispositivo avanzadas, la resistencia a los cambios de red, la experiencia de usuario y la monetización. Las aplicaciones nativas ofrecen mejor acceso a características específicas del dispositivo y mayor control sobre la experiencia del usuario.

Desde 2012, el desarrollo de aplicaciones ha avanzado significativamente, con mejoras en las herramientas de desarrollo, lenguajes más accesibles y una mayor integración de características avanzadas en la web. Las plataformas como Android e iOS han evolucionado para facilitar el desarrollo y mejorar la eficiencia de las aplicaciones nativas.

Mike Hardington sugiere explorar opciones como aplicaciones nativas o web, y considerar plataformas como Capacitor o React Native que combinan lo mejor de ambos mundos. Estas estrategias permiten aprovechar las capacidades de la web mientras se accede a funciones nativas específicas, mejorando la distribución y la experiencia del usuario.

La elección de la plataforma es crucial porque determina las capacidades de la aplicación, la experiencia del usuario y las oportunidades de monetización. Una correcta selección entre aplicaciones nativas o web puede influir significativamente en el éxito del producto y su aceptación en el mercado.

Mike Hartington
Mike Hartington
23 min
12 Dec, 2023

Comments

Sign in or register to post your comment.
Video Summary and Transcription
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.

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

Un Marco para Gestionar la Deuda Técnica
TechLead Conference 2023TechLead Conference 2023
35 min
Un Marco para Gestionar la Deuda Técnica
Top Content
Today's Talk discusses the importance of managing technical debt through refactoring practices, prioritization, and planning. Successful refactoring requires establishing guidelines, maintaining an inventory, and implementing a process. Celebrating success and ensuring resilience are key to building a strong refactoring culture. Visibility, support, and transparent communication are crucial for addressing technical debt effectively. The team's responsibilities, operating style, and availability should be transparent to product managers.
Depuración de JS
React Summit 2023React Summit 2023
24 min
Depuración de JS
Top Content
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
Construyendo un Asistente AI Activado por Voz con Javascript
JSNation 2023JSNation 2023
21 min
Construyendo un Asistente AI Activado por Voz con Javascript
Top Content
This Talk discusses building a voice-activated AI assistant using web APIs and JavaScript. It covers using the Web Speech API for speech recognition and the speech synthesis API for text to speech. The speaker demonstrates how to communicate with the Open AI API and handle the response. The Talk also explores enabling speech recognition and addressing the user. The speaker concludes by mentioning the possibility of creating a product out of the project and using Tauri for native desktop-like experiences.
Una Guía Práctica para Migrar a Componentes de Servidor
React Advanced 2023React Advanced 2023
28 min
Una Guía Práctica para Migrar a Componentes de Servidor
Top Content
React query version five is live and we'll be discussing the migration process to server components using Next.js and React Query. The process involves planning, preparing, and setting up server components, migrating pages, adding layouts, and moving components to the server. We'll also explore the benefits of server components such as reducing JavaScript shipping, enabling powerful caching, and leveraging the features of the app router. Additionally, we'll cover topics like handling authentication, rendering in server components, and the impact on server load and costs.
Solucionando Problemas de Rendimiento en React
React Advanced 2023React Advanced 2023
22 min
Solucionando Problemas de Rendimiento en React
Top Content
This Talk discusses various strategies to improve React performance, including lazy loading iframes, analyzing and optimizing bundles, fixing barrel exports and tree shaking, removing dead code, and caching expensive computations. The speaker shares their experience in identifying and addressing performance issues in a real-world application. They also highlight the importance of regularly auditing webpack and bundle analyzers, using tools like Knip to find unused code, and contributing improvements to open source libraries.
De Monolito a Micro-Frontends
React Advanced 2022React Advanced 2022
22 min
De Monolito a Micro-Frontends
Top Content
Microfrontends are considered as a solution to the problems of exponential growth, code duplication, and unclear ownership in older applications. Transitioning from a monolith to microfrontends involves decoupling the system and exploring options like a modular monolith. Microfrontends enable independent deployments and runtime composition, but there is a discussion about the alternative of keeping an integrated application composed at runtime. Choosing a composition model and a router are crucial decisions in the technical plan. The Strangler pattern and the reverse Strangler pattern are used to gradually replace parts of the monolith with the new application.

Workshops on related topic

Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Node Congress 2024Node Congress 2024
152 min
Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Featured Workshop
Emanuel Scirlet
Miguel Henriques
2 authors
Ven y aprende cómo puedes potenciar tus aplicaciones modernas y seguras utilizando GraphQL y Javascript. En este masterclass construiremos una API de GraphQL y demostraremos los beneficios del lenguaje de consulta para APIs y los casos de uso para los que es adecuado. Se requiere conocimiento básico de Javascript.
Construyendo una Aplicación de Shopify con React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Construyendo una Aplicación de Shopify con React & Node
Top Content
WorkshopFree
Jennifer Gray
Hanna Chen
2 authors
Los comerciantes de Shopify tienen un conjunto diverso de necesidades, y los desarrolladores tienen una oportunidad única para satisfacer esas necesidades construyendo aplicaciones. Construir una aplicación puede ser un trabajo duro, pero Shopify ha creado un conjunto de herramientas y recursos para ayudarte a construir una experiencia de aplicación sin problemas lo más rápido posible. Obtén experiencia práctica construyendo una aplicación integrada de Shopify utilizando el CLI de la aplicación Shopify, Polaris y Shopify App Bridge.Te mostraremos cómo crear una aplicación que acceda a la información de una tienda de desarrollo y pueda ejecutarse en tu entorno local.
Construye una sala de chat con Appwrite y React
JSNation 2022JSNation 2022
41 min
Construye una sala de chat con Appwrite y React
WorkshopFree
Wess Cope
Wess Cope
Las API/Backends son difíciles y necesitamos websockets. Utilizarás VS Code como tu editor, Parcel.js, Chakra-ui, React, React Icons y Appwrite. Al final de este masterclass, tendrás los conocimientos para construir una aplicación en tiempo real utilizando Appwrite y sin necesidad de desarrollar una API. ¡Sigue los pasos y tendrás una increíble aplicación de chat para presumir!
Problemas difíciles de GraphQL en Shopify
GraphQL Galaxy 2021GraphQL Galaxy 2021
164 min
Problemas difíciles de GraphQL en Shopify
WorkshopFree
Rebecca Friedman
Jonathan Baker
Alex Ackerman
Théo Ben Hassen
 Greg MacWilliam
5 authors
En Shopify a gran escala, resolvemos algunos problemas bastante difíciles. En este masterclass, cinco oradores diferentes describirán algunos de los desafíos que hemos enfrentado y cómo los hemos superado.

Tabla de contenidos:
1 - El infame problema "N+1": Jonathan Baker - Vamos a hablar sobre qué es, por qué es un problema y cómo Shopify lo maneja a gran escala en varios APIs de GraphQL.
2 - Contextualizando APIs de GraphQL: Alex Ackerman - Cómo y por qué decidimos usar directivas. Compartiré qué son las directivas, qué directivas están disponibles de forma predeterminada y cómo crear directivas personalizadas.
3 - Consultas de GraphQL más rápidas para clientes móviles: Theo Ben Hassen - A medida que tu aplicación móvil crece, también lo harán tus consultas de GraphQL. En esta charla, repasaré diversas estrategias para hacer que tus consultas sean más rápidas y efectivas.
4 - Construyendo el producto del futuro hoy: Greg MacWilliam - Cómo Shopify adopta las características futuras en el código actual.
5 - Gestión efectiva de APIs grandes: Rebecca Friedman - Tenemos miles de desarrolladores en Shopify. Veamos cómo estamos asegurando la calidad y consistencia de nuestras APIs de GraphQL con tantos colaboradores.
De 0 a Autenticación en una Hora para tu Aplicación JavaScript
JSNation 2023JSNation 2023
57 min
De 0 a Autenticación en una Hora para tu Aplicación JavaScript
WorkshopFree
Asaf Shen
Asaf Shen
La autenticación sin contraseña puede parecer compleja, pero es fácil de agregar a cualquier aplicación utilizando la herramienta adecuada.
Mejoraremos una aplicación JS de pila completa (backend Node.js + frontend Vanilla JS) para autenticar usuarios con contraseñas de un solo uso (correo electrónico) y OAuth, incluyendo:
- Autenticación de usuario: Gestión de interacciones de usuario, devolución de JWT de sesión / actualización- Gestión y validación de sesiones: Almacenamiento seguro de la sesión para solicitudes posteriores del cliente, validación / actualización de sesiones
Al final del masterclass, también abordaremos otro enfoque para la autenticación de código utilizando Flujos de Descope en el frontend (flujos de arrastrar y soltar), manteniendo solo la validación de sesión en el backend. Con esto, también mostraremos lo fácil que es habilitar la biometría y otros métodos de autenticación sin contraseña.