El futuro de las aplicaciones web y las aplicaciones nativas
La brecha entre las aplicaciones nativas y las aplicaciones web se está acortando. Descubramos el cambiante mundo de las aplicaciones web y cómo pueden ayudarnos a mejorar nuestras aplicaciones.
Las funciones disponibles en sitios web y aplicaciones han cambiado drásticamente desde los inicios de las páginas estáticas. Incluso en los últimos tiempos, hemos presenciado avances significativos, entre ellos:
Las animaciones nativas, los diseños sencillos y flexibles, los gráficos 3D realistas y la transmisión de vídeo están en auge. En nombre de la idea de "poco". Pero aún queda mucho por hacer. Sobre todo si la web pretende competir eficazmente con los sistemas operativos nativos.
Escritores expertos e ingenieros de navegadores han estado buscando características que hagan más populares el sistema operativo nativo y sus aplicaciones. Ahora vemos cómo la web está tomando una postura y tratando de cubrir las carencias en las capacidades del sistema operativo. Básicamente, esto ha llevado a centrarse en un puñado de características, algunas fáciles de implementar y otras no tanto. Los siguientes títulos no son una lista exhaustiva, pero cubren los puntos principales.
Los programas nativos incluyen:
- Enlace: Es posible que usted sea redirigido a la aplicación web mediante una URL determinada.
- Reactivo: Con herramientas como las consultas de medios, puedes crear diseños complejos compatibles con diversos formatos (orientación, resolución, tamaño de pantalla, etc.). De hecho, el modelo de diseño web predeterminado es intrínsecamente responsivo, lo que lo hace especialmente adecuado para la manipulación de texto.
- Basado en datos: Con HTML, puedes proporcionar significado y estructura, y la web es mejor para procesar datos.
- Avanzado: Puede diseñar aplicaciones web para brindar a los navegadores modernos las últimas funciones y, al mismo tiempo, brindar una experiencia aceptable en navegadores más antiguos.
- Seguridad: La web ofrece funciones que mantienen las aplicaciones seguras mediante el modelo de seguridad de origen único y HTTPS. Gracias a un programa como Vamos a encriptar Proteger las aplicaciones web se ha vuelto aún más fácil.
Sin embargo, la web también tiene ciertas ventajas, como:
- Capacidad de instalación: Disponibilidad de aplicaciones en el dispositivo e integración completa con el sistema operativo para una experiencia agradable; sería aún mejor si hubiera un pequeño icono para las aplicaciones en la pantalla de inicio y estas pudieran abrirse en pantalla completa o en una ventana pequeña. Son cosas sencillas, ¿verdad?
- Descubrimiento: Los fanáticos de la web estadounidense se resisten en gran medida a tener una tienda de aplicaciones cerrada. Pero no podemos negar que han mejorado la forma de encontrar aplicaciones, aunque algunos argumentan que incluso las mejores tiendas de aplicaciones cerradas están fracasando debido a la saturación.
- Estar desconectado: Hay conexión a internet en todo el mundo. Pero no puedes confiar en 100%. Sufres por no poder usar una aplicación porque no tienes conexión y no hay otra opción.
- Encanto: Una vez que consigas que un usuario use tu aplicación, ya tienes la mitad del camino recorrido. Pero ¿cómo mantenerlo interesado e informado? Los desarrolladores de aplicaciones nativas llevan mucho tiempo disfrutando de las notificaciones push para mantener informados a los usuarios.
- Rápido: Mucha gente cree que el código nativo tiene mejor rendimiento que el código web, pero como leerás más adelante, esta brecha se está reduciendo rápidamente.
El sitio pokedex.org es el mejor ejemplo de una aplicación web avanzada, y al mismo tiempo sirve como un pasatiempo divertido.
√Queremos diseñar la web para permitir el acceso a aplicaciones útiles en aplicaciones nativas, pero sin sacrificar las funciones básicas ya probadas. Este movimiento se denomina Revolución de las Aplicaciones Web y está liderado por empresas como Mozilla y Google Ellos son apoyados.
√Más adelante veremos las nuevas tecnologías que posibilitan tales avances, pero primero acerquémonos un poco más a la web para poder adelantarnos a las aplicaciones nativas.
√Nota: Por otro lado, ¿qué aspectos interesantes están desarrollando los sistemas operativos nativos para acortar la distancia entre ellos y la web? Por ejemplo, la iniciativa, al estilo de Rube Goldberg, que permitió enlaces más profundos.
¿Qué era antes?
Es importante desconectarse primero.
Los fanáticos experimentados quieren crear aplicaciones web que funcionen sin conexión y se conecten a Internet de forma predeterminada solo para actualizaciones.
Las aplicaciones con funciones nativas no son un concepto nuevo. Para empezar, existían numerosos paquetes "web", plantillas de aplicaciones que aparecían en diversos sitios (por ejemplo, la aplicación de Chrome) que permitían instalar paquetes aprobados en el dispositivo para su uso sin conexión, además de permitir el acceso al hardware, etc.
Nos hemos encontrado con el término "aplicaciones híbridas", como Cordova y Electron. Estas permiten a los desarrolladores crear aplicaciones usando tecnologías web y luego migrarlas a aplicaciones nativas que funcionan en iOS y Android. Estas aplicaciones son muy populares. Sin embargo, requieren la creación y distribución de múltiples versiones de la misma aplicación, y presentan limitaciones en su funcionalidad. "Escribir una vez, ejecutar en todas partes" no es del todo cierto, como todos sabemos.
En primer lugar, cabe mencionar las aplicaciones de una sola página. Una sola página HTML puede servir como página principal de la aplicación y cargar diferentes vistas dinámicamente mediante XHR (o similar), con el objetivo de que las aplicaciones web sean más rápidas y responsivas. Este tipo de modelo de aplicación es compatible con frameworks populares como Ember. JS y AngularJS, junto con el desarrollo offline-first, constituyen la base de gran parte de las aplicaciones web avanzadas.
Capacidades de instalación y configuración
En la primera parte de Aplicaciones Web Avanzadas, veremos la instalación y configuración. Esto le permite usar la interfaz de la aplicación web, que crea un archivo JSON con información sobre la aplicación web, como iconos, nombre y modo de visualización, para usar al abrirla:
Este código se puede utilizar para integrar aún más la aplicación con el sistema operativo principal (icono en la pantalla de inicio, apertura en pantalla completa en lugar del navegador, etc.) y también proporciona una mejor capacidad de búsqueda en la lista de aplicaciones; por ejemplo, aparece en los resultados del motor de búsqueda.
Esta información ya se utiliza en Opera y Chrome en los teléfonos para la integración entre plataformas y próximamente se incorporará compatibilidad con Firefox.
Desconectado
Y, avanzando rápidamente hasta el presente, tenemos las aplicaciones de servicio; una nueva tecnología en Firefox, Chrome y Opera que permite a los desarrolladores crear aplicaciones sin conexión de forma similar a AppCache y mucho más. Este es el nivel más bajo de API y, por lo tanto, una composición mucho más compleja. Sin embargo, otorga a los desarrolladores más control sobre lo que quieren que hagan sus servicios.
El almacenamiento de activos, por otro lado, es otra historia. Durante un tiempo, parecía que algo como AppCache resolvería el problema, pero se daba por sentado que existía una forma de ejecutar una aplicación, y los desarrolladores no tenían suficiente control sobre lo que ocurría.
El problema de la web sin conexión lleva muchísimo tiempo presente, considerando lo simple que parece a primera vista. El problema radica en que implementar un conjunto de tecnologías sin conexión efectivas no es fácil. Almacenar una gran cantidad de datos sin conexión no es un gran problema. Los navegadores modernos cuentan con API (interfaces de programación de aplicaciones) como IndexedDB desde hace tiempo, y la compatibilidad con el almacenamiento web existe desde IE8.
Una aplicación de servidor es un fragmento de JavaScript escrito en un archivo independiente que se ejecuta en un hilo específico. Actúa como un servidor proxy entre Internet y tus aplicaciones (y el navegador). Cuando se realiza una solicitud, la aplicación de servidor puede interceptarla y personalizarla antes de enviarla al navegador para su uso.
Para utilizar el programa de servicio, primero debe ejecutar () navegador. trabajador de servicio. registro Regístrelo en la página de inicio.
navegador.trabajador de servicio.registro(‘'sw.js'’)
.entonces(función(registro) {
// Hacer algo para inicializar la aplicación
});
Luego lo instalé usando el instalador en la sección de utilidades. A veces, estos archivos esenciales los almacenan todas las aplicaciones que usan la API de caché (que se usa independientemente de las aplicaciones de comunicación).
este.agregarListener de eventos(‘'instalar'’, función(evento) {
evento.esperar hasta(
cachés.abierto(‘'v1'’).entonces(función(cache) {
devolver cache.agregarTodo([
‘'/prueba-sw/'’,
‘'/sw-test/index.html'’,
‘'/sw-test/style.css'’,
‘'/sw-test/app.js'’
]);
})
);
});
Tras la respuesta de un detector de eventos, la aplicación de servicio envía código en respuesta a las solicitudes, lo que permite a los desarrolladores personalizar el resultado. De esta forma, un desarrollador puede solicitar que archivos que no han cambiado mucho (como la interfaz de usuario) se almacenen en la instalación y luego usar las versiones almacenadas en el repositorio (en lugar de la versión en línea) cuando sea necesario. ¡Adelante, aplicaciones sin conexión!.
este.agregarListener de eventos(‘'buscar'’, función(evento) {
variedad respuesta;
evento.responderCon(cachés.fósforo(evento.pedido).atrapar(
// escribe código para manejar el caso donde el archivo solicitado es
// no está almacenado sin conexión en el caché
);
});
Cabe señalar que las aplicaciones de servicio solo funcionan con comunicación HTTPS.
↑ El diagrama anterior muestra el ciclo de instalación de una aplicación de servicio ↑
Reconectar con el usuario
Los sistemas operativos nativos han dependido durante mucho tiempo de las notificaciones push (la capacidad de un servidor de enviar un mensaje a un sistema cliente para notificar al usuario sobre cambios), incluso cuando la aplicación está cerrada. ¿Quizás una aplicación de noticias quiere enviar una nueva actualización al usuario? ¿O quizás tu juego de Pokémon está obsoleto y necesita atención? Ahora también contamos con estas funciones para aplicaciones web.
Para usar este programa, como se explicó anteriormente, es necesario instalar y activar un programa de servicio en la página de programas. Después, se puede usar suscribiéndose al programa. Puede usar la fórmula () ServiceWorkerRegistration.pushManager.subscribe Utilice para realizar el trabajo:
navegador.trabajador de servicio.listo.entonces(función(registro) {
registro.Administrador de empuje.suscribir({usuarioVisibleOnly: verdadero})
.entonces(función(suscripción) {
// Actualizar la interfaz de usuario, etc. en función de la suscripción
// Actualizar el estado para suscribir al usuario actual en el servidor
variedad punto final = suscripción.punto final;
variedad llave = suscripción.obtener clave(‘'p256dh'’);
actualizarEstado(punto final,llave,‘'suscribir'’);
})
});
Este método envía un tipo de material complementario que se utiliza para resolver el problema de compartición. Tiene una propiedad de punto final (que contiene una URL única que apunta al servidor) y un método. obtenerClave(), Que se utiliza para generar una clave pública para fines de cifrado. Se requiere el permiso de ambos, que luego envía los resultados al servidor de aplicaciones.
Para enviar un mensaje de alerta al servidor, realice una solicitud a la dirección del punto final. Esto enviará un mensaje desde el servidor a las aplicaciones de servicio. Si lo desea, también puede enviar datos junto con el mensaje; esto debe hacerse mediante una clave de cifrado. Los mensajes de alerta basados en datos solo funcionan en Firefox, pero otros navegadores no deberían estar muy lejos.
La aplicación de servicio detecta un mensaje de alerta mediante un controlador de eventos push. Al enviar un evento de alerta, se puede acceder a él mediante la propiedad data del objeto de evento. A continuación, se puede responder al mensaje como se desee, por ejemplo, enviando una noticia o un mensaje a la página principal que actualice la aplicación.
ser.agregarListener de eventos(‘'empujar'’, función(mi) {
variedad objeto = mi.datos.JSON();
// Responder al mensaje push de alguna manera
// p. ej. una notificación o un mensaje de canal
});
Nota: Muchas de las familias de servicios tecnológicos (alertas, etc.) cuentan con un soporte razonable en Chrome y Firefox, pero otros navegadores las están considerando. Los datos de alertas solo funcionan en Firefox al momento de escribir este artículo.
Este programa de Mozilla proporciona información sobre el progreso en la implementación de interfaces de aplicaciones web modernas en los navegadores.
Actuación
El rendimiento ha sido durante mucho tiempo un punto delicado entre las aplicaciones web y las nativas, ya que los desarrolladores nativos han abandonado las capacidades de rendimiento de la web. Sin embargo, la brecha se ha reducido considerablemente en los últimos tiempos, con motores Java mucho más rápidos en los navegadores y código web más veloz para ejecutar funciones como animaciones y gráficos 3D, que pueden aprovechar cada vez más la potencia disponible de la GPU.
Además, podemos convertir código nativo de aplicaciones (como C++) a Java mediante tecnologías como Emscripten. Cuando hablamos de Java, nos referimos esencialmente a asm.js, un subconjunto altamente optimizado de Java que aprovecha las técnicas de compilación AOT para un rendimiento casi nativo. Se ha vuelto tan popular que es compatible no solo con Firefox, sino también con Chrome y Edge, y la web ha añadido asm.js como destino de publicación para los populares motores 3D Unity y Unreal.
Y la próxima generación está por llegar: algunos proveedores de navegadores se han asociado para configurar e implementar WebAssembly, que funcionará de forma similar a Emcscripten, pero con mayor velocidad, mejores estándares y un mayor rendimiento.
Esto se usa en lugar de (asm.js) con formato wasm, ya que tiene mejores configuraciones, deberíamos poder confiar en que los compiladores produzcan una salida wasm válida y los navegadores deberían ejecutarlo con un rendimiento constante, independientemente de qué compilador lo haya producido.
Resultado
Como pueden ver, la web está evolucionando, con nuevas y emocionantes tecnologías diseñadas para abordar algunas de las deficiencias que aún presentaban nuestras queridas plataformas, aunque su rendimiento supera las expectativas. Esto permite que las aplicaciones web se mantengan a la altura de las aplicaciones nativas. Si no perdemos de vista lo que hizo grande a la web, desde un principio.
