Как осуществить построение системы Flutter в Ali Group?

Автор|Дун Ян (Simu)

Произведено | Alibaba New Retail Tao Department Технологический отдел

2019 год, несомненно, является годом, когда технология Flutter находится в самом разгаре. Каждый мобильный разработчик без ума от функций и концепций «быстрой разработки, выразительного и гибкого пользовательского интерфейса и нативной производительности», которые предлагает Flutter.От суперприложений до независимых приложений, от чистого Flutter до гибридных стеков, разработчики постоянно изучают и применяют Flutter. технологии в разных сценариях, и они также сталкиваются с различными проблемами.

Почему флаттер?

Также в Alibaba Group появляется все больше и больше компаний и команд, которые начали пробовать стек технологий Flutter: от уникального продукта Xianyu, лидирующего в тренде, до текущего бизнеса BU, такого как Taobao Special Edition, Hema, Youku и Fliggy, Flutter. один за другим входили в игру.Бизнес-приложение компании также постепенно формировало тенденцию внутри группы.

Итак, что заставляет все больше и больше разработчиков в группе использовать стек технологий Flutter? Какие преимущества Flutter привлекают местных разработчиков группы к разработке и реализации бизнеса с помощью Flutter?

С технической точки зрения я лично считаю, что три основные функции Flutter наиболее привлекательны для разработчиков:

Высокая эффективность разработки и доставки, хороший опыт разработки
Отличные кросс-мультитерминальные и мультиплатформенные возможности
Сильная выразительность пользовательского интерфейса

Скажи это первымЭффективность разработки. Начиная с атрибутов бизнеса электронной коммерции группы, эффективность реагирования бизнеса и эффективность исследований и разработок всегда были наиболее важными показателями. Максимально возможное повышение эффективности НИОКР с точки зрения обеспечения опыта означает более высокую производительность.Традиционное собственное развитие бизнеса для iOS/Android требует отдельного инвестирования с обеих сторон, затраты на исследования и разработку высоки, сквозные различия велики, и все зависит от сквозной версии. для мини-программ, в значительной степени, стремление к эффективности и гибкости НИОКР и доставки.

Сегодня Flutter очень хорошо решил проблему кросс-энд согласованности.Набор кодов работает как на iOS, так и на Android без какой-либо разницы.Опыт разработки в основном близок к внешнему интерфейсу, и он поддерживает горячую перезагрузку на устройстве. В конце прошлого года Flutter запустил его в Android Studio.Предварительный просмотр в реальном времени и интерактивные возможности Hot UI с помощью плагинов, а также визуальный макет Layout Explorer делают эффективность разработки Flutter и эффективность интерфейса практически одинаковыми.

Развитие бизнеса электронной коммерции на современном этапе уже не ограничивается мобильными сценариями, все больше потребностей бизнеса выдвигают более высокие требования к кросс-энду и кроссплатформенности. Сценарии настольных приложений DingTalk/Qianniu и даже бизнес-сценарии, такие как Tmall Genie и офлайн-магазины, требуют многотерминального решения с лучшей адаптацией и более низкой стоимостью, чем стабильность веб-производительности в долгосрочной перспективе.

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

Можно сказать, что текущие кросс-мультитерминальные и мультиплатформенные решения внутри группы практически отсутствуют. Flutter естественным образом поддерживает мультиплатформенную разработку по дизайну.Его нижний уровень основан на кроссплатформенном графическом движке Skia.Он строит вверх набор независимой от платформы системы рендеринга и системы обработки событий и настраивает объявление на основе виджетов в соответствии с Native R&D модель +Отзывчивая парадигма программирования, низкая зависимость от системных возможностей и отличное кросс-платформенное восстановление, поддержка нескольких платформ также является одной из стратегических целей Flutter.

