Noveo

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

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

В первой части статьи разработчик Noveo Андрей сделал короткий обзор того, что же такое Ionic React, а сегодня сфокусируется на библиотеке UI-компонентов, которые предоставляют авторы фреймворка.

Обзор UI-библиотеки компонентовIonic UI library review by Noveo

Библиотека реализована на технологии WebComponents. С одной стороны, это позволяет использовать ее с любым фреймворком, который поддерживает эту технологию. С другой — есть немало подводных камней, которые могут попортить жизнь. Самые простые: практически невозможно делать «глубокую» кастомизацию компонентов, есть неочевидное поведение Event Propagation, о котором нужно помнить.

 

Браузерная поддержка: поддерживаются все современные браузеры, кроме IE11 и EDGE (до хромиумной эпохи). Press F to pay respects.

 

По мобильным ОС поддержка от Android 5.0 и iOS 11.0.

Прежде чем начать рассмотрение библиотеки, неплохо бы познакомиться с технологией Web Components.

2.1 WebComponents, Shadow Dom и трудности взаимодействия

WebComponents — это перечень из спецификаций, которые позволяют нам создавать инкапсулированные компоненты, управляемые props-ами, со своей внутренней логикой и стилями.

Он базируется на спеках:

— Custom Elements. Позволяет создавать свои собственные HTML-like теги с атрибутами и добавлять их в DOM-дерево.

— CSS Shadow DOM. Позволяет нам объявить новый контекст CSS на каком-то родительском теге внутри кастомного элемента. Стили, которые мы добавим, будут применены только к данному контексту. Они не могут протекать в наружное «светлое» дерево, даже если суперспецифичны (!important). В свою очередь, никакие стили со светлого DOM не могут быть применены к элементам, находящимся внутри ShadowDOM.

— Templates — HTML фрагменты. Разметка, описанная внутри данного HTML-тега, не будет отрендерена при парсинге. Мы можем скопировать данный фрагмент и вставить его в произвольное место в DOM. В этом случае она будет отрендерена браузером.

Ionic WebComponents

Что есть в библиотеке

Сама библиотека предоставляет нам широкий выбор компонентов (более 100). Их можно разделить на два типа

— системные,

— визуальные.

 

Визуальные:

— чекбоксы,

— кнопки,

— Toast,

— Input.

 

Системные:

— роутинг,

— бесконечный скролл,

— Sortable List.

 

В документации каждого компонента можно увидеть, использует ли он Shadow DOM (небольшая подпись рядом с эмулятором) для изоляции своих собственных стилей или нет. От этого будет зависеть, насколько глубоко можно будет кастомизировать данный компонент и будет ли он наследовать стили из скоупа выше.

Ionic UI components library
Пример документации к компоненту ion-card

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

 

В разделе Usage есть примеры того, как этот компонент можно использовать в различных фреймворках. Отдельно стоит заметить, что некоторые компоненты не могут быть использованы в React, например — Virtual Scroll.

 

Там же есть список классов и css-переменных, при помощи которых можно управлять компонентом, а также описание пропсов и callback-ов.

 

Чего нет в стандартном наборе библиотеки:

— компонент для работы с таблицами,

— виртуальный скролл (не работает для React).

Стилизация и темизация

Из хороших новостей: при создании нового проекта Ionic сам по дефолту добавляет normalize.css.

 

Для написания компонентов с собственными стилями подойдет любой подход, который вам нравится:

— CSS-modules,

— CSS,

— Styled-components,

— CSS-in-JS.

 

Команда Ionic позаботилась о том, чтобы нам было удобно работать с темизацией, и все компоненты написаны с применением css-переменных.

 

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

Ionic UI library root element
Пример кастомизации :root-элемента через CSS-переменные

Также большинство компонентов может быть кастомизировано (до определенных пределов) через их css-переменные и shadow-parts. К примеру, IonDatepicker позволяет немного стилизовать padding и цвет плейсхолдера.

Ionic UI library components customization
Способы кастомизации компонентов, предоставленные разработчиками

Native API. Что это такое и как подключить

Native API — способ взаимодействия с API, которое используется на более низком уровне (реализовано в операционной системе) из нашего приложения.

 

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

Документация на доступные Native API

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

Ionic barcode scanner

Для использования плагина достаточно просто импортировать модуль и создать callback. Теперь при клике на кнопку будет открыто приложение камеры. Камера будет искать barcode и после успешного распознавания передает распознанные данные в наше приложение. Эти данные будут выведены в консоль.

Ionic Barcode scanner Native API

Выглядят эти Native API’s весьма интересно. С одной стороны, мы можем фантастически просто добавить необходимую нам функциональность в наше приложение — достаточно просто найти нужную библиотеку в огромном списке доступных в Ionic. В этом случае нам абсолютно не нужно тратить время и забивать голову вопросами имплементации какой-нибудь авторизации по лицу. За нас уже все сделали и дали удобную обертку.

 

С другой же стороны, если нам потребуется доступ к какому-то специфическому платформенному API, то есть ненулевая вероятность, что такого JS-Bridge в составе Native API просто нет. Как итог — либо писать похожую функциональность самостоятельно при помощи обычного JS и браузерных API, либо вкладываться в написание и дальнейший OpenSource такого JS-Bridge

Итого

В статье мы немного познакомились с UI-библиотекой, способами кастомизации компонентов и темизацией всего приложения. Также изучили, как можно получить доступ к Native API из нашего Ionic-приложения.

 

В финальной части статьи мы поделимся опытом разработки кроссплатформенного приложения на Ionic React и всеми граблями, которые мы собрали за весь проект, а также попробуем сделать вывод, является ли этот фреймворк production-ready решением.

 

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

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

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

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