усы2

Стой под стрелой

Поступки и мысли, о которых могу вспомнить не краснея

Previous Entry Поделиться Next Entry
Десктопные UI
усы2
tonsky

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

Кажется, что идея провальна с самого начала. Но в мире есть успешный пример кросс-платформенных UI которые прилично выглядят на любой платформе. Это веб. Да, веб-сайты не собраны из системных компонентов, каждый вебмастер рисует свои кнопки и панели с нуля. Но все привыкли и не возражают. Браузер аккуратно доделывает системно-специфичные детали: нативный скролл (с инерцией или без), рендеринг и выделение текста, системные контекстные меню, системное поведение внутри даже полностью перерисованных инпутов. Системные нюансы, даже в комбинации с полностью уникальным скином и лайаутом, создают вполне приятный пользовательский опыт. Решение оказалось в том, чтобы не притворяться нативным системным приложением, иначе попадешь в uncanny valley, область фальшивых елочных игрушек.


на фото: Transmission Remote GUI (Free Pascal) притворяется нативчиком

На основе браузера сделали Электрон — бандл из хрома, node.js и ваших html/css/js, упакованных в обертку как-бы-приложения. С точки зрения пользователя — всё классно. VS Code, Atom, LightTable, Figma, Zeplin, Slack, VK Messenger, Rocket.Chat, Github Desktop, GitKraken, Basecamp, Ghost, Brave browser, Hyper, SimpleNote — прекрасные, вылизанные приложения, очевидно, что как платформа Электрон уже состоялся.


на фото: системное контекстное меню в Visual Studio Code (Electron)

И это одно из ключевых преимуществ Электрона — возможность напрячься и сделать действительно качественно, круто. Не в том, что можно быстро накидать, а в том, что можно довести до конца. Этого нет, например, у JavaFX/Swing — накидать быстро-то можно, но довести до состояния, когда приложение хочется облизать, —  нет, как ни старайся. Оно так и останется фальшивым на базовом уровне.

Претензия к Электрону, собственно, одна — это такой Докер для десктопа. То есть он пакует огромную тучу всякой фигни ради несоизмеримо маленького функционала. То, что нужно Хрому для веба, например совместимость с IE 5.5, всякие quirks mode, не знаю, видеокодеки, non-strict JS, устаревшие CSS свойства и режимы и совместимость их с новым и современным — это раз в 100 больше того, что вы когда-либо сможете и захотите использовать. И это никак не отковыряешь. Меня даже не размер бандла беспокоит, а то что весь этот легаси серьезно мешает приложению достичь своего потенциала скорости, простоты, надежности. Тот же JS — явно не лучший язык, с кучей совершенно левых/произвольных проблем-ограничений, медленный просто потому, что он настолько плох что уже не ускоряется, явно не готовый к тому, что под ним будет файловая система, что бывают потоки — да, мы не можем выкинуть его в вебе — но на десктопе-то ради чего страдать?

К сожалению, с браузером только всё-или-ничего. Как и докер, это явно неверный вектор развития — бандлить кучу говна просто потому, что так получилось и проще. И все равно web это лучшая на сегодня UI платформа, с лучшим integrated developer experience.

Вопрос, собственно, про альтернативы. На случай, если я проглядел что-то.

На QT бывают хорошие, красивые приложения. QT бывает кросс-платформенный, но это C++. Он, конечно, обходит JS по категории sanity, потому что он не сильно умный и в любой ситуации ты просто делаешь то что тебе нужно, а не пытаешься бороться с тормозами вмененного тебе динамизма. Figma, например, компиляют C++ в JS, чтобы работать в вебе, но лишь бы не писать на JS. Но все равно C++ ужасный язык, низкоуровневый, долгая компиляция, без REPL-а — а UI работу я себе не представляю без REPL-а.


на фото: Telegram Desktop (QT5) с кастомным контекстным меню. Не видно, но скролл тоже фальшивит

Java-решения (Swing/JavaFX) страшны как черт. Я тут скачал демку JavaFX, которая прям с дистрибутивом идет, так у них даже ховер на кнопках тормозит. Плюс естественно всё не нативное — ни скролл, ни выделения, ни контекстные меню, а нарисованное как будто программистами. Окей чтобы накидать что-то по-быстрому для нетребовательной аудитории клерков, но вылизать, кажется, невозможно.


