Framework7 - инструмент для создания web-сайтов и мобильных приложений

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

Статья будет строиться на основе личной практики в работе с данным фреймворком, что должно придать обзору максимальную информативность и достоверность. Также буду отмечать плюсы и минусы, стараясь быть максимально объективным.

А начнем мы, пожалуй, с автора, встречайте: Владимир Харлампиди. Кроме F7 (сокращенное название), у него есть еще несколько качественных проектов, а также очень популярный и мощнейший “слайдер” - Swiper. Если вы фронтенд-разработчик, то, предполагаю, что вы о нем слышали или даже использовали.

Но вернемся к теме повествования. F7 - это web-фреймворк (HTML + CSS + JS), который позволяет создавать SPA (одностраничные сайты) и мобильные приложения (с помощью Cordova / Capacitor). Приложения выглядят точь-в-точь как нативные приложения для iOS- и Android- платформ. Кроме этого, возможна разработка кроссплатформенных приложений с помощью Electron, а также имеется шаблон для быстрого создания PWA. Кодовая база разделена на 4 части: F7 Core, F7 React, F7 Svelte и F7 Vue.

Выходит так, что мы используем один и тот же код (ну почти), а на выходе получим: веб-сайт, PWA, мобильное приложение и даже приложение для десктопа, ну не сказка ли? Более того, в текущее время F7 активно применяется для разработки VK Mini App и Telegram Web App.

Фреймворк постоянно идет в ногу со временем в плане поддержки браузерами новых фич в JS и CSS.

Документация действительна отличная: четкая, по разделам, с примерами, а также максимально обозначенными подводными камнями. Но скажу честно: если вы глубокого уходите во фреймворк, то ее не хватит. Тогда на помощь приходит Kitchen (см. ниже) и исходный код на GitHub.

Kitchen

Если вы впервые открываете F7, то наверняка сразу захотите посмотреть на все компоненты вживую: узнать какие вообще есть компоненты, как они выглядят и как работают. И это правильно! Именно для этих целей и был разработан Kitchen - все наглядно и доступно.

Важно замечание: так называемая “Кухня” есть не только для Core, но и для React / Svelte / Vue. Вышенаписанное означает, что вы всегда можете “подсмотреть” как правильно писать код прямо у автора.

Стабильность

Фреймворк крайне стабилен, серьезные баги, при их очень редком появлении, оперативно исправляются. Но-но-но! Баги правятся только в текущей версии F7. Хотя было одно исключение, когда с обновлением iOS пришла критическая ошибка и автор исправил не только текущую, но и предыдущую версию. Такой подход не является проблемой, а наоборот служит концентрацией сил для на разработки чего-то нового.

Версии

Сейчас актуальная версия - 7, а в разработке - 8. F7 прошел огромный путь от 1 версии, когда было все относительно просто и не совсем удобно, до большого инструмента, набирая обороты от обновления к обновлению.

В целом, обновляться не сложно и за всю историю был только один неприятный момент, о котором сейчас расскажу. До v6 версии для Core использовался собственно разработанный автором шаблонизатор Template7. С одной стороны - он слаб и не было смысла его дальше тянуть, а с другой - пришлось переписывать все шаблоны. И начиная с 6й версии шаблонизатор Core перешел на Template literals.

Framework7 из коробки поддерживает следующие темы:

• iOS: полная стилизация под самую свежую iOS-версию
• MD (Android): полная стилизация под, понятное дело, Material Design, а 3-ю версию стоит ожидать в F7 v8
  
• Aurora: похожа на iOS, предназначается для десктопов
  

SPA

Тут рассказывать особо нечего, на выходе вы получаете index.html, JS-и CSS-файлы. SPA он и есть SPA.

PWA

При использовании Framework7 Cli (об этом ниже) мы получаем на старте код, которые позволит приложению быть PWA. Насчет PWA, на мой взгляд, ходит много непонимания насчет того, что это на самом деле. Так вот, PWA - это возможность закешировать весь код приложения в телефоне (HTML + CSS + JS + иные файлы), обновляя его по мере наличия интернета и доступных обновлений на сервере.

Допустим, ваше приложение - дневник и вы сделали его PWA. Теперь в любой момент (неважно, есть интернет или нет) вы открываете его на телефоне, смотрите данные. При наличии интернета, кроме синхронизации данных можно также обновить и кодовую базу или, например, иконки-картинки.

PWA не дотягивают по возможностям к мобильным приложениям (ну это известное дело). Сама большая проблема - пуши на iOS, но в режиме разработки на Safari они уже доступны.

Серверный рендеринг

Рендеринг на стороне сервера не должен вызвать у вас проблем (Next / Nuxt).

Ну что тут сказать. Конечно, приложения не будут легкими, но в целом система работает, а F7 позволит подстроиться под большую ширину (об этом ниже).

Вот мы и добрались до самого интересного. Но стоп, что, “Кордова?? Да это же тормоза и ужас!” - сразу скажете вы. А я вам отвечу: “Уже давно не так”. Давайте начну с выводов, а потом расскажу подробнее.

