усы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
Я же объяснил. Смотри.

Полностью кросплатформеннго UI с нативным look and feel не бывает. Look and feel это не просто скин, это еще и размеры, расположение, идиомы.

Можно заиметь кросплатформеннго UI с вебовским look and feel. Да, он выглядит чужеродно, но это лучше, чем притворяться «почти» настоящим и не дотягивать. Веб хотя бы не пытается. См. uncanny valley.

При этом веб сохраняет некоторые важные фишечки платформы, из-за которых он не выглядит совсем уж чужеродно. Это _поведения_: скролл, выделение, рендеринг текста, контекстное меню, хоткеи в инпутах и т.п.

В этом проблема фреймворков, которые делают _вообще всё_ с нуля: они чувствуются фальшиво на всех уровнях, тогда как веб выглядит ненативно, но _ведёт_ себя как любое другое системное окно.

В этом смысле я не вижу разницы, скажем, между Swing и JavaFX. И то и то делает закат солнца вручную (т.е. переизобретают вообще весь мир, включая менюхи и поведение контролов), поэтому дожимаются они до одинакового фальшивого состояния, но не дальше.

> Еclipse выглядит как минимум не хуже чем Xcode, MS Visual Studio и прочие "нативные" UI приложения.

Ха-ха. Ха. Он пытается выглядеть нативным и промахивается. Отступы, размеры выдают. Их можно подогнать под одну какую-то платформу, но под все остальные оно будет вкривь и вкось. VS и XCode очень хорошо выглядят графически, btw

> можешь попробовать связку JavaFX + SWT

Вопрос. Нафига в этой связка JavaFX? Что он может мне дать?

Да, это стирано. Что под винду только

>>Это _поведения_: скролл, выделение, рендеринг текста,
>>контекстное меню, хоткеи в инпутах и т.п.
Ok, point понял. Начал специально приглядываться к скроллу, фонтам и контекстному меню. Честно не обращал внимание на эти детали, и честно говоря вебовский десктоп для меня выглядит не менее чужеродно, чем JavaFX. Но, ok для тебя это важно. Расскажу про этот поинт джавафксникам при случае. А то они реально не понимают почему на десктопе выбирают не их для кросс-платформенносости.
С другой стороны посмотрел на IDEA -- и там я просто не вижу разницы во всех этих деталях c другими системными приложениями: скролл, выделение, рендеринг текста, контекстное меню, хоткеи в инпутах и т.п. Не наблюдаю никакого uncanny valley в IDEA. Может глаз конечно еще ненабитый.
С другой стороны смотрю на "декстопный" Whatsup (тоже на вебе) -- там и скрол и контекстное меню ненативное. И что-то мой user-expirience от этого никак не страдает в сравнении с рядом открытым Slack, где и то и другое типо нативное. Скорее мне больше нравится вотсаповский подход, потому что у них контекстное меню в их общем дизайне, а в слаке -- нет.

>>В этом смысле я не вижу разницы, скажем, между Swing и JavaFX.
JavaFX -- также как и веб, тоже никогда не пытался косить под платформу. Идея фикс JavaFX -- это сделать лучше чем платформы. Включая все мобильные. И лучше чем веб. И чтобы UI и игры можно было бы. И 3d тоже. То что там можно стилизовать и скролы и контекстные меню в том числе, но блин -- это кажется логичным! Если ты делаешь полностью кастомный дизайн, какого хрена у тебя два каких-то выделенных элемента будут не вписываться в общую канву _твоего_ дизайна? Это прямо действительно важно для UX, скролл и контекстное меню? Точнее их нативность? Вот почему кнопка и чек-бокс у тебя могут быть полностью свои, а контекстное меню нет?

Что касается Swing, то там действительно есть именно эмуляция системного look-n-feel, которая может быть плохой, как ты говоришь uncanny valley. Но есть и свои look-n-feel, которые не пытаются, и выглядят бывает хуже бывают лучше системного. Но хуже-лучше в UI -- это вообще все сплошная вкусовщина. И IDEA для меня не выглядит фальшивой. А для тебя выглядит. Но с другой стороны ты фронтендер, а я нет.

>> Ха-ха. Ха. Он пытается выглядеть нативным и промахивается.
>> Отступы, размеры выдают.
Вот, блин, "отступы-размеры". Я вот смотрю на какой-нибудь Outlook и VS. Вроде оба приложения писали в Микрософте. Но я вижу, что их писали разные люди. И UI у них выглядит по разному, чисто на глаз. Отступы, размеры, вот это все. Хотя возможно MS HIGs оба приложения выдерживают лучше, чем Eclipse. А на винде еще ведь появился весь этот зоопарк со старым UI и новым UI. Для меня как для виндоюзера со стажем использующего Mac в качестве лаптопа вообще перестало существовать теперь понятие нативного UI.

>> Их можно подогнать под одну какую-то платформу,
>>но под все остальные оно будет вкривь и вкось.
Да пишут на SWT платформенно-зависмый код, чтобы подогнать под HIGs конкретной платформы (все эти отступы-размеры задаются платформенно зависимым кодом). Я сам не делал, но Антон Кекс утверждает, что такого кода очень немного, по сравнению с остальным.

>> VS и XCode очень хорошо выглядят графически, btw
Ты хотел сказать IMHO, а не btw? Хотя IMHO -- эксперта, которое я уважаю. Но мне кажется это вкусовщина. Мне графически VS нравится меньше, чем IDEA, хотя последняя на свинге. С Xcode практически не работал, чтобы внятно судить.


>>Нафига в этой связка JavaFX? Что он может мне дать?
Чтобы делать кастомный дизайн (у тебя же был запрос в плоский интерфейс), анимацию, вот это все. Все что любят в вебе и мобилках. На SWT/Swing очень сложно делать весь это кустомный дизайн, а анимацию вообще практически нереально. И JavaFX собственно и появился как ответ на запрос на UI нового типа -- дизайнерский, с анимацией и прочим. И чтобы не JS. Точнее не только JS.
Другой вопрос зачем тебе SWT в этой связке. Я просто понял в начале, что тебе нужны нативные контролы. Но если тебе нужны только скрол и контекстное меню, то ради этого его прикручивать к JavaFX наверно странно.

(Анонимно)
JavaFX это всё-таки запоздалая попытка запрыгнуть на рельсы Flash-а, которому и без этого всего плохо. При этом плохо сразу с двух сторон. С одной стороны, всё это vector-based рисование на мобильных (а это большая часть нынешнего рынка) не работает с приемлемым фреймрейтом, т. к. процессоры слабенькие, а ожидания у пользователей большие. С другой стороны, JS с браузерами вполне в тренде и все нужные Canvas-ы и WebGL-и вполне вовремя запилил и уже почти везде очень хорошо поддерживает.

>>всё это vector-based рисование на мобильных
JavaFX использует всякие hardware аксселераторы конечно.
Но Game development на JavaFX (кроме простых игр) сомнителен безусловно.

Про то что "запоздалая попытка запрыгнуть на рельсы Flash-а". У меня есть инсайдерская информация, что основной таргет для JavaFX изначально планировался -- это именно mobile. Но Google обскакал Sun здесь, c iOS не удалось договориться про JIT. Поэтому Ораклу, когда он схавал Sun, ничего не оставлось как перецелить JavaFX на десктоп.

Только что наткнулся на такой блог -- https://tbeernot.wordpress.com/

Чувак использует JavaFX для реального бизнес-приложения на Windows/macOS/iOS/Android и счастлив.

  • 1
?

Log in

No account? Create an account