Фреймворки Cordova: Ionic против Framework7

В наши дни веб-разработчики правят миром. JavaScript используется везде, где можно программировать. Среди этих областей разработка мобильных приложений была одним из первых способов расширения: около десяти лет назад PhoneGap разрешил установку приложений HTML и JavaScript для iOS и Android.

С тех пор у технологии были свои взлеты и падения: несмотря на простоту разработки, эти приложения явно сильно отличались от нативных приложений. Ванильный HTML и браузерный JavaScript были нацелены на браузеры, и у них не было возможности безупречно мигрировать в эту новую область.

На сегодняшний день основными проблемами остаются:

• Сложности с соблюдением нативного дизайна и анимации
• Сложные эффекты перехода между экранами
• Обработка сенсорных событий
• Производительность в больших списках
• Позиционирование фиксированных элементов
• Адаптация под разные размеры экрана
• Расположение собственных элементов управления (например, строка состояния iOS)
• Адаптация к различным мобильным браузерам

Зачем использовать фреймворк для приложений Cordova?

Технология Cordova часто недооценивается из-за приложений, которые имеют вышеуказанные проблемы. Фреймворки стремятся компенсировать их и максимально приблизить HTML-приложения к нативным приложениям как по дизайну, так и по производительности.

Давайте рассмотрим пару примеров гибридных приложений. Они созданы с использованием двух наиболее успешных на данный момент фреймворков — помимо пользовательского интерфейса Onsen — которые предназначены для облегчения расширения веб-разработчиков в современном мире: Framework7 и Ionic.

О ионном фреймворке

Ionic был разработан Drifty Co. в 2012 году и основан на Angular. С тех пор он находится в активной разработке, получает значительные инвестиции и сильное сообщество разработчиков. Официальный сайт утверждает, что на его основе были разработаны миллионы приложений.

На момент написания этой статьи самой последней версией является Ionic 3, основанная на Angular 5. Ionic 4, нацеленный на гибкость и независимость от Angular, находится в ранней бета-версии.

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

Ионный интерфейс командной строки

Интерфейс командной строки Ionic используется для интерактивной инициализации проекта (т. е. с помощью мастера), создания страниц и компонентов и запуска сервера разработки, который позволяет создавать приложения на ходу и перезагружать их в режиме реального времени. Он также обеспечивает интеграцию с облачными сервисами Ionic.

Лаборатория и DevApp

Lab — крайне полезный мини-сервис, позволяющий имитировать работу приложения на разных платформах в браузере разработчика Ionic. DevApp помогает быстро развернуть приложение на реальном устройстве.

Упаковка, развертывание и мониторинг

Ionic поставляется с набором веб-сервисов, которые упрощают и ускоряют создание, отладку, тестирование и обновление приложений для тестировщиков и пользователей.

Однако планы Ionic часто меняются. Некоторые ранее существовавшие сервисы, такие как Auth, Push, Analytics и View, были закрыты, что вызвало возмущение подписчиков.

Создатель

Это графический редактор Ionic с функцией перетаскивания для разработки функциональных интерфейсов.

О фреймворке7

Этот фреймворк был разработан в 2014 году российской студией iDangero. В конечном итоге над проектом работал один разработчик, не считая нескольких второстепенных участников репозитория GitHub.

Изначально Framework7 состоял из набора компонентов пользовательского интерфейса в стиле недавно вышедшей iOS 7, от которой и получил свое название. Позже была добавлена ​​тема для Android, и обе темы были обновлены для последней версии iOS и Material Design.

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

Поддержка Framework7 и примеры использования Vue.js существуют с версии v1, а v3 также поддерживает React. Именно это может позволить проекту составить серьезную конкуренцию более популярному Ionic, который предлагает только Angular и TypeScript.

Установка и первый запуск

ионный

Чтобы начать работу с Ionic, установите его с помощью NPM:

 npm install -g ionic

Затем выберите шаблон будущего приложения. Официальный веб-сайт Ionic предлагает несколько шаблонов, или вы можете выбрать пустой шаблон для создания приложения с нуля с помощью ionic start myApp blank .

