LINUX.ORG.RU

Как создать GUI-подобное приложение для десктопного веб и не сойти с ума?

 , ,


2

3

Заголовок очень длинный, но зато суть отражает почти полностью:

суть в том, что мне и далеко не только мне нравится GUI-программирование. Нормальное такое классическое, в результате которого получались такие без гениальные вещи как интерфейс OS/2 WorkPlace Shell, интерфейс Mac OS X Aqua и все последующие...

Отсюда вопрос: а есть ли хоть какой-то вариант писать веб-приложения именно в GUI-стиле? Да, пусть с ограниченным набором виджетов и без каких-то феерических возможностей, но зато с такими классическими вещами, как обработчики событий на виджете, абсолютно адекватным поведением виджетов-контейнеров, правильным взаимодействием между виджетами, унификацией их внешнего вида и широкими возможностями их «тематического» декорирования (гм, вспомните лучше темы KDE). При этом если никому не нужно, чтобы приложение было одним и тем же для мобильных устройств и для десктопа -почему бы не разнести сугубо V составляющую на 2 части, а не пытаться сделать один интерфейс настолько супер-адаптабельным и универсальным, что его код станет по сути SSHA-суммой Книги перемен?

При этом весь JS код должен оперировать вменяемыми операциями наподобие «создай виджет - инстанс такого-то класса и помести его в другой виджет - контейнер такой то» или, как более правильный подход: «загрузи по URL такому-то описание формы приложения, сгенерируй виджеты. А теперь вот тебе обработчики событий для созданных объектов-виджетов».

В общем, вопрос прост как три копейки: есть ли в 2017-м году хоть один JS-фреймворк, который был бы комфортен для GUI-разработчиков и позволял бы получать работающие в браузере веб-приложения, по сути являющиеся, например, «веб-репликами» их уже написанных GUI-собратьев? Ведь многие же компании, и очень крупные, самые крупные, переводили свои десктопные приложения на веб-платформу. Неужели им всем было в радость просто писать всё заново в чистой веб-парадигме со всеми этими «прекрасными» вещами типа DOM и VirtualDOM?

P.S. Вопрос возник по итогам попытки прочесть https://habrahabr.ru/post/341688 : из прочитанного я не понял практически вообще ничего, хотя у меня есть опыт JS-разработки. Я просто не врубаюсь, что такого полезного с функциональной, осязаемой точки зрения мне даёт всё это...

Внимание, правильный ответ:

https://github.com/qooxdoo/qooxdoo

Огромное спасибо dmxrand и всем-всем-всем, кто помог определиться!

★★★★★

я не в теме.
но MS VS Pro?
Embarcadero RAD там чавой-то, во что Борланд зомбировался.

Deleted ()

Посмотри, как устроен Eclipse Che.

EXL ★★★★★ ()

Третьегном на js написан. Очевидно, что не весь, но яваскрипта там много.

anonymous ()

Да, пусть с ограниченным набором виджетов и без каких-то феерических возможностей

Тебе нужен bootstrap, semantic-ui, angular material

как обработчики событий на виджете

Тут тебе нужен ангуляр\вуй\реакт\ да хоть жиквеири

nikolnik ★★★ ()
Ответ на: комментарий от anonymous

JavaScript серверный и клиентский - две большие разницы. Серверный может оперировать понятиями из вполне адекватного реального мира. Клиентский - только бредом сивой кобылы, устаревшим почти сразу после своего рождения и регулярно переживающим старческий фейслифтинг - HTML убожеством и СSS-стеганографией. Язык сам по себе не виноват в том, что ему приходится из tr и hr делать «чтоб клиенту было зашибись». Так на заре компьютерной эры люди писали библиотеки на асме для попиксельного вывода графики - а в результате получались вполне себе сложные приложения, которые даже столбцовую диаграмму могли вывести. А сейчас вместо пикселей - кусочечки текста либо без всякой семантической нагрузки (div, span, да и table в лучшем случае изредка представляет собой таблицу), либо с безумной семантической нагрузкой (video, canvas). Поэтому серверный JS может всё и по своему элегантен, а клиентский JS всё ещё монструозен, ужасен и криптографичен.

DRVTiny ★★★★★ ()

А в чем проблема, собственно. «ограниченный набор виджетов» есть - читай про html-тэги, в частности семейство input (не хватает родных - мозьми готовые из material design). Выстраиваться умеют: в линию, в сетку идт (inline, flex, grid). Красятся без проблем через CSS (хочешь как на десктопе - выставляй width/height всех элементов в конкретные пиксельные значения). Бросают события из коробки (гуглить DOM events). Для desktop-like приложения ванильного DOM API за глаза.

