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


Мы запускаем серию статей — Введение в мобильную разработку веб-приложений на Cordova, и начнем с основ.
Если вы не знаете что такое Cordova и хотите разобраться, пригодиться ли данный инструмент для вашего следующего проекта, здесь я постараюсь ответить на часто задаваемые вопросы:
  • Что такое Cordova?
  • Как работает под капотом?
  • Что я смогу создавать с Cordova?
  • Как мне начать работать с Cordova и что мне понадобится?


Что такое Cordova?


Cordova — платформа разработки мобильных приложений, которая прежде всего предназначена для веб-разработчиков. Она позволяет веб-разработчикам использовать веб-технологии, такие как HTML, CSS, и JavaScript, для создания мобильного приложения. Как и у любой другой технологии, у Cordova есть свои плюсы и минусы.

Достоинства


  • Простая в изучении, если вы являетесь веб-разработчиком, то вам не составит труда разобраться в работе данного фреймворка. Вы сможете легко применить свои навыки как веб-разработчик, чтобы создать собственное мобильное приложение с Cordova. Все что вам понадобиться, это ознакомиться с командной строкой.
  • Доступ к нативному функционалу, у вас будет доступ к большинству функциям устройства, таким как камера, контакты, геолокация, медиа, SMS и многое другое.
  • Бесплатность, фреймворк полностью бесплатный.
  • Открытый исходный код, любой сможет внести свои изменения в исходный код Cordova, чтобы сделать его еще лучше. Дополнительные плагины также имеют открытый исходный код, благодаря этому у вас будет возможность свои собственные.
  • Большое сообщество, большое количество разработчиков используют Cordova, на Stack Overflow есть около 40,000 вопросов по Cordova. Это означает что вам всегда смогут помочь решить какую-либо проблему (если они у вас вообще появятся).
  • Напишите один раз, разверните в любом месте, Cordova компилирует Ваше приложение в специальный файл пакета, который подойдет для большинства магазинов приложений. Это означает, что приложения, которые вы разработаете с Cordova, можно легко добавить в любой App Store на ваш выбор. Если вы разрабатываете под Android, Cordova создает APK (Пакет приложений Android) файл. Если вы разрабатываете под iOS, Cordova скомпилирует IPA. Для Windows это — APPX.

Недостатки


  • Плохая документация, трудно найти информацию о конкретных вещах, например, какие пакеты нужно установить вместе с менеджером по SDK Android. И когда вы ищете что-то, результаты будут на разные версии Cordova. Это иногда сбивает с толку новичков, поскольку у них установлена одна версия Cordova, а они смотрят на документацию для другой версии.
  • Медленнее чем нативные приложения, так как приложения, созданные с Cordova — в основном веб-приложения, которые работают с web-view, они не настолько быстрые как нативные приложения. Это означает, что есть определенные ограничения при создании приложений. Например, приложение редактирования видео лучше сделать нативным, так как для работы, оно больше расходует CPU и GPU.
  • Фреймворки, поскольку Cordova — просто обертка для веб-приложения, в ней нет компонентов пользовательского интерфейса, анимаций и других полезный инструментов, которые пригодились бы для большинства приложений. Это означает, что вы должны будете реализовать их самостоятельно. Поэтому многие разработчики пользуются Ionic или Onsen UI для создания пользовательского интерфейса в своих приложениях.
  • Ошибки в плагинах, не все плагины работают идеально, в некоторых есть ошибки и они работают не так как ожидалось.


Cordova и PhoneGap


При работе с Cordova вы часто будете сталкиваться с термином PhoneGap. PhoneGap — бесплатный open-source, созданный Nitobi Software приблизительно в 2009 году. В 2011 году компания была приобретена Adobe.
Обратите внимание, что Adobe не покупал саму разработку, а только имя и людей, которые работали в Nitobi. Сам проект с открытым исходным кодом был передан в Apache Software Foundation, который теперь известен как Cordova.
На практике PhoneGap и Cordova — в основном одно и то же. Вы можете выбрать PhoneGap или Cordova при создании проекта. Единственная разница — CLI (Интерфейс командной строки). CLI PhoneGap интегрирован с Adobe PhoneGap Build. Эта служба позволяет разработчикам компилировать свои приложения, загружая его на веб-сайт PhoneGap Build.

Как работает Cordova под капотом?