Давайте выберем простой дизайн. Выполните следующую команду:

 ionic start Todo tabs

Ответьте «Да» , когда установщик спросит: «Хотите ли вы интегрировать свое новое приложение с Cordova для нативных iOS и Android?» Это автоматически интегрирует приложение с Cordova и подготовит его к развертыванию на мобильных платформах.

На следующем шаге установщик предложит нам подключить Ionic Pro SDK. Ответьте «Нет» пока, чтобы не усложнять пример.

Установите дополнительный пакет @ionic/lab , чтобы получить удобный интерфейс отладки — имитацию устройств iOS, Android и Windows в браузере:

 cd Todo npm i --save-dev @ionic/lab

Теперь вы можете запустить приложение в режиме отладки. Это позволяет разрабатывать и отлаживать приложение в режиме реального времени в веб-браузере:

 ionic lab

В результате вы получите несколько полезных адресов:

Служба отладки Ionic Lab запускается на порту 8200. Само приложение работает на порту 8100, туда и ведет ссылка Open fullscreen от Ionic Lab. Окно браузера с работающей Ionic Lab откроется автоматически.

Дополнительно Ionic предоставляет адрес приложения в локальной сети . Это крайне полезно, так как позволяет открывать приложение в браузере мобильного устройства, пока устройство находится в локальной сети (например, по Wi-Fi). Кроме того, вы можете использовать кнопку « Добавить на главный экран» , чтобы снова открыть приложение в полноэкранном режиме. Это самый быстрый способ протестировать ваше приложение на устройстве.

Другой способ — приложение Ionic DevApp, которое устанавливается на мобильное устройство и обеспечивает доступ к приложению через локальную сеть. Он предлагает поддержку плагинов (Ionic Native) для доступа к собственным функциям устройства и отображения журналов.

Фреймворк7

Инструменты разработки F7 менее продвинуты, чем Ionic, а CLI автоматической инициализации не задокументирован. Однако на официальном сайте есть несколько репозиториев GitHub с шаблонными проектами, которые помогут вам начать разработку.

Подобно шаблону Tabs в Ionic, F7 предлагает Tabbed Views , но мы будем использовать более функциональный шаблон, интегрирующий Framework7 с React. Поддержка React была добавлена ​​в v3. Для этого клонируйте репозиторий шаблонов:

 git clone https://github.com/framework7io/framework7-template-react.git Todo

Перейдите в папку проекта, выберите зависимости и запустите процесс:

 cd Todo npm install npm start

Результаты выполнения аналогичны Ionic: вы получаете локальную ссылку и ссылку внутри вашей сети для мгновенного доступа с реального устройства:

Теперь вы можете открыть http://localhost:3000/ в браузере. Framework7 не включает встроенные эмуляторы устройств, поэтому давайте воспользуемся режимом устройства Chrome DevTools, чтобы получить аналогичный результат:

Как видите, Framework7 похож на Ionic тем, что в качестве двух стандартных тем у него есть iOS и Material Design. Тема выбирается в зависимости от платформы.

К сожалению, в отличие от аналогичного шаблона с поддержкой Vue.js в официальных шаблонах React, Webpack еще не реализован и это не позволяет нам использовать горячую замену модулей для быстрого обновления приложений без перезагрузки страницы. Тем не менее, вы можете использовать функцию динамической перезагрузки по умолчанию, которая перезагружает страницу всякий раз, когда вы меняете исходный код.

Настройка Кордовы

Для установки приложений на устройства и эмуляторы с Cordova необходимо скачать и настроить средства разработки для iOS и Android, а также Cordova CLI. Подробнее об этом можно прочитать в нашей предыдущей статье и на официальном сайте Cordova в разделах «Руководство по платформе iOS» и «Руководство по платформе Android».

ионный

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

Несмотря на то, что вы принимаете интеграцию для iOS и Android, а Ionic подготавливает необходимые настройки в файле config.xml и ресурсы в папке resources , вам все равно нужно подключить обе платформы к приложению с Cordova:

 cordova platform add ios cordova platform add android

