Yidou Sugar Home, founded in 2009, received strategic investment from Tencent in 2015. By 2020, the platform has accumulated 30 million decoration users, 50,000 designers and 100,000 dealers. Since its establishment, we help users improve the efficiency of consumption decision-making through the high-quality content output of the whole path of “find inspiration — learn knowledge — make decisions”. Through the online store, online reputation and online customer acquisition, help the brand to comprehensively plant grass; Through content, community and user resources, we fully release the value of designers and help designers improve the efficiency of product selection and customer acquisition. By linking everything about the home, we hope to make the home warm.

To the point

In 2020, a Sweets APP began to try to rebuild the iOS/Android APP with Flutter, and migrated gradually to the Flutter workflow over a period of 4 months. Then it took another month to migrate the H5 and wechat applets to MPFlutter. \

After the reconstruction, Yidoutang completed the deployment of iOS/Android/H5 / wechat small program with only one set of code, which improved the development efficiency by nearly four times.

This article will share with you the problems and solutions encountered during the refactoring process of Yougang.

Problems before APP reconstruction of Yidou Candy

In 2015, Yidou Candy Home started to release apps on both Android and iOS platforms. After more than five years of polishing, the content of the APP has become increasingly rich and the style has become more and more close to users’ habits. Until April 2020, Yidou Candy Home APP was developed in the way of native (Swift/Java). With the rapid growth of business and more than five years of technical iteration, it faced more and more problems.

  • The development progress of Android and iOS platforms is not uniform, and the implementation effects are greatly different. With the accumulation of service requirements, the differences become larger and larger.
  • The daily maintenance and development of the project require more and more manpower, and the development cost is getting higher and higher. Android/iOS developers need to develop them separately, and the same function needs double workload to complete. If H5 / small program is included, the same function even needs four times workload.
  • After nearly five years of technical changes, there are more and more redundant codes, resulting in longer and longer compilation time of the project. Even a small change can only be seen after a long waiting time.

In order to solve the above problems, the development team of Yidoutang APP decided to reconstruct the APP in April 2020, hoping to achieve rapid development and reduce the differences between the two platforms. At this time, in addition to native development, cross-platform APP development schemes on the market have also been relatively mature. Which technology to use to reconstruct APP has become the first choice faced by Yidoutang Mobile team.

Native VS Cross-platform

The way of native development, the developers of the two platforms develop separately, can schedule system resources in a very efficient way, and the performance is more excellent. The disadvantages are also obvious:

  • However, the same business needs to be developed on two platforms respectively, which increases the development cost, and the business code cannot be reused on the two platforms.
  • The reconstruction time is only two months. It is unrealistic to carry out the overall reconstruction of APP in a native way, and lack of manpower will increase the risk of reconstruction failure.
  • The differences between the two platforms are so great that users on different platforms cannot be provided with consistent experience.
  • In the way of native development, corresponding requirements need to be developed separately. In the subsequent testing process, testers also need to test corresponding platforms respectively, increasing the testing cost.

The cross-platform solution to these problems is the perfect one. The team behind The APP tried to rebuild the APP with Flutter cross-platform solution.

Why Flutter

There are many other cross-square technology solutions on the market besides Flutter. Why does Flutter ultimately shape? The team looked at the following points.

Save manpower

The cross-platform solution can effectively reduce the workload brought by adapting to multiple platforms and improve the reuse rate of business code. The work that originally required the developers of two platforms to develop together can now be completed with only half of the manpower. As a cross-platform solution, React Native requires a lot more effort on trivial matters such as UI compatibility.

Performance limit

Compared to other cross-platform solutions, Flutter renders UI views through the Skia engine, which has a performance upper limit very close to native. Because of the design of Flutter’s self-drawing engine, the cross-platform UI is consistent, with fewer adaptation issues due to iOS/Android upgrades and higher maintainability. Developers can also focus on business development without worrying about platform compatibility issues.

Declarative UI

Unlike imperative programming, Flutter uses a declarative UI design. With declarative UI, developers only need to describe the current UI state and do not need to worry about transitions between DIFFERENT UI states. The logic of state transitions is handled by the Flutter framework. This definitely increases developer productivity and allows developers to focus more on the structure of the page.

Thermal overload

In debug mode, Flutter supports run-time compilation or hot overloading. The hot-reload module scans the changed files, compiles the changed Dart code into the Dart Kernel file, and sends the incremental Dart Kernel file to the Dart VM. The Dart VM merges the received incremental file with the original Dart Kernel file, reloads the merged Dart Kernel file, and finally resets the UI thread after confirming that the Dart VM resources are successfully loaded to complete the rebuilding of the Widget.

Hot reloading changes to the page can be rendered without restarting the APP. The view state of the page can be saved. For some cases where the page stack is very deep, there is no need to repeat a lot of debugging steps to restore the view stack, saving the time of debugging complex interactive interfaces.

Flutter ecological

Flutter development community is very active, and solutions to problems encountered in Flutter development can be found on the community.

The commencement of business

Let’s refactor the application by following these steps

  1. Unify the central idea and do a good job in training all staff.
  2. Design the application architecture to make an incremental transition to the Flutter workflow.
  3. Step by step, plan by plan.
  4. Remove old code.