В настоящее время, помимо iOS и Android, официально объявленными поддерживаемыми платформами являются Mac, Windows и Web. Linux также находится в стадии разработки. Его технические характеристики также делают очень рентабельным перенос Flutter на платформу IoT на базе Linux. В то же время Flutter в будущем все еще находится под управлением Google.Официальный фреймворк для разработки приложений операционной системы первого поколения Fuschia.Можно сказать, что у Flutter есть все условия для того, чтобы стать кросс-мультитерминальной и мультиплатформенной моделью R&D следующего поколения.Построить групповую многотерминальную и мультиплатформенную R&D-систему вокруг Flutter вполне реально.

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

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

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

Статус-кво систематической конструкции Flutter

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

С другой стороны, с точки зрения отраслевых тенденций, технология Flutter стала направлением построения технологий, на котором сосредотачивается все больше и больше отраслевых партнеров.ByteDance, Meituan и другие компании создали свои собственные инженерные системы Flutter и обслуживали свои собственные бизнес-сценарии; Tencent также провела пробные испытания нескольких приложений на основе Flutter и предоставила возможность обслуживать апплеты во Flutter. Было проведено полезное исследование.

Инвестиции и решимость отраслевых партнеров в технологию Flutter не только делают нас более уверенными в перспективах применения и сообщества технологии Flutter, но и заставляют нас чувствовать необходимость и безотлагательность объединения всех сторон в группу для построения экосистемы Flutter.

▐ Попытки и мысли о покупках с рук

Наконец, кратко расскажем о наших исследованиях и размышлениях о Flutter с 18 лет до настоящего времени.

Hand Tao начала изучать применение движка рендеринга Flutter на сцене апплетов в октябре 2018 года; во второй половине 2019 года он начал создавать базовые возможности Flutter и обслуживать специальный выпуск Taobao в ключевых технологиях, таких как движок, библиотека изображений, оптимизация памяти и производительность загрузки. В то же время благодаря преобразованию движка Flutter инкапсулируется возможность Flutter 2D Canvas, а небольшой программный компонент Canvas и небольшой игровой движок поддерживаются вверх, обслуживающие 2D/2.5D геймификация бизнеса и посадка в бизнес-сценарии.

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

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

С точки зрения адаптации к сцене:Flutter в настоящее время больше подходит для переноса богатого графического и текстового контента, такого как детали, поток каналов, домашняя страница пользователя и другие обычные бизнес-разработки, а также игровых сцен 2D/2.5D и богатых динамических сервисов.Благодаря единому технологическому стеку Flutter может одновременно выполнять бизнес-сценарии, которые ранее требовали стеков iOS, Android и интерфейсных технологий, и даже может использовать Dart для части разработки бизнес-логики на стороне сервера. с помощью модели развития интеграции терминала и облака, которая может помочь бизнес-командам расширить свой бизнес.В то же время реализовать замкнутый цикл передовых и внутренних возможностей НИОКР.

Текущие ограничения Flutter — это его динамические возможности и первоначальные инвестиционные затраты. Первоначальные инвестиционные затраты в основном относятся к затратам на техническое обучение и обновление модели команды R&D. Они включают в себя выбор технического маршрута, который мы и каждая бизнес-команда должны обдумать и оценить вместе. Мы не будем обсуждать это здесь.

Динамические возможности являются относительно недостатком Flutter.В настоящее время динамические возможности на уровне компонентов на основе шаблонов могут быть реализованы с помощью технологии шаблонов Flutter.Однако, исходя из различных факторов, таких как производительность, аудит и инвазивность собственной системы Flutter, это пока невозможно напрямую реализовать динамическую способность пользовательского интерфейса + логики.Хотя решение Flutter Web не имеет ограничений аудита, оно ограничено различиями между DOM API браузера и системой виджетов. В настоящее время все еще существуют серьезные узкие места в производительности и различия в рендеринге. Его можно использовать только в качестве резервного решения для понижение версии и временно не может использоваться как динамическая основная реализация.

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

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

