Как разрабатывать настольные приложения с помощью HTML/CSS/JavaScript?

Во-первых, я не заинтересован в этом профессионально. Я - веб-разработчик, недавно мой коллега покинул Spotify и сказал, что он будет работать в основном на JavaScript для Spotify Desktop. Он сказал, что использует "рамку Chrome", и все внутри сделано как веб-приложение (HTML/JS/CSS).

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

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

Итак, как это можно сделать? Что мне нужно/нужно знать?

Ответ 1

Вы можете начать с Titanium для настольных разработчиков. Также вы можете взглянуть на Chromium Embedded Framework. Это в основном управление веб-браузером на основе хрома.

Он написан на С++, поэтому вы можете делать все необходимые для работы на уровне ОС (Growl, иконки в трее, локальный доступ к файлам, COM-порты и т.д.), а затем всю логику приложения и gui в html/JavaScript. Он позволяет перехватывать любой HTTP-запрос либо для обслуживания локальных ресурсов, либо для выполнения некоторых пользовательских действий. Например, запрос http://localapp.com/SetTrayIconState?state=active может быть перехвачен контейнером, а затем вызвать функцию С++ для обновления значка в трее.

Он также позволяет создавать функции, которые можно вызывать непосредственно из JavaScript.

Очень сложно отлаживать JavaScript непосредственно в CEF. Там нет поддержки для чего-то вроде Firebug.

Вы также можете попробовать AppJS.com (помогает создавать настольные приложения для Linux, Windows и Mac, используя HTML, CSS и JavaScript)

Кроме того, как отметил @Clint, команда brackets.io (Adobe) создала потрясающий shell с использованием Chromium Embedded Framework, что значительно облегчает его работу. Это называется скобкой скобок: github.com/adobe/brackets-shell Узнайте об этом подробнее: clintberry.com/2013/html5-desktop-apps-with-brackets-shell

Ответ 2

NW.js

(Ранее известный как node -webkit)

Я бы предложил NW.js, если вы знакомы с Node или с JavaScript.

NW.js - это время выполнения приложения на основе Chromium и node.js.

Функции

  • Приложения, написанные в современных HTML5, CSS3, JS и WebGL
  • Полная поддержка API node.js и всех его сторонних модулей.
  • Хорошая производительность: Node и WebKit работают в одном потоке: вызовы функций выполняются просто; объекты находятся в одной куче и могут просто ссылаться друг на друга
  • Простота упаковки и распространения приложений
  • Доступно для Linux, Mac OS X и Windows

Здесь вы можете найти NW.js repo и хорошее введение в NW.js здесь. Если вам интересно узнать Node.js Я бы порекомендовал this SO post с много хороших ссылок.

Ответ 3

Awesomium упрощает использование HTML-интерфейса в вашем приложении С++ или .NET

Update

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

Ответ 4

ПРИМЕЧАНИЕ: AppJS устарел и больше не рекомендуется.

Посмотрите NW.js.

Ответ 5

Похоже, что решения для настольных приложений для HTML/JS/CSS не нуждаются.

Единственное решение, с которым я только что столкнулся, - TideSDK: http://www.tidesdk.org/, что кажется очень перспективным, глядя на документацию.

Вы можете разрабатывать с Python, PHP или Ruby и упаковывать его для Mac, Windows или Linux.

Ответ 6

Извините за взрыв пузыря, но клиент рабочего стола Spotify просто браузер на основе Webkit. Конечно, он предоставляет специфические дополнительные функции, но он способен запускать JS и отображать HTML/CSS, потому что у него есть JS-движок, а также механизм рендеринга Chromium. Это не поможет вам с кодированием клиентского веб-приложения и развертыванием на нескольких платформах.

То, что вы ищете, похоже на Sencha Touch - структура, которая позволяет приложениям HTML5 изначально развертываться в iOS, Android и Устройства Blackberry. Он в основном выступает в качестве посредника между определенными вызовами API и доступными для устройства функциональными возможностями.

У меня нет опыта работы с appcelerator, что, похоже, делает именно это - и получайте очень благоприятные отзывы в Интернете. Вы должны дать ему преимущество (если вы не захотите вернуться к 1999 году и бросить с помощью MS HTA;)

Ответ 7

Я знаю там Fluid и Prism (есть другие, которые я использовал), которые позволяют загружать веб-сайт в то, что выглядит как автономное приложение.

В Chrome вы можете создавать ярлыки на рабочем столе для веб-сайтов. (вы делаете это из Chrome, вы не можете/не должны упаковывать это с вашим приложением) Chrome Frame отличается:

Google Chrome Frame - это плагин, разработанный для Internet Explorer. по проекту Chromium с открытым исходным кодом; он открывает Google Chrome веб-технологий в Internet Explorer.

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

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

Ответ 9

CEF предлагает много гибкости и возможностей для настройки. Но если намерение быстро развиваться node -webkit также является хорошим вариантом. node -web kit также предлагает возможность вызова модулей node непосредственно из DOM.

Если нет встроенных модулей для интеграции node -Webkit может предложить лучший пробег. С родными модулями C/С++ или даже С# лучше с CEF.