Ionic framework. Огляд екосистеми


Ionic framework — один з найбільш широко обговорюваних фреймворків. Як свідчить офіційний сайт, Ionic — це SDK для створення гібридних мобільних додатків, набір CSS і JS компонент, створений на основі AngularJS, SASS, Apache Cordova.

На момент написання статті репозиторій Ionic налічує 15300 зірочок, а сума інвестицій у компанію Drifty, чиїм продуктом є Ionic, вже досягла $3.7 мільйона.

Подивимося, що цікавого пропонує Ionic для розробника.

Ionic cli

По суті це обгортка над Cordova CLI, надає додаткові можливості:
  • створення базової програми з вибором шаблонів (наприклад додаток з боковим меню, додаток з табами, картами Google Maps, пусте додаток);
  • монтаж і запуск в емуляторі, на реальному пристрої, в браузері;
  • live reload в браузері і на пристрої
  • генерацію іконок, сплешскринов та ін


Наявність Ionic CLI зовсім не обов'язково, проте це значно полегшує розробку програми. Найбільш, на наш погляд, значні можливості:

$ ionic resources

Дана команда дозволяє з вихідних файлів (.psd .png .ai) згенерувати іконки всіх розмірів, сплешскрин під цільові платформи. Для цього достатньо мати вихідну іконку розміром не менше 192×192px, і вихідну картинку для сплешскрина розміром не менше 2208×2208px, підготовлену за спеціальним PSD шаблон.

$ ionic serve --lab


відображає в браузері ваш додаток для iOS і Android платформ



Дана опція в тому числі підтримує live reload.

$ ionic upload


Дана команда дозволяє завантажити ваш додаток в хмару для подальшого тестування Ionic view. Тут треба зупинитися детальніше.


Ionic View — це мобільний додаток для iOS і Чоловічий, за допомогою якого можна ділитися вашими розробляються додатками з замовником, тестеровщиками, колегами. Команда `$ ionic upload` синхронізує додаток на вашому комп'ютері з сервером, після чого його можна запустити на телефоні.

Ось так виглядає Ionic View на девайсах

Варто відзначити, що зараз Ionic View знаходиться в стадії beta. У процесі використання на Android, у нас досить часто відбувалися незрозумілі баги — біла сторінка (без ознак життя, то додаток і зовсім не запускалося. Як виявилося — не всі Cordova плагіни підтримуються у поточній версії Ionic View.

З допомогою команди
`$ ionic share <email>`
можна «поділитися» з вашим додатком іншим обліковим записом, а якщо на цей email не зареєстрований аккаунт, то буде надіслано запрошення для реєстрації.

Ionic Box



IonicBox — це збірка Vagrant для розробки на Ionic. У віртуальній машині (Ubuntu 14.04) встановлені Node.js, Git, Java SDK 7, Apache Ant, Android SDK Cordova, Ionic.
Для найбільш швидкого старту розробки потрібно зайти в папку з вашим додатком і виконати:
$ vagrant init drifty/ionic-android
$ vagrant up

При цьому скочується вже сконфігурований 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 інтерфейсу програми. З недавніх пір він став публічним, і увійти або зареєструватися можна тут.

У Creator вбудовані базові шаблони сторінок, які спрощують прототипування. На даний момент шаблони наступні:

Елементів, які можна додавати на сторінки, багато: кнопки, форми, роздільники, HTML/Markdown вставки, картинки та багато іншого. Сторінки можна зв'язувати між собою, на подію кліка кнопки можна вішати перехід до інших сторінок додатку.

Існує можливість експорту програми. Тут є опції — це

  • або HTML, який можна скопіювати прямо з модального вікна
  • або ZIP архів з файлами
  • або варіант установки через Ionic CLI


В останньому випадку установка виглядає так:

$ ionic start [appName] creator:%your_unique_hash%


Заявлена можливість тестування додатків, створених у 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 Showcase — це набір додатків, написаних на Ionic професіоналами і не тільки. Є можливість надіслати і свою програму.

блозі 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
в тезі бічного меню:

<ion-side-menus>
<!-- Center content -->
<ion-side-menu-content>
</ion-side-menu-content>

<!-- Left menu -->
<ion-side-menu expose-aside-when="large">
</ion-side-menu>
</ion-side-menus>


Так само легко вказувати і довільні значення ширини:
<ion-side-menu expose-aside-when=" min-width:750px) and (max-width:1200 px)"




Інтеграція з Crosswalk
Crosswalk — це опенсорсний продукт, що дозволяє на старих версіях Android 4.0-4.3) використовувати не вбудований WebView, а Chrome WebView, вказуючи потрібну версію.

Наявність Crosswalk дозволяє домогтися аж до 10-кратного збільшення швидкості відтворення HTML/CSS і дозволяє збільшити продуктивність Javascript, при цьому збільшуючи розмір вашого додаток на ~10-15 МБ.

Також для розробника відкривається можливість налагоджувати додаток з допомогою Chrome DevTools.
Додати Crosswalk в ваше Ionic додаток можна з допомогою наступних команд:
$ ionic browser add crosswalk
$ ionic run android


Також можна встановити конкретну версію:
$ ionic browser add crosswalk@11.40.277.7




Pull to refresh


Додати можливість оновлення вмісту свайпу вниз з допомогою Ionic займе у вас не більше 7-10 хвилин. Ось приклад з реального програми — необхідно додати pull-to-refresh функціональність до списку завдань. Спочатку треба змінити HTML, додавши в існуючий код тег
<ion-refresher>
:

<ion-content class="has-header">
<ion-refresher pulling-text="Pull to refresh..." on-refresh="refresh()"></ion-refresher>

<ion-list class="todos" show-delete="false" can-swipe="true">
...
висновок список завдань
...
</ion-list>
</ion-content>


З коду легко зрозуміти, що при свайпе вниз, викликається функція refresh() в поточному контролері. Напишемо її:

$scope.refresh = function() {
Task.get().then(function (tasks) {
$scope.tasks = tasks;
})
.finally(function() {
// зупиняємо іконку завантаження
$scope.$broadcast('scroll.refreshComplete');
});
};


Ось і все готово. Спробувати і подивитися код тут.

Наостанок, що можна почитати і подивитися Ionic

Один з найбільш живих і цікавих блогів Ionic:
Зантересовал вас Ionic?

/>
/>


<input type=«radio» id=«vv66115»
class=«radio js-field-data»
name=«variant[]»
value=«66115» />
Так, цікаво, але пробувати не буду
<input type=«radio» id=«vv66117»
class=«radio js-field-data»
name=«variant[]»
value=«66117» />
Так, цікаво, обов'язково спробую
<input type=«radio» id=«vv66119»
class=«radio js-field-data»
name=«variant[]»
value=«66119» />
Ні, довіряю тільки нативним мобільним додаткам

Проголосувало 112 осіб. Утрималося 22 людини.


Тільки зареєстровані користувачі можуть брати участь в опитуванні. Увійдіть, будь ласка.


Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.