AliFlutter - Мобильная группа Economies Проект совместного строительства Flutter

На этом фоне Economist Mobile Technology Group также сосредоточилась на Flutter в этом году для сквозного управления архитектурой. Группа мобильных технологий разработала проект AliFlutter со стратегической точки зрения с очень четкими целями:

Выполнение построения системы Flutter с экономического уровня, построение общедоступной технической инфраструктуры Flutter, разработка контейнеров Flutter, промежуточного программного обеспечения и стандартов API, создание поддержки исследований и разработок Flutter, а также возможностей работы и обслуживания данных, а также повторное использование ключевых технологий;
Объединение бизнес-единиц для создания экономического технического сообщества Flutter, накопления и совместного использования технологии Flutter и бизнес-компонентов, возможностей и решений Группы, обслуживания бизнеса Flutter Группы и совместного создания технологической экосистемы Flutter Группы;
Создайте внешнее влияние Flutter на экономическом уровне и объединитесь со всеми BU, чтобы создать командные высоты Ali в области технологий Flutter в отрасли.

Наш долг — «заложить основу, взрастить сообщество и нести знамя» технологической системы экономики Flutter.

Общая архитектура AliFlutter в будущем выглядит следующим образом:

Первый шаг в создании AliFlutter,Он предназначен для создания инфраструктуры Flutter Группы, предоставления общедоступных контейнеров и компонентов, услуг поддержки НИОКР и стандартизированных процессов НИОКР, предоставления базовых возможностей общедоступных услуг НИОКР Flutter для бизнеса Группы Flutter, а также создания хорошей основы и платформы для совместного создания технологий и совместное использование;

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

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

Далее я подробно расскажу о работе и перспективном мышлении AliFlutter на каждом этапе.

инфраструктура

С момента запуска проекта AliFlutter в октябре 2019 года и по настоящее время мы в основном создали набор общедоступной инфраструктуры Flutter, включая артефакты и публичные библиотеки, стандартные контейнеры Flutter и стандарты API, а также внедрили автоматизацию сборки и упаковки Flutter, определяя стандарты. Настройка движка. рабочий процесс и бизнес-процесс R&D. В настоящее время инфраструктура способна поддерживать исследования и разработки Flutter-бизнеса Группы, а также поддерживает настройку каждого BU по запросу.

▐ Склад артефактов

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

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

Пространство имен предназначено для различения продуктов ядра разных BU и предоставляет общее пространство имен для хранения общедоступных продуктов, чтобы обеспечить настройку по требованию и общедоступные возможности; если нет адреса продукта, который необходимо получить во внутреннем хранилище, это вызовет официальное объявление от Flutter.Изображение извлекается один раз и кэшируется на сервере.

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

▐ публичный репозиторий

Подобно npm в мире Node.js, Flutter использует pub для управления сторонними компонентами и зависимостями. Принимая во внимание требования простоты использования и безопасности, чтобы управлять общедоступными сторонними компонентами внутри группы, мы также создали общедоступную библиотеку Flutter для интранет-среды. Цель этой библиотеки — стать платформой публикации публикаций группы, управляя всеми пакетами публикации сторонних и сторонних производителей в группе.

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

▐ Контейнеры, промежуточное ПО и API

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

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

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

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

▐ Стандартизировать сборки Flutter

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

Бизнес-приложения

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

С одной стороны, благодаря инженерным возможностям собственного Flutter, он продолжает служить отделу Дао и групповому бизнесу;

▐ Департамент Сямэнь и группа поддержки бизнеса

В настоящее время специальная версия Taobao завершила преобразование подробного бизнеса Flutter и находится в сети.Использование Flutter может сократить человеческий вклад вдвое, в то время как ритм спроса остается неизменным, что сыграло очевидную роль в снижении давления бизнес-исследований. и разработка; в то же время общая производительность и стабильность приложения в основном такие же, как и Native.

