驴C贸mo puedo crear una aplicaci贸n web sin usar HTML? Para esto necesitamos: un nuevo navegador, QML y back-end en Java.
Un poco de historia
HTML fue creado por cient铆ficos del CERN como una forma de compartir art铆culos cient铆ficos. Luego se convirti贸 en una forma conveniente de publicar informaci贸n en la red. Qued贸 claro que la funcionalidad de los hiperv铆nculos no era suficiente, y luego comenzaron a agregarse componentes, formularios y CSS. Pero esto no fue suficiente, necesit谩bamos din谩mica, agregamos JavaScript. Pero en todo esto no es muy conveniente desarrollar, por lo que en el futuro aparecieron los frameworks js. Est谩n tratando de arreglar los defectos de HTML. Pero creo que es mejor tratar la enfermedad en s铆 misma que los s铆ntomas. QML nos ayudar谩 con esto.
Vayamos a la soluci贸n
Quiero se帽alar de inmediato que esta soluci贸n no est谩 lista para producci贸n. Esto es "隆Hola Mundo!" Una aplicaci贸n que muestra lo que se puede lograr con estas herramientas.
Navegador
Como no necesitamos el an谩lisis HTML, escribiremos nuestro propio navegador en Qt5, QML y C ++. Nuestro navegador debe interactuar con la aplicaci贸n de fondo y mostrar informaci贸n en la pantalla.
Flujo de trabajo del navegador:
- En la barra de direcciones, escriba la URL del recurso y presione
enter - Usando una solicitud HTTP, cargue el archivo qml en el disco duro
- Usando una solicitud HTTP, cargue los datos para el archivo qml
- Mostrar el archivo qml con Loader
TabComponent.qml
... TextInput { onAccepted: { var result = siteLoader.loadSite(addressIpt.text) if (result === LoadResultType.SUCCESS) { var props = siteLoader.loadProperties(addressIpt.text) var qmlPath = siteLoader.getMainQmlPath(addressIpt.text) pageLoader.setSource(qmlPath, props) } else { ... } } } ... Loader { id: pageLoader }
Aqu铆 siteLoader es una instancia de la clase C ++ que se importa a qml. Implementa la l贸gica del navegador.
TextInput es un componente de la barra de direcciones en el navegador. Cuando presiona enter , se onAccepted m茅todo onAccepted y se ejecuta la l贸gica de carga del sitio.
QML tiene la capacidad de mostrar un archivo a trav茅s de la red, pero no creo que sea una buena manera. En el futuro, puede atornillar el control de versiones y, si las versiones coinciden, no descargue el archivo, sino que use el que es.
Ese es todo el navegador. Pasemos al back-end y a la interfaz de usuario.
Back-end y UI
El back-end y la interfaz de usuario son directamente nuestra aplicaci贸n web. Escribiremos la parte de la interfaz de usuario en QML, y el back-end se escribir谩 en spring boot , ya que soy un programador de Java. Lo primero que necesitamos es un archivo qml con una descripci贸n de nuestra interfaz.
main.qml
import QtQuick 2.0 Rectangle { color: "lightgray" property alias textValue: helloText.text Text { id: helloText anchors.horizontalCenter: parent.horizontalCenter font.pointSize: 24 } }
Aqu铆 todo es bastante simple.
property alias textValue: helloText.text
Esta l铆nea es necesaria para extraer la propiedad de text para que pueda ponerla en el Loader .
Ahora agregue dos puntos finales:
@RestController public class HelloController { @GetMapping( value = "/main.qml", produces = MediaType.APPLICATION_OCTET_STREAM_VALUE) public byte[] mainQml() throws IOException { ClassPathResource resource = new ClassPathResource("main.qml"); return IOUtils.toByteArray(resource.getInputStream()); } @GetMapping( value = "/getProperties", produces = MediaType.APPLICATION_JSON_VALUE) public Object getProperties() { return "{\"textValue\": \"Hello World!\"}"; } }
El primer punto final devolver谩 el archivo qml y el segundo, los datos necesarios. Almacenar un archivo en classpath no es la mejor soluci贸n. Adem谩s, en las aplicaciones QML puede haber muchos archivos qml y js . Pero lo hicimos por simplicidad.
Como resultado, obtenemos:
Pros y contras
Veamos ahora los pros y los contras de este enfoque.
Pros
- El c贸digo de la interfaz de usuario del cliente es relativamente simple. Por ejemplo, no necesitamos usar ning煤n hack CSS para hacer 2 columnas de la misma altura .
- El desarrollo de la interfaz de usuario se puede hacer en el dise帽ador gr谩fico Qt Creator
- Presumiblemente, la velocidad de la aplicaci贸n ser谩 mucho mayor que HTML
- Uso de componentes de la IU de escritorio
Contras
- Segundo navegador O RLY? Hasta que se resuelva el problema de seguridad, nadie incluir谩 el c贸digo en los navegadores principales, y nadie instalar谩 un segundo navegador para "sitios de un tipo diferente".
- Seguridad Ahora ella simplemente est谩 ausente. Puede hacer una p谩gina que formatee el disco duro.
- Para una soluci贸n de producci贸n, debe resolver un centenar de preguntas: est谩ndar, sesiones, almacenamiento en cach茅 de datos, seguridad, etc.
- Todo esta en su infancia
- La falta de una biblioteca de componentes de UI, mejorada para crear aplicaciones web
Hasta ahora, hay muchas m谩s desventajas que ventajas. Bueno, esto es comprensible, este es solo un prototipo que fue escrito en un par de d铆as, de rodillas. Pero todos los problemas est谩n resueltos, al menos no veo bloqueadores serios.
Entonces, 驴por qu茅 este art铆culo?
No encontr茅 nada similar en Internet, tal vez me ve铆a mal y ya existe algo similar. O nadie solo lo necesita. En cualquier caso, quiero escuchar sus comentarios y los de ellos para comprender si vale la pena hacer este negocio.
Recursos
PD: Quiero se帽alar que este m茅todo es fundamentalmente diferente de QmlWeb . En QmlWeb , el c贸digo HTML + JS se QmlWeb partir del archivo qml y se representa en el navegador.