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

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

Автор | Син Сян, Сян Чжимин, Ма Инь

задний план

Все больше и больше компаний в стране и за рубежом встали на путь исследования флаттера. Существует два основных режима разработки Flutter: один — режим независимого приложения, который в основном основан на флаттере, и собственный проект будет включен в проект флаттера, другой — позволить флаттеру существовать в виде модулей (модули флаттера). ), которые интегрируются отдельно.В существующих нативных приложениях iOS и Android нативный проект может находиться в любой структуре каталогов и не связан с адресом проекта флаттера, но локальный адрес проекта флаттера нужно объявить в нативном структура проекта.

как загрузить

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

Введение

Ядро flutter-boot решает две задачи в режиме гибридной разработки: инженерное проектирование и гибридный стек флаттер-гибридной разработки. Как флаттер-бут решает эту проблему?

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

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

адрес с открытым исходным кодом

https://github.com/alibaba-flutter/flutter-boot

инженерный дизайн

Узнайте об официальном проекте «Добавить Flutter в существующие приложения».

Прежде чем разбираться в деталях инженерного проектирования flutter-boot, нам нужно иметь предварительное представление о решении «Добавить Flutter в существующие приложения», официально предоставленном Google. Проект «Добавить флаттер в существующие приложения» поможет нам создать флаттер в виде модулей.Структура проекта флаттера в модульной форме выглядит следующим образом:

some/path/  my_flutter/    lib/main.dart    .ios/    .android/скопировать код

Согласно официальной структуре проекта, .ios и .android являются шаблонными проектами при запуске флаттера.При запуске в каталоге проекта флаттера эти два проекта используются для запуска приложения. Так как же сделать местную инженерию актуальной? Ассоциация здесь будет разделена на три части, а именно: структура флаттера, бизнес-код флаттера и библиотека плагинов флаттера. Библиотека плагинов флаттера разделена на две части: нативный плагин флаттера (то есть нативный код плагина) и дартс флаттер плагина (то есть код дротика плагина). Различия между этими четырьмя частями:

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

Для конкретной реализации, взяв iOS в качестве примера, мы добавим пользовательский вызов ruby script podfilehelper в файл podfile, podfilehelper объявит зависимости фреймворка флаттера, объявит ссылку на исходный код нативного плагина флаттера и объявить путь бизнес-кода. Далее мы вмешаемся в процесс сборки, добавив вызов сценария оболочки xcode_backend на этапе сборки xcode, и xcode_backend создаст продукты сборки dart в соответствии с текущим режимом сборки.

Дополнение к флаттер-ботинкам

Для официального гибридного инженерного проекта после опыта мы обнаружили следующие проблемы:

1. Добавление файлов или конфигураций выполняется вручную, и процесс длительный.

2. Запуск нативных проектов в репозитории флаттера не поддерживается.

3. Не поддерживается сборка на удаленной машине, когда флаттер развернут в независимом репозитории кода.

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

★ создать

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

★ ссылка

Цель процесса связывания — связать локальный нативный проект с проектом флаттера. В процессе ассоциации мы сначала запросим адрес флаттер-проекта и адрес нативного проекта, а затем автоматически интегрируем вышеупомянутые части, которые необходимо интегрировать вручную через скрипты; чтобы получить перспектива развития флаттера (то есть работа под проектом флаттера) Собственный проект), мы мягко связали собственный проект с каталогом ios и каталогом android проекта флаттера. Перед запуском флаттер найдет каталог ios или android в проекте и запустить его.При запуске проекта iOS под проектом флаттера будет Ограничение, то есть цель проекта iOS нужно обозначить как runner.Чтобы решить эту проблему, мы скопировали основную цель нативного project и скопировал цель с именем runner.

В то же время, чтобы поддерживать режим удаленной сборки, объявление локального пути нашего склада флаттера различается в соответствии с режимом сборки и инкапсулируется в пользовательский сценарий зависимости.Например, в проекте iOS мы добавит файл сценария fbpodhelper.rb. Затем добавьте локальный путь хранилища флаттера в файл конфигурации fbConfig.local.json.

★ удаленная ссылка