Последующие специальные выпуски продолжат расширять масштабы преобразования бизнеса на основе Flutter и ускорять решения для бизнес-доменов на основе Flutter.

В настоящее время Hema, ICBU и Youku также обновили доступ к контейнерам и бизнес-адаптацию на основе AliFlutter. Hema использует игровой движок Xianyu Flutter для реализации бизнеса города Hema. ICBU использует Flutter на основных страницах, связанных со ссылками, сценариях Youku, таких как порядок членства. страницы реализованы на основе Flutter. В то же время мы также изучаем настольные решения Flutter с Dingding и Google.

▐ Флаттер Холст

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

В сценарии мини-программы Canvas играет важную роль как основная возможность переноса интерактивных игр. Однако из-за изолированного дизайна контекста приложения и контекста страницы в архитектуре апплета существует узкое место при обмене данными между рабочим приложением и средством визуализации страницы, и производительность веб-холста не может быть полностью использована. , его можно напрямую реализовать в родном приложении. Слой подключается к рабочему приложению, чтобы снизить затраты на связь и полностью использовать производительность Canvas.

Нижний слой Flutter основан на Skia, и его производительность и адаптивность к сложным и разнородным мобильным моделям были протестированы в течение длительного времени.Браузерный дизайн Flutter реализует независимый от платформы конвейер рендеринга и приложил большие усилия в браузере. Значительное упрощение, обеспечивающее высокую надежность и производительность. Затем, если этот конвейер рендеринга можно использовать напрямую для предоставления возможностей Canvas бизнес-контейнерам, а стандартные API-интерфейсы, совместимые с Web Canvas, можно напрямую предоставлять аплетам и небольшим игровым контейнерам с помощью методов привязки, с одной стороны, базовые возможности Flutter могут могут быть повторно использованы, что не является проблемой для среды, отличной от Dart. Среда обеспечивает поддержку рендеринга, а с другой стороны, Flutter может упростить эффективную реализацию конвейера рендеринга, чтобы обеспечить лучшую производительность рендеринга.

В настоящее время Flutter Canvas запущен на мобильном Taobao и провел пилотный проект в градациях серого в мини-программе спортивного банковского бизнеса.Изначально он может выполнять мини-программу Canvas для бизнеса; его производительность имеет преимущества на недорогих Android машин и может использоваться как решение Web Canvas, полезное дополнение.

В будущем Flutter Canvas будет использовать кроссплатформенные и высокопроизводительные функции конвейера рендеринга Flutter, а также поддержку адаптации Flutter для Vulkan и Metal, чтобы получить лучшую адаптируемость и производительность на мобильной стороне; в то же время, он будет продолжать внедрять 3D API, поддерживать будущие интерактивные бизнес-приложения.

будущее строительство

Укоренившись в бизнесе, на следующем третьем этапе мы должны внимательно следить за будущими целями построения системы Flutter в Alibaba Group и продолжать отвечать на несколько ключевых вопросов на пути будущего построения Flutter. Итак, прежде всего, какой должна быть цель создания системы Flutter в Alibaba Group? Я лично думаю:

В будущем Flutter должен стать одной из основных бизнес-моделей исследований и разработок Alibaba Group для нескольких терминалов и платформ.

Итак, насколько мы далеки от этой цели? На мой взгляд, если мы хотим сделать Flutter основной моделью исследований и разработок в бизнесе, мы должны решить четыре основных вопроса: кросс-конечные возможности, возможности взаимодействия, эффективность бизнес-исследований и разработок и эффективность доставки бизнеса.