Теперь вы можете запускать приложение Cordova в «настоящих» эмуляторах, устанавливать его на мобильное устройство и даже отправлять в App Store и Google Play.

Следующая команда устанавливает приложение на ваше устройство iOS, если оно подключено через USB. В противном случае приложение будет установлено на iOS Simulator.

 cordova run ios

Скорее всего, Xcode Command Line Tools сообщит вам о необходимости установки сертификатов разработчика. Вам нужно будет открыть проект в Xcode и выполнить необходимые действия. Это нужно сделать только один раз, после чего вы сможете запускать приложение с помощью Cordova CLI.

Иногда iOS Simulator не запускается автоматически. В этом случае запустите его вручную, например через Spotlight.

Эмулятор Android можно запустить аналогичным образом:

 cordova run android 

Обратите внимание, что команда cordova run запускает и устанавливает уже скомпилированное приложение, которое не использует сервер ionic serve / ionic lab , поэтому Live Reload работать не будет. Для разработки и отладки приложения в режиме реального времени используйте браузер в локальной сети или установите приложение Ionic DevApp.

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

Фреймворк7

Выбранный ранее шаблон React Framework7 не обеспечивает автоматизацию настройки для Cordova, поэтому вам нужно будет добавить платформы вручную. Создайте проект Cordova в cordova папки вашего проекта:

 cordova create cordova/ com.example.todo Todo cd cordova/ cordova platform add ios cordova platform add android cd ../

Шаблон основан на приложении Create React, поэтому для запуска скомпилированного проекта в среде Cordova вам необходимо добавить "homepage": "." параметр в файле ./package.json . Этот файл можно найти на корневом уровне проекта:

Скомпилируйте проект Framework7 и скопируйте результат в проект Cordova:

 npm run build rm -rf cordova/www/* cp -r build/* cordova/www/

Теперь вы можете запустить приложение на устройстве или эмуляторе:

 cd cordova/ cordova run ios 

Вы сделали! Будем надеяться, что Framework7 догонит Ionic по стандарту разработки и удобству первоначальной настройки.

Создание списков задач

ионный

Давайте, наконец, приступим к созданию приложения! Поскольку это приложение To Do, на главной странице (файл src/pages/home/home.html ) будет список задач с возможностью «отметить выполненными» и «добавить новые».

Ionic предлагает компоненты <ion-list> и <ion-item> для списков. Во-первых, удалите свойство padding из элемента <ion-content> , чтобы список отображался на весь экран. В список поместите текст с помощью элемента <ion-label> и добавьте элемент <ion-toggle> для отметки выполненных задач.

 <ion-content> <ion-list> <ion-item> <ion-label>Hello</ion-label> <ion-toggle></ion-toggle> </ion-item> <ion-item> <ion-label>Toptal</ion-label> <ion-toggle></ion-toggle> </ion-item> <ion-item> <ion-label>Blog</ion-label> <ion-toggle></ion-toggle> </ion-item> </ion-list> </ion-content>

Вернитесь на вкладку браузера с работающей службой Ionic Lab. Приложение обновилось автоматически:

Здорово! Теперь переместите данные задачи в объект JS и настройте его HTML-представление с помощью Angular. Перейдите в файл src/pages/home/home.ts и создайте свойство tasks экземпляра класса HomePage :

 export class HomePage { tasks = [{ name: 'Hello' }, { name: 'Toptal' }, { name: 'Blog' }]; constructor() { } }

Теперь вы можете обращаться к массиву tasks в HTML-коде. Используйте конструкцию *ngFor Angular для итеративного создания элементов списка для каждого элемента массива. Код становится меньше:

 <ion-list> <ion-item *ngFor="let task of tasks"> <ion-label>{{task.name}}</ion-label> <ion-toggle></ion-toggle> </ion-item> </ion-list>

Осталось добавить кнопку создания новых задач в шапку страницы. Для этого используйте <ion-navbar> , <ion-buttons> , <button> и <ion-icon> :

 <ion-header> <ion-navbar> <ion-title>To Do List</ion-title> <ion-buttons end> <button ion-button icon-only (click)="addTask()"> <ion-icon name="add-circle"></ion-icon> </button> </ion-buttons> </ion-navbar> </ion-header>

Обратите внимание на конструкцию (click)="addTask()" Angular. Как вы можете догадаться, он добавляет обработчик нажатия на кнопку и вызывает метод addTask() для нашего компонента. Давайте реализуем этот метод, чтобы открывать диалоговое окно имени задачи при нажатии кнопки.

Для этого вам понадобится компонент AlertController Ionic. Чтобы использовать этот компонент, импортируйте его тип:

 import { AlertController } from 'ionic-angular';

И указать его в списке параметров конструктора для страницы:

 constructor(public alertCtrl: AlertController) { }

Теперь вы можете вызвать его в addTask() . Настройте его после контроллера. Вы можете создать и отобразить диалоговое окно с помощью следующих вызовов:

 this.alertCtrl .create(/* options */) .present();

