усы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
В 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

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

Слушай, а почему ты в одном комментарии говоришь, что JS — хреновая цель для компиляции, а в другом — что QT+JS интересно? Или просто "JS плохой" на самом деле означает "Browser API плохой"?

QT + JS лучше чем Web + JS (хотя может и нет). Я на самом деле плохо себе представляю QT, надо посмотреть, насколько он нативнее/ненативнее веба выглядит.

(Анонимно)
QT+js почти не отличается от Web + js, тк внутри там Webkit

Мы года 4 назад на одном проекте окунулись в Qt 5.0.2 с Qt Quick 2. Впечатления по итогу были смешанные. С одной стороны QML для разметки оказался очень неплох, по крайней мере не такая кровь из глаз как полотна XAML, например. В ранних версиях была куча детских болезней (например, не было даже стандартных combo-box, приходилось все ручками), но потом большая их часть была исправлена, появилась библиотека "нативных" контролов.

Но бизнес-логику на нем писать - это хождение по мукам и граблям. Отладки нормальной практически нет. Про REPL вообще молчу. На то время мы еще не додумались втянуть хоть какой-нибудь underscore.js или еще каких-то наработок из JS мира: их костылями и напильниками их можно прицепить к QML. А без этого в результате получились полотна чистого QML(=JS) и месяцы доводки этого безобразия до релизного состояния, боль и беспросветность...

Но все равно QML - это тоже вариант. По крайней мере не так прожорлив в плане ресурсов как Electron.

А вообще жаль, что WPF не кросплатформеннен. Все же по совокупности характеристик для наших задач это было самое оптимальное решение.

Да, посыл я увидел именно с маковских скриншотов. А чего ты ожидал? :) "Вон, смотрите как плохо" и маковский скриншот - это как-то попахивает манипуляцией и пропагандой ;) Собственно, как и тезис "IntelliJ одинаково плох и там и там". Охото какой-то большей конкретики. Скрины с мака (с комментариями о конкретных проблемах) - это дело.

Кстати такая проблема тоже есть. Берут «кросс-платформенный» фреймворк и подгоняют интерфейс под какую-то одну платформу (часто — Win). Потом меняют скины на кнопках и почему-то на всех остальных платформах выглядит как говно. Проблема не только при Win→Mac, но и при переходе между разными версиями винды тоже, когда формально мы начинаем использовать элементы от нового лука, а размеры-отступы остаются от старого. Из неудачных переходов Mac → Win помню как-то увидел SourceTree на винде после Мака и чуть не сблеванул.

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

>лишь примеры из разряда "ой, смотрите как херово сделали под MAC".

Так на винде, линуксе и андроиде все и так пестро как на восточном базаре, там все привыкли к разнородным и непохожим друг на друга интерфейсам и поведениям. И только в мире радуг (OS X / iOS) остались нытики "ой вот тут пиксель не нативно выглядит, фи", их там приучили родину любить.

  • 1
?

Log in