В этом посте вы узнаете о Capacitor, инструменте, созданном The ionic team для создания собственных кроссплатформенных веб-приложений для Android, iOS, Electron и Интернета.
Что такое конденсатор?
Capacitor - это кроссплатформенная среда выполнения приложений, которая упрощает создание веб-приложений, которые изначально работают на iOS, Android, Electron и в Интернете. Он был создан и поддерживается командой Ionic Framework. Первая стабильная версия (1.0) вышла в конце мая 2019 года.
В этом посте я постараюсь дать вам хорошее представление о том, что такое конденсатор и почему команда Ionic создала его. Также мы рассмотрим основные различия между Capacitor и Cordova и узнаем больше о плагинах Capacitor. Мы также поговорим о стратегии миграции, о том, почему вам следует подумать о миграции, и о том, что на высоком уровне задействовано в миграции.
В качестве примечания, я хочу сказать вам, что я выполнил миграцию на Capacitor нашего последнего стартового приложения Ionic 4, и это было очень легко и просто. У меня не возникло никаких проблем, и я очень доволен новой структурой приложения без Cordova. Итак, без лишних слов, приступим!
Capacitor предоставляет последовательный веб-ориентированный набор API-интерфейсов, которые позволяют приложению максимально приближаться к веб-стандартам, одновременно получая доступ к богатым встроенным функциям устройств на платформах, которые их поддерживают.
С Capacitor добавление собственных функций в наши приложения может быть легко выполнено с помощью простого API подключаемого модуля для Java на Android, JavaScript для Интернета и Swift на iOS. Можно сказать, что Capacitor является духовным преемником Apache Cordova и Adobe PhoneGap.
Важно отметить, что Capacitor может работать с любым веб-проектом, он не зависит от Ionic и не зависит от версии (работает с Ionic v1 - v4 и всем, что появится в будущем). Его можно использовать как добавку к любому существующему современному проекту JavaScript.
У Capacitor есть мантра «Кодируйте один раз, настраивайте везде», и в этом посте мы объясним, почему.
Как Capacitor вписывается в экосистему разработки приложений?
Что такое Ionic Framework?
Если вы новичок в Ionic Framework, позвольте мне дать вам краткое введение. Это готовая для мобильных устройств кроссплатформенная библиотека пользовательского интерфейса и инструментарий, которые работают везде; любая платформа, любое устройство, любой фреймворк. Вы можете повторно использовать свои существующие веб-навыки; HTML, CSS и JavaScript для создания приложений для IOS, Android, Electron и PWA. Вы можете создать одну кодовую базу, которая может работать на всех этих платформах, просто используя свои навыки работы в Интернете и ориентироваться на различные собственные API и функции, такие как геолокация, камера, Bluetooth.
Если вы новичок в этом мире, я предлагаю вам больше узнать о ключевых компонентах Ionic. Кроме того, когда дело доходит до PWA, мы написали Полное руководство по прогрессивным веб-приложениям с Ionic 4, которое вы, возможно, захотите добавить в закладки для будущего чтения, потому что мы подробно объясняем, что такое PWA и почему вам следует определенно рассмотрите их для своего следующего проекта, а также покажите, как легко создать полнофункциональный PWA с Ionic 4!
Что такое гибридное приложение?
Гибридное приложение - это веб-приложение, созданное с использованием уже имеющихся у вас веб-навыков, а затем упакованное в оболочку реального собственного приложения. При таком подходе вы получаете полный доступ ко всем различным функциям устройства, в то время как ваше ионное или веб-приложение работает внутри веб-представления в этом собственном приложении. Для конечных пользователей это по-прежнему будет родное приложение, позволяющее запускать код повсюду и потенциально охватить миллионы пользователей.
А что насчет Кордовы?
До сих пор Phonegap или Cordova (они в основном синонимы) были родной оболочкой для приложений Ionic.
Команда, стоящая за Cordova, создала его в 2008 году. Cordova действительно помогла разработчикам с веб-навыками, которые хотели использовать их повторно и, особенно, освоить захватывающие мобильные платформы, которые есть у всех в наши дни.
Мантра Кордовы - «Напиши один раз, беги везде», и это то, чем занимается Ionic с самого начала. Cordova имеет полностью открытый исходный код и поддерживается отличным сообществом, но в последнее время у нее возникли некоторые проблемы с обновлением последних изменений собственных платформ. iOS и Android постоянно претерпевают различные изменения, будь то обновления операционной системы или новое оборудование. Это также влияет на Cordova и любое ионное приложение. Вот почему команде Ionic приходилось идти в ногу с подобными вещами и быстро действовать, чтобы обеспечить развертывание и поддержку этих различных функций.
А также, с более нативной стороны, более современные возможности системы плагинов с Cocoa Pods и Gradle, которые представляют собой инструменты управления зависимостями, которые не поддерживаются Cordova. А также желание использовать более современные родные языки, такие как Swift и Kotlin. Итак, команда Ionic подумала, что было бы неплохо создать духовного преемника Cordova, который мог бы использовать все эти современные нативные инструменты и обеспечить действительно лучший общий опыт разработчика. И их решение - конденсатор. Итак, давайте разберемся, как это выглядит.
Если вы хотите начать создавать свое приложение Ionic Framework, но не знаете, с чего начать, я предлагаю вам попробовать Ionic 4 Full Starter App. Это приложение ionic 4, которое вы можете использовать, чтобы быстро начать разработку Ionic Framework и сэкономить сотни часов проектирования и разработки.
Он включает более 100 тщательно разработанных представлений и компонентов. Он имеет полную поддержку PWA с Angular. Попробуйте на своем телефоне как обычное приложение или как PWA, чтобы увидеть волшебство!
Добро пожаловать конденсатор в ионную экосистему
В конце концов, Capacitor преследует те же цели, что и Cordova.
Capacitor - это кроссплатформенная среда выполнения, созданная командой Ionic, которая позволяет вам ориентироваться на различные типы собственных платформ, таких как iOS, Android, настольные компьютеры с использованием Electron и Интернета. Традиционно у Cordova плохая поддержка Интернета, но Ionic обещает решить эту проблему с помощью Capacitor.
Capacitor имеет первоклассную поддержку Progressive Web Apps и нативных приложений. Это означает, что мост подключаемых модулей Capacitor поддерживает работу либо в собственном контексте, либо в Интернете, при этом многие основные подключаемые модули доступны в обоих контекстах с одними и теми же API и соглашениями о вызовах. Это означает, что вы будете использовать @campitor / core как зависимость как для вашего собственного приложения, так и для вашего Progressive Web App, а Capacitor будет беспрепятственно вызывать веб-код, когда это необходимо, и собственный код, когда он доступен.
Возможность иметь несколько реализаций для API является явным преимуществом Capacitor, потому что, допустим, мы хотим использовать плагин Camera, установленное собственное приложение будет использовать собственную реализацию, а PWA будет использовать веб-реализацию, все с той же кодовой базой. .
Как Capacitor играет с Cordova?
Для большинства современных плагинов Capacitor имеет полную обратную совместимость. Однако есть некоторые из них, которые не работают по разным причинам, связанным с устаревшими технологиями.
Одна из вещей, которую Capacitor хочет сделать, - это максимально приближаться к возможностям встроенного браузера. Это позволит им обеспечить большую стабильность и удобство обслуживания, поскольку, оставаясь близкими к веб-стандартам, они могут гарантировать что все будет работать еще долго. И это очень важный момент для нас как разработчиков.
Мантра Capacitor: «Кодируйте один раз, настраивайте везде». И это потому, что они используют больше встроенных современных инструментов, которые, как они утверждают, помогут нам поддерживать наши проекты намного проще, чем раньше с Cordova.
В чем разница между Cordova и Capacitor?
При сравнении Capacitor VS Cordova можно выделить два основных момента: Native Project Management и Plugin and CLI Management. Давайте рассмотрим каждый из них, чтобы увидеть основные изменения и их преимущества.
Родное управление проектами
Использование Capacitor приведет к некоторым интересным изменениям архитектурного дизайна по сравнению с тем, что мы использовали с Cordova, но команда Ionic считает, что это будет хорошо служить всем в долгосрочной перспективе. Посмотрим почему.
Изменение №1 - исходные активы по сравнению с активами времени сборки
Capacitor заменяет собственные проекты, такие как iOS, Android, Electron, как код, который вы фактически проверяете и поддерживаете, и они, по сути, являются первоклассными гражданами в этом смысл.
Это явное преимущество по сравнению с Кордовой, где, когда вы взаимодействуете с созданными собственными проектами, например, для добавления плагинов или внесения изменений, они могут быть стерты или оказаться в разных состояниях использования, и это может быть трудным в обслуживании.
Еще одно преимущество реальных нативных проектов состоит в том, что в них легче добавить собственный нативный код. Вам просто нужно открыть проект в его собственных IDE и внести необходимые изменения без необходимости делать это через плагин.
Кроме того, еще одним преимуществом является возможность для собственных мобильных групп работать с веб-командами, поскольку у вас больше нет конфликта, когда обе команды вносят изменения в одни и те же файлы. Это отдельные веб-проекты и нативные проекты, поэтому вы можете постоянно их развивать.
Изменение №2 - Пользовательские конфигурации
Capacitor подталкивает нас к использованию конкретной IDE платформы; Xcode для iOS и Android Studio для Android. Это означает, что у нас больше не будет абстрактного слоя, которым сегодня для Кордовы является config.xml. Таким образом, преимущество здесь в том, что, не имея такой абстракции над собственными слоями, это дает нам гораздо больший контроль и видимость изменений в собственном проекте и в целом приводит к более удобному обслуживанию приложений с течением времени.
Все мы, вероятно, сталкивались с ситуациями, когда вы возвращались к приложению через некоторое время и пытались его перестроить и обновить все зависимости, и просто оно просто не работало или вообще не создавалось. Итак, Capacitor пытается сделать этот опыт намного более плавным и лучшим для нас.
Кроме того, еще одним преимуществом является то, что если вы столкнетесь с собственными проблемами, такими как проблемы со сборкой или конфигурацией, будет намного проще устранить неполадки, потому что у нас будет прямой доступ к собственным проектам и, следовательно, поиск в Интернете на разных форумах для этого конкретного проблема.
Изменение № 3 - Используйте IDE для конкретных платформ
Команда Ionic, стоящая за Capacitor, гарантирует, что, используя собственные IDE платформы, это просто приведет к лучшему опыту для всех.
Плагин и управление через интерфейс командной строки
У нас также есть изменения в управлении плагинами и интерфейсом командной строки.
Изменение №1 - построены как платформы (iOS) и библиотеки (Android)
Основное изменение в разработке и сопровождении плагинов - создание в них более современных возможностей, таких как фреймворки на iOS и библиотеки на Android. Это связано с множеством разных вещей. Например, вам больше не нужно копировать файлы плагинов непосредственно в свой проект, и по сути, это полноценные библиотеки и просто код, который можно разработать вне вашего Ionic-приложения.
Плагины в Capacitor позволяют JavaScript напрямую взаимодействовать с собственными API. Когда дело доходит до работы и создания ваших собственных плагинов, у Capacitor есть отличная команда для генерации плагинов и другие инструменты, которые описаны в документации. Capacitor автоматически генерирует перехватчики JavaScript на клиенте, поэтому большинству подключаемых модулей достаточно создать собственный подключаемый модуль Java для Android и Swift / Obj-C для iOS. Использование CLI для создания ваших собственных плагинов для конденсаторов очень просто.
Одним из преимуществ использования этого подхода является уменьшение количества подключаемых модулей, подверженных ошибкам, и упрощение поиска помощи в сообществе для каждой платформы, когда вы работаете над устранением неполадок подключаемых модулей.
Изменение № 2 - Регистрирует и экспортирует весь JavaScript для каждого плагина во время выполнения.
Кроме того, Capacitor регистрирует и экспортирует весь JavaScript для каждого плагина на основе методов, которые он обнаруживает во время выполнения. Это означает, что весь ваш код доступен сразу во время выполнения, когда ваше приложение запускается. Таким образом, больше нет необходимости в событии готовности устройства, которое, если вы работали с Cordova, вы, вероятно, столкнулись с этими проблемами, пытаясь сразу использовать разные плагины, и что ваше приложение вылетало или не работало должным образом, и не понимали этого .
Изменение №3 - интерфейс командной строки Capacitor устанавливается локально в каждый проект.
Cordova обычно устанавливается на вашем компьютере глобально, в то время как интерфейс командной строки Capacitor устанавливается локально в каждый проект. Это упрощает управление разными версиями Capacitor во всех ваших приложениях.
Стратегия миграции. Стоит ли мигрировать?
Прежде всего следует упомянуть, что миграция не является обязательной, поэтому вы можете свободно выбирать, что вы хотите делать со своим проектом. Усилия, связанные с миграцией, во многом будут зависеть от сложности приложения, но вы можете делать это постепенно, так что не будет спешки и причин для волнения.
Также важно отметить, что Capacitor не предназначен только для Ionic-проектов, он работает со всеми веб-проектами.
Переход с Cordova на Capacitor может происходить со временем или во многих случаях может быть полностью заменен. Требуемые усилия во многом будут зависеть от сложности приложения.
Если у вас уже есть приложение, использующее Cordova, давайте немного поговорим о стратегии миграции. Итак, зачем мигрировать? Что задействовано на высоком уровне ?.
Речь идет о долгосрочной стабильности и душевном спокойствии.
Теперь, когда команда Ionic выпустила этот инструмент, мы можем ожидать обновлений и выпусков намного быстрее, чем экосистема Cordova.
Также помните, что мы упоминали, что Capacitor имеет обратную совместимость с Cordova, поэтому добавление его в проект Cordova должно работать, и вы получите все преимущества работы с собственными проектами.
Команда Ionic является давним участником сообщества Cordova с открытым исходным кодом, и они говорят, что это не изменится еще долгое время. Итак, не беспокойтесь, вы все равно можете продолжать использовать Ionic Framework + Cordova, если не хотите ничего менять. Но при этом мы чувствуем, что Ionic и Capacitor - это будущее для создания современных веб-приложений и кроссплатформенные гибридные приложения.
Стоит ли мигрировать? Мое личное мнение
Как мы упоминали выше, у Capacitor есть отличия от Cordova как в отношении собственного управления проектами, так и в отношении управления плагинами и интерфейсом командной строки. И я думаю, что эти различия и новые подходы могут быть для вас либо выгодой, либо возможностью, в зависимости от вашего прошлого и текущих навыков развития. Позвольте мне объяснить почему.
Если вы решите перейти на Capacitor, важно понимать, что вы будете иметь дело непосредственно с собственной платформой (ios или android), их конкретными конфигурациями, проблемами, ошибками, сообществом, процессами сборки, IDE, языками и их собственные конкретные концепции. Capacitor требует от вас более активного участия в настройке собственного проекта, чем в случае с Cordova, поэтому, в конце концов, если вы веб-разработчик без собственных навыков, решать вам, если вы хотите потратить необходимое время и усилия на изучение этих новых концепций.
С другой стороны, если вы нативный разработчик, вам понравится работать с Capacitor, потому что вы будете работать напрямую с нативными приложениями. Так что для нативных разработчиков это будет несложным решением.
Я знаю, что многие люди начали использовать Ionic Framework, потому что они были веб-разработчиками, желавшими создавать мобильные приложения, в том числе и я. Capacitor дает нам возможность расширить наши знания о мобильных приложениях, побуждая нас изучить эти новые концепции, и я думаю, что это здорово. Но если вы боитесь вносить изменения сейчас или у вас нет времени вкладывать средства в изучение этого нового потока, все в порядке. Вы можете сделать это, когда будете готовы. Ионные приложения будут продолжать работать с Cordova так же, как и до Capacitor.
Подводя итог, можно сказать, что перенос вашего Ionic-приложения с Кордовы на Capacitor имеет как плюсы, так и минусы (или, как мне кажется, возможности). Он дает множество преимуществ при создании кроссплатформенных веб-приложений, он основан на философии «Кодируйте один раз, настраивайте везде», он оптимизирован для приложений Ionic Framework, но миграция не является обязательной, ее можно выполнить со временем, приложив усилия. зависит от сложности вашего приложения, и, если у вас нет нативных навыков, вам потребуется время и усилия, чтобы освоить эти новые рабочие процессы.
Вот почему мы решили, что для наших шаблонов Ionic 4 мы предоставим оба варианта, чтобы люди могли выбрать то, что им больше всего подходит. Когда вы приобретете один из наших стартеров ionic 4, вы обнаружите, что одно и то же приложение настроено как для Cordova, так и для другого с Capacitor.
Кордова к процессу перехода на конденсатор
Capacitor имеет некоторые зависимости в зависимости от того, на какие платформы вы ориентируетесь и на какие операционные системы вы разрабатываете.
Чтобы узнать больше о миграции, следуйте этому руководству.
Заключительные мысли о конденсаторных и ионных
Совместное использование Ionic и Capacitor - это способ создать наилучший возможный опыт работы с приложением, поскольку Ionic Framework предоставляет улучшения пользовательского интерфейса и UX, которых нет в Capacitor. Кроме того, он работает с вашим любимым фреймворком веб-приложений, включая Angular, React и Vue.
С выпуском Capacitor Ionic теперь контролирует почти весь свой стек. Когда вы создаете приложение Ionic сегодня, они теперь управляют собственным уровнем времени выполнения (Capacitor), элементами управления пользовательского интерфейса (Ionic Framework) и фреймворком, используемым для создания элементов управления (веб-компоненты, работающие на Stencil). Это важно, потому что если есть проблема в какой-либо части стека, которую контролирует Ionic, они могут исправить ее сразу. Единственная часть, которую Ionic не контролирует, - это интерфейсный фреймворк, который вы используете поверх (Angular, React, Vue или простой JavaScript).
Capacitor поддерживает идею «Кодируйте один раз, настраивайте везде», потому что конфигурация управляется для каждой платформы, а не в абстрактной системе, такой как config.xml в Кордове. Как мы видели в этом посте, это важный момент, потому что он означает, что Capacitor требует от вас большего участия в настройке собственного проекта, чем в Cordova. Хотя вначале это может показаться пугающим, этот подход позволяет легко следовать существующим руководствам по Native iOS / Android, получать помощь по Stack Overflow и полностью контролировать свой проект.
Capacitor имеет первоклассную поддержку Progressive Web Apps и нативных приложений. Это означает, что мост подключаемых модулей Capacitor поддерживает работу либо в собственном контексте, либо в Интернете, при этом многие основные подключаемые модули доступны в обоих контекстах с одними и теми же API и соглашениями о вызовах. Это означает, что вы будете использовать @campitor / core как зависимость как для вашего собственного приложения, так и для вашего Progressive Web App, а Capacitor будет беспрепятственно вызывать веб-код, когда это необходимо, и собственный код, когда он доступен.
Поскольку Cordova - очень популярный фреймворк с огромной экосистемой плагинов для доступа к различным встроенным функциям, Capacitor стремится обеспечить обратную совместимость с существующими плагинами Cordova. Это означает, что если вы используете Capacitor, вы сможете использовать с ним любой существующий плагин Cordova.
Переход с Cordova на Capacitor не является обязательным, поэтому вы можете выбирать. Усилия, связанные с миграцией, во многом будут зависеть от сложности вашего приложения, но вы можете делать это постепенно, так что не будет спешки и причин для волнения.
Если вы хотите увидеть пример приложения, созданного с помощью Ionic 4 и Capacitor, вы можете проверить Создание приложения для камеры Ionic Framework. Кроме того, команда Ionic создала еще один отличный пример приложения, используя Push-уведомления с Firebase в приложении Ionic 4 Angular.
Надеюсь, этот пост помог вам понять, что такое конденсатор и как начать использовать его для создания своих приложений!
Первоначально опубликовано на https://ionicthemes.com.
