Ionic framework. Обзор экосистемы
Ionic framework — один из самых широко обсуждаемых фреймворков. Как гласит официальный сайт, Ionic — это SDK для создания гибридных мобильных приложений, набор CSS и JS компонент, созданный на основе AngularJS, SASS, Apache Cordova.
Посмотрим, что интересного предлагает Ionic для разработчика.
Ionic cli
Наличие Ionic CLI совсем не обязательно, однако это гораздо облегчает разработку приложения. Самые, на наш взгляд, значительные возможности:
отображает в браузере ваше приложение одновременно для iOS и Android платформ
Данная опция в том числе поддерживает live reload.
Данная команда позволяет загрузить ваше приложение в облака для дальнейшего тестирования в Ionic view. Здесь надо остановиться поподробнее.
Ionic View — это мобильное приложение для iOS и Android, с помощью которого можно делиться вашими разрабатываемыми приложениями с заказчиком, тестеровщиками, коллегами. Команда `$ ionic upload` синхронизирует приложение на вашем компьютере с сервером, после чего его можно запустить на телефоне.
Стоит отметить, что сейчас Ionic View находится в стадии beta. В процессе использования на Android, у нас довольно часто происходили непонятные баги — то белая страница без признаков жизни, то приложение и вовсе не запускалось. Как оказалось — не все Cordova плагины поддерживаются в текущей версии Ionic View.
Genymotion
Для личного использования Genymotion бесплатен.
Ionic Creator
В Creator встроены базовые шаблоны страниц, которые упрощают прототипирование. На данный момент шаблоны следующие:
Элементов, которые можно добавлять на страницы, много: кнопки, формы, разделители, HTML/Markdown вставки, картинки и многое другое. Страницы можно связывать между собой, на событие клика кнопки можно вешать переход к другим страницам приложения.
В последнем случае установка выглядит так:
Заявлена возможность тестирования приложений, созданных в Creator, прямо в Ionic View. Однако такой возможности в версии Android мы не обнаружили.
Интересным выглядит генератор тем, с помощью которого можно легко увидеть как будут выглядеть основные элементы Ionic приложения.
Ionic Icons
ng-cordova
Ionic Showcase
В блоге Ionic часто постят обзоры на самые популярные приложения из Ionic Showcase. По сути, это еще одно подтверждение тому, что гибридные приложения занимают свою нишу и стремительно развиваются, а в некоторых случаях абсолютно не уступают нативным приложениям.
AngularJS 2 + Ionic 2
Как уверяют разработчики, работа над Ionic 2 уже ведётся, и после выхода AngularJS 2 Ionic будет полностью его поддерживать. Подробнее об этом можно почитать в этом посте в официальном блоге.
Ionic Material
Ionic Material не конфликтует со стандартными стилями и классами фреймворка Ionic и по заверению разработчика выполнен строго по гайдлайнам Google.
Особенности, которые могут заинтересовать
Split View
Добавить эту возможность можно просто написав директиву expose-aside-when в теге бокового меню:
Так же легко указывать и произвольные значения ширины:
Интеграция с Crosswalk
Наличие Crosswalk позволяет добиться вплоть до 10-кратного увеличения скорости отрисовки HTML/CSS и позволяет увеличить производительность Javascript, при этом увеличивая размер вашего приложение на
Также для разработчика открывается возможность отлаживать приложение с помощью Chrome DevTools.
Добавить Crosswalk в ваше Ionic приложение можно с помощью следующих команд:
Также можно установить конкретную версию:
Pull to refresh
Из кода легко понять, что при свайпе вниз, вызовется функция refresh() в текущем контроллере. Напишем её:
Вот и всё готово. Попробовать и посмотреть код можно здесь.
Разработка мобильных приложений на Ionic Framework
Производительность
Скорость имеет значение. Настолько, что вы точно заметите, когда ее нет. Ionic без проблем будет работать на последних мобильных устройствах. С минимальными манипуляциями DOM, без jQuery и без аппаратного ускорения.
Angular & Ionic
Ionic использует Angular для создания мощного SDK, который отлично подходит для разработки надежных приложений с широкими возможностями.
Ориентированность на нативную разработку
Ionic создан по моделям популярных SDKs для разработки нативных мобильных приложений, что снижает порог вхождения для тех, кто создавал приложения на iOS или Android. Просто адаптируйте ваш код и пропустите его через Cordova.
Красивый дизайн
Ясный, простой и функциональный. Ionic спроектирован так, чтобы хорошо выглядеть на всех мобильных устройствах. Учитывая массу популярных мобильных компонентов, верстку, интерактивные элементы и прекрасную (все еще расширяемую) базовую тему, вы удивитесь, как раньше жили без этого.
Мощный CLI
Простота в освоении
Все, что вам нужно знать — это 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
One codebase. Any platform. Now in Vue. Angular. React.
An open source mobile toolkit for building high quality, cross-platform native and web app experiences. Move faster with a single code base, running everywhere with JavaScript and the Web.
Cross-platform apps. Powered by the Web.
Free and open source, Ionic offers a library of mobile-optimized UI components, gestures, and tools for building fast, highly interactive apps.
Pre-designed UI components
Ionic’s UI components look great on all mobile devices and platforms. Start with pre-made components, typography, and a base theme that adapts to each platform.
Write once, run anywhere
Ionic lets developers to ship apps to the app stores and as a PWA with a single code base. With Adaptive Styling, apps look and feel at home on every platform.
Developer-friendly tooling
Performance obsessed
Fast apps. Out-of-the-box.
Ionic is built to perform and run fast on all of the latest mobile devices. Build blazing fast apps with a small footprint and built-in best practices like hardware accelerated transitions, touch-optimized gestures, pre-rendering, and AOT compiling.
Framework Agnostic
Build with the tech you prefer
We don’t make assumptions about the tech stacks you or your team prefers to build with. That’s why Ionic is engineered to integrate seamlessly with all best frontend frameworks, including Angular, React, Vue, or even no framework at all with vanilla JavaScript.
100+ ui components
Simple, declarative UI Components
Ionic’s components are written in HTML, CSS, and JavaScript, making it easy to build modern, high quality UIs that perform great everywhere.
Native Access
Core native device functionality.
Access native device features with just a little bit of JavaScript. Choose from a rich library of over 120 native device plugins for accessing Camera, Geolocation, Bluetooth, and more, or dive into the full native SDK when you need it. There’s no limit to what you can build.
Global Scale
Built for developers Loved by enterprise
More than 5 Million developers in over 200 countries around the world are using Ionic to power their app development. Join the thousands of global meetups, forums, and events that makes building with Ionic so much fun.
Premier integrations
Yes, you can build with that.
From community plugins to premium supported integrations, Ionic has you covered. Power-up your app workflow with integrations into your favorite stacks.
Loved by some of our favorite people on earth.
I was so inspired when I found Ionic. It fills a gap that’s missing when building for mobile and solves many complexities that otherwise require multiple libraries, keeping your code cleaner. Overall, it just makes mobile development fun and fast, so you can build more!
Ionic makes building cross-platform mobile apps enjoyable. Its integration with Angular is seamless, so it has easily become our go-to for mobile.
Ionic is a shining example of a high-quality framework that takes advantage of Angular’s power and flexibility, enabling developers to build production-ready mobile apps and Progressive Web Apps, in a fraction of the time.
The more I look at Ionic, the more I love what they are doing. Truly. I wish I had a mobile app to build right now.
Ionic dramatically changes the way mobile apps are built. Their integration with Angular means building functionality is now a breeze and it feels near-native. Your developers and your users will thank you.
Start building cross-platform apps today
Ionic is quick to install and it’s easy to get started.
Учебное пособие по Ionic Framework: создайте свое первое кроссплатформенное приложение
Рынок мобильных приложений быстро становится одной из лучших платформ для охвата современных клиентов. Распространенной проблемой, с которой сталкиваются фронтенд-разработчики, является создание пользовательских интерфейсов (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:
Минусы:
Как работает 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для вашего проекта с помощью следующей команды:
При появлении запроса, если вы хотите добавить плагины 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сайта и исследуем каждую часть.
Сначала зайдите в онлайн-конструктор приложений Ionic по адресу ionicframework.com/start. Назовите свой проект firstapp, выберите цвет темы и выберите menuопцию. Эти параметры определяют начальную точку вашего Ionic-проекта. Выберите React в качестве своего фреймворка.
Затем вам будет предложено создать учетную запись или войти в систему. Затем вам будет предоставлена команда пользовательской установки, используемая для создания программы с предоставленными спецификациями.
Введите, npm installа затем команду custom-install в командную строку.
Затем cd firstappнажмите Enter, чтобы выбрать новый каталог проекта, и введите ionic serve.
firstappТеперь ваш проект будет запущен.
Если вы не хотите создавать файлы на своей стороне, вы можете продолжить, используя zip-файл ниже.
Обзор кода Ionic React
Давайте подробнее рассмотрим код этого приложения.
Ionic 2 vs React Native: сравнение фреймворков для создания корпоративных мобильных приложений
Мобильный доступ к данным ускоряет выполнения бизнес-процессов компании. Мобильное согласование служебных записок или утверждение отпусков уже привычная составляющая работы в корпорациях. Мобильные устройства есть у каждого сотрудника, таким образом компания может использовать эти устройства без инвестиций в них. Большой зоопарк мобильных устройств необходимо учитывать во время разработки корпоративного мобильного приложения: оно должно работать и иметь одинаковый вид на всех устройствах.
В этой публикации мы рассматриваем создание таких корпоративных мобильных приложений с использованием различных JavaScript фреймворков.
Корпоративные мобильные приложения обычно распространяются через внутренние магазины приложений компании. Это дает возможность контролировать доступ к приложениям внутри компании, а также принудительно централизованно устанавливать обновление приложений. Для разработки и доставки корпоративных мобильных приложений необходима соответствующая инфраструктура, известная как Mobile Enterprise Application Platform (MEAP).
Для MEAP проведена аналитика ведущими компаниями Gartner и Forrester и выполнено сравнение существующих платформ и вендоров (Gartner Magic Quandrant и Forrester Wave соответственно). Все лидеры указанных сравнений рассматривают возможность создания нативных и гибридных приложений. Нативные приложение пишутся с использованием языков программирования конкретной платформы (swift или Objective C для iOS, Java для Android). Гибридные мобильные приложение пишутся на JavaScript с использованием различных библиотек и фреймворков.
Использование JavaScript фреймворков позволяет создавать новые мобильные приложения существующей командой front-end разработки. Для компании это означает, что одна и та же команда может выполнять разные задачи — разработка сайтов, разработка мобильных приложений.
Среди фреймворков-лидеров можно выделить два наиболее популярных фреймворка: Ionic 2 и React Native. Далее рассматривается каждый из них по отдельности, а также выполняется их сравнение. Сравнение выполнялось только для двух операционных систем: iOS и Android.
Большинство корпоративных приложений, которые используются на мобильных, весьма простые. Сотруднику предоставляется минимальное количество данных, необходимых для принятия решения. Другой аспект таких приложений — это необходимость вносить данные во время работы. С учетом ограниченности мобильных устройств (по форм-фактору) формы для ввода данных также не будут большими. Эти нюансы учитывались во время оценки созданных мобильных приложений (и их сравнение с нативными мобильными приложениями, написанными на родных для каждой платформы языках). От корпоративного мобильного приложения не требуется сверх-большая производительность (такая как в приложениях с миллионами пользователей от Facebook), необходимо, чтобы такое приложение не «тормозило» на относительно простых формах.
Ionic 2
Ionic Framework — это фреймворк для создания гибридных мобильных приложений. В его состав входит набор JavaScript и CSS компонент, созданных на основе Angular 2, SASS и Apache Cordova. История этого SDK начинается в 2013 году, когда компания Drifty Co. решила создать собственную инфраструктуру для написания гибридных приложений, которая будет ориентирована на производительность и будет построена с использованием современных веб-стандартов. Релиз Ionic 1 – состоялся в мае 2015 года. В 2016 году была выпущена версия 2. Основное отличия второго релиза от первого – это переход с Angular 1.x на Angular 2.х.
По своей сути, Ionic Framework — это дополнение над очень популярным фреймворком Apache Cordova, но со своим мощным CLI (Command Line Interface) и объемной документацией. Следуя принципам Apache Cordova, приложения на Ionic Framework — это гибридные HTML приложения. Такие приложения на телефоне выполняются в специальной оболочке (UIWebView для iOS и WebView для Android), которая позволяет показывать HTML и выполнять JavaScript. Соответственно при работе в приложении пользователь работает как бы в веб-браузере.
Архитектура приложения на Apache Cordova (источник)
Apache Cordova является своеобразной прослойкой между пользовательским интерфейсом и ресурсами устройства. Какие-либо виджеты пользовательского интерфейса или MV* (Model-View) фреймворков не входят в его состав. Если необходимо использовать UI-виджеты и/или MV* фреймворк, то нужно выбрать и включить их в приложение самостоятельно, как ресурсы третьей стороны. Ionic 2 — это один из фреймворков, который предоставляет UI виджеты. MVС модель для него предоставляет Angular 2.
Нативные функции телефона (например, камера, хранилище ключей, GPS координаты) недоступны из веб-браузера. Поэтому для работы с ними используются плагины Apache Cordova. Кроме официальных плагинов есть ряд сторонних открытых плагинов.
React Native
React Native — это JavaScript фреймворк, разработанный компанией Facebook для создания нативных мобильных приложений с использованием JavaScript. История React Native началась в 2013 году с внутреннего проекта хакатона компании Facebook. Впервые публично о React Native рассказали на React.js Conf в январе 2015 года, уже в марте 2015 на F8 объявили, что React Native доступен на GitHub. Фреймворк построен на основе библиотеки ReactJS. React Native использует JavaScript API поверх нативных компонентов. При создании приложения, пишется JavaScript код, который работает с нативными компонентами операционной системы. То есть, React Native использует те же самые фундаментальные стандартные блоки UI что и обычные приложения iOS и Android, не используя при этом ни браузер, ни WebView/UIWebView.
Архитектура приложения на React Native (источник)
Приложение на React Native использует отдельный поток для выполнения JavaScript в устройстве. Этот поток взаимодействует с нативным кодом. Важно отметить, что нативные компоненты (включая элементы пользовательского интерфейса) отличаются для разных операционных систем. И, соответственно, для каждой операционной системы необходимо создавать свои «bridges» между JavaScript кодом и этими компонентами. Ряд таких компонент предоставляет Facebook, а также существует много компонент в свободном доступе, разработанных сообществом.
Ionic 2 vs React Native
Ionic 2 и React Native позволяют создавать мобильные приложения. Принципиальная разница между этими фреймворками заключает в типе мобильного приложения, которое создается с использованием того или иного фреймворка. Ionic 2 позволяет создавать гибридное мобильное приложение, которое осуществляет рендеринг в WebView/UIWebView, при необходимости использовать API платформы нужно использовать дополнительные плагины. React Native позволяет создавать нативное мобильное приложение, используя фундаментальные стандартные блоки UI (как и обычные приложения iOS и Android, написанные на родном языке — Objective-C/Swift и Java соответственно). В приложении на React Native используются определенные шаблоны заданные самой платформой.
Выполнение кода и связь с нативным API в приложениях, написанных на Ionic 2 (слева) и React Native (справа)
Схема показывает составляющие кода приложения и вызов нативного API из приложений. В случае Ionic 2 отрисовку интерфейса пользователя выполняет браузер, в для React Native — непосредственно операционная система. Такое различие проявляется в более привычной прорисовке компонент и более гладкой анимаций приложений на React Native. Пользовательский интерфейс React Native приложений будет ближе к другим приложениям платформы. Ввиду того, что приложение, написанное на React Native, компилируется в нативный для платформы язык, не нужно использовать дополнительные промежуточные компоненты (например, Cordova), часто это дает лучшую производительность приложений. Проблемы с производительностью — одна из проблем Ionic 2.
При возникновении нативного события фреймворки по-разному его обрабатывают. Ionic 2 блокирует поток и передает управление на JavaScript-код, ожидая его инструкций. React Native выполняет JavaScript в отдельном фоновом потоке, взаимодействуя с главным потоком асинхронно.
Для создание приложения на Ionic 2 используются фреймворки Angular 2 и Apache Cordova. Приложение можно писать на JavaScript или любом другом языке, который транслируется в JavaScript. Самым популярным типизированным надмножеством JS является TypeScript, представленный Microsoft в 2012 году и позиционируемый как средство разработки веб-приложений, расширяющее возможности JavaScript, на нем же и реализовано большинство примеров в документации Angular 2. В Angular 2 реализована шаблон проектирования внедрения зависимостей (software design pattern Dependency Injection), который состоит из 3х элементов:
Для того, чтобы начать писать приложение на React Native нужно познакомиться с ReactJS, JSX. Также для работы рекомендуется изучить Redux и EcmaScript 2015 для ускорения разработки, однако знание этих компонент опционально.
Также можно использовать Flow — это статический анализатор кода и набор синтаксических конструкций, для прямого указания типа переменной. Flow умеет вычислять тип переменной, без внесения изменений в код (в отличии от TypeScript) что позволяет начать использовать его уже сейчас в любом проекте. Есть возможность самостоятельно указывать типы в стиле TypeScript.
В процессе написания приложения на React Native вы создаете компоненты, которые являются самодостаточными, каждый компонент отвечает за изменения в своем состоянии (state). Существуют stateless и stateful компоненты. Компонентам, которые не имеют состояния, можно передавать свойства (props — устанавливаются родительским компонентом и являются фиксированными в течение всего жизненного цикла компонента).
Debug
В Ionic 2 есть опция Live Reload. Она позволяет вносить изменения в код и видеть эти изменения на устройстве/эмуляторе без пересборки. Однако не всегда удается ее использовать. После запуска в связи с работой в веб-браузере при использовании http запросов, сталкиваемся с проблемой CORS.
Для отладки приложений на React Native возможно использовать Chrome Developer Tools. Если же разработка ведется на устройствах от Apple, то возможно использовать веб-инспектор Safari для эмулятора или устройства iOS. Для просмотра элементов view можно выбрать опцию «Show inspector» в Developer Menu эмулятора/устройства. При этом можно увидеть стили элементов, но менять их возможно только в IDE (тут не работает метод быстрого редактирования стилей в developer tools). Но используя опции LiveReload или HotReload уже через несколько секунд сохраненные изменения будут видны на эмуляторе/устройстве. Если внесены глобальные изменения в код, лучше пересобрать проект. Так же в Developer Menu есть вкладка Network, которая позволяет отслеживать HTTP запросы. Тут можно увидеть тип запроса, метод, url и прочее. После дебага в браузере это непривычно. Для дебага также можно использовать IDE для каждой из платформ – Android Studio и XСode, с помощью которых можно детально изучить все логи и работу приложения (ресурсоемкость, скорость работы и т.д).
Пример дебага приложения, созданного на React Native, на смартфоне iPhone 6 (iOS 10.2)
Сборка приложения для дебага написанного на Ionic 2, в браузере, более быстрая чем сборка приложения на на эмуляторе при использовании React Native. Стоит также отметить что старт готового приложения Ionic 2 на устройстве, более медленный чем в подобного приложения на React Native.
Таким образом, отладка приложения на Ionic 2 более быстрая и знакомая для front-end разработчиков.
Стили
В Ionic 2 пишется HTML5 код и используется привычный front-end разработчику SASS. Тут нет ограничений на размерные единицы, используется препроцессор SASS, также можно применить flex разметку. Часто приходилось переопределять переменные Ionic 2. Но иногда этого не хватало, нужно было изучать итоговый html в браузере, смотреть какие дополнительные элементы были сгенерированы и какие у них стили, чтоб понимать, что и где переопределить или дописать. Также ощутимая разница была в отображении элементов на разных платформах. То, что выглядело хорошо на iOS устройствах иногда ломало стили на Android-устройствах, нужно было находить компромиссы.
В React Native создание стилей отличается от привычного для frontend разработчика. Тут используется css-подробный синтаксис, который пишется в виде js объекта. Затем этот объект со «стилями» преобразовывается в понятные для платформы указания по расположению и раскраске элементов.
Верстка выполняется абсолютными значениями, никаких относительных величин. Большим плюсом является использование flex-подобной разметки при стилизации компонентов, что позволяет изменять размеры компонента в зависимости от размеров контейнера. Если указать » flex: 1 «, то компонент будет занимать все доступное пространство. Если компонентов несколько, то они равномерно распределяют между собой все доступное пространство. Это минимизирует затраченное время на стили, так как такой подход позволит отображать элементы пропорционально размеру экрана. И на телефоне и на планшете получается одинаковый результат, ничего «не уезжает» и «не ползет». Практически всегда для приложений на RN стили валидны для обеих платформ. Если стили все же перебиваются, используется привязка к платформе. Например, в нашем приложение была ситуация, когда нужно было использовать zIndex — на iOS все работало отлично, но на Android это свойство (которое применялось к компоненту Header), способствовало некорректному отображению других элементов интерфейса (Tabs).
Стилизация в Ionic 2 занимала больше времени, чем в React Native. Но дизайн нашего приложения был достаточно простым и минималистичным. Возможно, при разработке сложных дизайнерских решений, имея доступ к полноценному css, Ionic 2 выиграл бы по времени и удобству.
Размеры приложений
Для обоих фреймворков существуют «пустые» приложения – это каркасы приложений с минимальным кодом. Такие приложения генерируются с использованием CLI:
| Ionic 2 | React Native | ||
|---|---|---|---|
| Приложение в режиме debug | Приложение в режиме release | Приложение в режиме debug | Приложение в режиме release |
| 18.3 Mb | 17.9 Mb | 4.8 Mb | 4.6 Mb |
| 5.54 Mb | 4.0 Mb | 32.38 Mb | 16.35 Mb |
Приложения на различных фреймворках имеют различный размер на различных платформах. Ionic 2 выигрывает на Android, а React Native – на iOS.
Популярность и активность фреймворков
При сравнении популярности фреймворков нужно учитывать, что React Native более молодая технология. Изначально у React Native была поддержка только iOS. Поддержка Android в React Native появилась только в августе 2015 года, а Ionic Framework на тот момент уже больше двух лет развивался (хотя и имел версию 1.0) и обладал поддержкой всех популярных платформ.
Популярность и активность сравнивали по двум наиболее популярным ресурсам: stackoverflow и github.
Для Ionic Framework на stackoverflow существует около 60000 результатов по запросам Ionic и Ionic 2. При рассмотрении сатистики по репозиторию Github важно учесть, что в середине 2016 года код Ionic 2 мигрировал в репозиторий Ionic. В репозиторий Ionic более 200 участников сделали порядка 6000 коммитов в 15-ти ветках с 88-ю релизами. В репозитории проекта находится
700 открытых вопросов и
Для React Native на stackoverflow существует около 25000 результатов по запросу react-native. Статистика по репозиторию Github React Native показыват большую активность этого фреймворка по сравнению с Ionic 2: более 1200 участников сделали порядка 10000 коммитов в 60-ти ветках с 160-ю релизами. В репозитории проекта находится
1100 открытых вопросов и
Статистику использования фреймворков возможно посмотреть на открытых ресурсах (например, на stackshare.io). По статистике NPMTrends (статистика по скачиванию npm пакетов) можно увидеть, что за последний год Ionic 2 уверенно лидирует по скачиваниям, но в последние несколько месяцев React Native вырывается вперед.
Статистика по скачиванию npm пакетов
На сайтах фреймворков также есть примеры уже готовых приложений: приложения на Ionic 2, приложения на React Native. Для обоих фреймворков существует большое количество сторонних Starter Kit, которые помогут создать приложение с готовой структурой (Starter Kits Ionic Framework, Starter Kits React Native).
Разработка и использование фреймворка React Native в последнее время более активные.
Ionic 2 vs React Native: сравнение на примере
Задача сравнения Ionic 2 и React Native на практике была поставлена перед командой front-end разработчиков.
Приложения работы с бизнес-процессами на Camunda BPM
Для выбора фреймворка, который в дальнейшем мы будем использовать для написания мобильных приложений, мы написали мобильный клиент для Camunda BPM. Camunda BPM – это BPMS (Business Process Management System), в которой наша команда backend разработчиков реализовала ряд бизнес-процессов.
Для реализации в мобильном клиенте мы выбрали один бизнес-процесс — процесс «Заявка на технику». Этот бизнес-процесс состоит из нескольких шагов: создание заявки, утверждение различными ролями (руководителем департамента, системным администратором, техническим департаментом, бухгалтерией, заместителем генерального директора), непосредственно выдача техники. Во время выполнения бизнес-процесса заявка может вернутся инициатору на редактирование. Некоторые из шагов утверждения назначаются на группу специалистов.
Диаграмма бизнес-процесса «Заявка на технику»
Форма, с которой работает пользователь, зависит от состояния заявки и прав пользователя. В форму возможно было вносить только текстовые данные. Некоторые формы динамические, например, поле «комментарий» отображается в зависимости от выбранного пользователем действия (Approve/Decline).
В приложении пользователь работает таким образом:
Сравнения готовых приложений
Во время тестирования нашего приложения мы сравнивали скорость рендеринга страницы в зависимости от фреймворка и платформы. Для этого в каждом проекте была создана дополнительная тестовая страница. Данные для отрисовки были сгенерированы в цикле без обращения к серверу. По этим данным создавалось 1000 элементов «Card», время отрисовки которых замерялись. Компонент «Card» eпрощенно его можно представить таким html:
У каждого компонента (актуально для обоих фреймворком), есть жизненный цикл (lifecycle): компонент будет примонтирован, компонент отрисовался, компонент будет удален и так далее. У всех этих фаз есть методы, так называемые lifecycle-methods, именно их мы и использовали для проведения тестов. Тестирование проводилось с использованием методов time() и timeEnd() объекта Console.
Для проекта на React Native метод time() вызвался в componentWillMount (этот метод вызывается только один раз, прежде чем рендеринг происходит в первый раз), а метод timeEnd() вызвался в componentDidMount (этот метод вызывается только один раз, после первого рендеринга).
Для проекта на Ionic 2 метод time() вызвался в constructor (первое событие жизненного цикла, которое запускается при создании страницы), а метод timeEnd() вызывался в ionViewDidEnter (сообщает о том, что все хорошо и что страница полностью загружена и полностью вступила в поле зрения, анимация перехода вместе с любой внутренней настройкой завершена).
Тестирование проводилось на эмуляторе и на устройстве. Тестирование для iOS устройств — на эмуляторе iPhone SE (iOS 10.2), на устройстве — iPhone SE (iOS 10.2.1); для Android устройств — на эмуляторе Asus Nexus 7 (Android 6), на устройстве — Asus Nexus 7 (Android 6.0.1). В таблице представленно среднее время отрисовки 1000 элементов «Сard» в миллисекундах.
| Симулятор iPhone SE | iPhone SE | Симулятор Nexus 7 | Asus Nexus 7 |
|---|---|---|---|
| 5354.6 — 5272.5 | 5663.1 — 5859.5 | 1401.3 — 1750.6 | 7040.3 — 9385.4 |
| 36.1 — 47.6 | 32.5 — 35.2 | 45.4 — 56.1 | 44.1 — 52.3 |
Непосредственно для нашего приложения мы провели сравнение использования CPU и памяти для устройств iPhone SE (iOS 10.2.1) и Moto Z Play (Android 7.0).
Использование CPU
Использование памяти
Ionic 2 уступает React Native почти по всем тестируемым параметрам, кроме использования памяти на Android (особенно интересен тест времени загрузки приложения).
Как и в случае «пустых» мобильных приложений, готовые мобильные приложения на различных платформах отличаются в несколько раз.
| Ionic 2 | React Native | ||
|---|---|---|---|
| Приложение в режиме debug | Приложение в режиме release | Приложение в режиме debug | Приложение в режиме release |
| 17.5 Mb | 17.4 Mb | 6.6 Mb | 6 Mb |
| 6.78 Mb | 4.6 Mb | 33.64 Mb | 16.79 Mb |
Ionic 2 по использованию CPU и размеру приложения выигрывает на Android. React Native по тем же параметрам – на iOS.
Выводы
Корпоративные приложения для мобильных устройств, созданные с использованием JavaScript, заняли свою нишу. Скорость работы таких приложений достаточна, по сравнению с приложениями, написанными на «родных» языках платформ. В целом нельзя сказать, что какой-то фреймворк лучше, а какой-то хуже. Они просто разные. Выбор зависит от поставленных задач, конечной цели и многих других факторов. В целом можно рекомендовать использовать Ionic 2 для быстрой разработки прототипов мобильных приложений, а React Native — для полноценной разработки готовых решений. Ниже представлен список преимуществ и недостатков каждого фреймворка, основанный на наших впечатлениях использования Ionic 2 и React Native.
Преимущества Ionic 2:
