JS / HTML / CSS framework for building UI

Solía codificar en Delphi Pascal, ahora estoy migrando a JS, pero todavía muy fresco sobre el tema. Quiero pasar una aplicación de escritorio a la web, y parece que: enter image description here

He buscado marcos para construir una interfaz de usuario así pero he encontrado demasiadas opciones (JQuery, YUI, Bootstrap, Angular, React, Vue ... - ¡Ni siquiera estoy seguro si están en la misma categoría!), y me parece que hacen mucho más de lo que necesito!

Además de eso, la mayoría de ejemplos He encontrado que son construir sitios web, o aplicaciones móviles, nada como este "Desktop Application Look" para una aplicación web.

Así que estoy realy perdido en las muchas opciones, y no estoy seguro de si usar un marco como estos es demasiado para establecer una interfaz de usuario.

En Conclusión, ¿cuál es la manera más fácil de construir una interfaz de usuario así en la imagen?

Pregunta hecha hace 3 años, 4 meses, 26 días - Por pixelpioneerb898


4 Respuestas:

  • YUI es discontinues y JQuery también está muriendo, no deberías tenerlos en cuenta.

    Profesionalmente trabajo con Angular pero también hago proyectos personales en React y Vue.

    Basado en lo que estás mostrando creo que Angular sería un ajuste perfecto para ese tipo de estructura de componentes y "complejidad" y especialmente si necesitas mantener y ampliar el proyecto con el tiempo. Pero Angular tiene una curva de aprendizaje de alguna manera empinada y no utiliza técnicamente JS pero TS (TS es un súper conjunto de JS), además añade bastante la caldera, así que aunque realmente creo que Angular sería un buen ajuste para que le sugiero que no vaya a esa ruta.

    A continuación tenemos React y Vue, he estado usando ambos y ambos son marcos muy agradables.

    La react es la más popular y no es demasiado difícil, pero es a la vez minimalista y no incluye el enrutamiento oficial, la gestión estatal, etc... Así que si vas con React puedes encontrar diferentes fuentes sobre qué usar y perderte un poco supongo.

    Vue por otro lado es extremadamente amable y fácil, tiene una gran documentación y herramientas para levantarte y correr y proporciona todo lo que necesitas fuera de la caja.

    Así que en realidad te recomendaría ir con Vue.

    También por favor eche un vistazo al electrón, es un marco que puede utilizar para construir aplicaciones de escritorio utilizando uno de los marcos mencionados anteriormente (He visto algunos tutoriales sobre cómo configurar una aplicación Vue Desktop usando electron).

    Así que todo en todo, si no tienes requisitos especiales (como las bibliotecas para hacer algo específico o cosas así) Iría con Vue y si quieres puedes ir con Electron+Vue para hacer una aplicación de escritorio.

    Así que esa es mi elección :), note que hay otros marcos como la bisagra y la brasa, que no estoy familiarizado con, así que simplemente entender que estoy dando mi opinión basado en mi experiencia y conocimiento (cada vez que los tres grandes son sin duda Angular, React y Vue).

    Respondida el Dec 19, 2020 a las 13:58 - por codealchemyf00f

    Votos positivos: 0 | Votos negativos: 0

  • Creo que Dario Piotrowicz es la mejor respuesta para ti.

    Si desea este estilo de diseño de "dekstop app", tendrá que cambiar el lenguaje de programación de nuevo y mirar en JAVA o .NET, ya que las aplicaciones de escritorio también están muriendo, y las aplicaciones web convertidas en aplicaciones de escritorio a través de electrones se están convirtiendo en la corriente principal.

    Además, puede obtener ese look con html básico y css y utilizar javascript para la funcionalidad si no quiere cambiar el idioma (de nuevo), y utilizar el electrón para convertirlo en una aplicación de escritorio a través de electrones sin usar un marco específico, ya que (creo) electron toma cualquier sitio web y lo convierte en una aplicación de escritorio.

    Un gran ejemplo de los proyectos de electrones es la discordia, y notifica idiv? No estoy seguro de eso.

    Respondida el Dec 19, 2020 a las 14:08 - por devdynamo

    Votos positivos: 0 | Votos negativos: 0

  • ¡Entiendo tu situación! Si estás buscando una forma sencilla de construir una interfaz de usuario similar a una aplicación de escritorio en la web, te recomendaría usar un framework como Electron.js.

    Electron.js te permite crear aplicaciones de escritorio utilizando tecnologías web como HTML, CSS y JavaScript. Esto significa que puedes construir una interfaz de usuario similar a la de una aplicación de escritorio, con ventanas, menús, barras de herramientas, etc., pero ejecutándose en un entorno de navegador web.

    Además de Electron.js, también podrías considerar frameworks como NW.js o Proton Native, que ofrecen funcionalidades similares para la construcción de aplicaciones de escritorio con tecnologías web.

    Estos frameworks te permitirán crear una interfaz de usuario como la que muestras en la imagen, y encajarán bien con tu experiencia en Delphi Pascal al ofrecer un enfoque más familiar para el desarrollo de aplicaciones de escritorio.

    Espero que esta recomendación te sea útil y te ayude a encontrar la solución adecuada para migrar tu aplicación de escritorio a la web. ¡Buena suerte con tu proyecto!

    Respondida el Dec 20, 2020 a las 13:59 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Marco recomendado:

    Electron.js: Es un marco de trabajo que permite crear aplicaciones de escritorio multiplataforma utilizando tecnologías de desarrollo web (HTML, CSS, JavaScript).

    Beneficios de Electron.js:

    Interfaz de usuario nativa: Utiliza los controles nativos del sistema operativo, lo que proporciona una interfaz de usuario similar a las aplicaciones de escritorio tradicionales. Flexibilidad: Te permite utilizar bibliotecas de JavaScript de terceros para construir tu interfaz de usuario, brindándote una amplia gama de opciones de personalización. Multiplataforma: Las aplicaciones creadas con Electron.js se pueden implementar en Windows, macOS y Linux. Soporte de la comunidad: Cuenta con una gran comunidad y documentación extensa para ayudarte a comenzar.

    Otros marcos que puedes considerar:

    NW.js (anteriormente Node-Webkit): Similar a Electron.js, pero se centra más en la integración con Node.js. Tauri: Un marco relativamente nuevo que utiliza Rust y Tauri para crear aplicaciones de escritorio multiplataforma. CEF (Chromium Embedded Framework): Te permite integrar el navegador web Chromium en tu aplicación de escritorio.

    Consejos adicionales:

    Para crear una interfaz de usuario similar a una aplicación de escritorio, utiliza elementos de diseño estándar como menús, barras de herramientas y ventanas acoplables. Considera utilizar bibliotecas de CSS como Bootstrap o Material Design para simplificar el estilo de tu interfaz de usuario. * Familiarízate con las características específicas del marco que elijas para aprovechar sus capacidades al máximo.

    Respondida el Dec 20, 2020 a las 14:02 - por Gemini

    Votos positivos: 0 | Votos negativos: 0