Компания Yibaotang Home Furnishing была основана в 2009 году и получила стратегические инвестиции от Tencent в 2015 году. По состоянию на 2020 год платформа насчитывает 30 миллионов пользователей декораций, 50 000 дизайнеров и 100 000 дилеров. С момента своего основания мы помогаем пользователям повысить эффективность потребительских решений за счет вывода качественного контента по полному пути «поиск вдохновения — изучение знаний — принятие решений»; через интернет-магазины, онлайн-сарафанное радио и онлайн привлечение клиентов, помогайте брендам всесторонне выращивать траву; полностью раскрывайте ценность дизайнера с помощью контента, ресурсов сообщества и пользователей, а также помогайте дизайнерам повышать эффективность выбора продуктов и привлечения клиентов. Связывая все в доме, мы надеемся сделать дом теплым.
скажи суть
Yibaotang APP начал пробовать использовать Flutter для рефакторинга приложений iOS/Android в 2020 году и постепенно за 4 месяца перешел на рабочий процесс Flutter. Затем еще месяц ушел на перенос H5 и апплета WeChat на MPFlutter. \
После завершения рефакторинга Yibaotang завершил развертывание апплета iOS / Android / H5 / WeChat, используя только один набор кода, повысив эффективность разработки почти в четыре раза.
В этой статье мы поделимся с вами проблемами и решениями, возникшими в процессе рефакторинга.
Проблемы до рефакторинга Yibaotang APP
В 2015 году Yibaotang Home Furnishing начала выпускать приложения для платформ Android и iOS.После более чем пяти лет полировки содержание приложения становится все более богатым, а стиль становится все более и более близким к привычкам пользователя. До апреля 2020 года приложение Yibaotang Home APP разрабатывалось на родном языке (Swift/Java).С быстрым ростом бизнеса и более чем пятилетней технической итерацией возникало все больше и больше проблем.
- Прогресс разработки двух платформ, Android / iOS, неодинаков, и эффект внедрения совершенно разный.По мере накопления потребностей бизнеса разница становится все больше и больше.
- Ежедневное обслуживание и развитие проекта требует все больше и больше рабочей силы, а стоимость разработки становится все выше и выше.Android/iOS требует, чтобы разработчики разрабатывали отдельно, и та же самая функция требует удвоения рабочей нагрузки для выполнения.Если H5/апплет включенная в Inside, та же самая функция потребовала в четыре раза больше работы.
- Почти пять лет технических изменений привели к появлению все большего количества избыточного кода, что привело к все большему и большему времени компиляции проектов.Часто небольшое изменение требует длительного времени ожидания, чтобы увидеть эффект изменения.
Чтобы решить вышеуказанные проблемы, в апреле 2020 года команда разработчиков приложения Yibaotang решила провести рефакторинг приложения, надеясь добиться быстрой разработки и уменьшить различия между двумя платформами. В настоящее время, в дополнение к собственной разработке, кросс-платформенное решение для разработки приложений на рынке относительно зрело.Какую технологию использовать для реконструкции приложения, становится первым выбором, с которым должна столкнуться мобильная команда Yibaotang.
Натив против кросс-платформы
В собственном методе разработки разработчики двух платформ работают отдельно, что позволяет планировать системные ресурсы очень эффективно и с большей производительностью. Недостатки тоже очевидны:
- Один и тот же бизнес необходимо разрабатывать на двух платформах отдельно, что увеличивает стоимость разработки, а бизнес-код нельзя повторно использовать на двух платформах.
- Время рефакторинга всего два месяца, рефакторить приложение в целом нативным способом нереально, а нехватка рабочей силы также повысит риск провала рефакторинга.
- Различия между двумя платформами велики, и пользователи разных платформ не могут быть обеспечены единообразным интерфейсом.
- Нативный метод разработки требует, чтобы соответствующие требования разрабатывались отдельно, а последующий процесс тестирования также требует, чтобы тестировщики отдельно тестировали соответствующие платформы, что увеличивает стоимость тестирования.
Кроссплатформенное решение прекрасно решает вышеуказанные проблемы.Команда разработчиков приложения Yibaotang попыталась использовать кроссплатформенное решение Flutter для реконструкции приложения.
Почему флаттер
В дополнение к Flutter на рынке есть много других технологий для межквадратичных технологических решений.Почему Flutter наконец утвердился? Команда в основном рассматривает следующие моменты.
сэкономить человеческие усилия
Кросс-платформенное решение может эффективно снизить рабочую нагрузку, вызванную адаптацией к нескольким платформам, и повысить уровень повторного использования бизнес-кодов.Работа, которая первоначально требовала совместной разработки двумя разработчиками платформы, теперь может быть выполнена только половиной рабочей силы. Кроме того, это кроссплатформенное решение, и React Native нужно приложить больше усилий к тривиальным вопросам, таким как совместимость пользовательского интерфейса.
Потолок производительности
По сравнению с другими кросс-платформенными решениями, Flutter визуализирует представления пользовательского интерфейса через движок Skia, и предел производительности этого метода рендеринга очень близок к нативному. Кроме того, благодаря конструкции механизма саморисования Flutter гарантируется межплатформенная согласованность пользовательского интерфейса, меньше проблем с адаптацией, вызванных обновлениями системы iOS/Android, более высокая ремонтопригодность, и разработчики могут больше сосредоточиться на развитии бизнеса, не беспокоясь о проблемах совместимости с платформой.
Декларативный пользовательский интерфейс
В отличие от императивного программирования, Flutter использует декларативный дизайн пользовательского интерфейса. С декларативным пользовательским интерфейсом разработчикам нужно только описать текущее состояние пользовательского интерфейса, и им не нужно обращать внимание на переход между различными состояниями пользовательского интерфейса, а соответствующая логика перехода состояний обрабатывается инфраструктурой Flutter. Это, несомненно, повышает эффективность разработчиков, и разработчики могут больше сосредоточиться на структуре страницы.
горячая перезагрузка
В режиме отладки Flutter поддерживает компиляцию во время выполнения и горячую перезагрузку. Модуль горячей перезагрузки сначала сканирует измененные файлы в проекте, затем компилирует и преобразует измененный код Dart в файлы ядра Dart, а затем отправляет инкрементные файлы ядра Dart на Dart VM, и Dart VM получит инкрементные файлы. исходный файл ядра Dart, перезагрузите объединенный файл ядра Dart и, наконец, после подтверждения того, что ресурсы Dart VM успешно загружены, сбросьте поток пользовательского интерфейса, чтобы завершить реконструкцию виджета.
Горячая перезагрузка позволяет отображать изменения на странице без перезапуска приложения. Состояние просмотра страницы можно сохранить.В некоторых случаях, когда стек страниц очень глубокий, нет необходимости повторять множество шагов отладки для восстановления стека просмотра, что экономит время на отладку сложных интерактивных интерфейсов.
Экология флаттера
Сообщество разработчиков Flutter экологически активно, и решения проблем, возникающих при разработке, в основном можно найти в сообществе разработчиков.
Удачи
Мы отрефакторили приложение следующим образом
- Объедините центральную идею и проведите хорошую работу по обучению всего персонала.
- Создайте архитектуру своего приложения для постепенного перехода к рабочим процессам Flutter.
- Рефакторинг постепенно, планомерно.
- Удалить старый код.
Полное обучение персонала
На момент начала работ по рефакторингу, кроме TL, ни у кого из членов команды не было опыта разработки Flutter/Dart.
Ключ к рефакторингу работы лежит в людях. Через несколько важных встреч мы сообщаем членам команды нынешних трудностей, с которыми сталкиваются члены команды, и преимуществами, которые используют рефакторинг трепетания, могут принести команду, и поощряют членов команды, чтобы учиться трепетать / дарт Насколько это возможно, так что члены могут воспринимать удобство технологии.
После 2-3 недель обучения все члены команды приступили к работе с Flutter и готовы к рефакторингу.
Постепенный переход на Flutter
Приложение Yibaotang Home итерируется уже более пяти лет.При использовании Flutter для реконструкции приложения вы столкнетесь с другим выбором: должно ли оно быть нативным, а Flutter будет дополнением, или должно быть Flutter основным, а нативное будет быть дополнением?
В процессе использования Flutter в большинстве приложений на рынке Flutter используется в небольшом диапазоне, большинство функций реализовано нативно, а новые функции разрабатываются с помощью Flutter. Таким образом, изменения и влияние на приложение будут сохранены в небольшом диапазоне, но это недостаточно удобно для разработчиков.При отладке более проблематично переключаться между собственным модулем и модулем Flutter; нативный проект вызывает страницу Flutter, он также требует много поддержки ресурсов, что также не способствует повышению производительности APP. Поэтому мобильная команда Ибаотана решила использоватьФлаттер — основной, родной — дополнениеспособ рефакторинга APP.
Для Android/iOS, двух нативных проектов, которые итерировались пять лет, сразу отказаться от исходного кода явно нереально.Давайте создадим новый проект Flutter(ydt_flutter), перенесите исходные два нативных проекта (iOS/Android) во вновь созданный каталог проекта ydt_flutter.
После выполнения этого шага вы можете начать перенос функций с нативных на Flutter. А вот если разрабатывать прямо в каталоге lib, то будут следующие проблемы:
При компиляции проекта на этапе разработки также будет компилироваться собственный избыточный код, что приводит к длительному ожиданию компиляции проекта в первый раз.
Миграции проекта это не способствует, исходно сильно связанный код проекта будет мешать рефакторингу проекта Flutter и приведет к росту цепочки отладки.
Поэтому после переноса двух нативных проектов в ydt_flutter в этой директории был создан общий модуль (чистый проект Flutter), и все последующие работы по рефакторингу проводились под этим модулем. Преимущество этого заключается в том, что он может отличить рефакторинговый проект Flutter от исходного нативного проекта, а также может упростить работу по отладке и уменьшить связь между двумя проектами. После того, как последующие соответствующие бизнес-модули будут завершены, вернитесь к собственному проекту, чтобы удалить соответствующий бизнес-код, и шаг за шагом перенесите проект во Flutter.
Рефакторинг постепенно, планомерно.
Далее команда разработчиков использовала 4 месяца для постепенного рефакторинга приложения в модулях. \
Наше приложение представляет собой контент-платформу. В процессе рефакторинга мы также сотрудничали с коллегами из команды дизайнеров, чтобы изменить стиль пользовательского интерфейса приложения и унифицировать его.ListItemWidget(компонент списка) &WaterfallItem(компонент водопадного типа). Основная сцена приложения — это различные списки и страницы сведений о содержимом.Мы можем использовать метод CustomScrollView для объединения всех страниц по строительным блокам.
CustomScrollView + ListItem + WaterfallItem
Таким образом, с данными, отправленными GraphQL, мы создали полное приложение для контента. В этом процессе идея о том, что все во Flutter является виджетом, обеспечивает большое удобство для рефакторинга.
удалить старый код
После завершения рефакторинга исходный нативный код удаляется до тех пор, пока не будет удалена упомянутая выше прогрессивная архитектура.
доход
Рефакторинг — это дело с высоким риском и высокой отдачей для команды разработчиков.Процесс рефакторинга требует разобраться со старым делом не только для того, чтобы заполнить оставшиеся темные дыры, но и для того, чтобы избежать появления новых. Преимущества также очевидны, и это может решить большинство первоначальных головных болей.
С помощью многих замечательных функций Flutter приложение Yibaotang Home было успешно реконструировано за четыре месяца. После почти года онлайн-операции общее использование приложения и отзывы пользователей были хорошими. С CustomScrollView + ListItem + Waterfall есть некоторые небольшие потребности, чтобы представить новые изменения перед пользователями, даже не требуя выпуска.
В переработанном приложении Flutter покрывает более 90% сцен. По сравнению с языком разработки, используемым в нативной разработке, синтаксис Dart более лаконичен, например, await & async позволяет эффективно избежать ада обратных вызовов, который можно увидеть повсюду в нативной разработке, а логика кода понятнее. Эти новые функции помогают разработчикам сократить ежедневное время разработки бизнеса на 40 %, снизить трудозатраты наполовину и повысить эффективность разработки на 50 %.
Из-за превосходства кроссплатформенности Flutter можно сократить не только цикл разработки, но и цикл последующего тестирования. отдельно.Повышается эффективность тестирования и одновременно снижается стоимость тестирования. Мало того, доставка APP дизайнеру пользовательского интерфейса также может значительно сократить время прохождения дизайнером пользовательского интерфейса, а эффективность прохождения увеличивается на 50%.
После использования Flutter для разработки стоимость каждого процесса, связанного с разработкой, значительно снижается, а сам процесс также значительно упрощается. Затем команда мобильных разработчиков Yibaotang будет работать над тем, чтобы охватить более 95% сцен в приложении с помощью Flutter.
дополнительный урожай
Для апплета H5 и WeChat команда Yibaotang также попыталась использовать MPFlutter для рефакторинга и миграции.
MPFlutter — это кроссплатформенная среда разработки Flutter, предназначенная для продвижения Flutter в областях, которые официально не охвачены, например, в мини-программах WeChat.
С MPFlutter потребовался всего один месяц, чтобы развернуть приложение в H5 и апплете WeChat, просто изменив коды некоторых ключевых узлов.
Испытайте приложение "мешок сахара"
Если вас интересуют результаты употребления мешка сахара, вы можете испытать это следующим образом.
- В AppStore или крупных магазинах приложений для Android найдите «Yibaotang», чтобы загрузить приложение.
- Введите «Yibaotang» в WeChat, чтобы познакомиться с апплетом.
- нажмитеh5.yidoutang.com/v6/, испытайте веб-сайт Yibaotang H5.
Если вы думаете о том, как украсить свой новый дом, или хотите узнать условия жизни домовладельцев, вы можете продолжать использовать приложение Yibaotang.
Подписывайтесь на нас
- Пожалуйста, пройдите через официальный сайтmpflutter.com/Попробуйте предварительную версию
- Пожалуйста, используйте GitHubgithub.com/mpflutterСледите за нашим кодом и ходом разработки
- Пожалуйста, следите за общедоступной учетной записью WeChat "MPFlutter Developer" для получения последней информации.