Целью процесса update remotelink является получение кода флаттер-репозитория и его сборка на удаленной машине в режиме удаленной сборки. В режиме удаленного построения мы вторгнемся в процесс управления зависимостями.Когда зависимость будет получена, мы вытащим код склада флаттера, поместим код в каталог .fbflutter нативного проекта и объявим каталог как локальный путь склада флаттера Процесс извлечения кода флаттера и его локального развертывания называется процессом обновления.

Таким образом, удаленная сборка может быть точно такой же, как локальная сборка. Как отличить удаленный режим от локального? Чтобы отличить удаленный режим от локального, мы записываем информацию об удаленном складе флаттера в fbConfig.json и игнорируем файл fbConfig.local.json в gitignore, так что инженеру, который инициализирует гибридный проект, нужно только запустить remotelink один раз и другое развитие Сотрудник не будет заниматься процессом настройки удаленной сборки.

★ инициировать

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

Смешанный стек

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

1. Версии флаттера и гибридного стека совместимы;

2. Инкапсуляция и вставка демонстрационного кода смешанного стека.

Проблемы с совместимостью версий

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

Проблемы с инкапсуляцией кода и вставкой

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

1. Хостинг двигателя флаттера;

2. Настройка постраничной маршрутизации;

3. Дартс-страница в демо-версии;

4. Вход в тестовый прыжок.

★ Хостинг двигателя флаттера

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

★ Конфигурация маршрутизации страницы

Для страницы дротика в демонстрационной форме, когда конфигурация маршрутизации направляется на определенный идентификатор, флаттер или нативная страница должны идентифицировать и перейти на соответствующую страницу. Конфигурация маршрутизации должна быть развернута как на нативной, так и на флаттерной сторонах. На нативной стороне мы упростили демонстрационный код маршрутизации гибридного стека и добавили его в фиксированный каталог нативного проекта. Поскольку iOS добавляет только файлы кода, он не будет включен в область построения, поэтому мы инкапсулируем набор инструментов добавления кода на стороне iOS для реализации вставки файлов. Что касается флаттера, мы перезаписываем файл main.dart, интегрируем main.dart с логикой маршрутизации и предоставляем логику создания демонстрационной страницы дротика.

★ Родной тест на прыжки на входе

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

Эффект

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

Наконец, преимущества очевидны.Теперь Xianyu, через который проходят сотни миллионов трафика, собрала многолетний опыт передового опыта в книгу.«Флаттер в действии» доступен, это содержание лишь одна из сути книги,Следите за технологиями Али, Вы можете скачать это бесплатно!

4 отличных момента, быстро понять«Флаттер в действии»

Большая коллекция инструментов Flutter с открытым исходным кодом

Среда приложений Xianyu Flutter Fish Redux, инструмент разработки AspectD, FlutterBoost и другие инструменты разработки официально имеют открытый исходный код, и теперь «Flutter в действии» может помочь вам найти все сразу. Адрес с открытым исходным кодом + технический анализ, шаг за шагом научит вас структуре приложения Flutter и принципам гибридной разработки!

Практика применения Xianyu Flutter на уровне предприятия

С развитием беспроводной связи, Интернета вещей и появлением 5G мобильные исследования и разработки становятся все более и более мультитерминальными. Традиционный метод разработки, основанный на Native + Web + server, имеет низкую эффективность исследований и разработок и явно не может удовлетворить потребности разработки.Flutter — это переносимый набор инструментов пользовательского интерфейса с открытым исходным кодом от Google.В дополнение к превосходной согласованности кросс-конечного рендеринга, он также имеет очень эффективный опыт исследований и разработок, богатые готовые компоненты пользовательского интерфейса и производительность, сравнимую с Native. Благодаря своим многочисленным преимуществам Flutter также стал популярной новой технологией в последние годы.В этой книге я подробно объясню интегрированную архитектуру облака Xianyu Flutter и FaaS, а также эволюцию и инновации архитектуры Xianyu на основе Flutter, а также изучу полный набор прикладных решений архитектуры Flutter.

Практическое руководство по гибридной разработке

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

Подробное и расширенное руководство по Flutter

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

как загрузить

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

Вы, кто любит учиться, вы скачали его? Расскажите нам, как вы относитесь к использованию электронных книг в поле для комментариев, а ученики, набравшие тройку лайков, отправят супер милую куклу-праздную рыбку Розыгрыш призов состоится в 11:00 22 октября (если лайки совпадают, будет выбран тот, у кого более раннее время комментария).