Flutter, наша портативная инфраструктура пользовательского интерфейса для создания красивого индивидуального интерфейса, теперь поддерживает современный Интернет! Мы рады выпустить техническую предварительную версию SDK, которая позволяет вам использовать код пользовательского интерфейса Flutter и бизнес-логику и запускать их прямо в браузере.

Наши амбиции в отношении Flutter в веб-браузерах

Начиная с его первой бета-версии в прошлом году, клиенты использовали Flutter для создания мобильных приложений, работающих на iOS и Android. Однако Flutter всегда проектировался как портативный набор инструментов пользовательского интерфейса и, помимо прочего, работает на Windows, Mac, Fuchsia и даже Raspberry Pi. Поскольку Flutter построен с использованием Dart, который включает в себя компиляторы производственного качества как для машинного кода, так и для JavaScript, у нас была прочная основа. Оставшаяся проблема заключалась в замене графического движка и средства визуализации текста на основе Skia эквивалентами веб-платформы.

Для этого нам нужно было доставить:

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

Хотя работа над Flutter для Интернета еще не завершена - и в каждой из этих областей предстоит проделать много работы, - мы готовы поделиться предварительным просмотром, чтобы вы могли опробовать его и оставить отзыв.

Веб-архитектура Flutter

Общая архитектура Flutter в Интернете очень похожа на Flutter для мобильных устройств:

Фреймворк Flutter (зеленый на диаграмме выше) используется совместно мобильными и веб-предложениями. Он предоставляет высокоуровневые абстракции для основ пользовательского интерфейса Flutter, включая анимацию, жесты, базовые классы виджетов, а также набор виджетов на тему материалов для наиболее распространенных потребностей приложений. Если вы уже используете Flutter, вы сразу почувствуете себя как дома с Flutter для Интернета.

Магия заключается в переводе этих концепций в браузер. Мы повторно реализовали библиотеку dart: ui, заменив привязки к движку Skia, используемому мобильными устройствами, на код, ориентированный на DOM и Canvas. Когда вы компилируете код Flutter для Интернета, ваше приложение, фреймворк Flutter и веб-библиотека dart: ui - все написано на Dart - компилируются в JavaScript, который может работать в любом современном браузере.

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

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

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

Наша запланированная работа включает:

  • Поддержка текстовых функций, таких как выделение и копирование и вставка.
  • Поддержка плагинов. Что касается таких функций, как местоположение, камера и доступ к файлам, мы надеемся объединить мобильные устройства и Интернет с помощью единого API.
  • Готовая поддержка таких технологий, как Progressive Web Apps.
  • Унификация инструментов веб-разработки в рамках существующей интеграции Flutter CLI и IDE.
  • Отладка веб-приложений с помощью DevTools.
  • Повышенная производительность, поддержка браузера и доступность.

Перейдите на flutter.dev/web, чтобы найти примеры, документацию и ссылки на дополнительные ресурсы. Мы рады видеть, что вы создаете!