Ionic framework что это
Обновлено: 06.07.2024
Стоит сказать, что я занимаюсь разработкой нативных мобильных приложений на iOS семь лет, немного умею писать под Android. Последние два года занимался оболочкой под iOS для webView-приложений.
Собрал демонстрационную версию компонентов, представленных в Ionic, и записал скринкаст с iPhone.
А тут по ссылке можно вживую посмотреть работу компонент, и как они будут отображаться и работать на iOS и Android. Как нативщик могу сказать, что выглядит и работает, как родные компоненты в операционной системе. Торможения и каких-либо лагов не заметил. На слабеньком Android всё замечательно.
Если сравнивать с нативной разработкой — неоспоримая экономия раза в два, так как разрабатываешь, смотря результат в браузере, потом проверяешь на обеих платформах. Огромный набор плагинов для доступа к нативным функциям тоже радует, не нужно лезть в нативный код.
Единственное, что я не нашёл, — авторизацию через «ВКонтакте» нативным образом через соответсвующее SDK, при этом Facebook присутствует. Позже напишу соответсвующий плагин, если не найду подходящее решение.
Если сравнить с гибридными приложениями, к которым я привык за последние два года, когда в приложении отображается веб-контент с сервера, тут подход несколько иной. В приложении уже лежат HTML-файлы вёрстки, в которые динамически вставляется контент с данными, полученные с сервера или внутренней базы данных. Так достигается высокая скорость работы интерфейса, в том числе и работа без интернета.
Набросал небольшое приложение по получению заявок с сервера, которое может работать без интернета.
Так как данные представляют из себя небольшой текстовый набор в пару килобайт, на плохом интернете всё это бодренько загружается без всяких проблем, чем если бы грузилась вся веб-страница.
LiveReload — отличная функция, которая позволяет сразу же видеть результаты работы в мобильном приложении, поправил, сохранил, увидел.
Так же в наборе инструментов Ionic есть возможность публиковать изменения в уже размещённом приложении в AppStore и Google Play, что очень удобно при исправлении критических ошибок.
Без всякого программирования можно собрать интерфейс в специальном редакторе, который позволяет набросать в прямом смысле компоненты и определить их параметры.
Интерфейс представляет из себя HTML, поэтому вёрстку можно заказать у любого веб-специалиста.
Мне лично понравилось, что в вёрстке сразу можно заложить элементы логики поведения интерфейса, которые легко читаются. В шаблоне ниже видно, что в интерфейсе будут отображаться строки из массива messages, а также определено нажатие по клику.
<ion-row *ngFor="let message of messages" (click)="goToDetailPage(message)"> <ion-col col-9 *ngIf="message.from !== nickname"> <span message.from >></span><br> <span><< message.text >></span> <div | date:'dd.MM hh:MM:ss'>></div> </ion-col>Кнопку можно описать и в интерфейсе, чтобы она была неактивна, если отправлять ещё нечего.
Вот тут по большому счёту описан вывод массива в таблицу, а также действие при нажатии на ячейку.
<ion-list [virtualScroll]="listData"> <ion-item *virtualItem="let item" (click)="goToDetailPage(item)"> <h2><></h2> <p>></p> </ion-item> </ion-list>Ещё пример вёрстки авторизации, где сначала предлагаем ввести номер телефона. <div *ngIf="isLogin"> <ion-item> <ion-label stacked>Номер телефона</ion-label> <ion-input type="number" [(ngModel)]="phoneNumber"></ion-input> </ion-item> <button ion-button (click)="signIn(phoneNumber)"> Войти </button> </div>А затем при смене переменной isLogin интерфейс меняется на предложение ввести код из SMS.
<div *ngIf="!isLogin"> <ion-item> <ion-label stacked>Проверочный код</ion-label> <ion-input type="number" [(ngModel)]="confirmationCode"></ion-input> </ion-item> <button ion-button (click)="confirmSMS(confirmationCode)"> Подтвердить </button> </div>Надеюсь, не перегрузил вас кодом, хотел лишь донести простоту вёрстки в базовом варианте, которая неплохо выглядит.
Сам программный код с логикой пишется на Angular, это производная от Javascript, которая легко осваивается при знании Javascript.
Так как я считаю, что инструмент можно освоить лишь на практике, а не читая теорию, я решил написать мессенджер. Мессенджер позволит показать скорость работы мобильного приложения, а ещё это отличная основа для любого проекта с обменом данными в реальном времени.
Так и назову — RealTimePlatform. Платформа для создания мобильных приложений с обменом в реальном времени.
Я реализовываю сейчас транспортную модель доставки данных в мобильном приложении для основы нового проекта.
Что готово на текущий момент:
В мессенджере доработаю в ближайшее время:
- реализовать разные группы для чата;
- выстраивать платформу в Uber-модель.
На мой взгляд, получится отличная основа для различных сфер бизнеса: такси, курьерская служба, ремонт, дед мороз, юридическая помощь, помощь на дороге и другие. В общем, любой вид услуг, который необходимо получить в ближайшие десть минут.
Кстати, Ionic позволяет собрать PWA-приложение и под Windows Phone.
Мы тут собрали умную камеру для наблюдения за котиками. Хотите научим?Ionic плох тем что не позволяет сделать нормальное web приложение, он заточен только под mobile. Вопрос производительности там открытый- мой опыт скорее негативный.
Я сейчас советую смотреть в сторону flutter - быстро писать и отлично работает.
поддерживаю, именно такое же впечатление сложилось при использовании Ionic 2. Может ща там что-то изменилось, но без костылей нельзя было хоть как-то нормально оптимизировать приложение под web, кодесплиттинг не работал, NavController выдавал свои закидоны. В итоге переехали на чистый Angular.
Я сейчас советую смотреть в сторону flutter - быстро писать и отлично работает.
Люто поддерживаю. Сначала отнесся скептически. Flutter работает совсем без JS-движка, как я понял, компилится в нативный код. Да, надо учить Dart, но если знаешь TypeScript, не сложно.
вы взяли платформу под мобайл и жалуетесь, что она плохо работает на десктоп?
Дак вроде разработчики её позиционируют её именно как универсальное решение для написания приложений под всё
а в чем конкретно негативный опыт?
flutter это тоже по сути веб + натив
flutter НЕ использует webview - у них собственный движок рендеринга нацеленный на производительность в 120 кадров в секунду. То есть каждый пиксель рендерит flutter и не зависит от версии операционный системы(если мы говорим о визуальном представлении widget)
Если не прототип, если нужны:
- стабильность / maturity
- производительность
- отсутствие костылей исп. инструмента (а они всегда будут)
- фичи которые не идут или не поддерживаются «из коробки»
- возможность релизнуть «последнюю» фичу под платформу без оглядки установленные рамки
То только Native.
Если нужна скорость и спецификация по проекту стабильна (фичи не требуют вмешательства в дописывании с нативки) - Welcome к универсальным решениям.
Я сделал на Ioinc V4 демку приложение для заказа еды, так что можете "пощупать" и самостоятельно оценить эту технологию
Welcome to the Stencil App Starter. You can use this starter to build entire apps all with web…Согласен, pwa это перспективная вещь, особенно когда сделают (или если сделают) пуши в ios
Я пробовал Ionic1 еще даже - пришел к такому выводу:
Для серьезной работы все таки WebView сильно тормозит, особенно если у клиента какой-нибудь старый Android.
Все свои аналогичные проекты перевел на React Native и очень доволен, причем даже не столько из-за самого RN, сколько нравится архитектурная стройность и сопровождаемость кода на React + Redux, в сравнении с тем, во что превращается код на Angular в сложном проекте.
Вот согласен, почему то на Angular часто получается куча говна. Выглядит так будто фреймворк не бьет по рукам и требуются реально хорошие разрабы чтобы понимали где говно а где нет.
То что Ionic на React - гуд, я рад, хотя конкретно этот линк выглядит заброшенным
просто там не нужно строить монстра state managment чтобы сделать кучу вещей,в итоге при отстуствии грамотного подхода, все как бы работает, но со временем выходит печаль.
IonicFramework - это SDK с открытым исходным кодом для разработки гибридных мобильных приложений с использованием веб-технологий.
Производительность
Скорость имеет значение. Настолько, что вы точно заметите, когда ее нет. Ionic без проблем будет работать на последних мобильных устройствах. С минимальными манипуляциями DOM, без jQuery и без аппаратного ускорения.
Angular & Ionic
Ionic использует Angular для создания мощного SDK, который отлично подходит для разработки надежных приложений с широкими возможностями.
Ориентированность на нативную разработку
Ionic создан по моделям популярных SDKs для разработки нативных мобильных приложений, что снижает порог вхождения для тех, кто создавал приложения на iOS или Android. Просто адаптируйте ваш код и пропустите его через Cordova.
Красивый дизайн
Ясный, простой и функциональный. Ionic спроектирован так, чтобы хорошо выглядеть на всех мобильных устройствах. Учитывая массу популярных мобильных компонентов, верстку, интерактивные элементы и прекрасную (все еще расширяемую) базовую тему, вы удивитесь, как раньше жили без этого.
Мощный CLI
С помощью одной команды вы можете создавать, тестировать и устанавливать ваши приложения на любую платформу. Благодаря отличным функциям вроде Live Reload и интегрированным ведением журнала, вы будете уже на шаг впереди ваших заклятых нативных друзей. Просто запустите npm install -g ionic, и вы готовы!
Простота в освоении
Все, что вам нужно знать — это HTML, CSS и JavaScript. По мере работы вы даже освоите AngularJS. Мы написали массу учебного материала, который поможет начать и поднять уровень ваших навыков в разработке мобильных приложений. Вы сможете в два счета создавать приложения.
Создан гиками (вроде вас)
Фреймворк создали и поддерживают разработчики и дизайнеры, которые одержимы веб-технологиями. С нами мобильная разработка с HTML5 становится увлекательной и простой.
Больше, чем просто фреймворк.
Ionic Lab
Создание и тестирование IOS и Android версии приложения.
LiveReload
Тестирование приложения в режиме реального времени.
Icon/Splash Generation
Генератор иконок и заставок для разных устройств.
View App
Демонстрация разработанных приложений для ваших клиентов, пользователей и тестировщиков по всему миру.
ngCordova
Angular выражения для быстрого доступа к нативным функциям устройсва.
Платформа Ionic
Полный набор серверных сервисов и инструментов для разработки мобильных приложений.
Ionic — фреймворк, который я использую для всех своих проектов, и я неуверен, что я могу еще хоть как-то выразить свою благодарность за этот инструмент. В Ionic есть врожденное чувство стиля и утонченности, и при этом он позволяет создавать мобильные приложения профессионального уровня просто по щелчку пальцев.
Hampton Catlin Creator of Sass
Ionic сильно изменит подход к созданию мобильных приложений. Теперь выбор AngularJS как средства для создания функциональности полностью оправдан, а разработка ощущается почти как нативная. Ваши разработчики и пользователи поблагодарят вас.
James Tamplin Co-founder & CEO, Firebase
Я был очень рад, когда обнаружил Ionic. Он заполняет ту брешь, которая образовалась в создании приложений под мобильные устройства, и решает многие сложности, которые иначе требуют подключения множества библиотек. А это сохраняет код чистым. В общем, он делает разработку мобильных приложений увлекательной и быстрой, что вдохновляет на дальнейшее творчество!
Holly Schinsky Developer Evangelist, Adobe
Ionic framework — один из самых широко обсуждаемых фреймворков. Как гласит официальный сайт, Ionic — это SDK для создания гибридных мобильных приложений, набор CSS и JS компонент, созданный на основе AngularJS, SASS, Apache Cordova.
На момент написания статьи репозиторий Ionic насчитывает 15300 звездочек, а сумма инвестиций в компанию Drifty, чьим продуктом является Ionic, уже достигла $3.7 миллиона.
Посмотрим, что интересного предлагает Ionic для разработчика.
Ionic cli
- создание базового приложения с выбором шаблонов (например приложение с боковым меню, приложение с табами, картами Google Maps, пустое приложение);
- сборка и запуск в эмуляторе, на реальном устройстве, в браузере;
- live reload в браузере и на устройстве
- генерацию иконок, сплешскринов и др.
Наличие Ionic CLI совсем не обязательно, однако это гораздо облегчает разработку приложения. Самые, на наш взгляд, значительные возможности:
Данная команда позволяет из исходных файлов (.psd, .jpg, .ai) сгенерировать иконки всех размеров, сплешскрин под целевые платформы. Для этого достаточно иметь исходную иконку размером не менее 192×192px, и исходную картинку для сплешскрина размером не менее 2208×2208px, подготовленную по специальному PSD шаблону.
отображает в браузере ваше приложение одновременно для iOS и Android платформ
Данная опция в том числе поддерживает live reload.
Данная команда позволяет загрузить ваше приложение в облака для дальнейшего тестирования в Ionic view. Здесь надо остановиться поподробнее.
Ionic View — это мобильное приложение для iOS и Android, с помощью которого можно делиться вашими разрабатываемыми приложениями с заказчиком, тестеровщиками, коллегами. Команда `$ ionic upload` синхронизирует приложение на вашем компьютере с сервером, после чего его можно запустить на телефоне.
Стоит отметить, что сейчас Ionic View находится в стадии beta. В процессе использования на Android, у нас довольно часто происходили непонятные баги — то белая страница без признаков жизни, то приложение и вовсе не запускалось. Как оказалось — не все Cordova плагины поддерживаются в текущей версии Ionic View.
С помощью команды
При этом скачается уже сконфигурированный VagrantBox, а код вашего приложения будет доступен через shared folders по пути /vagrant .
Обратите внимание, что с помощью Ionic Box вы можете разрабатывать только Android приложения. По умолчанию, при запуске $ ionic run android , приложение будет установлено на ваш реальный девайс, подключенный с помощью USB. Здесь можно прочитать, как запускать приложение на виртуальном девайсе с помощью Genymotion.
Мы всё же советуем настраивать инструменты для разработки на вашем компьютере, однако Ionic Box - хороший вариант для быстрого старта.
Genymotion
Хоть это и не часть экосистемы Ionic, но стоит обратить внимание. Genymotion - это очень (!) быстрый Android эмулятор, построенный на основе VirtualBox. Он настолько быстр, что пользоваться чем-то другим уже невозможно. Просто попробуйте.
В случае работы Genymotion+Ionic запуск приложения немного меняется, вместо $ ionic emulate android надо выполнять $ ionic run android , т.к. данный эмулятор определяется как устройство реальное, а не виртуальное.
Если у вас стоит Android Studio, то вы запросто можете запускать проекты на Genymotion прямо оттуда, выбрав одну из запущенных виртуальных машин в диалоговом окне. Например, можно запустить 4 виртуальных машины с разными версиями Android и быстро открыть в каждой из них своё приложение - очень удобно. Более того, имеется плагин Genymotion для Android Studio, позволяющий управлять виртуальными машинами (эмуляторами).
Из минусов - не все виртуальные машины работают одинаково быстро. Например, Nexus 5 (Android 5.0) работает почему-то медленно, а, например, Galaxy S3 (Android 4.1) работает молниеносно.
Для личного использования Genymotion бесплатен.
Ionic Creator
Ionic Creator - как вы уже догадались по картинке, это drag'n'drop builder интерфейса приложения. С недавних пор он стал публичным, и войти или зарегистрироваться можно здесь.
Существует возможность экспорта приложения. Тут есть опции - это
- либо HTML, который можно скопировать прямо из модального окна
- либо ZIP архив с файлами
- либо вариант установки через Ionic CLI
В последнем случае установка выглядит так:
Заявлена возможность тестирования приложений, созданных в Creator, прямо в Ionic View. Однако такой возможности в версии Android мы не обнаружили.
Из минусов - Creator плохо работает в Firefox, лучше использовать Creator в Chrome.
Интересным выглядит генератор тем, с помощью которого можно легко увидеть как будут выглядеть основные элементы Ionic приложения.
Ionic Icons
Ionicons - это огромный набор иконок, которые встроены в Ionic. Иконки довольно часто пополняются, а для быстрого поиска нужной иконки по ключевому слову реализован удобный фильтр-поиск.
ng-cordova
ng-cordova - это набор из более чем 60 плагинов, которые являются AngularJS обертками для наиболее популярных Cordova и Phonegap плагинов, предоставляя уйму возможностей: сканирование баркодов, загрузка файлов, работа с социальными сетями, геолокация, определение статуса сети, API для работы с вибро и многое другое.
Ionic Showcase
В блоге Ionic часто постят обзоры на самые популярные приложения из Ionic Showcase. По сути, это еще одно подтверждение тому, что гибридные приложения занимают свою нишу и стремительно развиваются, а в некоторых случаях абсолютно не уступают нативным приложениям.
AngularJS 2 + Ionic 2
Наверняка, все AngularJS разработчики ждут появления AngularJS 2, и встаёт вопрос - что же будет с Ionic, у которого нет ещё даже версии 1.0?
Как уверяют разработчики, работа над Ionic 2 уже ведётся, и после выхода AngularJS 2 Ionic будет полностью его поддерживать. Подробнее об этом можно почитать в этом посте в официальном блоге.
Вообще, команда Ionic тесно сотрудничает с разработчиками AngularJS, и намерения по поводу AngularJS 2 очень радуют. Начиная с прошлой недели, в блоге начали выходить посты Angular 2 Series - короткие заметки о различных частях и особенностях нового фреймворка.
Ionic Material
Ionic Material - надстройка над фрейморком Ionic для материализации интерфейса. Лучше один раз увидеть - на сайте замечательное кликабельное демо.
Ionic Material не конфликтует со стандартными стилями и классами фреймворка Ionic и по заверению разработчика выполнен строго по гайдлайнам Google.
Особенности, которые могут заинтересовать
Split View
Split View - это возможность отображения страницы с не закрывающимся боковым меню при достижении некоторой ширины экрана.
Добавить эту возможность можно просто написав директиву expose-aside-when в теге бокового меню:
Так же легко указывать и произвольные значения ширины:
Интеграция с Crosswalk
Crosswalk - это опенсорсный продукт, позволяющий на старых версиях Android (4.0-4.3) использовать не встроенный WebView, а Chrome WebView, указывая нужную версию.
Наличие Crosswalk позволяет добиться вплоть до 10-кратного увеличения скорости отрисовки HTML/CSS и позволяет увеличить производительность Javascript, при этом увеличивая размер вашего приложение на
Также для разработчика открывается возможность отлаживать приложение с помощью Chrome DevTools.
Добавить Crosswalk в ваше Ionic приложение можно с помощью следующих команд:
Также можно установить конкретную версию:
Pull to refresh
Добавить возможность обновления содержимого по свайпу вниз с помощью Ionic займет у вас не более 7-10 минут. Вот пример из реального приложения - необходимо добавить pull-to-refresh функциональность к списку задач. Сначала надо изменить HTML, добавив в существующий код тег <ion-refresher> :
Из кода легко понять, что при свайпе вниз, вызовется функция refresh() в текущем контроллере. Напишем её:
Вышел стабильный релиз Ionic Framework “Ionic for everyone”, что можно перевести как “Ionic для каждого”. Но что имеется ввиду для каждого? Давайте разбираться.
Ionic 4 представляет из себя кульминацию более чем 2-х лет усердной работы. Сегодня Ionic это не просто фреймворк для создания мобильных приложений на Angular, это мощная система для разработки мобильных приложений для каждого разработчика, какими бы инструментами он не владел.
Еще в 2013 году Ionic стремился создать компоненты на основе Javascript для создания качественных мобильных приложений. Тогда не было стандартного способа создать компоненты, поэтому ребята взяли за основу Angular. И тогда это действительно была отличная идея: с помощью Angular можно было создать любой HTML тег и упаковать в него всю сложную логику.
Когда появился Angular 2, команда Ionic перенесла фреймворк на него, так появился Ionic 2 и 3.
Но сегодня помимо Angular развиваются другие фреймворки. На сегодняшний день React приобрел огромную популярность, а новые фреймворки, такие как Vue завоевали популярность очень быстро. Мир веб-разработки менялся последние годы настолько быстро, что стало ясно, Frontend-разработчики никогда не остановятся на какой-то конкретной технологии. Проблема Ionic заключалась в том, что им пользовались только те, кто принял Angular за основу разработки.
С 2013 по 2018 год во фронтенде произошло нечто замечательное: браузере сошлись в стандартизированной модели компонентов, что позволяет определять собственные теги HTML и легко распространять их среди других разработчиков. Этот набор API стал известен как веб-компоненты, и это все, что не хватало команде Ionic в 2013 году.
В 2017 году команда начала экспериментировать с веб-компонентами и решила перенести все 100 компонентов. Так появился Ionic 4.
Сегодня фреймворк распространяется в виде набора веб-компонент с использованием пользовательских элементов и API-интерфейсов Shadow DOM, доступных во всех современных мобильных и настольных браузерах.
Это означает, что практически каждый веб-разработчик теперь может использовать компоненты Ionic в своих мобильных, настольных и PWA веб-приложениях, просто используя HTML-теги Ionic.
Поскольку теперь Ionic ориентируется на стандартные веб-API, разработчики могут быть уверены, что API-компоненты Ionic останутся стабильными в течение многих лет.
Производительность
Ionic 4 является самой полной и быстрой версией. Все 100 компонентов Ionic были протестированы на производительность. Команда провела полное обновление iOS и Material Design для каждого компонента в соответствии с последними стандартами на iOS и Android.
Веб-компоненты Ionic были оптимизированы для загрузки и скорости рендеринга, помогая приложениям Ionic достичь желаемого результата 100/100 в инструменте тестирования Lighthouse от Google.
Также команда значительно улучшила стартовые шаблоны, чтобы помочь разработчикам быстрее создавать крутой интерфейс.
Производительность для прогрессивных веб-приложений
Прогрессивные веб-приложения (PWA) сейчас в тренде, и Ionic 4 был спроектирован так, чтобы предоставить лучший UI для создания высокопроизводительных PWA.
Для достижения стандартов производительности, установленных Google, потребовались новые подходы к загрузке асинхронных компонентов. Чтобы добиться этого, команда Ionic потратили год на создание Stencil - генератора компонентов, который обеспечивает их упаковку.
В скором времени команда Ионик обещает опубликовать ряд инструкций по достижению максимальной производительности с различными фреймворками.
Кастомизация
Одним из самых значительных изменений в этой области является переход на нативное создание переменных CSS. Переменные CSS обеспечивают простой способ создания тем для приложений на IONIC вне зависимости от того какую инфраструктуру вы используете.
Обновленная документация
У Ionic отличная документация как в плане доступности информации, так и оформлению. Команда выпустила новую версию документации еще лучше, еще удобнее.
Идеально для вашей системы проектирования
Благодаря новым возможностям создания тем и независимые от фреймворка веб-компоненты, Ionic готова стать основой для создания интерфейсов. По сути, вы можете создать свой собственный UI, используя основу Ionic.
Используйте инструменты вашей платформы
Когда Ionic 2 был построен на основе Angular, а современные инструменты JavaScript только появлялись, Ionic пришлось создать достаточное количество инструментов для компиляции приложений. Не говоря уже, что решения по типу Angular Router, еще находились на стадии разработки и еще не были готовы для использования, команде приходилось создавать свои собственные.В Ionic 4 теперь используются официальные инструменты платформы для сборки, объединения и маршрутизации, чтобы вы могли получить максимальную отдачу от экосистемы вашей платформы. Это означает, что вы будете использовать Angular CLI при использовании Ionic с Angular, Vue CLI с Vue.js и так далее.
Поскольку элементы управления пользовательского интерфейса Ionic теперь основаны на API-интерфейсах веб-компонентов, они обычно могут работать «из коробки» во всех основных средах (Angular, React, Vue и т. Д. .)
Тем не менее, Ionic также должен интегрироваться с системой маршрутизации фреймворка, поэтому нам по-прежнему приходится предоставлять функции, специфичные для фреймворка. Кроме того, разработчики в каждой среде ожидают, что что-то будет работать определенным образом, например, разработчики React ожидают MyComponent заместо my-component).
Рынок мобильных приложений быстро становится одной из лучших платформ для охвата современных клиентов. Распространенной проблемой, с которой сталкиваются фронтенд-разработчики, является создание пользовательских интерфейсов (UI), которые выглядят и хорошо работают на всех платформах: Android, iOS или даже как веб-приложение.
Комплект для разработки программного обеспечения Ionic UI является распространенным решением этой проблемы и позволяет интерфейсным разработчикам создавать кроссплатформенные приложения с помощью всего лишь одной кодовой базы.
Сегодня мы познакомим вас с Ionic, покажем, как он сочетается с другими веб-технологиями, и поможем создать ваше первое приложение Ionic.
Что такое Ionic?
Ionic — это комплект для разработки программного обеспечения с открытым исходным кодом (SDK), используемый для разработки мобильных, настольных или прогрессивных веб-приложений (PWA). Первоначально он был построен на основе AngularJS, но теперь поддерживает все основные интерфейсные фреймворки. Вы можете использовать Ionic для создания пользовательских интерфейсов для мобильных приложений, созданных с помощью Angular, React или Vue.js.
Ionic даже позволяет разрабатывать приложения Ionic Native без какой-либо структуры.
Ionic используется для создания гибридных приложений, которые по сути представляют собой веб-приложение, заключенное в собственную оболочку. Устройство устанавливает контейнер приложения локально (как собственное приложение), но приложение использует встроенный браузер для подключения к любым возможностям мобильной платформы. Встроенный браузер и любые плагины невидимы для пользователя.
Самым большим преимуществом приложений Ionic (и гибридных приложений в целом) является то, что вы можете создать единую базу кода, а затем настроить ее для определенных платформ, таких как iOS, Android или Windows.
Встроенный браузер отделяет исходный код от устройства и действует как переводчик между поведением, описанным в коде, и особенностями устройства. Эта настройка для конкретной платформы позволяет создавать приложения, которые отлично работают и отлично смотрятся на любой платформе, поддерживаемой Ionic.
Плюсы использования Ionic:
- Настройка для конкретной платформы
- Бэкэнд-агностик
- Обширные встроенные параметры и элементы пользовательского интерфейса
- Поддерживается ведущими мобильными и веб-платформами
- Легко подобрать для тех, кто имеет опыт работы с Sass, CSS или HTML.
Минусы:
- Низкая производительность для приложений Ionic Native (особенно для приложений с тяжелой графикой)
- Зависимость от плагина, приложения могут полностью сломаться, если плагин отсутствует
- Нет поддержки горячей перезагрузки, необходимо перезапустить приложение, чтобы изменения вступили в силу.
Как работает Ionic?
Ионные приложения создаются путем объединения встроенных строительных блоков пользовательского интерфейса, называемых компонентами. В библиотеке Ionic есть тысячи компонентов пользовательского интерфейса, которые используются для реализации общих форм, таких как кнопки, предупреждения или приглашения для ввода. Все встроенные компоненты работают и выглядят одинаково независимо от платформы.
Сравнение компонентов на разных мобильных платформах
Компоненты позволяют быстрее создавать приложения, потому что вам не нужно реализовывать каждую общую функцию с нуля. В результате вы часто можете выполнить все основные функции своего приложения всего за один присест.
Если вы хотите выйти за рамки стандартной библиотеки, вы также можете создавать собственные компоненты. С этого момента пользовательские компоненты можно повторно использовать в вашем приложении.
Ионные компоненты записываются в TSXверсии JSXфайла TypeScript. TSX- это расширение TypeScript, которое позволяет размещать HTML-разметку непосредственно внутри вашего кода.
Вот пример TSXфайла, который использует как TypeScript, так и HTML.
Cordova
Ионные приложения становятся гибридными с включением фреймворка для разработки мобильных приложений Apache Cordova или Capacitor. Эти программы создают встроенный слой браузера, который позволяет веб-контенту Ionic работать в собственном приложении. После установки встроенного браузера ваше приложение функционирует как собственное приложение и может быть развернуто в магазинах приложений на iOS, Android, Electron или в Интернете как PWA.
Без Cordova веб-приложения существуют в изолированной программной среде и не могут напрямую обращаться к различным аппаратным и программным ресурсам на устройстве. Кордова предоставляет пути API JavaScript для преодоления ограничений ресурсов песочницы. Проще говоря, Cordova действует как переводчик, позволяя вашему гибридному приложению получать доступ к тем же ресурсам, что и собственное приложение.
Наконец, Cordova может создавать виртуальные эмуляторы популярных мобильных платформ, таких как Android или iOS, для тестирования ваших приложений.
Как Cordova и Ionic сочетаются друг с другом
Другие фреймворки
Ionic часто сочетается с другими интерфейсными фреймворками, такими как React и Angular.
React — любимый интерфейсный фреймворк для разработки мобильных приложений. Ionic поддерживает собственную версию React с настройкой, идентичной стандартным приложениям React.
Ionic React использует специфичные для DOM функции React с react-dom и незаметно реализует React Router для маршрутизации и навигации. React Ionic часто используется из-за того, насколько тесно он ведет себя и управляет, как стандартные приложения React.
Angular — это интерфейсный фреймворк, который обычно используется для корпоративных приложений. Он менее удобен для новичков, но Ionic предлагает инструменты и API, призванные помочь разработчикам Angular легко интегрировать эти две технологии.
Ionic 4 и более поздние версии используют официальный стек Angular для построения и маршрутизации, чтобы ваше приложение Angular Ionic идеально сочеталось с другими инструментами, ориентированными на Angular.
Начало работы с Ionic
Теперь, когда у вас есть базовые знания, давайте перейдем к практическому обучению. Сначала мы расскажем, как установить Ionic, а затем перейдем к традиционной программе Hello World.
Installation
Для установки Ionic вам понадобится установленный Node.js. Мы установим версию Ionic для Cordova, которая включает оба программного обеспечения.
Введите следующий код в командную строку.
Подождите, пока команда запустится, и у вас будет все необходимое!
Hello World
Теперь мы сделаем простое HelloWorldприложение, которое покажет вам веревки.
Шаг 1
Сначала создайте папку helloworldдля вашего проекта с помощью следующей команды:
- startсигналы в интерфейс командной строки для создания нового приложения.
- helloworldбудет именем каталога и именем приложения для вашего проекта.
- blankвыбирает встроенный blankшаблон, который содержит одну пустую стартовую страницу.
При появлении запроса, если вы хотите добавить плагины Cordova, введите Nили No.
Шаг 2
Измените свой каталог на helloworldкаталог, который мы только что создали. Это позволит вам вносить изменения в проект.
cd это сокращение от «изменить каталог».
Шаг 3
Откройте helloworldпапку в ваших файлах. Вы найдете коллекцию заранее созданных папок и пустых шаблонов файлов. Открыто src/page/home/home.html. Мы отредактируем этот файл на следующем шаге.
Остальные файлы в этом разделе home.scss- это страница для написания вашего кода CSS и home.ts, где вы можете писать код TypeScript.
Шаг 4
Удалите любой текущий текст в home.htmlфайле и замените его следующим:
Синтаксис этого раздела почти идентичен синтаксису HTML. Наша helloworldстраница в поле называется «Ионный проект». Единственный контент в нашем приложении — это термин «Hello World» внутри h2поля.
Сохраните изменения в файле и закройте home.html.
Шаг 5
Теперь все, что нам нужно сделать, это запустить ваше приложение с помощью следующей команды:
serve запускает приложение в выбранном каталоге.
Когда ваше приложение запустится, введите его localhost:8100в адресную строку, чтобы просмотреть содержимое веб-приложения.
Сделайте своё первое Ionic приложение
Теперь мы создадим полное приложение с Ionicframeworkсайта и исследуем каждую часть.
Затем вам будет предложено создать учетную запись или войти в систему. Затем вам будет предоставлена команда пользовательской установки, используемая для создания программы с предоставленными спецификациями.
Введите, npm installа затем команду custom-install в командную строку.
Затем cd firstappнажмите Enter, чтобы выбрать новый каталог проекта, и введите ionic serve.
firstappТеперь ваш проект будет запущен.
Если вы не хотите создавать файлы на своей стороне, вы можете продолжить, используя zip-файл ниже.
Обзор кода Ionic React
Давайте подробнее рассмотрим код этого приложения.
index.tsx
Откройте index.tsxфайл. Этот файл длинный, но самые важные части находятся вверху.
Строка 1: В верхней части файла вы можете увидеть оператор импорта для библиотек react и react-dom. Каждому приложению необходимо импортировать пространство имен React, чтобы использовать React.
Строка 2: ReactDOMпространство имен предоставляет методы, специфичные для объектной модели HTML-документа, которые должны вызываться из самого верхнего уровня приложения.
Строка 3: AppИмпорт включает определение самого приложения.
Строка 6: При вызове предлагается render()выполнить AppКомпонент и поместить его в контейнер, указанный вторым параметром. Этот контейнер представляет собой HTML-элемент с атрибутом id root, который находится в index.htmlфайле, найденном в общей папке.
index.html
Этот файл содержит множество тегов, управляющих отображением приложения на мобильных устройствах. Ionic уже оптимизировал этот файл, поэтому вам редко придется его изменять. Вместо этого внесите изменения в index.tskфайл.
bodyМетки на линии 25-27 содержит в divпаре с, rootчтобы index.htmlсоединиться с index.tsx.
App.tsx
Этот файл определяет Appкомпонент. Именно здесь начинается код React вашего приложения. Appопределяется как постоянная стрелочная функция типа React.FC. FCявляется сокращением от FunctionComponent.
Эта функция возвращает HTML для определения компонента. Большая часть ионного кода появляется в этой HTML-подобной форме.
Строка 3: возвращаемая разметка. Это все, что находится внутри returnзаявления.
Строка 4: Первое в нем — это файл IonApp. An IonApp- это корневой компонент Ionic, который должен отображаться на всех страницах Ionic-React.
Строка 5: Внутри него IonReactRouter. Это тонкая обертка Ionic вокруг React Router. React Router — это то, что позволяет вам создавать многостраничные приложения с богатыми переходами страниц с веб-сайта с помощью одного htmlфайла, также известного как одностраничное приложение(SPA).
Строка 6: Внутри IonReactRouterнаходится IonSplitPaneкомпонент. Это макет, который обеспечивает боковое меню, которое автоматически сворачивается в гамбургер-менюна небольших экранах.
Строка 7: Внутри IonSplitPaneнаходится Menuкомпонент.
Линия 8: Как непосредственный брат в Menuэто IonRouterOutlet. Здесь появляется содержимое вашей главной страницы. MenuНаходится на левой стороне, а IonRouterOutletдома все остальные приложения.
Строка 9: Внутри есть несколько определенных маршрутов. Думайте о маршруте как об URL-адресе. Учитывая путь, /page/:name, то:nameчасть будет переведена на переменный маршрут под названием «имя».
Строка 9: у componentатрибута есть компонент для загрузки при совпадении маршрута. В данном случае это Pageкомпонент. Точный атрибут означает, что этот маршрут будет соответствовать только в том случае, если URL-адрес начинается с косой черты, за которой следует слово страница, еще одна косая черта, а затем еще одно слово, которое становится «именем» страницы.
Строка 10: Второй маршрут — маршрут по умолчанию. Он просто говорит, что если совпавший URL-адрес представляет собой один символ косой черты, перенаправьте приложение на /page/Inbox.
Page.tsx
Page- еще один компонент, похожий на App. Основное отличие состоит в том, что FunctionComponentэто универсальный тип RouteComponentProps. Это то, что позволяет маршрутизатору передавать эти параметры маршрута.
В этом случае ожидается, что свойства маршрута будут содержать только имя, которое оно передает в стрелочную функцию как соответствие значения.
Читайте также: