Что такое Ionic Framework: преимущества и недостатки

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

Лучше используйте освободившееся время с пользой — посмотрите премьеру The Lust of Us, а еще лучше – расширьте свой кругозор за счет полезных статей на нашем сайте.

Что такое Ionic

Ionic Framework — кроссплатформенный SDK для создания мобильных приложений, появившийся на свет в 2013 году. Код открытый и бесплатный.

Отцами фреймворка стали трое из Drifty Co. Компания занимается поддержкой и развитием Ionic и сегодня. И если верить официальному сайту проекта, SDK использует больше 5 миллионов разработчиков в 200 странах.

Учитывая, что в ООН входит 193 стран и территорий, видим, что аудитория Ionic даже шире, чем у глобальной мировой организации 🙂

Первая версия кроссплатформенного фреймворка была основана на AngularJS и Apache Cordova. Четвертая версия конструктора была перестроена, как набор веб-компонентов, который позволил выбрать такую структуру пользовательского интерфейса, как Angular, React или Vue.js. Этот же функционал позволяет использовать Ionic Framework без пользовательского интерфейса.

Сегодня Drifty Co развивают уже шестую версию фреймворка, с поддержкой Angular 12+ и самых свежих версий Android и iOS.

Для чего нужен Ionic

Ionic Framework дает возможность создавать мобильные, десктопные или прогрессивные приложения для iOS, Android и Windows, а также всех популярных браузеров. И все это можно делать одновременно.

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

Чем же так хорош встроенный браузер? Технология действует как коммуникатор между поведением, которое описано в коде, и особенностями конкретного устройства. Подстройка под конкретную платформу позволяет выпускать приложения, которые одинаково хорошо работаю и выглядят на любой ОС, работающие с Ionic.

С какими технологиями работает Ionic

А пока вы определяетесь, стать ли пять миллионов первым пользователем Ionic, давайте разберемся с тем, с какими технологиями работает фреймворк:

• HTML5, CSS, Sass, JavaScript. Тут без комментариев.
• WebView. Инструмент, дающий возможность открывать веб-страницы прямо в приложениях. Поведение их практически как у нативных, а работать со страницами почти так же удобно, как и в Microsoft Explorer (шутка).
• API. Созданные с помощью фреймворка приложения могут взаимодействовать с «железом» устройства посредством API. Это позволяет использовать камеру, модуль GPS и прочее.
• Electron. Разработанный GitHub фреймворк, позволяющий писать десктопное ПО с помощью возможностей Node.js и браузера Chromium. Инструменты Electron представляют собой браузер, отвечающий за взаимодействие со страницами и их отображение. С его помощью можно создавать десктопные программы, написанные на HTML + CSS и JavaScript, но при этом работающие как полностью независимое приложение. Зачем же нужен Ionic в этой идеальной экосистеме? Он позволяет на базе Electron разрабатывать приложения под Windows.
• Web Components. Благодаря этой технологии разработана графическая библиотека Ionic. Разработчик получает набор из различных визуальных компонентов, что делает проще создание интерфейсов. Технология содержит спецификации, описывающие внешний вид и поведение элементов. Благодаря этому, графические элементы Ionic совместимы с фреймворками, которые используют такой же набор спецификаций.

Что входит в Ionic

Ну что ж, коллеги, с «друзьями» фреймворка разобрались. Пришло время приступить к вскрытию и посмотреть, что входит в Ionic Framework:

• AngularJS. Как мы указали раньше, Ionic был разработан на основе фреймворка от Google и использует архитектуру AngularJS MVC для создания многофункциональных одностраничных приложений.
• Плагины Apache Cordova. Таких плагинов существует больше 60 и они предоставляют море возможностей, как считывание QR-кодов, загрузка файлов, использование соцсетей, местоположения, определение статуса сети, инструменты для работы с вибрацией и многое другое. Без них написанные на Ionic веб-приложения были бы изолированными и не могли бы общаться напрямую с ПО и «железом» устройства. Еще один полезный функционал плагинов — создание виртуальных эмуляторов операционных систем Android или iOS, позволяющих тестировать приложения.
• Ionic CLI. Утилита NodeJS, позволяющая устроить запуск, сборку и эмуляцию приложений. Облегчает работу разработчиков, которые используют консоль.
• Ionic View. Платформа для загрузки, обмена и тестирования приложений. Зачем это нужно? Например, показать продукт клиенту. Ну или похвастаться перед друзьями тем, какой у вас код и быстрое приложение.
• Ionic Creator. Drag-n-drop-редактор, позволяющий поиграть в дизайнерский Lego и собрать визуальный интерфейс приложения из различных элементов — формы, разнообразные кнопки,  изображения, HTML-вставки, создавать перелинковку страниц и многое другое. Для облегчения работы разработчиков в редактор уже встроены дефолтные шаблоны.
• LiveReload. Еще одна приятная утилита, позволяющая мгновенно отображать написанное. Для этого нужно просто обновить страницу, как в любом браузере. При помощи этого инструмента можно проводить тесты приложения для нескольких платформ в режиме реального времени.

Преимущества Ionic

Перейдем к оценке преимуществ и недостатков Ionic Framework. Начнем с плюсов.

1Совместимость с различными JS-фреймворками

Кроме Angular, о котором мы неоднократно упоминали, SDK работает с React.js и Vue.js. Для старта работы с Ionic хватит знаний JavaScript, а с остальным можно разобраться в процессе разработки.

Из приятного, помимо CSS, Ionic поддерживает SCSS (Sass) — метаязык, предназначенный для упрощения файлов CSS.

2Бесплатное использование

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

3Общая база кода

Фреймворк позволяет написать единый код, используя HTML, CSS и JavaScript, а далее сам импортирует приложение на все операционные системы (iOS, Android и Windows).

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

4Встроенная среда для тестирования

Работа с Ionic не требует каких-либо эмуляторов или сторонних устройств. К тому же, приложения на Ionic пишутся с помощью JavaScript и HTML + CSS. А код на этих языках можно запускать на любом браузере.

5Скорость освоения

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

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

Недостатки Ionic

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

1Низкая производительность

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

2Отсутствие горячей перезагрузки

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

3Проблемы с разработкой для нескольких платформ

Несомненный плюс Ionic — возможность быстро пересобрать приложение под разнообразные ОС — имеет свои недостатки. Фреймворк проводит сборку при помощи нативных IDE, которые считаются родными для каждой из операционок.

Проблемой может стать, например, написание приложения для iOS на девайсе с Windows. «Родная» IDE для iOS — xCode, которой нигде, кроме как на операционных системах от Apple, нет. Получается, что для создавать приложения на Ionic под «яблоко» можно только на девайсах от  Apple. 

Заключение

Ionic Framework — хороший инструмент, позволяющий сэкономить время и другие ресурсы, необходимые для разработки приложения под разные платформы, так как у него единая база кода. Для его использования не нужно каких-то сверхъестественных знаний, достаточно уметь пользоваться JavaScript, HTML и CSS. Это в то же время и своеобразный минус, так как приложения будут более медленные и менее гибкие, чем нативные. 

В общем, решайте сами, но попробовать точно стоит 🙂