С точки зрения кросс-конечных возможностей:Хотя Flutter обладает хорошей способностью пересекать несколько терминалов и высокой степенью сокращения, когда речь идет о возможностях платформы, его все еще необходимо реализовать за счет расширения каждого терминала, и еще не сформирован стандартизированный контейнер и возможности упаковки API, такие как в виде небольшой программной системы. Так как же лучше решить проблему контейнеризации Flutter, чтобы бизнес не воспринимал платформенные различия?
С точки зрения способности к взаимодействию:Как Flutter использует свои собственные интерактивные возможности, чтобы обеспечить богатый интерактивный опыт, сравнимый с внешним интерфейсом, при этом снижая порог для разработки нативных богатых интерактивных функций и действительно привлекая нативных разработчиков к использованию технологии Flutter для развития бизнеса?
С точки зрения эффективности НИОКР бизнеса:Хотя механизм Flutter Hot Reload/Hot UI позволил повысить эффективность разработки нативных страниц по сравнению с внешним интерфейсом, все еще есть много возможностей для улучшения инженерной развязки, и в настоящее время он не может эффективно поддерживать параллельную разработку нескольких бизнес-процессов. команды; с другой стороны, как объединить его с популярными бессерверными возможностями для реализации интегрированной модели НИОКР устройства и облака, чтобы бизнес мог реализовать замкнутый цикл НИОКР, также нуждается в проверке на практике.
С точки зрения эффективности доставки бизнеса:В настоящее время Flutter по-прежнему относится к нативному решению, которое опирается на сквозную версию, а эффективность доставки низкая и не может полностью удовлетворить потребности в гибкости и эффективности системы электронной коммерции. решить динамическую природу Flutter и помочь бизнесу добиться быстрой итерации?

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

▐ Улучшение кросс-конечных возможностей: контейнеризация Flutter

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

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

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

С точки зрения архитектуры мобильных терминалов, кроссплатформенные решения в разные периоды имеют общие требования к возможностям API.От H5 до Weex, следующего апплета и контейнерных сред, таких как Flutter, было проведено несколько раундов повторяющегося создания API. , что приводит к отсутствию стандартизированного определения интерфейса API и отсутствию унифицированного управления и контроля уровня реализации.

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

▐ Улучшение интерактивных возможностей: пользовательский интерфейс + игровой движок

Как упоминалось выше, наибольшая ценность Flutter в настоящее время заключается в повышении эффективности НИОКР, что является отправной точкой для привлечения бизнес-команд к применению технологии Flutter, однако недостаточно полагаться на НИОКР для повышения эффективности. эффективность НИОКР, как убедить бизнес продолжать использовать систему Flutter для развития бизнеса? Где долгосрочная ценность Flutter?

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

Все мы знаем, что традиционный пользовательский интерфейс и игровой движок — это две независимые системы.В приложениях H5 пользовательский интерфейс часто создается через DOM или структуру приложений верхнего уровня, а игровые возможности реализуются через игровой движок H5, построенный на холсте.

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

С технической точки зрения Flutter больше похож на игровой движок, построенный на графической библиотеке Skia.Он строит систему пользовательского интерфейса за счет мелкозернистого дизайна виджетов, также благодаря такому мелкозернистому дизайну мы также можем напрямую передавать виджеты. Объединение полного игрового движка, предоставление виджетов, таких как анимация игры, сцены и спрайтов, и расширение соответствующих элементов и объектов рендеринга, а также совместное использование набора механизмов обработки событий, механизмов наслоения и синтеза рендеринга с системой пользовательского интерфейса.Это эквивалентно разрушению границы между пользовательским интерфейсом DOM и играми Canvas в оригинальном H5, что позволяет идеально интегрировать две системы в рамках концепции виджетов и позволяет пользовательскому интерфейсу с помощью возможностей игрового движка реализовать больше действий, чем было трудно достичь в предыдущей системе пользовательского интерфейса с низкими затратами эффекта (например, небольшая лошадка, съедающая компонент заказа за один укус, и т. д.).

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

▐ Повышение эффективности НИОКР: инженерное разделение и интеграция устройств и облака

Инженерная развязка флаттера

