Вышел стабильный релиз Ionic Framework “Ionic for everyone”, что можно перевести как “Ionic для каждого”. Но что имеется ввиду для каждого? Давайте разбираться.
Ionic 4 представляет из себя кульминацию более чем 2-х лет усердной работы. Сегодня Ionic это не просто фреймворк для создания мобильных приложений на Angular, это мощная система для разработки мобильных приложений для каждого разработчика, какими бы инструментами он не владел.
Еще в 2013 году Ionic стремился создать компоненты на основе Javascript для создания качественных мобильных приложений. Тогда не было стандартного способа создать компоненты, поэтому ребята взяли за основу Angular. И тогда это действительно была отличная идея: с помощью Angular можно было создать любой HTML тег и упаковать в него всю сложную логику.
Когда появился Angular 2, команда Ionic перенесла фреймворк на него, так появился Ionic 2 и 3.
Но сегодня помимо Angular развиваются другие фреймворки. На сегодняшний день React приобрел огромную популярность, а новые фреймворки, такие как Vue завоевали популярность очень быстро. Мир веб-разработки менялся последние годы настолько быстро, что стало ясно, Frontend-разработчики никогда не остановятся на какой-то конкретной технологии. Проблема Ionic заключалась в том, что им пользовались только те, кто принял Angular за основу разработки.
С 2013 по 2018 год во фронтенде произошло нечто замечательное: браузере сошлись в стандартизированной модели компонентов, что позволяет определять собственные теги HTML и легко распространять их среди других разработчиков. Этот набор API стал известен как веб-компоненты, и это все, что не хватало команде Ionic в 2013 году.
В 2017 году команда начала экспериментировать с веб-компонентами и решила перенести все 100 компонентов. Так появился Ionic 4.
Сегодня фреймворк распространяется в виде набора веб-компонент с использованием пользовательских элементов и API-интерфейсов Shadow DOM, доступных во всех современных мобильных и настольных браузерах.
Это означает, что практически каждый веб-разработчик теперь может использовать компоненты Ionic в своих мобильных, настольных и PWA веб-приложениях, просто используя HTML-теги Ionic.
Поскольку теперь Ionic ориентируется на стандартные веб-API, разработчики могут быть уверены, что API-компоненты Ionic останутся стабильными в течение многих лет.
Производительность
Ionic 4 является самой полной и быстрой версией. Все 100 компонентов Ionic были протестированы на производительность. Команда провела полное обновление iOS и Material Design для каждого компонента в соответствии с последними стандартами на iOS и Android.
Веб-компоненты Ionic были оптимизированы для загрузки и скорости рендеринга, помогая приложениям Ionic достичь желаемого результата 100/100 в инструменте тестирования Lighthouse от Google.
Также команда значительно улучшила стартовые шаблоны, чтобы помочь разработчикам быстрее создавать крутой интерфейс.
Производительность для прогрессивных веб-приложений
Прогрессивные веб-приложения (PWA) сейчас в тренде, и Ionic 4 был спроектирован так, чтобы предоставить лучший UI для создания высокопроизводительных PWA.
Для достижения стандартов производительности, установленных Google, потребовались новые подходы к загрузке асинхронных компонентов. Чтобы добиться этого, команда Ionic потратили год на создание Stencil - генератора компонентов, который обеспечивает их упаковку.
В скором времени команда Ионик обещает опубликовать ряд инструкций по достижению максимальной производительности с различными фреймворками.
Кастомизация
Одним из самых значительных изменений в этой области является переход на нативное создание переменных CSS. Переменные CSS обеспечивают простой способ создания тем для приложений на IONIC вне зависимости от того какую инфраструктуру вы используете.
Обновленная документация
У Ionic отличная документация как в плане доступности информации, так и оформлению. Команда выпустила новую версию документации еще лучше, еще удобнее.
Идеально для вашей системы проектирования
Благодаря новым возможностям создания тем и независимые от фреймворка веб-компоненты, Ionic готова стать основой для создания интерфейсов. По сути, вы можете создать свой собственный UI, используя основу Ionic.
Используйте инструменты вашей платформы
Когда Ionic 2 был построен на основе Angular, а современные инструменты JavaScript только появлялись, Ionic пришлось создать достаточное количество инструментов для компиляции приложений. Не говоря уже, что решения по типу Angular Router, еще находились на стадии разработки и еще не были готовы для использования, команде приходилось создавать свои собственные.В Ionic 4 теперь используются официальные инструменты платформы для сборки, объединения и маршрутизации, чтобы вы могли получить максимальную отдачу от экосистемы вашей платформы. Это означает, что вы будете использовать Angular CLI при использовании Ionic с Angular, Vue CLI с Vue.js и так далее.
Поскольку элементы управления пользовательского интерфейса Ionic теперь основаны на API-интерфейсах веб-компонентов, они обычно могут работать «из коробки» во всех основных средах (Angular, React, Vue и т. Д. .)
Тем не менее, Ionic также должен интегрироваться с системой маршрутизации фреймворка, поэтому нам по-прежнему приходится предоставлять функции, специфичные для фреймворка. Кроме того, разработчики в каждой среде ожидают, что что-то будет работать определенным образом, например, разработчики React ожидают MyComponent заместо my-component).
Vue.js и React в настоящее время находятся в альфа-версии. Если вы хотите попробовать альфа-версии сегодня, взгляните на React README и Vue README в репозитории Ионик.