Що таке 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. Це в той же час і своєрідний мінус, оскільки застосунки будуть повільнішими і менш гнучкими, ніж нативні. 

Загалом вирішуйте самі, але спробувати точно варто 🙂