[Перевод] Попробуйте Flutter Web с WebAssembly Week

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

С 17 по 21 августа мы проводим Неделю тестирования Flutter Web с WebAssembly ! В течение недели инженеры Dart и Flutter будут в режиме реального времени обрабатывать поступающие запросы, чтобы помочь в миграции, а наша команда по связям с разработчиками будет делиться вашими успехами в каналах сообщества.

Это перевод новости, которая вышла сразу после анонса 17 августа, срок недели уже прошел, но я оставил это в переводе дабы не искажать оригинал, неделя тут не так важна, как сам факт события - Wasm становится новым целевым преимуществом в вебе.

WebAssembly в Flutter Web

В мае 2024 года мы стабилизировали поддержку WebAssembly (Wasm) в Flutter 3.22, объединив компилятор Dart с системой сборки мусора WebAssembly (WasmGC).

С тех пор компиляция Wasm доказала свою эффективность в реальных приложениях. Например, Dart DevTools ( dartdevtools) — сложное, высокоинтерактивное веб-приложение Flutter — поставляется с WebAssembly по умолчанию с конца 2024 года. Сегодня более 97% разработчиков, использующих DevTools, запускают его на Wasm, получая преимущества от плавной проверки пользовательского интерфейса, быстрой загрузки и исключительной стабильности.

Компиляция WebAssembly проверена в реальных условиях и готова к использованию в производственной среде. Фактически, наш анализ показывает, что более 58% существующих веб-приложений Flutter сегодня компилируются в WebAssembly без каких-либо изменений в коде .

При компиляции в WebAssembly ваше приложение получает преимущества как от ускорения компиляции ( dart2wasm), так и от многопоточной отрисовки ( skwasm):

• ⚡ До 2 раз более быстрое время отрисовки кадров и стабильные 60 FPS : При интенсивной работе дерева виджетов, когда JavaScript снижает частоту кадров до ~30 FPS (общее время отрисовки кадра 34,5 мс), Wasm поддерживает плавную передачу 60 FPS (общее время отрисовки кадра 17,4 мс).

• ⚡ До 2,5 раз более быстрая сборка и выполнение виджетов : встроенные структуры WasmGC ускоряют сложную логику пользовательского интерфейса и обновление состояния, сокращая время сборки виджетов с 29,3 мс до 11,4 мс.

• ⚡ Многопоточная фоновая растеризация : Skwasm переносит растеризацию холста на выделенный Web Worker, освобождая основной поток браузера для адаптивного взаимодействия с пользовательским интерфейсом.

• 🎯 Более чем в 3 раза более плавная стабильность кадров : уменьшает дрожание кадров с ±1,5 мс до ±0,5 мс, устраняя паузы сборки мусора.

• 📦 Минимальное изменение размера пакета : общий размер пакета приложений увеличивается не более чем на 5% при сжатии по сети.

Попробуйте сами! Вы можете протестировать и сравнить производительность на своем оборудовании, используя нашу интерактивную демонстрацию по адресу flutter-wasm-compare.web.app ( исходный код ).

Приведенные выше показатели производительности были измерены в Google Chrome 151 (151.0.7922.109) на MacBook Pro M4 Pro (48 ГБ, macOS Sequoia 15.7.7) при частоте обновления экрана 60 Гц и средней нагрузке (200 анимированных узлов обновления).

Почему JavaScript по-прежнему является целевым компилятором по умолчанию

Если Wasm обеспечивает лучшую скорость и стабильность, почему он flutter build web по-прежнему по умолчанию использует JavaScript ( dart2js)?

Изменение компилятора по умолчанию для миллионов разработчиков — это серьёзный шаг. Хотя более половины веб-приложений Flutter собираются с использованием Wasm по умолчанию, некоторые pub.dev пакеты по-прежнему зависят от устаревшего взаимодействия с JavaScript ( dart:htmlили dart:js), которое необходимо обновить для совместимости с Wasm.

Это создает классическую дилемму «курица или яйцо»:

• Мы не сможем установить --wasmэто значение по умолчанию, пока больше пакетов экосистемы не обновят свой код взаимодействия с JavaScript.

• Авторы пакетов часто не уделяют приоритетного внимания обновлению до тех пор, пока разработчики не решат использовать Wasm и не запросят поддержку Wasm.

ресурсы для миграции WebAssembly

Чтобы облегчить вам миграцию, мы обновили нашу веб-документацию. Перед началом разработки ознакомьтесь с этими руководствами:

• WebAssembly на Flutter Web : узнайте, как устанавливать заголовки сервера (COEP: credentiallessиCOOP: same-origin), отлаживать сборки для продакшена и определять поддержку Wasm во время выполнения.

• Переход к package:webсовременному взаимодействию с JavaScript : отказ от использованияdart:htmlJavaScriptdart:jsявляется ключевым моментом для совместимости с Wasm. В этом руководстве показано, как перейти кpackage:webJavaScript и JavaScriptdart:js_interop.

• Руководство по созданию и развертыванию веб-сайтов : инструкции по сборке релизных версий, картам исходного кода, хостингу Firebase и кэшированию CDN.

• Часто задаваемые вопросы по веб-технологиям Flutter : ответы на вопросы о веб-воркерах, сервис-воркерах и условном импорте.

Попробуйте WebAssembly на этой неделе!

Независимо от того, поддерживаете ли вы pub.devпакет, управляете рабочим веб-приложением или разрабатываете сторонние проекты, протестируйте свой код с помощью WebAssembly на этой неделе!

Начать

1. 🚀 Обновите Flutter до версии 3.47: выполните команду flutter upgrade, чтобы убедиться, что вы используете последнюю стабильную версию с нашими новейшими оптимизациями WasmGC и исправлениями во время выполнения.

2. ⚙️ Сборка с использованием Wasm: Запустите команду flutter build web --wasmв терминале вашего проекта.

3. 📝 Сообщайте о любых проблемах: Если вы столкнулись с зависимостями пакетов или проблемами во время выполнения, сообщите нам! Отправьте отчет через форму обратной связи Flutter Wasm, чтобы наши инженеры могли помочь устранить препятствия при миграции.

4. 🎉 Делитесь своими достижениями: если ваше приложение компилируется без ошибок и работает быстрее, расскажите нам! Поделитесь своими метриками и приростом частоты кадров .

При публикации в социальных сетях используйте эту функцию, #FlutterWasmWeekчтобы мы могли показать ваши результаты!

Создание будущего веб-технологий, использующих Wasm по умолчанию.

Протестировав ваши приложения и разрешив зависимости пакетов на этой неделе, мы сможем подготовить почву для того, чтобы WebAssembly стал компилятором по умолчанию для Flutter Web .