Укажите заголовок сообщения, описание поля и две кнопки в объекте options . Кнопка «ОК» добавит новую задачу в массив tasks :

 handler: (inputs) => { this.tasks.push({ name: inputs.name }); }

После того, как вы добавите элемент в массив this.tasks , компонент реактивно перестроится и в списке отобразится новая задача.

Полный код страницы теперь выглядит так:

 import { Component } from '@angular/core'; import { AlertController } from 'ionic-angular'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { tasks = [{ name: 'Hello' }, { name: 'Toptal' }, { name: 'Blog' }]; constructor(public alertCtrl: AlertController) { } addTask() { this.alertCtrl .create({ title: 'Add Task', inputs: [ { name: 'name', placeholder: 'Task' } ], buttons: [ { text: 'Cancel', role: 'cancel' }, { text: 'Add', handler: ({ name }) => { this.tasks.push({ name }); } } ] }) .present(); } } 

Переустановите приложение на устройстве:

 cordova run ios

Вот и все! Не так уж сложно, не так ли? Теперь попробуем сделать то же самое с Framework7.

Фреймворк7

Шаблоны Framework7 созданы для отображения всех возможностей компонентов, поэтому вам нужно оставить только страницу src/components/ src/components/pages/HomePage.jsx /HomePage.jsx в файлах src/components/App.jsx и src/routes.js , очистить ее содержимое и удалить лишние комментарии кода.

Теперь создайте список задач. Для этого Framework7 предоставляет компоненты <List simple-list> и <ListItem> . Чтобы поместить в него переключатель завершения задачи, добавьте компонент <Toggle slot="after"/> . Не забудьте импортировать все эти компоненты из модуля framework7-react . Теперь код страницы выглядит так:

 import React from 'react'; import { Page, Navbar, NavTitle, List, ListItem, Toggle } from 'framework7-react'; export default () => ( <Page> <Navbar> <NavTitle>To Do List</NavTitle> </Navbar> <List simple-list> <ListItem title="Hello"> <Toggle slot="after"/> </ListItem> <ListItem title="Toptal"> <Toggle slot="after"/> </ListItem> <ListItem title="Blog"> <Toggle slot="after"/> </ListItem> </List> </Page> );

А само приложение выглядит так:

Довольно хорошее начало. Давайте снова попробуем удалить статические данные из HTML-кода. Для этого используйте смарт-компонент вместо того, который у нас был без сохранения состояния. Импортируйте абстрактный класс Component из React:

 import React, { Component } from 'react';

И запишите массив задач в экземпляр переменной state :

 export default class HomePage extends Component { state = { tasks: [{ name: 'Hello' }, { name: 'Toptal' }, { name: 'Blog' }] }; /* ... */ }

Реальное приложение, вероятно, будет использовать более абстрактный поток данных — например, с Redux или MobX — но для небольшого примера мы будем придерживаться внутреннего состояния компонента.

Теперь вы можете использовать синтаксис JSX для итеративного создания элементов списка для каждой задачи в массиве:

 {this.state.tasks.map((task, i) => ( <ListItem title={task.name} key={i}> <Toggle slot="after"/> </ListItem> ))}