на фото: Modena demo app (JavaFX). Пойдет, но тормозит и всё ненастоящее

Я не уверен, насколько хорош в этом плане SWT — смогу ли я выкинуть весь look-and-feel и нарисовать что-то стильно-современно-плоское, например? Не хотелось бы, чтобы получилось что-то уродливое вроде Eclipse. Он вообще живой еще?


на фото: страница проекта SWT

Что еще бывает? Или выхода нет?

Напомню, что мне важно не «быстро накидать из готовых компонентов», а «сделать и вылизать», причем без привлечения сверхусилий, одному (ха-ха), в разумное время, для всех платформ. Мобилки — что, наверное, сегодня удивительно, но — не интересуют.


  • 1
Sciter от TerraInformatica. https://sciter.com

Бывший HTMLayout (http://www.terrainformatica.com/htmlayout/main.whtm)

Автор приглашенный эксперт в w3c и уже 10 лет назад пытался протащить в CSS грамотные идеи лэйаута (но не смог :( )

Не вижу в разделе Our customers ни одной компании, UI продуктов которой вызывал бы желание облизать =(

Edited at 2017-05-26 12:03 (UTC)

Спасибо за интересный пост! Посмотрите Xamarin.forms

Так в самом же посте содержится и ответ. Бери Electron и вылизывай UI. Ну бандлит он что-то, ну и что? Главное же скорость разработки.

Берешь React и React Native и покрываешь:
Web, Windows, Linux, MacOS, Android, iOS, и горя не знаешь.

А со всякими Java или не дай бог C++ горя не оберешься.

Меня бесит корявость web-платформы и странности JS

без темы (Анонимно) Развернуть
(Анонимно)
Не обязательно C++ https://wiki.qt.io/Language_Bindings выбирай любой.

ага, вот еще с корявыми заброшенными биндингами не хватало возиться

(Анонимно)
https://developer.xamarin.com/guides/xamarin-forms/

Либо UI для каждой платформы свой (AppKit, GTK, Windows Forms) + interop с каким нибудь высокоуровневым языком с общей бизнес-логикой (от хранения стейта до общения с сервером) и реализацией каких-то сложных и не специфичных для платформы элементов интерфейса внутри webview, но опять же системного, а не притащенного с собой.

(Анонимно)
а какое бы приложение для мака (десктопного) на xamarin посмотреть?

я из .net видел на маке только fender fuse и такая модель работы дистрибьюции приложений -- ну её нафиг. если xamarin круче -- что смотреть?

без темы (Анонимно) Развернуть
В QT уже давно на JS колбасят, а вёрстку на QML делают. Я не сварщик, но, вроде, С++ там (непосредственно в UI-коде - всякие там обработчики и пр.) считается старьём неподдерживаемым и моветоном. В 2ГИС, в общем, весь прод. QT-код именно на этом пишется. https://ru.wikipedia.org/wiki/QML

Про Java: дык, вроде, всегда можно было выкинуть Look'n'Feel и написать свой рендер. Оно геморно, но речь в посте и идёт как раз не про "хуяк-хуяк", а про вылизать. IDEA и Ко, вроде, до сих пор на свинге. На маке нативно выглядит? Я не в теме просто. На винде, ИМХО, всё довольно органично.

Уровень "аналитики" (или как это назвать-то?), кстати, выглядит несколько однобоким. С одной стороны речь идёт о кросс-платформенном UI, но с другой стороны мы видим лишь примеры из разряда "ой, смотрите как херово сделали под MAC". Ну дык это и не противоречит посылу, что надо вылизывать под каждую платформу. Примеры, как мне кажется, лишь говорят о том, что под MAC недоделали. Под винду или линукс (какой-нить конкретный даже пусть) надо бы показать примеры из поста.

Из кросс-платформенного ещё есть Xamarin Forms. Но и тут я не сварщик. Я только знаю, что Windows Forms работают поверх чистого WinAPI (нативнее не бывает %) и в mono есть их реализация.

IntelliJ одинаково плох и там и там.

> выкинуть Look'n'Feel и написать свой рендер

Хочется выкинуть look-n-feel но не писать свой рендер. Посмотри как в браузере это работает — все кнопки/панельки нарисованы но выделение/текст/скроллинг нативный от платформы.

QT + JS это интересно, надо поглядеть.

> ой, смотрите как херово сделали под MAC

Это где такой посыл? Потому что скриншоты с мака? Оно и на винде будет не очень.

без темы (Анонимно) Развернуть

Electron это то что надо

Из особенных плюсов это скорость разработки на том же react / vue.

Но есть один жирный минус который мне не дает покоя

Ну вот взялся я, допустим, делать какое-то небольшое приложение на электроне.
Мне же понадобится какой-то css-фреймворк?
И что у меня есть. Не бутстрап же брать? Там банально нет нужных виджетов. В десктопе есть такие контролы которых в вебе бывает крайне редко и естественно, в массовых опенсорсных веб-фреймворках их просто не будет.

Т.е проблема в том что нет хорошего, простого UI-фреймворка ориентированного на десктоп. Пусть он будет со своими контролами, пусть он будет не похож ни на одну ось, но он нужен что бы иметь какие-то примитивные вещи типа "панель с кнопками". Или что-то чуть более сложное типа "tree-view".

Жаль что чуаки из крупных electron-based проектов нe не шарят свой css-фреймворк, сразу бы посыпались тонны софта с нормальным (ну и что что одинаковым) дизайном. Хотя бы не бутстрап.

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

Начинаешь делать кнопку, тут же начинается "а еще иконку", "а еще надо 5 цветов", "а еще вариант когда красится только рамка", "а еще такую вот пыщ-пыщ стрелочку". И вся эта гибкость - поверх деревянного CSS. Реально сделать либо что-то примитивное (bootstrap), либо что-то страшное (extJS). А чтобы и то, и то - надо написать стек аналогичный CSS/HTML/JS, но человеческий. Может быть кто-то когда-нибудь сделает такое, потому что ну сил нету уже.


Ну вот Transmission Remote GUI на нем, удовольствия никакого

wxWidgets. Исходно C++. Сейчас - пиши на чем хочешь: Perl, Python, Rust, Haskell, ... В недрах зашиты биндинги на нативный UI. Будет look'n'feel. Компилируется.

Tcl/Tk. Быстро. Интерпретируется. Ненативно. Из коробки топорно. Надо доводить до ума.

>Tcl/Tk. Быстро.

Нет, не быстро. Оно последовательно всё более тормозит с каждой версией после 7.6, современный 8.5 в этом смысле -- ну, хужэ только web с рекламой.

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

> привыкли и не возражают

вот он, залог успеха.

писать html5 приложение на котлине для браузера (не электрон)

а бекенд в облаке естествено. ну или версию сервака на локале - на том же котлине например.


Edited at 2017-05-26 19:08 (UTC)

Да котлин или шмотлин не принципиально, всё равно он в конечном итоге будет компиляться в JS, а JS — плохой compilation target

без темы (Анонимно) Развернуть
>>VS Code, Atom, LightTable, Figma, Zeplin, Slack, VK Messenger, Rocket.Chat,
>>Github Desktop, GitKraken, Basecamp, Ghost, Brave browser,
>>Hyper, SimpleNote
Все эти приложения выглядит как веб-страницы, а не нативные приложения. Если для тебя "нефальшивый" -- это как в вебе, над которыми хорошо поработал UI/Graphical дизайнер, то причем здесь UI для декстопа?

>>Этого нет, например, у JavaFX/Swing — накидать быстро-то можно,
>>но довести до состояния, когда приложение хочется облизать,
>> — нет, как ни старайся.
Со свингом действительно сложно добиться того что хочешь, хотя он конечно косит под платформу гораздо лучше, чем все эти веб-фреймворки для десктопа (которые вообщем-то даже не стараются косить под платформу). Что касается JavaFX, то здесь как раз вылезать, чтобы хотелось облизать (имея нормального дизайнера как в вышеупомянутых приложениях) кажется не менее реальным чем в веб-фреймворках для десктопа. Там есть FXML/CSS можно использовать JS/Clojure/JRuby/Groovy для UI хэндлеров, думаю вполне реально прикрутить REPL.

>>Java-решения (Swing/JavaFX) страшны как черт.
>>Я тут скачал демку JavaFX, которая прям с дистрибутивом идет
Ты неправильную демку скачал. Скачай Ensemble8 (https://itunes.apple.com/ru/app/javafx-ensemble8/id1108872091?mt=12 ) там есть довольно симпатичные демки. Хотя конечно не совсем так как в вебе, что для веб фронтендера может казаться фальшивым.

>>Не хотелось бы, чтобы получилось что-то уродливое вроде Eclipse.
Вот ты сам себе противоречишь: тебе нативный десктопный UI или вебовский подавай? Еclipse выглядит как минимум не хуже чем Xcode, MS Visual Studio и прочие "нативные" UI приложения. Да, нативный десктоп уродлив -- он к нам пришел в основном из 90-х, но это не проблема SWT или Swing -- это проблема в самом десктопе. На SWT можно сделать десктоп не хуже чем на QT -- для примера скачай Zona -- сделан на SWT и у меня нет к нему претензий к UI (пользую дома на винде).

Но в любом случае, ключ к красивому приложению -- это правильный дизайнер, и кодер с руками, а не фреймворк.

Если тебе нужны и нативные контролы там, где хочется контролы и кастомный дизайн там где хочется кастомный дизайн и любимый продуктивный язык программирования можешь попробовать связку JavaFX + SWT. SWT спокойно вставляется в JavaFX и наоборот. Да и в JavaFX еще можно и веб вставить, если очень хочется.


>На SWT можно сделать десктоп не хуже чем на QT -- для примера скачай Zona

Это смотрелка торрентов? У нее ж UI как веб-страничка выглядит и ведет себя, на десктопное приложение не похоже даже.

без темы (Анонимно) Развернуть
Я не уверен, что это тебе пригодится, но вот: https://github.com/ocornut/imgui . Для своих нужд (телеметрия/финансы) я давно облизываюсь, но C++... :(

И там текст рендерится опенгл-ем! (Не смотри на дефолтный шривт, он ШГ — можно поставить любой).

Chez Scheme FFI должен отлично с ним справиться, будет и репл, и скорость, и гибкость =)

я, как пользователь макбука
"""
Model Name: MacBook Pro
Model Identifier: MacBookPro7,1
Processor Name: Intel Core 2 Duo
Processor Speed: 2,4 GHz
Number of Processors: 1
Total Number of Cores: 2
L2 Cache: 3 MB
Memory: 4 GB
Bus Speed: 1,07 GHz
""" (это примерно 2010 год выпуска)
осуждаю электрон. электрон не работает.
десктопный слак что-то, как-то еще пытается... а гиткракен, например, ушел в нирвану при попытке показать репозиторий 40kloc с 5-летней историей.
тормознутое гавно. как в этом можно еще и код набирать? атом? вскод?
на этом же маке, меж тем, слак отлично работает в браузере. точно тот же функционал.

У меня 2012-го макбук. Не жалуюсь на кракена, vscode вообще летает. Правда репозитории поменьше. Lighttable вот был (тоже Electron), в нем набор текста подтормаживал, а в VS Code ничо. Вывод: сделать быстро можно.

Еще вот такое бывает: http://haxeui.org/
Если не нравится haxe (хотя он намного приятнее js), в него есть трансплитеры со всех jvm-языков и с go.

Ну и вообще геймерские фреймворки.
Они на "VS Code, Atom, LightTable, ..." могут ответить Sublime'ом.

Edited at 2017-05-26 23:06 (UTC)

Вариантов нет.

Самое близкое - Windows.Forms (есть и на моно и других платформах, но это привет 90е и button1_click), и Xamarin(чуть лучше, но не сказать чтобы очень).

Надо писать под платформу, иначе счастья не добиться.

Для винды это UWP(простенькие приложения, аля-мобильные) и WPF(можно и в энтерпрайз и вообще, там где надо гибкость, сложные анимации и прочее). Для мака Cocoa. Для линукса... Стоп, а зачем нужен десктопный UI на линуксе? Да и вообще, там все плохо, и до сих пор пишут на низкоуровневых языках, типа C++, так что лучше туда не лезть.

WPF то ещё кривое тормознутое говно, написанное неграми. Если надо в семёрку, где нет UWP, то лучше уж WF. С гимнастикой там можно всё красиво сделать, не хуже WPF уж точно

А скорость разработки на нём быстрее?

Ты выдумал себе с потолка случай что тебя не устраивает жаваскрипт и ищешь не пойми что.
Ладно бы сказал что JavaScript/TypeScript тебя как язык не устраивает, есть такое, не идеальны. Или что веб не очень удобен для разработки десктопа, тоже нормальный аргумент.
Но ты утверждаешь - что жаваскрипт плохой - что он медленный :D.

Я помню из предыдущего разговора - ты запускаешь бенчмарк базы данных - и на жаваскрипте получается в 2 или 5 раз медленней. И типа поэтому он медленный.
Ты биткоины чтоли майнить собираешься на нем? Все это напоминает разговор о японской бензопиле где ей пробовали перепилить рельс. Чем тебя скорость жаваскрипта не устраивает? Что за рельс ты хочешь перепилить?

Ну вот мы сворачиваем стейт из событий, event sourcing. Если делать это на клиенте, это занимает 100 мс. А если на сервере, то 10. Я не знаю, куда уж ближе к UI

Дексторные UI

Я использую такой подход. Свои фасадные библиотеки над SWT, JavaFX, Android, HTМL(DOM) Пишу на Clojure или Scala c помощью этих библиотек, потом без изменения кода, компилирую в JavaScript(СlojureScrpt, Scala.js)
Библиотеки неполные и компоненты там появляются по мере необходимости. Для складских, бухгалтерских и прочих офисных задач хватает. На mav.vn.ua есть live demo.
На http://anatoly62.blogspot.com статьи сразу на русском))

Edited at 2017-06-10 22:01 (UTC)

Re: Дексторные UI

Да, тоже способ в принципе. Спасибо!

Так что вы в итоге решили?

Попробовать JavaFX и посмотреть как пойдет. Пока не попробовал, впрочем

(Анонимно)
А вам не кажется что Электрон это такой Emacs, только на JavaScript и помоднее?

Tour in Verona.

(Анонимно)
“Adoro viaggiare in Segway”. Il modo migliore per cadere in amore con Verona in nessun tempo!
Quando si dispone di un breve tempo a coprire una citta, questo e un ottimo modo per farlo. Mi e piaciuto molto il nostro tour e guida. L'audio e stato un po' difficile, ma la guida li ha tenuti lavorando. Quando il suo caldo, questo e un ottimo modo per andare in giro e stare un po' fredda. Verona e una citta facile accesso per segway intorno. Abbiamo visto tutti i principali siti e ci hanno dato una buona sensazione per il layout della citta. Siamo stati in grado di tornare a pochi posti il giorno successivo per un po' di tempo.

https://www.regiondo.it/segway-historic-tour-in-verona

[b]Book Now[/b] ''' http://segwayverona.com/

https://eu5.bookingkit.de/onPage/detail?e=2202759fc95947e409b3435a7ae87161&preview=true&lang=it

Tour in Verona.

(Анонимно)
“Adoro viaggiare in Segway”. Il modo migliore per cadere in amore con Verona in nessun tempo!
Quando si dispone di un breve tempo a coprire una citta, questo e un ottimo modo per farlo. Mi e piaciuto molto il nostro tour e guida. L'audio e stato un po' difficile, ma la guida li ha tenuti lavorando. Quando il suo caldo, questo e un ottimo modo per andare in giro e stare un po' fredda. Verona e una citta facile accesso per segway intorno. Abbiamo visto tutti i principali siti e ci hanno dato una buona sensazione per il layout della citta. Siamo stati in grado di tornare a pochi posti il giorno successivo per un po' di tempo.

https://www.regiondo.it/segway-historic-tour-in-verona

[b]Book Now[/b] ''' http://segwayverona.com/

https://eu5.bookingkit.de/onPage/detail?e=2202759fc95947e409b3435a7ae87161&preview=true&lang=it

  • 1
?

Log in

No account? Create an account