Прощай HTML, привет QML

HTML mess


Как можно создать web приложение без использования HTML? Для этого нам понадобится: новый браузер, QML и back-end на Java.


Немного истории


HTML создавался учеными в CERN как способ делиться научными статьями. Затем он превратился в удобный способ размещения информации в сети. Стало ясно, что функциональности гиперссылок мало, и тогда начали добавлять компоненты, формы, CSS. Но и этого было мало, нужна была динамика, добавили JavaScript. Но на всем этом не очень удобно разрабатывать, поэтому в дальнейшем появились js-фреймворки. Они пытаются устранить недостатки HTML. Но я думаю, что лучше лечить саму болезнь, чем симптомы. В этом нам поможет QML.


Приступим к решению


Сразу хочу отметить, что это решение не является production-ready. Это "Hello World!" приложение, которое показывает чего можно достичь используя данные инструменты.


Браузер


Поскольку нам не нужен разбор HTML, поэтому браузер мы напишем свой, на Qt5, QML и C++. Наш браузер должен взаимодействовать с back-end приложением и показывать информацию на экране.


Схема работы браузера:


  • В адресной строке набираем URL ресурса и нажимаем enter
  • С помощью HTTP запроса загружаем qml-файл на жесткий диск
  • С помощью HTTP запроса загружаем данные для qml-файла
  • Отображаем qml-файл с помощью Loader

TabComponent.qml


...
TextInput {
    onAccepted: {
        var result = siteLoader.loadSite(addressIpt.text)
        if (result === LoadResultType.SUCCESS) {
            var props = siteLoader.loadProperties(addressIpt.text)
            var qmlPath = siteLoader.getMainQmlPath(addressIpt.text)
            pageLoader.setSource(qmlPath, props)
        } else {
            ...
        }
    }
}
...
Loader {
    id: pageLoader
}

Здесь siteLoader это экземпляр C++ класса, который импортируются в qml. В нем реализована логика браузера.


TextInput это компонент адресной строки в браузере. При нажатии enter вызывается метод onAccepted и выполняется логика загрузки сайта.


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


Вот собственно и весь браузер. Давайте перейдем к back-end и UI.


Back-end и UI


Back-end и UI это непосредственно наше web приложение. UI часть мы напишем на QML, a back-end у нас будет написан на spring boot, поскольку я Java программист. Первое что нам нужно это qml-файл с описанием нашего интерфейса.


main.qml


import QtQuick 2.0

Rectangle {
    color: "lightgray"
    property alias textValue: helloText.text

    Text {
        id: helloText
        anchors.horizontalCenter: parent.horizontalCenter
        font.pointSize: 24
    }
}

Тут все довольно просто.


property alias textValue: helloText.text

Эта строчка нужна чтобы вытащить свойство text наверх, чтобы можно было его проставить в Loader.
Теперь добавим два эндпоинта:


@RestController
public class HelloController {

    @GetMapping(
            value = "/main.qml",
            produces = MediaType.APPLICATION_OCTET_STREAM_VALUE)
    public byte[] mainQml() throws IOException {
        ClassPathResource resource = new ClassPathResource("main.qml");
        return IOUtils.toByteArray(resource.getInputStream());
    }

    @GetMapping(
            value = "/getProperties",
            produces = MediaType.APPLICATION_JSON_VALUE)
    public Object getProperties() {
        return "{\"textValue\": \"Hello World!\"}";
    }
}

Первый end-point вернет qml-файл, а второй — необходимые данные. Хранить файл в classpath не самое удачное решение. Тем более что в QML приложениях может быть много qml и js файлов. Но мы это сделали для простоты.


В итоге мы получим:


Hello world example


Плюсы и минусы


Давайте теперь рассмотрим плюсы и минусы данного подхода


Плюсы


  • UI код клиента относительно простой. Например нам не нужно использовать какие-то CSS хаки, чтобы сделать 2 колонки одинаковой высоты.
  • Разработку UI можно вести в графическом дизайнере Qt Creator
  • Предположительно скорость работы приложений будет гораздо выше чем HTML
  • Использование десктопных UI компонент

Минусы


  • Второй браузер O RLY? Пока не решен вопрос с безопасностью никто не включит код в мэйнстримные браузеры, а устанавливать второй браузер для "сайтов другого типа" никто не будет.
  • Безопасность. Сейчас она просто отсутствует. Можно сделать такую страничку, которая отформатирует жесткий диск.
  • Для production решения нужно решить сотню вопросов: стандарт, сессии, кэширование данных, безопасность, и.т.д.
  • Все находится в зачаточном состоянии
  • Отсутствие библиотеки UI компонентов, заточенной для создания web приложений

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


Тогда зачем эта статья, спросите вы.


На просторах интернета ничего похожего я не нашел, возможно я плохо искал, и уже существует что-то подобное. Либо это просто никому не нужно. В любом случае я хочу услышать от вас отзывы, и по ним понять, стоит ли заниматься этим делом.


Ресурсы



P.S. Хочу заметить что данный способ в корне отличается от QmlWeb. В QmlWeb из qml-файла создается HTML+JS код и рендерится в браузере.