Эффективность исследований и разработок клиентской системы в значительной степени зависит от разделения страниц, созданных унифицированной системой маршрутизации на основе URI, и связности, обеспечиваемой стандартизацией на основе веб-API на странице.Тем не менее, текущая модель исследований и разработок Flutter по-прежнему требует, чтобы несколько бизнес-групп работали над одним и тем же проектом, и между ними существует зависимость исходного кода.В будущем, если технология Flutter будет применяться в больших масштабах между бизнес-группами, она неизбежно замедлится. вниз эффективность R&D бизнеса.

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

Идеальный сценарий:Предприятия могут создать независимый проект Dart из бизнес-измерения, который содержит только связанные с бизнесом страницы и логический код, разрабатывать страницы с помощью пользовательского интерфейса Flutter Hot, предварительно просматривать проект локально и отлаживать API и системные вызовы с помощью веб-возможностей Flutter, предоставляемых IDE и завершить работу в период исследований и разработок; также можно сгенерировать QR-код для предварительного просмотра, а хост-приложение, предварительно установленное в среде AliFlutter SDK, можно использовать для сканирования кода для предварительного просмотра; ссылки на исследования, разработки и строительство разделены, и облако активно извлекает код бизнес-хранилища для участия в построении всего пакета. Таким образом, можно получить предварительный опыт НИОКР, аналогичный методу НИОКР мини-программы, и одновременно можно реализовать разделение НИОКР и параллельный выпуск между предприятиями, а также повысить эффективность доставки бизнеса.

Интеграция устройства и облака

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

Сочетая облегченную контейнерную среду, возможность многоязычной поддержки и унифицированное серверное программирование API, учащиеся конечных сторон могут легко использовать клиентские языки, такие как Java, JS, Swift и даже Dart, для разработки бизнес-возможностей на стороне сервера. , а также реализовать оркестровку и обслуживание услуг.Конечная бизнес-логика FaaS и API генерируются автоматически для достижения унификации интерфейсных и серверных инженерных систем и эффекта замкнутого цикла бизнес-исследований и разработок.

В настоящее время Xianyu взял на себя инициативу в изучении облачной интеграции Dart FaaS.Он реализовал контейнер функций Dart с помощью спецификации контейнера группы и объединил сервер для абстрагирования уровня BaaS (хранилище, очередь сообщений и т. д.) для доменные службы, необходимые некоторым предприятиям, и инкапсулирует интерфейсно-ориентированный уровень возможностей BFF (Backend for Frontend), так что мобильные разработчики могут легко использовать Dart для инкапсуляции бизнес-логики FaaS и одновременного выполнения мобильных и серверных FaaS-разработок. , что значительно повышает эффективность бизнес-исследований и разработок.

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

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

Хорошие сквозные функции Flutter могут защитить сквозную дифференциацию, а преобразование Flutter в контейнеры еще больше упрощает бизнес-модель R&D с полной связью.

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

▐ Повышение эффективности доставки: динамизм флаттера

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

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

Давайте поговорим о наших двух идеях и попытках в динамике Flutter:Схема шаблонов флаттера иИнтернет на флаттере.

Решение для шаблонов Flutter

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

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

В системе Flutter команда Xianyu реализовала набор Dart SDK на стороне Flutter в соответствии со стандартным протоколом шаблонов и реализовала облегченную возможность оркестровки динамических компонентов на стороне Flutter посредством доставки шаблонов; и постепенно решила эту проблему с помощью более чем один год итераций. Он решает проблемы производительности рендеринга и согласованности рендеринга, а также лучше включает динамические возможности компонентов бизнеса Flutter.

Итак, есть ли в будущем лучшее сочетание Flutter и динамических шаблонов?