Осталось только добавить в шапку кнопку, чтобы снова создать новую задачу. Элемент <Navbar> уже существует, поэтому добавьте <Link iconOnly> к <NavRight> :

 <Navbar> <NavTitle>To Do List</NavTitle> <NavRight> <Link iconOnly iconF7="add_round_fill" onClick={this.addTask}/> </NavRight> </Navbar>

В React вы добавляете обработчики нажатия, используя свойство onClick и устанавливая в нем указатель обратного вызова. Реализуйте обработчик для отображения диалогового окна имени задачи.

Каждый элемент в Framework7 имеет доступ к экземпляру приложения через свойство this.$f7 . Вы можете использовать метод dialog.prompt() таким образом. Прежде чем закрыть диалог, вызовите метод setState() компонента React и передайте ему копию предыдущего массива с новым элементом. Это реактивно обновит список.

 addTask = () => { this.$f7.dialog.prompt('Task Name:', 'Add Task', (name) => { this.setState({ tasks: [ ...this.state.tasks, { name } ] }); }); };

Вот полный код компонента:

 import React, { Component } from 'react'; import { Page, Navbar, NavTitle, NavRight, Link, List, ListItem, Toggle } from 'framework7-react'; export default class HomePage extends Component { state = { tasks: [{ name: 'Hello' }, { name: 'Toptal' }, { name: 'Blog' }] }; addTask = () => { this.$f7.dialog.prompt('Task Name:', 'Add Task', (name) => { this.setState({ tasks: [ ...this.state.tasks, { name } ] }); }); }; render = () => ( <Page> <Navbar> <NavTitle>To Do List</NavTitle> <NavRight> <Link iconOnly iconF7="add_round_fill" onClick={this.addTask}/> </NavRight> </Navbar> <List simple-list> {this.state.tasks.map((task, i) => ( <ListItem title={task.name} key={i}> <Toggle slot="after"/> </ListItem> ))} </List> </Page> ); }

Проверьте результат:

Осталось только пересобрать и развернуть на устройстве:

 npm run build rm -rf cordova/www/* cp -r build/* cordova/www/ cd cordova/ cordova run ios

Сделанный!

Окончательный код обоих этих проектов доступен на GitHub:

• ionic-todo-приложение
• framework7-реагировать-todo-приложение

Результаты

Теперь вы видели полное руководство по каждому фреймворку Cordova. Чем отличается Framework7 от Ionic?

Начальная настройка

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

Разнообразие компонентов

Оба фреймворка имеют полный набор чудесно созданных стандартных компонентов в двух темах: iOS и Material Design. Ionic также предоставляет эти компоненты в теме Windows и огромном рынке пользовательских тем.

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

Framework7 предоставляет дополнительный список более сложных и полезных компонентов, таких как Smart Select , Autocomplete , Calendar , Contacts List , Login Screen , Messages и Photo Browser . С другой стороны, Ionic предоставляет огромный выбор компонентов, созданных пользователями.

Экосистема и сообщество

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

Framework7 лучше, чем когда-либо, но ему очень не хватает поддержки сообщества.

Сторонние зависимости

Framework7 более гибок в отношении сторонних решений. Его самая большая сила, вероятно, заключается в возможности выбирать, используете ли вы в проекте Vue или React, а также Webpack или Browserify. Ionic основан на Angular и требует знаний в нем (и, следовательно, TypeScript тоже).

Однако недавно разработчики Ionic анонсировали новую бета-версию Ionic 4, утверждая, что она полностью независима от фреймворка пользовательского интерфейса — больше никаких зависимостей Angular, если они вам не нужны.

Cordova Frameworks: по-прежнему мощный способ разработки кроссплатформенных мобильных приложений

Использовать ли Cordova, зависит от конкретного проекта. Действительно, скорость разработки гибридных мобильных приложений и их поддержка нескольких платформ являются его основными преимуществами. Но это всегда компромисс, и иногда вы можете столкнуться с некоторыми недостатками, которых не было бы при нативном подходе. Эти замечательные фреймворки и их сообщества отлично справляются с устранением этих недостатков и облегчают нашу жизнь. Так почему бы не попробовать их?