Поехали. Сперва как же оно вообще работает: веб-приложение запускается в WebView, а Cordova является прослойкой между JS-кодом и нативным кодом платформы.

Важное уточнение: F7 уже содержит в себе базовый набор кода для обработки всех известных неприятных штучек для Cordova.

Платформа iOS

Любой браузер, который работает на iOS, использует ядро Safari и это требования Apple. Странно, конечно, но что поделать. В данном случае и WebView - это тоже Safari. К сожалению, Сафари относительно неслабо так забагован, хотя все решаемо.

Последняя версия F7 поддерживает iOS начиная с 13-й версии.

Платформа Android

WebView - это, по сути, Chrome, который обновляется отдельно от самой системы Android. Поэтому минимально поддерживаемая версия Андроида условна и равняется 7.

Скорость работы

Количество экранов не влияет на скорость работы, да хоть их сотни. Влияет “тяжесть” одного экрана.

Кратко:

• iOS быстрее Android
• Android кое-что не сильно любит, например, blur в CSS
  
• iOS более забагован
  
• Cordova снижает производительность, что будет заметно на очень тяжелых приложениях
  
• Чем дороже и современнее устройство, тем лучше.
  

Платформа iOS

Версия iOS не влияет на скорость как таковую.

Даже на “старичке” iPhone 6S Plus, который уже не поддерживается iOS 16, все хорошо. На современных айфонах (условно это X и новее) все отлично.

Платформа Android

Сначала про зоопарк устройств Android (мое личное условное деление):

• Дешевые устройства (в районе 10 тыс. руб): возможно торможение, но будем честны, на таких телефонах практически любые нативные приложения тормозят
• Средние телефоны (20-30 тыс. руб.): все хорошо, могут быть проблемы с чем-то совсем тяжелым.
  
• Дорогие телефоны (40 тыс. руб и выше): тут все отлично.
  

Cordova или Capacitor?

Внутри обоих продуктов - одинаковое WebView. Разница в API: Capacitor считается более удобным и модным.

Плагины Cordova

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

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

Про “тяжесть” приложений

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

F7 состоит из ядра, так называемого Core, и адаптаций для React, Svelte и Vue. F7 Core вы должны изучить в любом случае, если хотите погрузиться во фреймворк.

В чем же основная разница? Да в шаблонизаторе. В F7 Core используется Template literals с поддержкой JSX и VDOM от Snabbdom.

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

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

• Название, иконка и пакет (если нужно)
• Платформа: Web, PWA, Cordova (iOS / Android / Electron), Capacitor
  
• Самые известные плагины для Cordova (если она выбрана)
  
• Адаптация: Core или React / Svelte / Vue
  
• Начальный шаблон приложений (несколько самых распространенных)
  
• Использование Vite (раньше был WebPack)
  
• CSS Pre-Processor
  
• Цветовая тема
  
• Компоненты для начальной установки
  
• RTL
  

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

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

• Изменения внешнего вида вызывают боль, не так это просто что-то изменить в одном месте, чтобы не сломать остальное.
• Компонент1 - работает, Компонент2 - работает, но как только мы начинаем делать салат оливье из Компонет1 + Компонент2 да еще приправляем Копонентом3, то обнаруживаем, что настал полный…кошмар. Не готов к этому фреймворк.
  

Так что еще одно достоинство F7 - он лишен данных проблем.

Компонентов очень много, они мощные и имеют множество настроек. Нет смысла пересказывать их все тут, как говорится, смотрите примеры. Напишу только про самое важное.

Page

Общий принцип такой: есть View, в нем Page. Смена одной Page на другую сопровождается анимацией. Несколько View могут быть в одном Views, но схема View > View не поддерживается.

Как выглядит процесс перехода по маршрутам:

• Во View помещается начальная страница Page1
• Переходим на Page2
  
• Page1 скрывается, но не уходит из DOM. Зачем? Затем, чтобы можно было быстро вернуться на предыдущую страницу (свайп-бек). Это поведение отключаемо.
  
• Глубже, глубже: переходим на Page3
  
• Page1 полностью уничтожается, а Page2 остается в DOM
  
• Возвращаемся на Page2
  
• Page3 уничтожается, а вот Page1 загружается (хоть, понятно, и не показывается)
  

Но что если нам нужно сохранить страницы в памяти? Мы имеем два (нет, уже один) механизма:

• KeepAlive на определенном маршруте. Страница будет исчезать из DOM и помещаться в память, а потом из нее возвращаться в DOM.
• StackPages - это будет сохранение на уровне DOM, то есть страница не будет исчезать из DOM. Будет выпилено в v8, так что можно просто забыть про это.

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

Списки

Что мы хотим от полноценного списка (экран бесконечной ленты в простонародье):

• Поддержка виртуального списка: не все элементы должны быть в DOM, а только те, что видны + N вверху и M внизу
• Высота элемента не фиксированная, а зависит от контента
  
• Бесконечный скролл вверх или вниз
  
• Поддержка pull-to-refresh (снизу или сверху)
  
• Удобное управление записями (добавление, удаление, замена и др.) для работы с тем же API
  

