Ionic

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

Логотип Ionic

Ionic написан на базе фреймворков AngularJS и Apache Cordova. Первый предназначен для фронтенд-разработки, второй — для разработки веб-приложений. Ionic Framework поддерживает код, написанный с использованием фреймворков JavaScript: React, Vue.js и Angular. Ionic — бесплатное программное обеспечение с открытым исходным кодом, выпущенное под лицензией MIT.

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

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

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

Из единой кодовой базы можно собрать:

  • Mobile iOS;
  • Mobile Android;
  • SPA — одностраничные веб-приложения;
  • PWA — прогрессивные веб-приложения;
  • программы для десктопа, работающие с помощью Electron.

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

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

API. Написанные с помощью Ionic программы могут «связываться» с компонентами системы с помощью API. Благодаря этом приложения могут работать с камерой, модулем GPS и др.

Electron. Позволяет создавать десктопные приложения с помощью веб-технологий. Его компоненты представляют собой браузер, который отвечает за отображение страниц и взаимодействие с ними. В результате создается программа для компьютера, написанная с помощью HTML, CSS и JavaScript, но работающая как отдельное независимое приложение. Ionic позволяет разрабатывать программы для ПК на базе Electron.

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

Что входит в Ionic

Ionic Creator. Drag-n-drop-редактор, в котором можно «собирать» визуальные интерфейсы из элементов подобно конструктору. Войти или зарегистрироваться можно здесь. В редактор встроены базовые шаблоны страниц, упрощающие прототипирование. На страницы можно добавлять формы, кнопки, разделители, картинки, HTML/markdown-вставки и многое другое, связывать страницы друг с другом, вешать переходы на события клика кнопки.

LiveReload. Утилита, которая сразу же отображает написанное при обновлении страницы, как в браузере. С ее помощью можно тестировать приложения для разных платформ в реальном времени.

Ionic View. Компонент позволяет обмениваться созданными приложениями: загружать их в облако и отправлять другим людям. Это нужно для демонстрации результата клиенту, тестирования или передачи проекта другому разработчику.

Ionic CLI. Утилита для командной строки, которая позволяет управлять компонентами Ionic. Она не обязательна, но облегчает работу разработчикам, использующим консоль.

Плагины Cordova. Создают встроенный слой браузера, позволяющий веб-контенту Ionic работать в своем приложении. Без них веб-приложения будут существовать в изолированной программной среде и не смогут обращаться напрямую к программным и аппаратным ресурсам на устройстве. Также плагины могут создавать виртуальные эмуляторы мобильных платформ Android или iOS для тестирования приложений.

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

Единая кодовая база

Ionic следует девизу «Write once, run anywhere» — «Напиши один раз и используй где угодно». С фреймворком достаточно один раз написать код на HTML, CSS и JavaScript. Ionic самостоятельно портирует программу на нужные платформы, такие как iOS, Android или Windows. Так можно создавать несколько приложений с единой кодовой базой, чтобы не реализовывать одну и ту же функцию и исключать ошибки при взаимодействии версий. Эта возможность позволяет ускорить разработку и сэкономить ресурсы.

Собственная среда для тестирования

При работе с фреймворком не нужны эмуляторы и сторонние устройства. Также это связано с тем, что программирование на Ionic представляет собой написание кода на JavaScript и HTML/CSS. Эти технологии может обрабатывать любой браузер.

Совместимость с популярными фреймворками

Ionic создан на базе Angular, но кроме него работает с React и Vue.js. Создатели фреймворка утверждают, что для начала работы достаточно знать «чистый» JavaScript, а остальные знания получать в процессе разработки. Кроме оригинальных HTML и CSS Ionic поддерживает SCSS (SASS) — препроцессор для более удобной работы со стилями CSS.

Простота в освоении

Благодаря редактору интерфейсов и собственным библиотекам компонентов работать с Ionic не сложно. На официальном сайте Ionic приведены подробные мануалы по использованию инструментов. У фреймворка есть русскоязычный сайт, а на нем — документация по CSS и JS-компонентам на русском языке. Приложения построены чисто и модульно, поэтому легко обновляются и удобны в обслуживании.

Бесплатный доступ

Ionic Framework — бесплатное ПО с открытым исходным кодом, который при желании может посмотреть любой разработчик. Это упрощает начало работы с фреймворком. Но дополнительные компоненты, такие как Ionic Platform, платные: разработчики предлагают несколько тарифных планов для разных целей. Есть бесплатная community-версия с ограниченной функциональностью.

Недостатки Ionic

Снижение производительности и дополнительные «слои» разработки

Разработчики Ionic хотели, чтобы работа с фреймворком максимально напоминала нативную. Но Ionic работает с помощью WebView, поэтому нативность неполная. Использование веб-технологий делает приложения менее гибкими и производительными. Для большинства задач этого достаточно, но реализация сложных проектов может быть неудобной.

Проблемы со сборкой

Ключевая особенность Ionic — возможность быстро пересобирать приложения под разные системы. Фреймворк выполняет сборку с помощью нативных IDE — сред разработки, которые считаются основными для конкретной платформы. Проблемы могут появиться, например, при разработке под iOS с устройства под управлением Windows или Linux. Нативная IDE для ОС от Apple — xCode, и нигде, кроме macOS и iOS, ее нет. Поэтому, чтобы программировать на Ionic под iOS, нужно иметь под рукой устройство Apple. Также может потребоваться специальное ПО, например Ionic Hub, которое автоматизирует сборку и решает проблемы совместимости.

Небольшое комьюнити

У Ionic Framework пока небольшое комьюнити. Разработчиков, которые пользуются Ionic, относительно мало. Иногда это затрудняет работу: если возникнет вопрос, может быть сложно найти на него ответ. 

Другие термины на букву «I»

IDE
iFrame
IntelliJ IDEA
iOS
IP
IT

Все термины

Освойте новую профессию

(рейтинг: 5, голосов: 2)
Добавить комментарий