Share post
AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 138

    +7

    Я писал на qml еще до появления react/react-native. Сейчас пишу на react/react-native. Он лучше (ИМХО) и нанять разработчика интерфейса на react на порядок проще (самый большой минус вашего варианта).

      0

      Можно по пунктам?

        0
        Проведя несколько сотен собеседований у меня сложилось впечатление что qml разрабов на рынке достаточно-доступное количество.
        Как правило это специалисты давно выросшие из С++ и пожелавшие двигаться дальше.
        +2

        Действительно сложно оценить "успешность" решения, во всяком случае в ситуации, когда и браузер замещен, и приложение web не на привычных web-технологиях. Может рассмотреть в разрезе альтернативы электрон? Или ещё как-то, иначе не ясно на чем можно выиграть…

          0

          На производительности?

          +3

          Qml — он вообще-то для другого. Да, он намного более эффективен, чем стандартный браузерный DOM, а тем более VDOM, но это скорее аналог XAML, чем HTML. В его движке не предусмотрена изоляция QML-кода от окружения, нопремер. Это чисто язык создания UI с возможностью лёгкой интеграции с пользовательскими C++ классами.

            0

            Qt Quick — для создания UI. QML — декларативный язык для чего угодно.

              0
              Ну с таким же успехом можно сказать, что и XAML «для чего угодно».
                0
                Я делал пару проектов в которых qml декларативно описывал бизнес-логику консольных демонов на с++, а qml компилятор устанавливал все взаимосвязи между объектами. Весьма гибко и удобно получилось.
                  0

                  А ещё qbs очень удобная штука была для конфигурации сборки на QML.

                    0
                    Да, qbs частично вдохновила. Но глянув их исходники, стало понятно почему её дорого поддерживать. Они маленько переинжененрили, у нас получилось проще реализовать.
            +4
            Зачем это, когда Qt поддерживает WebAssembly?
              0

              WebAssembly это другая вещь. Это когда у вас есть код написанный на С++, вы его с помощью Emscripten портируете в WebAssembly, который потом в браузере с помощью HTML canvas рисует ваше приложение. Я же хочу другое, чтобы можно было на разных языках писать бэк, например на Java, Python, C#… и QML писать фронт. И чтобы это все работало.

                0

                В моей статье Qt Everywhere: WebAssembly и WebGL стриминг фронтенд написан на Qt+QML+JS, а бекенд на Go.

                  0

                  Если WebAssembly заиспользовать как вариант внедрения "моего браузера" в уже существующие браузеры, то да, мне кажется хорошая идея. Надо об этом подумать, спасибо.

                    0

                    А размер этого внутреннего браузера какой получится?

                      0

                      Прям так не скажу про размер, большая часть это будут qt-шные либы.

                        0

                        Размер скомпилированных wasm-модулей из документации Qt.


                        Example
                        gzip
                        brotli


                        helloglwindow (QtCore + QtGui)
                        2.8M
                        2.1M

                        wiggly widget (QtCore + QtGui + QtWidgets)
                        4.3M
                        3.2M

                        SensorTag (QtCore + QtGui + QtWidgets + QtQuick + QtCharts)
                        8.6M
                        6.3M


                          0

                          Ну размер хрома для винды ~130Mb, не думаю что размер это самая большая проблема.

                            +1

                            Если эти библиотеки будут поставляться независимо от приложения, например, вместе с браузером (фактически, как API для WASM), то это нормально. Если же каждый сайт будет тащить свою версию с собой, да ещё и слинкованную статически, то это совсем не то, что хотелось бы видеть.

                              0

                              А сколько весит среднестатистический современный сайт на js-фреймворке?

                                +1

                                Trello: 1,48 МБ, jQuery (здесь и далее объём переданных сжатых скриптов).
                                GMail: 3,60 МБ, custom
                                LinkedIn: 1,43 МБ, Ember
                                Яндекс.Почта: 1,25 МБ, custom
                                2GIS: 525 КБ, React


                                Сложно навскидку сравнивать разные приложения, потому что у них разный объём возможностей и разный объём легаси.


                                Для тестового приложения RealWorld App результаты у разных фреймворков такие: https://www.freecodecamp.org/news/a-realworld-comparison-of-front-end-frameworks-with-benchmarks-2019-update-4be0d3c78075/

                  0
                  Я же хочу другое, чтобы можно было на разных языках писать бэк, например на Java, Python, C#… и QML писать фронт.

                  Не проще qml в html конвертить?
                  А бэк и так на любом языке писать можно, или вы не в курсе?
                +31
                Не нужно

                > UI код клиента относительно простой. Например нам не нужно использовать какие-то CSS хаки, чтобы сделать 2 колонки одинаковой высоты.
                Чтобы не было хаков для колонок, в css добавили flex и grid.

                Даже если предположить, что ваша технология будет развиваться, то спустя годы вы придёте к тому же css, к копированию оттуда большинства свойств, их логики.
                Вся эта сложность в css появилась не просто так, а для решения конкретных проблем.
                Все эти проблемы возникнут и в вашей технологии, и для их решения вы точно так же будете вводить всё новые и новые усложнения.
                Либо не будете, но тогда ваша технология будет со множеством ограничений, которые отсутствуют в классическом вебе.

                > Разработку UI можно вести в графическом дизайнере Qt Creator
                До тех пор, пока делается стандартный интерфейс из стандартных компонентов.
                Потом добавляются собственные компоненты, потом их динамическое отображение, потом responsive вёрстка для разных размеров экранов, и в итоге визуальный редактор можно выкидывать на помойку — он больше мешает и ограничивает, чем помогает.
                Визуальные редакторы не просто так не прижились в вебе.

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

                > Использование десктопных UI компонент
                Спорный довод. В том же вебе практически всегда при разработке первое, что делают, это добавляют в свой стили какой-нибудь reset css, который убирает всю «платформенную» стилизацию браузерных компонентов.
                Так же еще появляются вопросы на счёт кроссплатформенности и работе на мобильных устройствах.
                  +6
                  Вся эта сложность в css появилась не просто так, а для решения конкретных проблем.
                  Все эти проблемы возникнут и в вашей технологии, и для их решения вы точно так же будете вводить всё новые и новые усложнения.

                  Без груза совместимости можно не решать проблемы 20-летней давности и не пытаться сделать космический корабль из трактора. html в современном вебе несет довольно малой полезной нагрузки, css по сути это конфигурация для заранее определенных шейдеров, но с помощью js из него пытаются сделать аналог программируемых шейдеров (что по сути стек Qt'шных технологий и делает), большинство из веб форматов не удобно для эффективных вычислений. Большинство из них в нынешнем вебе уже и неудобны для человека и генерируются каким-нибудь фреймворком. А в попытках решить специфичные проблемы, не нарушив совместмость, придумывается «13й стандарт» (webauth, webassembly, webgl, webrtc и т.п.), что только сильнее раздувает неэффективность и усложняет поддержку. Фактически у нас осталось 2,5 веб-движка, потому что остальные уже не тянут их поддержку (да и эти скрипят), но при этом и они работают далеко неэффективно, о чем и сами неоднократно упоминали и в гугле и в мозилле (конечно же обвиняя легаси).
                  Раньше у веба был ограниченный спектр задач, была простота, человекочитаемость и переносимость, но сейчас кроме распространнености у веба нет положительных качеств, а спектр решаемых задач существенно вырос, все из них решаются плохо.

                  Либо не будете, но тогда ваша технология будет со множеством ограничений, которые отсутствуют в классическом вебе.

                  Пока у вашей технологии будет отсутствовать безопасность и будет сильно ограничен набор фич по сравнению с вебом, то вполне вероятно, что да.

                  Веб 26 лет пытаются от ограничений избавить, получается все хуже и каких-то изменений в будущем не предвидется. Из-за такой изменчивости, легаси и раздутости периодически страдает и безопасность.

                    0
                    кроме распространнености у веба нет положительных качеств,

                    Кроссплатформерность. Же.

                    Меня больше всего добивает когда в пример ставится java, которая тоже кроссплатформерная, но десктопные приложухи на ней особой производительностью не страдают на удивление.
                    А уж делать «современный» UI на ней — идите нафиг, дайте мне лучше css…
                      0
                      Кроссплатформерность

                      Ну это то же самое, вид сбоку. Именно поэтому в него и пытаются втиснуть приложения..

                  +7
                  Мне, как веб разработчику, в первую очередь было бы интересно увидеть как мог бы выглядеть полноценный сайт со всеми класическими штуками (адаптивность, ajax, css анимации, изменяющая цвет svg иконка по наведению курсора и прочее) на QML.
                  Дело в том, что последний раз когда я пытался что-то более менее симпотичное в Qt Designer (а не просто серый набор форм) я психанул до такой степени что в итоге все сделал на мерзком Electron-e.
                    0

                    Есть там и анимации, и наложение всяких масок на иконки (через QGraphicalEffects например), и все такое прочее. Только для именно целей "открыть у произвольного клиента в браузере" он все равно не годится, недостаточно изолирован от окружения.

                      +1

                      Сайт и вебасемблере написать можно, меня интересует насколько это красиво компактно и читаемо получится. Насчёт молотка и гвоздей вы правы обсалютно, я именно так и подумал когда увидел эту статью (только в отношении qml)

                      0

                      Ну, это скорее иллюстрация человеческих привычек и специализации в одной области, с попыткой применять в другой ("когда в руках молоток, все проблемы кажутся гвоздями"). Возможно, при бОльшем опыте вне веба психануть бы не пришлось..

                        +2

                        Совершенно верно. У меня код на qml льётся как песня. А на html никогда не получалось ничего путёвого. Видимо всё дело в абстракциях которыми мозг пытается отразить код.

                      0
                      Нельзя так просто взять и похоронить такие технологии, как html, css, js. Даже если это супер оптимизировано и удобно, но не принято большинством браузеров, разработчиками — оно само по себе мертворожденное
                        –4

                        Можно, и пример тому — мобильные приложения.

                          +2

                          Ну так для этого нужно сначала выпустить устройство, которое заменит собой десктопы и ноутбуки. А потом уже пилить свой браузер на своих технологиях.

                            +1
                            Мобильные приложения это не браузер. Разные экосистемы, притом последний играет значительную роль в первом
                              0

                              Смотрите шире. Мобильные приложения — всего лишь возрождение идеи "нативные приложения". Если она оказывается достаточно удобной и популярной, никто не мешает продолжить это возрождение и на десктопах с ноутбуками.

                                0

                                Хм, может ещё создать какой-нибудь стор, откуда можно легко заинсталлить нужное приложение?
                                Ой, погодите-ка, да ведь АппСтор на маке и ВинСтор уже есть давно, только не нужны никому.


                                Потому и навязать что-то своё "супер-удобное" на готовой экосистеме не выйдет, нужно новое устройство, с блекджеком и собственными правилами.

                                  0

                                  Так может, всё дело в "стор", а не "репозиторий" (дистрибутива линукс) ?

                                    0

                                    Ну Вы начали с мобильных приложений, я ими и ответил. Мобильные приложения никогда не распространялись через репозитории, и соотвественно, не могли быть достаточно удобными и популярными в таком виде.

                                      0

                                      Так в том и дело — мехнически перенося с одной платформы на другую, будет казаться дичь: перескакивая с мобильных на десктопы, надо сначала смотреть не на полный аналог = сторы, а на репозитории дистрибутивов. Ведь, например, Ubuntu мы будем считать достаточно популярной, не так ли?

                                        0

                                        Вообще, на самом деле, это уже дебри какие-то.
                                        И у сайтов и у приложений есть свои, часто непересекающиеся ниши.
                                        Если вернуться к QML из статьи, то невозможно подходом приложений заменить сайты. Хочется заменить сайты — значит это будет свой собственный браузер со своим собственным парсером. Никому не нужны тонны хлама на устройстве и на рабочем столе, каким бы эфемерным он ни был.
                                        На настольных осях тоже можно установить приложения из разных мест, и мобильные приложения, если проводить аналогию, это как раз обычные приложения на настолках, которые и так себе вполне нормально нативно существуют.
                                        Собственно, как и сами нативные мобильные приложения (на мобильных ведь тоже есть и веб и сайты).
                                        То есть, тут скорее изначально вопрос, зачем сайты из одноразовой среды (да, сейчас уже не на 100%) переводить в многоразовую среду и почему (если "а почему бы и нет") они на сегодняшний день разделены.

                                          0

                                          А зачем ставить вопрос как "или — или"? Может, лучше стоит задуматься о том, что в Веб уже сколько лет тащат именно что приложения вместо сайтов, и потому-то он стал такой монструозный? Т.е. если разделять, то как раз имеет смысл, а сегодняшний уже сколько лет направлен на смешение.

                                            0

                                            Наверное потому что многоразовые веб приложения рано или поздно перейдут в мобильные приложения и настольные (да, в зависимости от бюджета, может не дальше электрона). А большие, сложные приложения на раз-в-месяц останутся в вебе и никто их себе ставить не будет.


                                            сегодняшний уже сколько лет направлен на смешение

                                            Видимо, потому что есть противоположная статье тенденция — всё в облака, ещё когда хромбуки запускали и обещали, что все приложения можно будет запускать "прямо сейчас" без установки.
                                            Почему оно не взлетело — это уже другой вопрос, но сейчас существует похожая тенденция с переносом игр на сервера, так что на клиент будет передаваться только картинка и не будет требовать мощного железа. Лично мне, обе эти тенденции ближе, чем "давайте всё нативно сделаем".

                                              0

                                              Игр? На сервера? Картинку? А законы физики они как обойти собрались?.. С остальными приложениями это тоже может являться фактором, вносящим свой вклад в "не взлетело".


                                              Перспективна скорее тенденция из облаков в "рой", таки в нативную сторону.

                        +1

                        О, примерно реинкарнация GLan из нулевых, позже переименованного в Vedga, а потом почившего в бозе (во всяком случае, публично уже толком ничего не найти). Это был проект на Qt, еще в до QML-ные времена, позже ставший коммерческим, по удаленной отрисовке Qt-приложений. То есть, само приложение работало на сервере, а на клиент гонялась Qt-сериализация исключительно виджетов интерфейса и событий пользователя. Ну, примерно как если бы на локальный X11-сервер отображался интерфейс X-клиента с другой машины (только протокол менее многословный), если кто-то на Хабре еще помнит такое. Или как бухгалтеры работали с тонкого клиента в 1С, запущенном на мощном сервере, по rdesktop, только опять не сырая графика, конечно, а получше.


                        Соответственно, у этого варианта тоже есть ниша, где главный минус (безопасность) несущественен и даже может быть обращен в плюс — внутренние корпоративные приложения. Т.е. сервер юзера отличает по "логин-пароль", например, и дальше администратору/разработчику может даже удобнее, что нет ограничений "песочницы" JavaScript — машины скорее всего и так в домене или обладают иным способом повышенного доверия к серверу.


                        Только можно посоветовать побольше отойти от парадигмы Web/HTTP, чтобы использовать преимущества на полную катушку — не отдельные stateless HTTP-запросы, состояние в которых эмулируется архитектурным костылём в виде cookies, а полноценным постоянно живущим соединением, например. И вместо самого понятия URL и оверхеда POST-запросов — тоже взять что-то более подоходящее — скажем, модель RPC-запросов...


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

                          0
                          Соответственно, у этого варианта тоже есть ниша, где главный минус (безопасность) несущественен...

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


                          Только можно посоветовать побольше отойти от парадигмы Web/HTTP ...

                          У меня похожие мысли. Мы не обязаны использовать только HTTP, можно придумать что-нибудь с сокетами, стримами, RPC, протобафом, переработать понятие URL, в общем взять все что будет нужно.

                            0
                            Я не думаю что есть какие существенные проблемы это сделать.

                            Если речь о "песочнице" типа JavaScript в браузере, то есть, и очень даже существенные. Он изначально создавался в обрезанном окружении, а Qt наоборот, нативная библиотека, которая не ограничивает никак.

                              +1

                              Кто мешает нам, например, урезать доступное API и оставить только безопасные функции? Браузер имеет полный контроль над qml и js файлами

                                0

                                Объем необходимой работы по ограничиванию. Даже в браузерах, которыми давно занимаются серьезные команды профессионалов, регулярно находят уязвимости.


                                Модель "репозиторий дистрибутива линукс, которому я доверяю", всё-таки проще.

                          0
                          Еще одна утопия, которую так же опошлят Webpack'ами и Реактами ради толпы новичков, не собирающихся изучать технологию до приемлемого уровня.
                            +7

                            Тоже самое можно сказать про qml в браузере — ещё один хак для нежелающих изучить нативные браузерные технологии html css и js

                              +1

                              С чего это они вдруг "нативные"? Наоборот, это нагромождение слоев абстракций, вот Qt в статье — действительно нативный.

                                +5
                                вот Qt в статье — действительно нативный.

                                QML код выполняется в QJSEngine, что не делает его нативным. Так же возникнет вопрос с производительностью.

                                  +1
                                  Нет. Только JavaScript код выполняется в QJSEngine, но QML — это не только, и, я бы даже сказал, не столько JS. Собственно QML-объекты — это, как правило, QML-морды к обычным C++ классам, наследникам от QObject. То есть, например, Window — это QQuickWindow, любой Item — это QQuickItem, и так далее. Да, кое-что там будет исполняться в рамках QJSEngine, например, обработчики событий, если они написаны на JS, но в основном — нет.
                                    0

                                    Вы описали кнопочки и окошечки, но забыли про логику, которая пишется на JavaScript/ECMAScript.

                                      +2
                                      Да нет, не забыл:
                                      Да, кое-что там будет исполняться в рамках QJSEngine, например, обработчики событий, если они написаны на JS

                                      Но это обычно довольно-таки высокоуровневый код. Более того, зачастую его количество можно сократить благодаря property bindings — вместо того, чтобы писать логику типа «если изменилось такое-то свойство у того объекта, то изменить такое-то свойство у сего объекта» их можно друг к другу просто прибиндить.
                                        0

                                        Как вы сделаете интернет магазин, на одних свойствах?

                                          0
                                          Интернет-магазин на QML я бы делать не стал, и я уже объяснил, почему :) Но если его таки делать на QML, то он бы содержал JS-кода куда меньше, чем реализации на всяких реактах с VDOM, да и работал бы побыстрее. Одна беда — несекурно. QML engine не имеет никакого понятия о cross domain security и так далее. И если учесть цели, с которыми он создавался, то ничего удивительного.
                                            0
                                            А я бы научился хорошо пользоваться тем что есть, и тут идеально круглые костыли одинаково вредны, называй их хоть Реактом, хоть QML.
                                              0

                                              Если он будет под AGPL, то можно объявить его доверенным и считать секурным %)

                                                0
                                                Под AGPL можно таки опубликовать одно, а на веб-сервере замутить немного другое :)
                                                  0

                                                  Снова попробуем отработанное в репозиториях дистрибутивов — подписанные версии?

                                                    0
                                                    Тогда зачем вообще веб-сервер, отдающий QML'ки? Один раз получил подписанный архив с QML-файлами из публичного репозитория и пользуйся. Только это по факту это ничем от standalone app не будет отличаться. Автор же предлагает отдавать QML'ки вместо HTML'ек, то есть грубо говоря перегенерировать QML при каждом запросе в зависимости от неких внешних данных, добавлять-убирать элементы и так далее. Как именно тут «подписанные версии» будут работать?
                                                      0

                                                      При обновлениях этого "приложения", например. Ведь необязательно же повторять вслед за вебом перегенерацию на каждый запрос.

                                    –1
                                    «Действительно нативный» — это wxWidgets.
                                +1
                                Почему на Java?! До кучи тогда уж и backend на Qt — Qt Http Server. ;)

                                Кроме того ещё есть node.js, go и т.п.
                                  0
                                  >Безопасность. Сейчас она просто отсутствует. Можно сделать такую страничку, которая отформатирует жесткий диск.

                                  Что за бред? WebAssembly же работает в защищённом изолированном окружении — sandbox. С каких пор доступ к диску разрешили?!
                                    0

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

                                      +3
                                      Ясно, не заметил, воспринял статью в контексте недавнего сообщения в блоге Qt:
                                      www.qt.io/blog/qt-vs.-html-the-full-stack-comparison
                                      Тогда непонятно вообще о чём статья?! Детский сад какой-то.
                                      0

                                      Хоть и в sandbox, но доступ к файлам и сети планируется через WASI. Уже сейчас wasmtime и wasmer поддерживают подобные wasm-приложения, например, из WAPM.

                                      +2
                                      Стало ясно, что функциональности гиперссылок мало

                                      Встречая такие формулировки, всегда хочется спросить: кому стало ясно? кому мало?

                                      Но и этого было мало, нужна была динамика, добавили JavaScript. Но на всем этом не очень удобно разрабатывать

                                      Кому нужна была динамика?
                                      «Опытный пользователь ПК», которому без подмигивающего смайла страшно и скучно нажимать кнопку в банк-клиенте, диктует направление развития технологии.
                                      Вечно поминаемые в данном контексте (и, в общем, всуе) «недопрограммисты, не потрудившиеся изучить технологию», несчастный PHP с якобы «чересчур низким» порогом вхождения – не причина «деградации», а её следствия.
                                      Причина же заключается в том, что бизнесу нужны интуитивные на самом низком уровне интерфейсы, чтобы обеспечить максимальный охват аудитории; а такой аудитории совершенно не нужно лишних мозгодвижений, и летающие цветные кнопки принимаются ею на ура.
                                      Замена одной технологии другой не изменит ничего (к тому же, в статье совершенно не видно даже формальных плюсов от этой замены: достаточно вспомнить, что «Hello world» в современном браузере выглядит как «Hello world», без единого тега).
                                      Не говоря уже о «здоровой конкуренции» на рынке, когда от технологии, предназначенной совершенно не для этого, требуют «защиты авторских прав», наложений рекламы, слежения и прочих важных для бизнеса штук. В стандарте HTML5 более чем достаточно инструментов для динамики, и тем не менее попробуйте найти чистое использования тега video на популярном видеохостинге.

                                      ИМХО, создание нового стандарта передачи действительно ИНФОРМАЦИИ (а не рекламы), технологически чистого, возможно, если этим будет заниматься крупная некоммерческая организация, также являющаяся единственным сертификантом браузеров. Но это, конечно, в другой реальности.
                                        –1

                                        Вот и нашли причину всех бед — капитализм (с копирастией).


                                        действительно ИНФОРМАЦИИ (а не рекламы), технологически чистого, возможно, если этим будет заниматься крупная некоммерческая организация, также являющаяся единственным сертификантом браузеров. Но это, конечно, в другой реальности.

                                        Да почему бы и нет? Только, конечно, не браузеров, а таки выкинуть эти 26 лет нагромождений веба. Сейчас мессенджеры, например в лице Instant View в Telegram, делают слабую попытку шага в этом направлении — и как видно, даже такая мелочь принимается людьми на ура.

                                          0
                                          нашли причину всех бед — капитализм (с копирастией)


                                          Ну, не совсем. Ресурсы по-прежнему ограничены, а значит, нужна система их распределения. Практика, которая критерий истины, показала, что лучше всех с этим справляется капитализм (с некоторыми социальными элементами, но тем не менее). Нравится нам это или нет, но это факт реальности.
                                          В свою очередь, ту или иную систему можно построить лишь на некотором подходящем базисе. В целом, нельзя сказать, что именно капитализм виноват в том, что большинство потребителей-пользователей является абсолютно неквалифицированными. Мы имеем то, что может дать некий усреднённый член большинства.
                                            0
                                            Ну, это в рамках, обрисованных именно капитализмом, он лучше всего справляется. А самай совершенный строй, как раз, общинный, только там нет места паразитам, а это им неинтересно, т.к. нужно работать на благо всех в общине, а не только на себя любимого. А так насоздавал мнимый интерес-ажиотаж-хайп и т.п. и делаешь из воздуха деньги. Сначала насоздаем кучу рекламы, продадим, потом средство для отключения — продадим, сделаем дыру и трояна, потом продадим антивирь всего за 9.99 и т.д. А чистой пользы из всего этого для конечного пользователя ноль.
                                              0

                                              Виноват он в том, что он не стремится, чтобы они переставали быть неквалифицированными. Ну и нельзя говорить, что "практика показала" — для этого надо чтоб прошло лет примерно 200. Как при переходе от феодализма к капитализму.

                                          –1

                                          Когда-то давно тоже приходили в голову похожие мысли о замене html на qml и собственном браузере для этого дела… Уф. Только как-то быстро осенило, что это полная чепуха :)
                                          Но раз тут автор так сильно горит этой идеей, то предложу такой вариант: зачем делать браузер? Почему бы не сделать расширение для Хрома/Оперы, которое бы могло подключить библиотеки qt и отрисовать qml прямо в браузере? Ну как это делают всякие Ace Engine и ему подобные?

                                            0

                                            А смысл? Это уже проходили — Flash, Silverlight, Java-апплеты… как только делается попытка прилепить это к существующему вебу, оно тут же им заразится и умрёт.

                                            –2
                                            Они не могут даже сам Qt допилить
                                            В последней версии неожиданно сломался QSerial
                                            Студия уже годами глючит, например при добавлении/удалений файлов в проекте или ресурсе, очень все сыро
                                            Похоже там одни не компетентные разработчики остались
                                              +1

                                              Когда-то у нас в Liri Browser возникала подобная идея. Был даже план по реализации изоляции страниц, но до исполнения, кажется, так никто и не добрался.

                                                0

                                                Вы только что изобрели flutter. Его разработчики взяли движок хрома и выкинули из него html, оставив только рендер, который десяток лет оптимизировали по самые яйца.

                                                  0

                                                  Спасибо за инфу, обязательно гляну flutter.

                                                  –4
                                                  Этот ваш qml хорошо, пока вы делаете hello world. Как только речь заходит о чемто сложнее кнопки с текстом, весь проект превращается в огромное сборище костылей и подпорок разного калибра.
                                                  Не хватает компонентов, которые уже есть в qt. Баги qml бэкендов фисят годами и всем плевать. Попытки увязать отображение с состоянием в нативном коде приводят к разрастанию костылей в нативном коде. И чтобы всем совсем стало весело, у нас теперь есть по две версии всех компонентов, каждая со своим API и костылями.
                                                    0
                                                    Смело! А если так, чтобы стандартные браузеры рендерили? Типа новый DSL на замену связке html+css+js…
                                                      0

                                                      И сразу на замену HTTP тоже. Oh, wait...

                                                        0
                                                        Зачем? Речь же идет о фрондендерах, а не разработчиках браузеров. Поэтому все протоколы, которые юзают основные браузеры, должны быть обязательно использованы (или же самые всеобъемлющие из них).
                                                          0

                                                          С чего это вдруг? На оба утверждения.

                                                      –1

                                                      Миллениалы изобрели...

                                                        0
                                                        … изобрели golang
                                                      • UFO just landed and posted this here
                                                          0

                                                          В качестве бреда — можно скомпилировать плюсовый код в WASM, минимальными средствами вывести рендер на канвас и вот у вас тот же QML только в обычном браузере.

                                                            0

                                                            В текущем варианте возникает сразу вопрос про безопасность всего этого QML. Инженеры писавшие текущие реализации долго стремились к изоляции всяких рантаймов — JS, canvas, css и вот это вот все. Шансы что все то же самое придется делать и с QML довольно велики.

                                                              0

                                                              Есть вариант, когда это не требуется, см. в https://habr.com/ru/post/473302/?reply_to=20813894#comment_20810708

                                                                0

                                                                В комментарии выше маленько про другую безопасность. Учитывая, что предлагается убийца HTML, можно предполагать что при более широком распространении придется таки учитывать нюансы приватности данных. Так во время экспериментов с canvas в браузере его неоднократно выключали из-за того что существовали PoC решения, позволявшие иметь прямой доступ к железке. А оттуда уж кому-нибудь еще посигналить заразиться не такая большая проблема. Аналогично всякие инерфейсы, которые хотя бы через тот же WebIDL описываются имеют свои нюансы в плане безопасности, которые также надо учитывай. То есть проблемы типа утечки приватных данных пользователя и сбегание из песочницы, а не перехват трафика или компроментация пользовательских данных. Хотя, это тоже довольно интересный вопрос.

                                                                  0

                                                                  Да нет, это всё то же общее понятие. И вариант был озвучен. когда можно попытаться обойтись без этого, т.е. в соответствующей сфере, а не "для всего сразу", каковым пытается быть Веб.

                                                              0
                                                              Зачем гонять код между клиентом и сервером, qml какой-то, когда есть json на котором можно описать весь интерфейс c данными (не разделяя!) и какое событие (callback) вызвать через websocket-rpc на сервере когда юзер пошевелится? в 5 раз проще и понятней будет и для клиента и для сервера.
                                                              Заголовок спойлера
                                                              [
                                                                  {
                                                                      "name": "Window",
                                                                      "icon": "accessibility",
                                                                      "childs": [
                                                                          {
                                                                              "name": "X Table",
                                                                              "headers": [
                                                                                  "head1",
                                                                                  "head2",
                                                                                  "head3",
                                                                                  "head4"
                                                                              ],
                                                                              "rows": [
                                                                                  [
                                                                                      "string1",
                                                                                      100.8,
                                                                                      true,
                                                                                      {
                                                                                          "icon": "alarm"
                                                                                      }
                                                                                  ],
                                                                                  [
                                                                                      "string2",
                                                                                      200.8,
                                                                                      true,
                                                                                      {
                                                                                          "icon": "alarm"
                                                                                      }
                                                                                  ],
                                                                                  [
                                                                                      "string3",
                                                                                      300.8,
                                                                                      false,
                                                                                      {
                                                                                          "icon": "alarm"
                                                                                      }
                                                                                  ],
                                                                                  [
                                                                                      "string4",
                                                                                      400.8,
                                                                                      false,
                                                                                      {
                                                                                          "icon": "alarm"
                                                                                      }
                                                                                  ]
                                                                              ],
                                                                              "value": 2
                                                                              ,
                                                                              "actions": {
                                                                                  "Remove": "remove",
                                                                                  "Edit": "edit"
                                                                              }
                                                                          }
                                                                      ]
                                                                  },
                                                                  {
                                                                      "name": "Window 2",
                                                                      "icon": "accessibility",
                                                                      "childs": [
                                                                          {
                                                                              "name": "name",
                                                                              "value": "no name"
                                                                          },
                                                                          {
                                                                              "name": "Select",
                                                                              "value": "val1",
                                                                              "options": [
                                                                                  "val1",
                                                                                  "val2",
                                                                                  "val3"
                                                                              ]
                                                                          },
                                                                          {
                                                                              "name": "Is mine",
                                                                              "value": true
                                                                          },
                                                                          {
                                                                              "name": "Y Table",
                                                                              "headers": [
                                                                                  "head1",
                                                                                  "head2",
                                                                                  "head3",
                                                                                  "head4"
                                                                              ],
                                                                              "rows": [
                                                                                  [
                                                                                      "string1",
                                                                                      100.8,
                                                                                      true,
                                                                                      {
                                                                                          "icon": "alarm"
                                                                                      }
                                                                                  ],
                                                                                  [
                                                                                      "string2",
                                                                                      200.8,
                                                                                      true,
                                                                                      {
                                                                                          "icon": "alarm"
                                                                                      }
                                                                                  ],
                                                                                  [
                                                                                      "string3",
                                                                                      300.8,
                                                                                      false,
                                                                                      {
                                                                                          "icon": "alarm"
                                                                                      }
                                                                                  ],
                                                                                  [
                                                                                      "string4",
                                                                                      400.8,
                                                                                      false,
                                                                                      {
                                                                                          "icon": "alarm"
                                                                                      }
                                                                                  ]
                                                                              ],
                                                                              "value": [
                                                                                  2
                                                                              ],
                                                                              "actions": {
                                                                                  "Remove": "remove",
                                                                                  "Edit": "edit"
                                                                              }
                                                                          }
                                                                      ]
                                                                  }
                                                              ]

                                                                0

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

                                                                  0
                                                                  Движок натянут сверху на flutter поэтому анимации темы есть готовые. Переиспользуемые компоненты — это все на сервер и к тому языку на котором он писан.
                                                                  0

                                                                  Интерфейс гонять вместе с данными нет никакого смысла. Данные постоянно обновляются, а интерфейс нет.

                                                                    0
                                                                    Если накладные расходы на интерфейс = 0, то почему нет. Получив данные можно рассчитать красивый интерфейс к ним на лету. обновив данные — то же. необычно, но когда-нить все gui так будут. Вот данные — нарисуй их мне максимально красиво на этом разрешении с таким dpi.
                                                                      0

                                                                      Что значит «накладные расходы равны нулю»? Если шлётся что-то дополнительное, значит, есть дополнительные накладные расходы.

                                                                        0
                                                                        Посмотрите пример json (Заголовок спойлера вверху). шлются данные которые нужно отобразить в интерфейсе. программа получив «думает» как их нарисовать оптимально на конкретном разрешении как программист-дизайнер и рисует. это вполне автоматизируемый процесс.
                                                                  0

                                                                  Я поддерживаю мечты (ключевое слово) автора, поскольку нет ничего грустнее, чемделать UI на HTML после QML. Естественным образом приходят мысли о том, каким прекрасным мог бы быть веб, если изначально его задумали бы динамичным, а не статическим. Какой простой и приятной могла бы быть разработка. И QML, по моим мнениям, вполне бы подошёл на роль основного языка. Но это утопия...

                                                                    0

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

                                                                      0

                                                                      wasm вроде больше про замену JS, он разве решает проблемы HTML? Я лично считаю, что как ни прикрывай его листочками, запах останется (простите за такую аналогию).

                                                                        +1

                                                                        Пока одни думают как выдавать 60fps в React, UI написанный на C++ и рисующий кнопочки в WebGL без проблем выдаёт эти 60 fps.

                                                                          0

                                                                          Это немного хардкорно как по мне. Но если задуматься, то это он есть, Qt — фреймворк на C++, который рисует alien-виджеты напрямую в opengl контекст.

                                                                            0
                                                                            Это немного хардкорно

                                                                            Вовсе нет, если уже есть нативное приложение на C++.

                                                                            0
                                                                            UI написанный на C++ и рисующий кнопочки в WebGL

                                                                            Оно разве не должно использовать JS для взаимодействия с DOM? Или использование WebGL позволяет обойти это ограничение?
                                                                              0

                                                                              Можно рисовать не юзая dom. А dom юзать только для всяких событий и прочего, что ресурсов и не ест особо

                                                                                0

                                                                                При использовании WebGL фактически на JS будет создан канвас и получен контекст, а все вызовы GL будут выполняться в WASM.

                                                                                0

                                                                                Есть только нюанс. Допустим, приложение стало популярным и ваша фирма получила заказ от какой-нибудь большой и важной американской компании. Внезапно команде разработки от менеджеров прилетает требование, что веб-приложение должно быть доступно для незрячих и слабовидящих, иначе будет серьёзный штраф. Срок на реализацию — пара месяцев.

                                                                                  0
                                                                                  doc.qt.io/qt-5/qtspeech-index.html?

                                                                                  P.S. Хотя да, Qt Multimedia на WASM target пока не поддерживается, наверное, Qt Speech тоже работать пока не будет.
                                                                                    +1
                                                                                    The module depends on Speech Dispatcher (libspeechd) on the Linux platform. On other platforms, it uses the native APIs to access the platform-specific text-to-speech engines.

                                                                                    Понимаете в чём суть, читалка интегрируется с системой и взаимодействует с приложениями через системный API. Даже браузер с включённой читалкой начинает вести себя несколько по-другому. Когда пользователь зайдёт на сайт, где интерфейс рендерит Qt через Canvas, читалка увидит только канвас. При этом Qt не может залезть в системный API, потому что браузер его не предоставляет. Возможно, когда-нибудь в WASM появится некий стандартный Accessibility API, но, боюсь, его полной поддержки ждать ещё очень долго. Тем более, что разработчики WASM не планируют заменять им весь существующий стек.


                                                                                    Боюсь, что сейчас единственная адекватная возможность поддерживать технологии доступности в WASM-приложении — это создавать интерфейс обычным HTML DOM через Web API.

                                                                                    0

                                                                                    Не понял в чем проблема? В том, что весь UI/UX переделать или обеспечить чтение с экрана? У нас свой фремворк с поддержкой адаптивного дизайна, своей разметкой и т.д. Переделаем.

                                                                                      0

                                                                                      По-хорошему, для полноценного accessibility нужен и правильный UI/UX, и чтение с экрана. Причём той читалкой, с которой пользователь сёрфит остальные сайты.

                                                                                    0
                                                                                    UI написанный на C++ и рисующий кнопочки в WebGL без проблем выдаёт эти 60 fps

                                                                                    Нужна ссылка, без этого не считается

                                                                                      0
                                                                                      wasm.continuation-labs.com/d3demo

                                                                                      Сколько у вас FPS?
                                                                                        0

                                                                                        А если эти кнопочки должны из коробки поддерживать весь юникод, включая эмодзи, а также левостороннее и правостороннее письмо в одном тексте с разными шрифтами и эффектами?

                                                                                        0

                                                                                        Отправил в личку. 60 fps это ограничение браузера из-за vsync, на 144 герцовых должны выдавать больше.

                                                                                0

                                                                                Ха-ха, такая же идея приходила лет 10-12 назад после того, как прочитал про выполнение джаваскрипта в Qt. Тогда, правда, QML ещё не было, раздумывал над описанием UI в XML.

                                                                                  0
                                                                                  Почему именно Qml? Почему не Anko например? Как по мне анко очень похож на qml и при этом Kotlin уже есть в браузере. Осталось только портировать anko с андроида.
                                                                                    0
                                                                                    И какой браузер может выполнять Kotlin-код «as is»? Если вы имеете в виду через компиляцию Kotlin в WASM, то и в Qt есть WASM как build target. К тому же Qt не нужно «портировать с андроида», ибо это уже давно сделано.
                                                                                      0
                                                                                      Есть Kotlin/Native + WASM и есть Kotlin/JS на выбор.
                                                                                        0
                                                                                        Ну то есть он «есть в браузере» ровно в той же степени, что и Qt.
                                                                                          0

                                                                                          Однако Anko — это надстройка над существующим Android API. Просто так его портировать на Web API не получится.

                                                                                      0
                                                                                      Очень давно была похожая идея www.hardline.ru/4/86/455 её даже реализовали.
                                                                                        0

                                                                                        Интересно, их сайт показывает на час больше, наверное совсем не админят со времён смен часового пояса (шутка)

                                                                                          0
                                                                                          Было даже развитие этой идет технология taxi. Отказ от html свой протокол передачи, отсутствие задержек.
                                                                                        +1

                                                                                        Исполняемый код, в самом злодейском виде, да на клиенте? серьёзно?


                                                                                        Отсыпьте и мне )

                                                                                          0

                                                                                          Представляете, испокон веков так делают! И самые популярные из таких называются Chrome и Firefox!

                                                                                          +1

                                                                                          Даю идеи бесплатно:


                                                                                          1. Зачем было писать какой-то сайт-лоадер? Движок QML и так поддерживает network transparency и может грузить файлы прямо из сети.
                                                                                          2. По-хорошему, конечно, нужно как минимум сделать свой фреймворк вместо Qt Quick и для начала запретить импортировать что-либо, кроме него.
                                                                                          3. Нет никакого смысла держать два браузера. И пытаться встроить движок QML в существующие тоже. Вместо этого нужно делать наоборот: если урла указывает на QML, то грузить его, если же HTML, то можно этот HTML показывать в том же браузере через qml-ный WebView.
                                                                                            0

                                                                                            Спасибо за идеи )


                                                                                            Движок QML и так поддерживает network transparency

                                                                                            Да, я в статье касался этого. Интерфейс меняется редко, данные гораздо чаще, по этому можно сделать версионность и не грузить UI на каждый запрос.


                                                                                            По-хорошему, конечно, нужно как минимум сделать свой фреймворк

                                                                                            Да, так и нужно делать, но на это нужно время.


                                                                                            HTML показывать в том же браузере через qml-ный WebView.

                                                                                            Да, WebView можно использовать, но конкурировать с мэйнстримными браузерами тяжело. Видимо в начале нужно делать костыль через WebAssembly, и впихивать всю логику в уже существующие браузеры.

                                                                                              0
                                                                                              Да, WebView можно использовать, но конкурировать с мэйнстримными браузерами тяжело. Видимо в начале нужно делать костыль через WebAssembly, и впихивать всю логику в уже существующие браузеры.

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

                                                                                            0

                                                                                            wrong thread

                                                                                              0
                                                                                              Flash, серверлат (Silverlight), XBAP (Wpf Browser Application). Все это уже было. Идея ооооочень не нова, а точнее очень стара. В современном мире гораздо актуальнее становятся технологии тонких клиентов (а ля WebGL), о чем тут уже все, кому было не лень, поведали. Называть «браузером» простой лоадер QML я бы лично не отважился.
                                                                                                –1
                                                                                                Очередной велосипед. Сочувсвтую. Как и любая новая технология, в этой тк же будут свои недостатки. Например, просто зашел в вики почиать о чем это, QML.… ребят вы серьезно? Кто такое писать будет? Тут у многих голова болит о каскадности и вложенности селекторов в CSS, а вы предлагаете использовать эту же проблему, но в js? Та ну нафиг!

                                                                                                Only users with full accounts can post comments. Log in, please.