All staff training work

At the beginning of the refactoring work, none of the team members had any Flutter/Dart development experience except FOR TL.

The key to the refactoring work is people. We held several important meetings to inform team members about the challenges they are facing and the benefits they can derive from using Flutter refactoring. We also encouraged team members to learn Flutter/Dart as soon as possible so that they can feel the convenience of the technology.

After 2-3 weeks of study, all team members had mastered Flutter and were ready for reconstruction.

A gradual transition to Flutter

The APP has been iterating for more than five years. When using the Flutter reconstruction APP, one has to make another decision: should the original build up and the Flutter become a supplement or should the original build up and the Flutter become a supplement?

Most apps in the market use Flutter in a small range, and most functions are implemented in the native way. New functions are developed by trying to use Flutter. However, this is not friendly for developers. When debugging, the native module and the Flutter module need to switch back and forth, which is quite troublesome. Native projects also require a lot of resource support to evoke Flutter pages, which is also not conducive to improving APP performance. Therefore, the Yidou Mobile team decided to rebuild the APP with Flutter as the main method and native as the auxiliary method.

For Android/iOS, two native projects that have been iterating for five years, it is not practical to abandon the original code at once. We first created a new Flutter project (Ydt_flutter), Migrate the original two native projects (iOS/Android) to the new ydt_FLUTTER project directory.

Once this is done, you can begin to migrate functions from the native to the direction of the Flutter. However, if you develop directly in the lib directory, there are several problems:

When the project is compiled during development, the native redundant code is also compiled, resulting in a long wait when the project is first compiled.

Not conducive to project migration, the original highly coupled project code will cause interference to the Flutter project in the refactoring, and also lead to the growth of the debug chain.

Therefore, after migrating two native projects to ydT_FLUTTER, a common module (pure Flutter project) was created under this directory, and all subsequent refactoring was performed under this module. The advantage of this method is that the reconstructed Flutter project can be distinguished from the original original project. It can also simplify debugging and reduce the coupling between the two projects. After the corresponding business module is completed, return to the original project to remove the relevant business code, and migrate the project to Flutter step by step.

Step by step, plan by plan.

Next, the development team reconstructs the application in modular increments over a four-month period. \

Our APP is a content platform APP. In the process of reconstruction, we also cooperated with colleagues in the design team to reorganize the UI style of the APP, unifying ListItemWidget (list-type component) and WaterfallItem (waterfall stream-type component). The core scene of this APP is all kinds of lists and content details pages. We can splice all pages by building blocks in the way of CustomScrollView.

CustomScrollView + ListItem + WaterfallItem

In this way, with the data delivered by GraphQL, we spliced together a complete content application. In this process, the idea of Flutter as a Widget provides great convenience for refactoring.

Remove old code

After the refactoring is complete, the original native code is removed until the incremental architecture mentioned above is removed.

earnings

Refactoring is a high-risk, high-reward process for the development team, as it involves cleaning up the old business, not only to fill in the remaining holes, but also to prevent new ones from appearing. The benefits are obvious, as they can solve most of the headaches.

With many excellent features of Flutter, a bag of Candy home APP was reconstructed in four months. After nearly a year of online operation, the overall use of APP and user feedback are good. With the help of CustomScrollView + ListItem + Waterfall, there are some small requirements to present new changes to users without even releasing them.

More than 90% of Flutter scenes were covered by APP after reconstruction. Dart syntax is more concise than native development languages, such as await & Async, which can effectively avoid callback hell everywhere in native development, and code logic is clearer. These new features help developers reduce their daily business development time by 40%, reduce labor costs by half, and increase development efficiency by 50%.

Because of the cross-platform advantages of Flutter, not only can the development cycle of Flutter be shortened, but also the subsequent test cycle can be shortened accordingly. Only one automated test case can be written for Flutter, instead of writing separate test cases for Android and iOS. This improves the test efficiency and reduces the test cost. Not only that, APP delivery to UI designers can also greatly save the designer’s UI walk-through time and improve the efficiency of walk-through by 50%.

With Flutter development, the cost of all processes associated with Flutter development is significantly reduced and the process is simultaneously simplified. Going forward, the Development team of Yidou Mobile will aim to cover more than 95% of the scenarios in the APP with Flutter.

bonus

For H5 and wechat apts, the Yidoutang team also tried to use MPFlutter for reconstruction and migration.

MPFlutter is a cross-platform Flutter development framework dedicated to promoting Flutter into areas where Flutter is not officially available, such as wechat apts.

With MPFlutter, the app was deployed to H5 and wechat applets in just one month with simple modifications to some key node code.

Experience a candy app

If you are interested in the results of a bag of candy, try it now in the following ways.

  • Go to the AppStore or any android AppStore and search for “a pocket of candy” to download the app.
  • Search for “a pocket of candy” on wechat to experience the mini program.
  • Click on h5.yidoutang.com/v6/ to experience the candy H5 website.

If you are thinking about how to decorate a new house, or want to know the living conditions of the homeowners, please keep using yidou Candy APP.

Pay attention to our

  • Try the preview version at mpflutter.com/
  • Follow our code and development progress at GitHub github.com/mpflutter
  • Please follow the wechat official account of MPFlutter Developer for the latest information