Все это есть и скажу более: работает как часы! На среднем Андроиде это летает (см. выше мою градацию), т.е. работает просто отлично. Стоп-стоп, а сложно ли сделать? Да вообще нет!

Master Detail

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

Expandable Cards

Посмотрите на видео. Правда, на Андроиде это будет тормозить на слабых и даже, возможно, средних устройствах.

Photo Browser

Удобный просмотрщик фотографий. Под капотом - известный Swiper.

Popup

По сути - это отдельная сущность, со своей анимацией. Там может быть внутри как Page так и View со своей навигацией. Так же есть поддержка Push Popup:

Tabs

Вот мы добрались и до табов, ну что же, у нас имеется:

• Простые Tabs. Просто переключаемся между ними и нам показывается содержимое разных DOM-узлов.
• Tabs, каждая страница которого загружает свой компонент по роуту. Можно настроить поведение по выгрузке данных при уходе с вкладки.
  
• Ну и наконец Views As Tabs - это полноценные независимые вкладки. Супер!
  

Navbar

В iOS и Android эта часть отличается в корне и новички часто тут совершают ошибки. В первом случае Navbar перемещается (при навигации на страницу) в другое место в DOM (это нужно для правильной анимации), чего нельзя сказать про Android-реализацию.

Поддерживается “большой” заголовок - это когда он переходит в маленький по мере скролла. Также посмотрите, как выглядит Navbar при переходе между страницами:

Роутер

Куда же без него. Тут все просто прекрасно: удобно и сильно. Нет смысла что-то расписывать, смотрите документацию, любую задачу можно решить легко и изящно. Ну просто конфетка, ведь маршрутизацией пронизан весь F7, и, поверьте, вы будете в восторге.

Да, и F7 поддерживает только родной роутер.

Browser history

Вам нужно только включить и вуаля, мы дополняем роутер историей в браузере. Работает только когда у вас одно View, т.е. для режима Views As Tabs данный механизм не получится использовать.

Цветовые темы и режимы “светлый” / “темный”

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

CSS-переменные

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

Events

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

Store

Да, есть свой стор. Он похоже на Vuex, только проще. Особенно, если вы используете Core, то тогда, как говорится, вперед!

Safe Areas

Когда к нам пришел iPhoneX, то принес с собой Safe Areas. F7 их полностью поддерживает.

Иконки для iOS

Авторский набор iOS-иконок.

Request

Request - простая и удобная система для отправки запросов на сервер и обработки результатов. Да, сейчас есть Axios и этим никого не удивишь. Но когда из коробки - это плюс.

Device и Support

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

Dom7

Упрощенная версия JQuery. Да, в 2022 году вряд ли кому-то понадобится.

Плагины для F7

Их немного, но есть среди них один полезный и часто используемый: плагин кастомной клавиатуры.

Чтобы закрепить теорию практикой, покажу несколько приложений.

Фотопланета - фотографии населенных пунктов

Ссылки: iOS и Android

Попробуйте, это бесплатно, без рекламы и регистрации. Средний Андроид, все - летает. iPhone - там даже говорить нечего.

RealtyCalendar - управление посуточной арендой

Скачать: iOS и Android

Посмотрите на видео - как все выглядит. Итак, чтобы получить такое:

а) “долги” в ячейках прилипают к правому краю, а названия месяцев прилипают к левому краю.

в) скролл таблицы влево/вправо и вверх/вниз: месяц + дни прижаты кверху, а названия объектов прижаты к левому краю.

Ну что тоже, приступим. Пункт а) раньше (прям совсем давно) реализовывался с помощью JS, а теперь за нас все делает position: sticky в CSS (хотя его нужно уметь правильно готовить). Ну и пункт б) также делаем с помощью position: sticky.

Смотрим результат: Андроид - огонь, iOS - все плохо, тут две проблемы:

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

Что делать? Ну только все фиксировать и писать кастомный скролл, используя transform. Ничего сверх сложного. Написали - все в iOS теперь отлично, а) и б) решены, ура!

На справедливое предложение - “Зачем нам два поведения? Давайте сделаем также на Android.” Приходится отвечать отказом - не вытягивает Андроид такую штуку, появляются тормоза.

Подводим итог: имеем iOS- и Android-приложение, которые отлично и стабильно работают. Пользователи довольны (а что может быть главнее?).

iOS 16 решила сделать сюрприз: (кто-то просил?) transform перестал дружить со sticky. Ну что-же, разбиваем на блоки и уходим на JS. Да, больше кода, но на выходе для пользователя нет разницы - все как работало так и работает.

Отдельно скажу, из-за огромной и сложной таблицы, пришлось оптимизировать Panel и Popup для Android: всего лишь упростили их анимации открытия и закрытия.

Фреймворку не хватает раскрутки. На форуме замечены неоднократные сообщения в стиле: “Что?? Почему я не узнал об этом фреймворке раньше??”.

Поддержка на русском

Есть форум и чат в Telegram Если ваши вопросы не из рубрики “документацию не читаю”, то вы точно получите ответ. Присоединяйтесь!