Пользовательский интерфейс Cordova — это веб-представление (web-view). Веб-представление, это наподобие вкладки в браузере. Когда вы компилируете приложение, Cordova не работает с вашим HTML, CSS, и JavaScript кодом, а преобразовывает его в собственный код, который в последствии будет определен для каждой платформы.
Cordova действует как контейнер для приложения, в котором вы используете веб-технологии. Когда приложение скомпилировано, ваш код остается неизменным. Компилятор просто берет Ваш код и делает его доступным для рендеринга в веб-представлении.
Это практически тоже самое что открыть HTML файл в браузере. Но имейте в виду, что веб-представление реализовано по-разному на каждом устройстве. Это означает, что есть определенные функции, которые будут не доступны на некоторых платформах, или они реализованы по-другому.

Нативные функции устройства


С Cordova, при помощи плагинов, у вас будет доступ к нативной функциональности устройства. Плагины — это дополнения, которые представляют JavaScript API для собственных компонентов. Они позволяют вам получать доступ к нативным возможностям устройства, используя JavaScript API.
Вы конечно уже догадались, что плагины создаются отдельно. Это означает, что сначала нужно установить SDK для нужной платформы, только тогда вы можете начать разработку под нужную платформу. Затем вызываете собственный код через JavaScript API, чтобы к нему можно было получить доступ в веб-представлении.
Есть два типа плагинов, которые вы можете найти в Cordova. Первые — официальные плагины. Они находятся в сообществе Cordova. Все официальные плагины имеют префикс cordova-plugin.
Другой тип плагина — пользовательские плагины. Их создают разработчики такие как вы и я. Часто их создают, для решения определенной проблемы, например интеграция приложения с Facebook или Ionic Keyboard Plugin, для простого взаимодействия с клавиатурой.
Больше информации по плагинам вы можете посмотреть на сайте Cordova Plugins.

Что я смогу создавать с Cordova?


При помощи Cordova, Вы можете создать в значительной степени любой вид приложения, конечно есть некоторые ограничения, о которых мы поговорим позже. Давайте посмотрим на демонстрационные приложения, которые вы можете создать с Cordova.
  • TripCase — приложение для путешествий.
  • FruitSalad — игра-головоломка.
  • Panasonic World Heritage Calendar — календарное приложение, которое показывает вам красивые фотографии объектов Всемирного наследия.
  • HealthTap — вопросы о здоровье на Stack Overflow.
  • Wikipedia — официальное приложение Википедии создано на Cordova.

Теперь у вас будет примерное представление вашего приложения, которое вы сможете создать с Cordova. Если вы — разработчик, то скорее всего заметили, что все приложения используют Интернет. Они все связываются с удаленным сервером, для сбора данных. Это одна из функциональных особенностей Cordova, сбор данных от сервера, отображение их пользователю и передача обратного ответа от пользователя.
Это не означает что вы не сможете создавать автономные приложения с Cordova. Есть множество решений для клиентской базы данных, которые можете свободно использовать в своем приложении. Самый популярный — LokiJS, быстрое, документо-ориентированное хранилище данных в памяти для Node.js, браузеров и Cordova. Например для приложения фотогалереи, вы могли бы воспользоваться этой библиотекой, чтобы сохранить путь фотографий, а затем сграбить при необходимости.
С Cordova Вы сможете воспользоваться любой CSS или JavaScript библиотекой, так как весь код выполняется в браузере. Но будьте осторожны, не все браузеры одинаковые. И это переносит нас к следующему разделу.

Ограничения


Как и во многих технологиях, всегда есть ограничения. Cordova не исключение. В этом разделе я расскажу о некоторых ограничениях Cordova.

Производительность


Cordova предоставляет доступ к устройствам благодаря плагинам, которые расходуют ресурсы, такие ресурсы которые нативные приложения не затрагивают. Как упоминалось ранее в этом учебном руководстве, плохая идея создавать приложение с Cordova которое будет сильно полагаться на CPU или GPU. Такие приложения не будут производительны, по сравнению с нативными.

Наличие плагинов


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

Веб-представление (Web view)


