Node.js + Chromium = AppJS: один из перспективных вариантов второго шага эволюции веборазработчика

    Сейчас мы с вами немного поговорим о том, как недавнее появление нового инструмента и связанных с ним возможностей открывает перед современными веборазработчиками возможность достаточно быстро эволюционировать, переходить на новые уровни, обретать новые профессиональные навыки, осваивать новые области созидательного труда. Таким инструментом является Node.js и растущая вокруг него инфраструктура.

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

    Исторически это не первый из таких инструментов.
    Каждый из нас может вспомнить, что были и до появления Node.js попытки создать движок для удобного программирования на джаваскрипте (Windows Script Host, Rhino, JSDB, и так далее).

    Однако только у Node мы видим и достаточно быстрый движок (V8), и кросс-платформенность, и простой API, и превеликое множество дополнительных модулей. Сочетание этих достоинств делает Node удачным и удобным.

    Второй шаг эволюции веборазработчика совершается тогда, когда знание языка JavaScript (а также других веботехнологий — прежде всего CSS и HTML или XML) становится можно применять для разработки ещё и приложений с графическим интерфейсом пользователя — то есть с GUI.

    Многие производители создавали средства вебоподобной разработки GUI-приложений.
    Здесь можно припомнить с десяток более или менее успешных попыток достигнуть желаемого.

    Фонд Мозиллы придумал сперва XUL и XULRunner, а затем и целую операционную систему — Firefox OS.

    «Хьюлетт-Паккард» выпустил webOS (с недавних пор — Open webOS).

    Google придумал Google Chrome OS.

    Ещё можно вспомнить, что у Qt есть основанный на JavaScript язык разметки GUI — QML называется.

    Развиваются PhoneGap, Appcelerator Titanium, Adobe AIR и другие средства вебоподобного программирования кросс-платформенных приложений.

    Часть вышеперечисленных решений родилась на свет увесистою (например, когда для запуска вебоподобного приложения требуется крупная виртуальная машина или даже новая операционная система). Большинство из них также потребует от программиста выучить некоторый API, иногда довольно корявый и страшный (например, XPCOM для XULRunner), но даже когда такой API достаточно изящен, то всё же изучение его требует усилий. Чем больше он умеет, тем более обширным окажется API.

    Между тем, если на первом шаге своей эволюции веборазработчик успел выучить API от Node.js — нет ли возможности опереться на это знание и не учить в дальнейшем ничего лишнего?

    Второй шаг эволюции веборазработчика становится естественным продолжением первого, если разметка и оформление вебоподобного приложения задаются при помощи HTML и CSS, а поведение — при помощи JavaScript, причём «под капотом» работает ужé известный разработчику движок Node.js.

    В частности, если воспользоваться AppJS, то тогда объектная модель (DOM) демонстрируемой «страницы» содержит под именем window.node глобальный объект Node.js, и мы можем без труда прочесть в window.node.process.versions.node версию Node, в window.node.process.arch архитектуру процессора, в window.node.process.platform платформу, и вывести какое-нибудь такое сообщение в окне нашего графического приложения:

    [скриншот]

    (Понятно, что аналогичным образом можно употреблять и другие возможности Node.js — сетевые, файловые и так далее.)

    Что же такое AppJS?

    AppJS — это движок Node, к которому в качестве одного из его модулей пристроен движок WebKit от браузера Google Chrome, а точнее — от его свободной версии, Chromium. В настоящее время Chromium используется в форме CEF (Chromium Embedded Framework), о которой достаточно подробно рассказал нам Dima_Sharihin, когда говорил о подключении Chromium к .NET. Как видно, прикрутить CEF можно не только к дотнету, но и к джаваскрипту, что и удалось создателям AppJS.

    В настоящее время проект AppJS находится в самом начале своего развития и не достиг ещё даже версии 0.1 — имеющиеся на Гитхабе демонстрационные сборки имеют номер 0.0.19. Документации нет никакой, кроме примеров кода; с возможностями AppJS можно, однако, до известной степени ознакомиться даже сейчас, если скачать с Гитхаба демонстрационную сборку (содержащую своего рода «hello world») под свою операционную систему, запускать, читать исходный код и комментарии к нему, вносить изменения и смотреть, что получается.

    В этой сборке под именем «data/app.js» располагается файл, содержащий настройки главного окна приложения. Когда окно создано, в него грузится страница «data/content/index.html», которая может обращаться к window.node и тем достигать движка Node.

    Окно приложения AppJS обладает многими качествами браузера Chromium, хотя и лишено панели инструментов, строки статуса и других элементов браузерного интерфейса. В частности, можно жмякнуть Alt+F12 и получить отладочную консоль.

    AppJS запускает движок Node с ключом «--harmony», поэтому приложению доступны все те возможности ECMAScript Harmony, которые имеются в V8.

    Завидев такой многообещающий проект, я не стал, конечно, дожидаться его развития до версии 0.1 — до этого, быть может, ещё много недель и месяцев остаётся — а поспешил поскорее ознакомить с ним читателей Хабрахабра.

    Постскриптум.  AppJS — не единственный проект, нацеленный на создание вебоподобных GUI-приложений при помощи языка JavaScript и движка Node. Возможно, в дальнейшем я расскажу на Хабрахабре и о других подобных проектах.

    Постпостскриптум.  И рассказал про node-webkit — проект, который выглядит ещё перспективнее, чем AppJS.
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 58

      +2
      веборазработчика?
        +7
        Я считаю, что в этом термине со временем должна появиться соединительная гласная «о», как в словах «водопроводчика» или «молокозаводчика». (Сейчас там более распространён дефис, но это только оттого, что перед нами калька словосочетания «web developer», в которой слово «веб» не могло стать прилагательным, так что его тупо пристегнули дефисом.)
          –9
          Поздно — там уже есть тире
            +6
            Вы почему думаете, что там есть тире?
              –5
              А почему вы думаете, что его там нету?
                +19
                Да потому, что там самое большее дефис.
                  +2
                  Лишь бы не твердый знак.
                    –4
                    Ну вот какая вам разница? Я знаю, что тире отделяется пробелами и стоит между словами. И что дефис стоит в середине слова. И что там дефис. Но дефис на один символ длиннее, и мне лень его писать.
                      +3
                      Я знаю, что молоко белое и его дают коровы. И что вода прозрачная и бесвкусная. И что кефир делается из молока. Но молоко на два символа длиннее, и мне лень его писать. Поэтому я имею полное право писать, что кефир делается из воды.
                        +2
                        * безвкусная, проститепожалуйста
                          +1
                          С вами трудно спорить :). Уговорили, буду писать дефис
              +3
              А почему тогда «вебсерверные»? Почему не «вебосерверные»?
                0
                А это тестирование второго варианта избавления от дефиса, который, кстати, в нашей речи более распространён: я давным-давно не видел варианта «веб-мастер» вместо «вебмастер», например.
                0
                Само слово «веб» заканчивается на согласную, в то время как «молоко» и «вода» — на гласную. С какой бы радости там находиться букве «о»? Или теперь принято писать как считает автор написанного?
                  +2
                  Вы напрасно думаете, что соединительная гласная ставится только в тех словах, первый корень которых оканчивается гласною.

                  Для примера укажу, что все мы пишем «товарооборот» (первый корень — «товар»), «сороконожка» («сóрок»), «жизнеописание» («жизнь»), «кровеносный» и «кровообращение» («кровь»), «лжесвидетель» («ложь»), «чаепитие» («чай»), «коновязь» («конь»), «зверолов» («зверь»), и так далее.
                    –2
                    Все ваши примеры имеют мягкие окончания, поэтому им требуется гласная связка. Приведите другой пример, более удачный.
                      0
                      «Товар» и «сóрок» не имеют мягких окончаний.
                  0
                  Webodeveloper
                0
                Запилите аналог uzbl на этом appjs — думаю, многих заинтересует.
                  0
                  Боюсь, что на нынешнем этапе развития AppJS это не возможно. Локальные страницы загружаются прекрасно, а вот попытки загружать увесистые отдалённые сайты в AppJS, предпринятые мною, вызывали зависание Windows XP вплоть до эффекта резкого писка из динамиков, издаваемого вплоть до момента окончательной загрузки сайта. После чего всё отвисало обратно.
                    +1
                    Какой код использовали для загрузи отдалённого сайта?
                      +1
                      В файле «data/app.js» заменил «app.createWindow('http://appjs/'» на «app.createWindow('http://traditio-ru.org/'».
                        +1
                        Спасибо! Проверил на gmail.com полет нормальный. Только в title вместо кириллицы — кракозябры ((
                          +1
                          Этот баг известен; рано или поздно его пофиксят.
                  +1
                  Интересно, а это только под десктоп или на нем можно будет и под мобайл дивайсы творить?
                    +1
                    Под мобильные устройства есть PhoneGap, хоть он и не предоставляет функционала Node.JS. Хотя, если под android есть полноценный хром, никто не мешает сделать и полноценный Node.JS, другое дело, что код нативный.
                    С Windows Phone 7/8 и iOS, думаю, придется посложнее
                      –1
                      В настоящее время AppJS существует под Windows, Мак и Linux.

                      Его распространение на мобильные устройства сдерживается отсутствием Node.js и CEF под них.
                        0
                        node.js не работает на Android?
                          0
                          Неофициальные сборки были.

                          Официальных регулярных сборок Node под Android нет, насколько я знаю.
                            0
                            Ну есть же исходники, Nathan собирал на Raspberry Pi без особых проблем.
                              +1
                              Что, на Raspberry Pi под Android?
                                +1
                                Ох беда, глаз долой. ARM и Android уже не различаю, но под android вроде бы тоже запускали нормально (только root нужен)
                                  0
                                  То-то и трудность, что root нужен, а порутить своё железо не все готовы. Да и собирают Node под Android редко и нерегулярно. Я вот сейчас даже и не нашёл бы, откуда брать сборку или хотя бы рецепт сборки.
                        • UFO just landed and posted this here
                        0
                        Классная статья! Отличный повод наконец-то познакомиться с Node.js, раз уж эволюция ушла уже аж на два шага вперед. :)
                          +5
                          Это, конечно, всё замечательно, но «Hello World!» весом в 45 МБ несколько напрягает.
                            0
                            Увы, это неизбежно, раз уж libcef.dll весит 22 404 096 байтов, а движок Node — 5 042 024 байта.
                            • UFO just landed and posted this here
                                +2
                                .NET Framework версии 4.0 весит 48 мегабайт, что, в общем, тоже немало. На мой взгляд, подобный подход к разработке приложения применим, когда вопрос объема программы особо не стоит. Иначе использовать HTML5 веб приложения
                                  –1
                                  Во-во, и я бы не стал сравнивать .NET и js дабы не вызывать лютый батерхерт
                                +1
                                Как-то пробовал сделать то же самое — соединить node.js и titanium desktop, который теперь является независимым от appcelerator проектом (www.tidesdk.org), но размеры дистрибутива и скорость работы приложения меня, мягко говоря, не устроили. А казалось хорошей идеей.
                                  +1
                                  Вот у меня тоже была идея сделать из браузера десктопное приложение.

                                  Однако, поразмыслив, решил, что это — утопия. Ну или, скажем так, нет никакого смысла в этом.
                                    0
                                    Я всё же смотрю с оптимизмом и вижу, по крайней мере, что API у AppJS гораздо приятнее, чем, например, у XULRunner. Стало быть, заметною можно считать поступь прогресса.
                                      +1
                                      Я имею в виду, что для извращенных целей можно встроить в родного для платформы клиента хромиум. Но не как основное рабочее окно, а как дополнение, как некий продвинутый виджет.

                                      И такое решение бьет любое улучшение API и прочее.

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

                                      И при желании можно в нем и бизнес-логику на javascript выполнять, т.е. использовать как скриптовую машину.

                                      Вот отсюда мое непонимание. Зачем отнимать у себя возможность прямой работы с ОС, склеивать сервереую часть и угрюмо наблюдать, как все тормозит, если можно сделать как описал выше.
                                      0
                                      Согласен, я PingXpert сделал по этому принципу. Основное окно — IE контрол, интерфейс HTML + JavaScript. Интерфейс связан с бизнес-логикой приложения написанной так же на JavaScript + свой небольшой набор объектов для работы с HTTP, XML и прочими сервисными функциями типа реализации многопоточности для скриптовых функций, чтоб не морозить интерфейс и т.п. Сам exe-шник универсальный, скрипт приложения и html упакованы в zip и подлинкованы в ресурсы. Размер exe-шника 2 мега. IE c JavaScript-ом включены в систему поэтому вся инфраструктура для приложения есть в Windows.

                                      Т.е. штука получилась занятная, но не более, проще полноценное десктопное приложение написать. Хотя для небольших задач инструмент получился интересный — типа скрипта с HTML интерфейсом упакованным в EXE.
                                      +3
                                      HTA, извини, тебе, видимо, просто не повезло с движком =)
                                        +1
                                        Отличная технология, которую почему-то незаслуженно забыли. Просто переименовываем .htm в .hta, добавляем пару специальных тегов, и получаем отличное приложение, для которого не нужен компилятор и специальная среда разработки.
                                        +1
                                        Масштабирование окна очень понравилось. Что-то в этом есть.
                                          0
                                          Хромиум — клиент, node.js — сервер, как они между собой общаются? Каждому такому приложению требуется отдельный порт?
                                            0
                                            Node.js — не обязательно именно сервер; Node.js — движок для запуска джаваскриптов с таким мощным API, при помощи которого можно сочинять серверы, то есть слушать порты, например; но можно и не слушать.

                                            Думаю (хотя и не анализировал кода AppJS), что Chromium и Node общаются меж собою каким-нибудь другим способом, не по TCP/IP-порту.
                                            0
                                            Мой Sciter (sciter-x.dll ) делает то же самое только в размере 1.2 Mb.
                                            Т.к. он создавался как встраиваемый движок то нативный код приложения имеет простой и эффективный способ управлять таким UI. HTML/CSS/script в UI desktop приложений имеет смысл особенно когда приложения пишутся для разных locale и и большими командами.

                                            Вот пример приложения в котором весь UI это Sciter, т.е. HTML/CSS/script. Сама функциональность приложения естесвенно нативная:

                                            www.softpedia.com/progScreenshots/Norton-Internet-Security-Screenshot-8667.html
                                              +2
                                              А можно поподробнее про Sciter?
                                                +1
                                                Пожалуй стоит мне написать статью на Хабре про него.

                                                На пока:
                                                Sciter home: terrainformatica.com/sciter/
                                                Русскоязычный форум про Sciter и HTMLayout: rsdn.ru/forum/htmlayout/

                                                Есть две версии Sciter на настоящий момент Sciter1 — GDI backend (все версии Windows включая Windows CE)
                                                и Sciter2 с Direct2D backend (Vista W7 W8), ссылка например в этой статье www.terrainformatica.com/2012/08/sciter-2-0-1-0-new-inspector-dll/ Обе версии имеют общий API поэтому взаимозаменямые.
                                                  0
                                                  Вот это, кстати, очень верно: пора, пора выложить на Хабрахабре блогозапись про Sciter.
                                              0
                                              Я помнится еще лет 10 назад писал HTA-приложения =)
                                                +1
                                                Тут вспоминали уже HTA, можно еще добавить, что из современных софтин, TileMill использует похожий подход (node.js + webkit) для построения кроссплатформеного гуя, исходники открыты: github.com/mapbox/tilemill
                                                  +1
                                                  А еще есть Stunnix Advanced Web Server — позволяющий превращать сайты на php/python/perl/tomcat/jsp (c mysql/sqlite в качестве БД) в портабельные десктопные приложения, крутящиеся на локально запущенном веб-сервере. Они настолько портабельные, что даже работает с ДВД. Поддерживаются windows, mac os, linux.
                                                    0
                                                    Appjs, похоже, умер

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