Но ты ж, базарю, захочешь, динамически подгружаемый контент, роутинг вместо переходов по страницам, автоматическое связывание M с V и V м M, и чтоб и на обычных и на HD мониках норм смотрелось итд итп

makoven ★★★★★ ()
Последнее исправление: makoven (всего исправлений: 1)

Как создать GUI ... и не сойти с ума?

Очевидно, что это сейчас невозможно. Проблема в том, что в gui разработке засилье художников, которые «так видят». И рисуют кто во что горазд. А фундамента нет.

Вместо продумывания технической стороны, в тетради, с графом состояний, им кажется, что просто налепить «плитки», как ребенок аппликации в детском садике, и будет интерфейс. Нет. Интерфейс - это аналитическая работа, с карандашом и бумагой. А не инстансы, классы и JS. Об этом забыли даже родоначальники и основатели, которые в бытность свою проводили правильный ресёрч ( http://prior.sigchi.org/chi96/proceedings/desbrief/Sullivan/kds_txt.htm )

Вернись к истокам, спаси мир! Или прекрати делать GUI, уменьши энтропию.

Deleted ()

Даю тебе подсказку на самый оптимальный вариант: на шейдерах (да, я их терпеть не могу, но в webgl без них никак) пишешь свою минимальную библиотечку OpenGL виджетов.

Дальше ее в почти неизменном виде портируешь на жабоскрипт.

В итоге имеешь абсолютно единообразный код как для десктопной, так и для веб-морды.

А по-другому никак.

Но лучше все-таки вообще десктопным GUI не заниматься, неблагодарное это дело. Делай только веб-морды.

anonymous ()
Ответ на: комментарий от tim239

Кстати да, самый простой способ джава разработчику (а ТС не сказал кто он) получить приятный вебинтерфейс - vaadin, я бы сказал, на нем можно писать быстрые протатипы если не выходить за стандартный набор виджетов, но недостатков и ограничений много.

Aber ★★★★ ()
Ответ на: комментарий от dib2
import React from 'react';
import { render } from 'react-dom';
import Button from 'material-ui/Button';

function App() {
  return (
    <Button raised color="primary">
      Hello World
    </Button>
  );
}

render(<App />, document.querySelector('#app'));

Я глубоко убеждён в том, что директива import в браузерах не работает. Попытки навязать вместе с клиентским JS ещё и серверный понимаю и отношусь к ним даже с уважением, но нет.

Есть ли кроме платного KendoUI приличный GUI-фреймворк, которому достаточно всё-таки «<script>» в браузере?

DRVTiny ★★★★★ ()

мне нравится GUI-программирование. Нормальное такое классическое, в результате которого получались такие без гениальные вещи как интерфейс OS/2 WorkPlace Shell, интерфейс Mac OS X Aqua и все последующие

Классическое программирование - это карандаш, бумага, алгоритмы, железо.

Гениальные вещи - это наука, талант и мотивация на грани умопомешательства.
Даже в МС есть свой штат докторов наук и научная лаборатория.
Без науки и высокой мотивации нихрена не будет!

Гуй-программирование - это IDE типа Builder'а или Visual Studio. Умеют ли они веб, не помню. Мой веб - это полудохлый личный сайт с неразвитым контентом а-ля «в планах». Естественно, он вялотекуще делается классическим способом, с матюками.

Могу дома в Builder'е посмотреть, есть ли там гуй для веба. Если не забуду.

Deleted ()
Последнее исправление: rht (всего исправлений: 1)
Ответ на: комментарий от Deleted

Без науки и высокой мотивации нихрена не будет!

Именно поэтому современный веб не подходит для разработки обычных приложений: мотивацией его создания в нынешнем виде была не разработка приложений, а создание рекламных витрин и торговых площадок. Приложение - это идеально отточенный универсальный инструмент многоразового использования, который можно растиражировать и продать N раз. «Сайт» -это чаще всего одноразовое средство взаимодействия конкретного клиента и конкретного продавца. Даже если клиент пришёл смотреть новости, а ему продают рекламу.

Кстати, у меня коллега наваял CMDB как раз с использованием Webix. Ему нравится, но говорит, что возможностей не хватает. Если бы под веб были портированы такие фундаментальные вещи как QT - всего бы хватило с 1000-кратным избытком.

Почему не портированы?

* Потому что HTML и CSS сами по себе не подходят ни для чего, а уж для веб-приложений - ещё меньше

* Потому что в принципе приложения с унифицированными элементами интерфейса в веб не котируются. Веб - это «чем чуднее, тем лучше», и только на 1% - среда для предоставления SaaS (Software As a Service), поэтому унификация, стандартизация + идеально отлаженное взаимодействие здесь «не нужны».

DRVTiny ★★★★★ ()
Ответ на: комментарий от makoven

хочешь как на десктопе - выставляй width/height всех элементов в конкретные пиксельные значения

Это что за десктоп такой?

RazrFalcon ★★★★★ ()
Ответ на: комментарий от dib2

А уж как глубоко кастомизируется ЭВМ! Какие чудеса можно получить с помощью ЭВМ: Facebook, БитКойны, заказ ужина на дом, предсказания биржевых котировок! И всё это - благодаря небольшому ящику весом 7 кг!

От UI-фреймворка нужна не кастомизируемость, всё равно из электронов и протонов можно всегда собрать что-то интереснее, от UI-фреймворка нужны возможности. Т.е. то, что уже добротно реализовано чужими руками, а не то, что вы можете теоретически реализовать своими. При наличии 1000 лет жизни человек может, наверное, и половину Нью-Йорка построить, да и зачем тогда вообще фреймворки? Но есть фактор времени, и он диктует желание получить гарантированно рабочий результат без выпендрёжа - если речь идёт именно о продуктивных веб-приложениях, которые являются аналогами десктопных, а не о веб-сайтах, которые для показа баннеров и прочих «монетизаций».

DRVTiny ★★★★★ ()
Ответ на: комментарий от DRVTiny

Так ты же сам попросил «широкие возможности их «тематического» декорирования». А вот фичи ты как раз не просил.

static_lab ★★★★★ ()
Последнее исправление: static_lab (всего исправлений: 1)
Ответ на: комментарий от DRVTiny

сами себе противоречим, настройку от создания не отличаем, изменение шрифта/css приравниваем к титаническому труду и выпендрежу... тяжело быть вами.

dib2 ★★★★★ ()
Ответ на: комментарий от FlyingBuzz

ВАУ! Это просто бомба!

Буду пробовать. Если работает - это же моя мечта: показывать окно desktop'ного приложения в окне «бровзера». Интересно, насколько оно тормозит. Если всё ОК, то тогда я вообще не понимаю, зачем нужно что-то ещё??

DRVTiny ★★★★★ ()
Ответ на: комментарий от DRVTiny

кусочечки текста либо без всякой семантической нагрузки (div, span, да и table в лучшем случае изредка представляет собой таблицу), либо с безумной семантической нагрузкой (video, canvas

Открой для себя Custom Elements. Уже давно в стандарте есть возможность реализовывать собственные теги-элементы. И пиши себе на здоровье

<article-title>HTML говно, потому что я его не знаю</article-title>

anonymous ()
Ответ на: комментарий от anonymous

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

DRVTiny ★★★★★ ()

Eсли убрать JS, то Wt идеально подходит.

Serik ()
Ответ на: комментарий от dmxrand

Выглядит как идеальное воплощение того, о чём собственно пост. Приложение на Gtk2? А как работает, можно чуть подробнее?

DRVTiny ★★★★★ ()
Ответ на: комментарий от DRVTiny

Я глубоко убеждён в том, что директива import в браузерах не работает. Попытки навязать вместе с клиентским JS ещё и серверный понимаю и отношусь к ним даже с уважением, но нет.

что там не работает? скармливаешь вебпаку (нужно один раз вкурить в магию конфига) и все работает. и импорт, и ес6 вообще и все содержимое node_modules в браузере доступно. все так делают.

или тебе обязательно чтоб без компиляции в браузере работало? а писать на ес5 ты пробовал что-то сложное? а то и на ес3?

без class extends and friends и без async/await - нафиг та жить?

moot ★★★★ ()
Ответ на: комментарий от DRVTiny

Кстати вот этот вариант работает без интернета (открыл страницу, сделал закладку перегрузил комп и отрубил интернет - закладка работает)

dmxrand ()
Ответ на: комментарий от dmxrand

Автор приложения wshop2 - не Вы ли? Там есть адрес электропочты - если какие-то вопросы возникнут, можно задавать или адрес не для этого? :)

DRVTiny ★★★★★ ()
Ответ на: комментарий от DRVTiny

Неужели реально программа на qooxdoo может и вообще без браузера работать?

Нет. Но я делал chromeless и все работало.

dmxrand ()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.