Noveo

Наш блог Ionic Framework – обзор инструмента с оглядкой на опыт (часть I)

Ionic Framework – обзор инструмента с оглядкой на опыт (часть I)

Открываем цикл постов от разработчика Noveo Андрея о его опыте работы с фреймворком для кроссплатформенной разработки Ionic.

 

Сейчас фронтенд-разработка развивается с безумной скоростью. Каждую неделю появляются новые фреймворки и библиотеки, а старые теряют былой «хайп» или вовсе «депрекейтятся». В таком бешеном темпе тяжело определиться, что тебе нужно изучить в первую очередь, а что можно отложить на попозже.

Noveo Ionic experience

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

 

Статья будет состоять из нескольких частей:

— Короткий обзор, понимание, зачем оно вообще надо, и сравнение с React Native.

— Обзор UI-библиотеки и встроенных API для доступа к Hardware API.

— Сказ о собранных граблях и стоит ли брать это решение для своего продукта.

I. Ionic React. Обзор

Ionic Framework — это проект с открытым исходным кодом, состоящий из кроссплатформенной UI-библиотеки и встроенных функций для создания iOS, Android, Electron и Progressive Web Apps с использованием JS-фреймворка и стандартных веб-технологий.

 

Разработку можно вести на любом фреймворке, который поддерживается Ionic Framework: React, Angular, Vue.

 

Приложение работает с WebView — специальной имплементацией браузера, «вшитой» в оболочку нативного приложения. WebView предоставляет огромное количество HTML5-API (камеры, сенсоры, GPS, Bluetooth и так далее). Иногда необходимо получить доступ к определенным Hardware API (API — предоставляемые той или иной операционной системой). Это делается через специальный слой Bridge.

I.1 Killer-фича

В современном мире наш продукт может существовать на различных платформах: Web, Desktop, Mobile. Зачастую для того, чтобы поддерживать все три платформы, у нас есть 3-4 команды разработки. Еще грустнее от того, что у каждой такой команды — своя собственная кодовая база, и они тратят время на написание одних и тех же фич 3-4 раза.

 

Тут на сцену выходит Ionic Framework с криком «Hold my beer!» и громким лозунгом «Write once, run anywhere».

 

Разработчики фреймворка обещают нам, что из единой кодовой базы могут быть собраны:

— SPA (Web Application);

— PWA;

— Electron-based приложение для десктопа;

— Native-like приложения для iOS и Android.

 

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

 

Для того, чтобы обеспечить возможность генерирования приложений из единой кодовой базы, у ребят есть свой runtime — Capacitor.

 

Capacitor — это официальная среда выполнения приложения Ionic, которая упрощает развертывание веб-приложений на собственных платформах, таких как iOS, Android и другие.

 

В Ionic уже добавлены все скрипты, которые соберут и разложат билды приложения по нужным папкам. Но без недостатков тоже не обошлось. Данные скрипты производят сборку через нативные IDE для каждой платформы. Таким образом, собрать iOS-билд из-под Windows не выйдет, потому что нужен xCode.

 

В остальном же нет ничего сложного, копируем команды из официального мануала — ТЫК.

I.2 А что насчет React Native?

Внимательный читатель спросит: «А что насчет React Native? Он же прямо сейчас решает те же задачи?»

 

Есть несколько позитивных и негативных отличий между React Native и Ionic React.

 

Начнем с недостатков Ionic React:

— «ненастоящая нативность»: используются WebView, web-технологии, более «медленные» приложения;

— используются стилизованные под нативные UI-компоненты, а не сами нативные UI-компоненты (иногда может быть неудобно).

 

Теперь о плюсах:

+ React-stack под капотом. Если ты знаешь React, то легко можешь за вечер написать свое первое Ionic-приложение, и уже утром у тебя будет готовый Web-app, нативные приложения iOS и Android, а также версии PWA и Electron.

+ Если по каким-то причинам тебе не подходит компонент из нативной UI-библиотеки, ты можешь написать свой или воспользоваться одним из сотен тысяч пакетов. Он легко и без танцев с бубном заведется во всех твоих приложениях.

+ Единая кодовая база. Сокращение стоимости разработки, ускорение доставки фич до пользователя и т.д.

+ Простота онбординга на проект.

Noveo React Native vs Ionic

 

Вместо заключения

 

На первый взгляд Ionic Framework делает очень громкие заявления и обещает нам решить все наши проблемы с мультиплатформенной разработкой, попутно снизив косты и увеличив скорость доставки фич.

 

Это как минимум интересный кандидат для изучения. Советую потыкать их демки (https://stackblitz.com/edit/ionic-react-demo — демка музыкального плеера), чтобы осознать, насколько на этом инструменте удобно писать именно вам.

 

В следующих частях мы посмотрим на UI-библиотеку и API для доступа к hardware-функциональности. Также я поделюсь собственным опытом разработки и списком собранных граблей (порой неочевидных).

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

НазадПредыдущий пост ВпередСледующий пост

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: