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

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

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


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 ничо. Вывод: сделать быстро можно.

?

Log in

No account? Create an account