Прежде чем перейти к статье, хочу вам представить, экономическую онлайн игру Brave Knights, в которой вы можете играть и зарабатывать. Регистируйтесь, играйте и зарабатывайте!
У нас тут хоть и неофициальный, но очень способный наследничек объявился — Jaspr!
Привет, меня зовут Алексей. В Пиробайте я разрабатываю мобильные приложения на Flutter. Расскажу, почему у этого фреймворка на стороне разработки сайтов все не так уж плохо. Спойлер — потому что Jaspr перехватывает всю инициативу на себя.
Каждый раз, когда мы начинаем сравнивать кроссплатформенные решения, например, Flutter и React Native, мы концентрируем свое внимание на весе конечного приложения, количества FPS при анимации, проценте нагрузки на оперативку и процессоре устройства. В итоге трудно объяснить, почему один лучше другого.
У RN, конечно, есть одно неоспоримое преимущество — одна кодовая база под веб- и мобильные приложения. Понятное дело, что говорим мы не про презентационный слой, а про логику. Но ведь есть Flutter Web! Правда, мертвый. Или нет? (об этом можно поспорить в комментариях)
«Flutter Web мертв!» — сильное заявление, скажете вы.
Canvas вместо нормального интерфейса, низкая скорость загрузки, отсутствие внятного server side rendering’а и невозможность (ну или сильная ограниченность) настройки SEO — скажу я.
В целом, если вы разрабатываете независимое от SEO веб-приложение, то, наверное, Flutter Web неплохой вариант. Но для большинства решений оно не подойдет. Последние решения от команды разработки Flutter Web — это Flutter embedded, который позволяет встраивать виджеты в HTML.
Однако, это все еще виджеты Flutter со всеми их проблемами (проблемами для веба). У разработчиков Flutter Web есть планы по улучшению производительности, интеграции WASM. Правда, этого недостаточно, и судя по всему, у них нет никаких планов по интеграции SSR и инструментов для работы с SEO.
Ситуация, откровенно говоря, тупиковая. Но когда большие дяди с большими бюджетами тормозят и не делают решительных шагов, на сцену выходит комьюнити. Наш сегодняшний герой — веб-фреймворк для разработки на Flutter, с коротким именем Jaspr.
Что такое Jaspr?
Если обратиться к документации, то это «современный веб-фреймворк для разработки веб-сайтов на Dart, который поддерживает как рендеринг со стороны клиента, так и со стороны сервера». То есть это фреймворк для Flutter. Jaspr переписывает его ядро, стараясь оставить основные концепции, чтобы программирование было максимально похоже на Flutter.
Пример: основной строительный блок интерфейса у Flutter — это виджет. Jaspr такой берет, думает — ага, ну работает круто, все оставляем, но называем это КОМПОНЕНТ (а все остальное, вплоть до вида этих компонентов, взяты из Flutter)
Что, фреймворк для разработки на Dart? Это что, новый Dart Angular?
И да, и нет. Чтобы лучше понять, снова процитируем документацию.
Для чего? Jaspr был разработан для того, чтобы сделать современный веб-фреймворк, который выглядит и ощущается как Flutter, но рендерит нормальный HTML/css как React, Vue или Angular.
Для кого? Jaspr нацелен на Flutter-разработчиков, которые хотели бы создать совершенно любой сайт (особенно такой, который невозможно реализовать с помощью Flutter Web)
Что это? Jaspr стремиться расширить границы Dart на вебе и сервере, дав возможность использовать продуманный fullstack для веба, полностью написанный на Dart. С технической точки зрения да, это больше Dart, чем Flutter. Однако с точки зрения использования кода — это все же Flutter (с переписанным ядром).
Как выглядят местные виджеты на Jaspr
В Jaspr вместо виджетов используются компоненты (хоть выглядят и работают они так же, как и обычные виджеты). Чтобы лучше понять вышесказанное, предлагаю взглянуть на местные компоненты:
Похоже, не правда ли? Что-то вроде виджета, что-то вроде HTML…
И это каждый раз так нужно писать DomComponent (tag: ‘тег который хочу’)? — спросите вы.
Не совсем, вот пример поинтереснее:
Да, Jaspr позволяет писать привычные HTML-теги внутри компонентов (с непривычным количеством скобочек). И, собственно, рендерятся они как обычный HTML.
И не нужно писать никакой параллельной структуры с помощью пакета seo_renderer
Окей, а что там с входной точкой? Какой-то HTML.index есть?
Есть лучше — компонент Document, который описывает основные мета-теги, пути до стилей и скриптов (прописывается он у нас в main.dart)
Однако, если хочется использовать обычный index.HTML, то можно расписать сначала его, а потом использовать Document.file.
С компонентами ясно, а что там с SSR? (основная фича, как никак)
И с этим Jaspr справляется достаточно лаконично. Как происходит загрузка файлов на сервер? Достаточно простого миксина и… вы великолепны!
А что по синхронизации с клиентом? И тут без откровений, опять миксины
В общем, работает отлично и достаточно просто. В первый раз, конечно, так не кажется, потому что из-за скудной документации приходится немного попотеть.
Энтрипоинты и гидрации Jaspr
Здесь у фреймворка тоже все просто и делается с помощью кодогенерации:
Аннотация @client автоматически генерирует для нас энтрипоинты. У нас отпадает необходимость прописывать все ручками. И это потрясающе. Естественно, этой аннотацией можно отметить несколько компонентов и реализовать островную архитектуру. Jasp, ты просто космос.
А что там по файлам билда?
Выполняется билд простой командой jaspr build. Но на выходе получается достаточно любопытное, так как Jaspr генерирует не только веб-статику, но еще и компилируемый файл app. По дефолту это экзешник, который и является ядром вашего приложения для деплоя, однако с помощью флага –target это можно изменить (например, выбрать компиляцию в aot или jit). Этот самый app необходимо запускать вместе со всей веб-статикой.
Мы уже как-то рассказывали, стоит ли Flutter-разработчику знать нативные языки для успешной разработки приложений (спойлер — не все так однозначно) Для Jaspr тоже встает вопрос — а можно ли использовать JavaScript, CSS? Если кратко — да, можно. Стили вы и так, скорее всего, будете писать с помощью CSS (у компонентов есть поле styles, где стилизация гораздо больше походит на стилизацию во Flutter, однако генерируются они в итоге как инлайновые стили, что не очень хорошо).
Можно ли использовать библиотеки типа dart:html или dart:io?
Кратко — да. Если чуть более детально — не везде. Ведь dart:html может использоваться только на стороне клиента, а dart:io — только на сервере. Но мы же тут пишем сайт с использованием SSR, как быть, если очень хочется использовать эти библиотеки (например, динамически менять заголовок сайта)?
У Jaspr есть отличный ответ на этот вопрос и звучит он как — зависимые от платформы импорты. Выглядят они так:
Таких импортов может быть и несколько:
Что у Jaspr по библиотекам и пакетам?
Если пакет рассчитан на Flutter — использовать нельзя, если на dart — можно. Однако тут стоит уточнить: у Jaspr есть свои пакеты, которые по сути являются адаптацией пакетов с Flutter. Вот список официальных пакетов:
jaspr_router — для роутинга, работает на go_router
jaspr_riverpod — для стейт менеджмента
jaspr_flutter_embed jaspr_tailwind — да-да, больше фреймворков богу фреймворков!
Но ведь не может быть все так хорошо, верно? И да, и нет. Давайте обозначим самое главное, от чего исходят все остальные минусы этого фреймворка — Его. Разрабатывает. Один. Человек.
Тут уж каждый сам для себя решает — хорошо это или плохо. С одной стороны, фреймворк независим от Flutter (а это плюс, учитывая постоянные обновления последнего). С другой стороны — скудная документация и внезапные баги. Особенно при использовании Windows.
Но вы можете внести свой вклад в разработку этого замечательного фреймворка (нам, например, довелось найти несколько багов при разработке на Windows, которых больше нет)
Как и у любого приличного проекта на Dart, у Jaspr есть своя песочница, в которой можно ознакомиться с основными фичами проекта.
***
Недавно мы разработали проект с помощью этого фреймворка. Он пока не вышел в релиз, поэтому показать еще не можем. Но если у вас остались вопросы, вы можете задать их в комментариях. Я с радостью отвечу.