По умолчанию Cordova использует веб-представление платформы для рендеринга пользовательского интерфейса, это означает, что вы взаимодействуете с разными веб-представлениями в каждой платформе.
Кроме того, у разных версий операционной системы платформы, может быть разное веб-представление или одинаковое, но с разным набором функций. Например, современные Android устройства имеют поддержку функцию WebRTC, в то время как в более старых версиях Android нет такой функции.
Поэтому приходят на помощь новые проекты, такие как Crosswalk. Crosswalk позволяет Вам использовать пользовательское веб-представление в приложениях Cordova, нормализуя различия между платформами.

UPD:
Следующая статья Введение в Cordova: Создание первого приложения.

Комментарии (9)


  1. BIanF
    06.01.2016 23:49

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


  1. splatt
    07.01.2016 00:00
    +1

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

    В свое время так и не смог найти адекватных плагинов для работы с камерой (нужен был именно доступ к видео-потоку, а не вызов стандартного меню «сделать фотографию или загрузить из галереи»), а нативного функционала для этого просто нет. Весь остальной функционал в той или иной форме присутствует в HTML5. Помимо этого написание интерфейса на HTML имеет кучу своих плюсов и минусов, и писать код без нормальных средств отладки JS на iOS было тяжело.
    Поэтому в свое время сделал выбор в сторону написания нативных приложений — слишком много минусов при небольшом количестве плюсов в виде ускоренного прототипирования.

    С удовольствием почитаю вашу серию статей что бы понять, в чем я был не прав.


    1. Ganster41
      07.01.2016 18:51
      -1

      Доступ к видео-потоку из JS? А вы, батенька, шутник. Сложно себе представить задачу в данном случае, на которую хватило бы производительности мобильных браузеров. Хотя опять же, если сильно захотеть, то можно было бы вынести только ваш ресурсоемкий код в нативный плагин, а остальное оставить на Cordova.
      С отладкой да, кактус тот еще, но все же он есть, в виде удаленных отладчиков для Web-вьюшек. На Android в Chromium, на iOS в Safari.
      На мой взгляд все же Cordova сильно выигрывает за счет скорости разработки. Не имея задач, не решаемых с помощью существующих плагинов, писать можно реально на несколько платформ сразу.


      1. splatt
        07.01.2016 20:36

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

        В целом я согласен, что cordova отлично подойдёт для простых приложений типа интернет-магазина, особенно если уже есть (или разрабатывается) мобильная версия сайта, для которой есть готовый дизайн/css, и нужно дописать функционал приложения (вроде сохранения платёжных данных, истории покупок итд).
        Но до написания полноценных приложений, которые могут конкурировать с нативными, имхо все ещё далеко. Опять же — возможно я не прав.


  1. frol
    07.01.2016 09:39

    Я пробовал в разное время использовать Cordova/PhoneGap и всё время результат меня удручал. На слабом железе такие приложения вообще мрачно было использовать, да и размер пакета оставлял желать лучшего, особенно если использовать Crosswalk для снятия мороки поддержания зоопарка костылей разных версий системного WebView.

    Вот гораздо более интересная штука, на мой взгляд, — React Native. Кто-нибудь успел уже написать что-то более-менее сложное на нём? Интересен опыт разработки, так как идея React **, на мой вкус, очень хороша.


    1. webschik
      07.01.2016 10:58
      +2

      Сейчас как раз разрабатываю приложение под Android на ReactNative. Пилят его довольно активно, мне очень нравится простота их компонентного подхода. Из минусов выделю то, что не хватает многих модулей и хотя можно найти немало модулей от сторонних разработчиков на Github, здесь и здесь, приходилось уже самому портировать несколько нативных модулей под Android (хоть у меня и нет опыта разработки под Android, написать мост довольно просто).

      Также отмечу, что документации у RN довольно неплохая, хотя и не всегда вовремя обновляется.


      1. profound
        07.01.2016 18:22

        Вы забыли указать самую правильную ссылку на Awesome React Native. У react native довольно большой showcase список и можно заранее попробовать на разных устройствах, чтобы понять производительность. (сам пока react native не использовал)


        1. webschik
          07.01.2016 18:37

          Спасибо за ссылку! Почему-то упустил ее :)
          С производительностью пока не было проблем, потому что фактически все элементы в приложении в итоге «превращаются» в нативные компоненты. Думаю еще стоит обратить внимание на проект Native Script, подходы с RN похожи.


  1. Siteacademy
    09.01.2016 17:40

    Опубликовали продолжение — Введение в Cordova: Создание первого приложения