JS/HTML/CSS фреймворк для создания пользовательского интерфейса

Раньше я программировал на Delphi Pascal, сейчас перехожу на JS, но все еще очень свеж в этой теме. Я хочу перенести приложение с рабочего стола в Интернет, и оно выглядит так:

Я искал фреймворки для создания такого пользовательского интерфейса, но нашел слишком много вариантов (JQuery, YUI, Bootstrap, Angular, React, Vue... — я даже не уверен, что они в одной категории!), и мне кажется, что они делают гораздо больше, чем мне нужно!

Кроме того, большинство примеров, которые я нашел, предназначены для создания веб-сайтов или мобильных приложений, ничего подобного этому «настольному приложению» для веб-приложения.

Так что я действительно потерялся во множестве вариантов и не уверен, что использование таких фреймворков слишком много для простого макета пользовательского интерфейса.

В заключение, как проще всего создать такой пользовательский интерфейс на изображении?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
332
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

YUI прекращается, и JQuery также умирает, вы не должны принимать это во внимание.

Профессионально я работаю с Angular, но также делаю личные проекты на React и Vue.

Основываясь на том, что вы показываете, я думаю, что Angular идеально подходит для такой структуры компонентов и «сложности», особенно если вам нужно будет поддерживать и расширять проект с течением времени. Но у Angular довольно крутая кривая обучения, и технически он использует не JS, а TS (TS — это расширенный набор JS), плюс он добавляет довольно шаблонный код, поэтому, хотя я на самом деле думаю, что Angular хорошо подходит для этого, я посоветовал бы вам не идти по этому пути.

Затем у нас есть React и Vue, я использую оба, и они оба очень хорошие фреймворки.

React более популярен и не слишком сложен, но в то же время он минималистичный и не включает в себя официальную маршрутизацию, управление состоянием и т. д. Так что, если вы выберете React, вы можете найти разные источники того, что использовать, и, я думаю, несколько заблудитесь.

Vue, с другой стороны, чрезвычайно удобен и прост, у него есть отличная документация и инструменты, которые помогут вам начать работу, и предоставляет все необходимое из коробки.

Так что на самом деле я бы рекомендовал вам использовать Vue.

Также, пожалуйста, взгляните на электрон, это фреймворк, который вы можете использовать для создания настольных приложений с использованием одного из фреймворков, упомянутых выше (я видел несколько руководств о том, как настроить приложение Vue Desktop с помощью электрона).

В общем, если у вас нет особых требований (например, библиотеки для чего-то конкретного или что-то в этом роде), я бы выбрал Vue, и если вы хотите, вы даже можете использовать Electron + Vue для создания настольного приложения.

Так что это мой выбор :), обратите внимание, что есть другие фреймворки, такие как svelte и ember, с которыми я не знаком, поэтому просто поймите, что я даю свое мнение, основанное на моем опыте и знаниях (в любом случае, большая тройка, несомненно, Angular, Реагировать и Vue).

Спасибо за ваше время и очень хорошо объясненный ответ! Я обязательно посмотрю на Vue. Я подожду пару дней, чтобы посмотреть, может ли кто-нибудь еще добавить к обсуждению. А пока ваш ответ имеет мой голос! Спасибо, Ура.

Serginho 20.12.2020 01:44

Спасибо :), пожалуйста, дайте мне знать, когда вы примете решение :)

Dario Piotrowicz 20.12.2020 10:59

Ага! Я хорошо посмотрел на Vue и мне очень понравилось! Отличный источник информации для начинающих, множество примеров для обучения и все инструменты, которые мне в конечном итоге понадобятся, в одном месте. Я нашел этот пример, который очень перспективен для создания настольных приложений. motla.github.io/vue-file-toolbar-menu Итак, еще раз спасибо за ответ!

Serginho 21.12.2020 13:19

вау, эта панель инструментов выглядит великолепно! :) Я рад, что смог помочь, удачи в вашем проекте :)

Dario Piotrowicz 21.12.2020 14:34

Я думаю, что Дарио Пиотрович - лучший ответ для вас.

Если вам нужен этот стиль дизайна «настольное приложение», вам придется снова сменить язык программирования и изучить JAVA или .NET, поскольку настольные приложения также умирают, а веб-приложения, превращенные в настольные приложения с помощью электрона, становятся мейнстримом.

Кроме того, вы можете получить этот вид с помощью базовых html и css и использовать javascript для функциональности, если вы не хотите менять язык (опять же), и использовать электрон для превращения его в настольное приложение через электрон без использования конкретной структуры, как ( Я думаю) Электрон берет любой веб-сайт и превращает его в настольное приложение.

Отличным примером электронных проектов является discord, и, наверное, Spotify? не уверен в этом.

Я хочу создать веб-приложение (работающее в браузере), просто хочу, чтобы оно выглядело как настольное приложение, но без установки и запуска на любом устройстве! Я решил использовать только базовые HTML/CSS и Javascript, я просто не уверен, лучше ли делать все это с нуля (или нет), чем использовать фреймворк! Спасибо

Serginho 20.12.2020 11:45

Другие вопросы по теме