Ответ положительный. С точки зрения DSL текущий шаблон в основном написан из Android XML, который недостаточно удобен для разработчиков компонентов, особенно разработчиков, не использующих Android, и требует определенных затрат на обучение; в то время как структура и атрибуты Flutter могут быть выражены с помощью виджетов, которые может быть чрезвычайно гибким и дружественным к платформе Нейтрально использует декларативный код для создания пользовательского интерфейса и привязки данных, что позволяет разработчикам легко писать компоненты и самостоятельно отлаживать и тестировать через инфраструктуру Flutter; при работе на мобильном терминале он может быть переведен в собственные компоненты или компоненты Flutter в соответствии со сценой по мере необходимости.Мы продолжим исследования в этом направлении в будущем.

Web on Flutter

По сравнению со схемой рендеринга компонентов шаблона, близкой к модели Native R&D, Web on Flutter надеется реализовать динамические возможности внешнего стека технологий с помощью возможностей рендеринга Flutter через H5-подобный DSL + JS.

В настоящее время небольшое программное решение, основанное на веб-рендеринге, имеет проблемы с производительностью, такие как большое время запуска и большой разрыв между производительностью рендеринга и собственным пользовательским интерфейсом.Эти проблемы в значительной степени связаны с бременем истории разработки движка браузера (сложный конвейер рендеринга). , многопроходная компоновка CSS и устаревшая реализация и т. д.), а также низкая эффективность связи JS-Native (мост).

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

В то же время виджеты Flutter продуманы до мелочей, а основные элементы, такие как атрибуты структурного макета, выражаются с помощью виджетов, а сложные компоненты могут быть сформированы с помощью комбинации основных виджетов. Возможность вертикальной стыковки различных НИОКР.

Таким образом, разумным направлением исследования является применение Flutter к экологии апплетов путем объединения DSL апплета с помощью виджетов, поддержки ограниченного набора CSS апплета, реализации уровня рендеринга для замены механизма браузера и подключения к механизму JS для поддержки Возможность выполнения JS.

По сравнению с браузерами, которые балуют разработчиков, это решение неизбежно будет ограничено в поддержке возможностей CSS, не сможет обеспечить реализацию всех стандартов CSS3 и т. д., придерживаясь существующих возможностей виджетов Flutter и необходимых виджетов. Расширения для объединения возможностей CSS без нарушения однопроходная компоновка.

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

Мы реализовали прототип этой идеи в рамках внутреннего проекта в конце 2018 года. Мы использовали C++ для перезаписи возможностей среднего и низкого уровня в фреймворке Dart, таких как виджеты, рендеринг, отрисовка и управление событиями Flutter, а также внедрили CSSOM + DSL в C++ для виджетов. -> Отзывчивая структура виджетов обеспечивает реализацию рендеринга непосредственно из уровня C++ и переносит расширение шаблона, вычисление древовидных различий и рендеринг, традиционно выполняемые JS, на уровень C++, а также реализует возможность diff из дерево виджетов, предоставляемое Flutter для дерева RenderObjects, что значительно повышает производительность.

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

Резюме и перспективы

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

Прежде чем команда мобильных технологий начала проект AliFlutter, технологический отдел Xianyu провел много исследований и инвестиций в создание технологии Flutter.

С одной стороны, благодаря технологии Flutter, позволяющей бизнесу повышать эффективность и обновляться, он добился хороших результатов в бизнесе;

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

Далее, ключевая задача AliFlutter — создать поле Flutter на групповом уровне вместе с новаторскими приложениями, такими как Xianyu и Fortune, а также практиками Flutter, такими как Hema, Dingding, Fliggy, Youku, Ele.me и CBU. поднимите и подтяните экосистему Flutter группы, чтобы технологии и опыт можно было накапливать и совместно использовать, и вместе давайте сделаем технологическую систему Flutter больше и сильнее в экосистеме приложений Ali и действительно станем основной моделью исследований и разработок для бизнес группы, и пусть все участвуют Каждый может извлечь из этого пользу.

Мы всегда твердо верили в развитие и перспективы применения технологии Flutter.В будущем мы продолжим опираться на бизнес группы обслуживания Tao, работать рука об руку с разработчиками группы и твердо двигаться вперед в техническом направлении Flutter.