Compiled Product — bin

WubaNovember 19, 2022About 2 min

This article introduces you to the bin file of one of the compiled products. Where does # 1.bin come from?

You should know that Fair's design idea is to convert the layout-related code in the dart file into a DSL, and finally output a JSON file. JSON files can help us achieve dynamization.

However, we have found in practice that if you use JSON files for dynamic, you need to perform deserialization operations: initialize the parser and parse the data.

The deserialization operation not only prolongs the page load time, but also requires additional memory allocation. In terms of user experience and performance, there is a lot of room for optimization.

Therefore, we consider removing the deserialization operation.

The implementation method is to use FlatBuffers as a serialization tool. If you don’t know about FlatBuffers, you can read the official documentation first: Portalopen in new window

In short, using FlatBuffers can avoid deserialization operations, which greatly improves the loading speed of dynamic pages.

The product of serialization using FlatBuffers is the bin file.

We compared the loading speed of the JSON file and the bin file (the left is the JSON file, the right is the bin file):

petal_20220530_195101_.gifpetal_20220530_195145_.gif

It can be seen that the loading speed of the bin file is much faster than that of the JSON file.

Since bin files are better than JSON in performance, why do compiled products still keep JSON files?

In fact, the reason is very simple, because JSON is very readable and can be used for debugging during debug. The bin file is a binary file, which is not readable, but has better performance and can be used in the release environment.

Therefore, we keep the output of the JSON file.

2. How to use the bin file?

The bin file is used in the same way as the JSON file, and it is also loaded using FairWidget:

FairWidget(
  path: 'assets/fair/lib_main.fair.bin',
  data: {
    'fairProps': jsonEncode({'title': 'Hello'})
  },
)

QA: Why is there no bin file in my build?

Generally speaking, if the bin file is not generated, it is due to the lack of the FlatBuffers environment. To install the FlatBuffers environment, refer to the following steps:

1. Install CMake

Download address: https://cmake.org/download/open in new window

Download and complete the default installation.

![](https://cdn.nlark.com/yuque/0/2022/png/2953420/1654064035156-91fee011-a678-4526-b4b3-095e7ca93e54.png#clientId=u0aa37f49-7e08-4&crop=0&crop=0&crop=open in new window 1&crop=1&id=IxLud&originHeight=316&originWidth=376&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=u8b7b39a3-c113-48f0-91a6-7da5dc1aeba&title=)

2. Download the source code of flatbuffers

Download address: https://github.com/google/flatbuffers.gitopen in new window

3. Open CMake software

![](https://cdn.nlark.com/yuque/0/2022/png/2953420/1654064035208-da318a96-fc4f-4a26-9255-df6153f2947c.png#clientId=u0aa37f49-7e08-4&crop=0&crop=0&crop=open in new window 1&crop=1&id=qwg8O&originHeight=1692&originWidth=2022&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=ud70f8184-e4b4-457c-9b95-bbd401d590f&title=)

After successful execution, the following files will be generated:

![](https://cdn.nlark.com/yuque/0/2022/png/2953420/1654064035409-19198b09-b9ba-4da2-9f5a-3ef25ac36395.png#clientId=u0aa37f49-7e08-4&crop=0&crop=0&crop=open in new window 1&crop=1&id=J4vqL&originHeight=982&originWidth=1002&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=udf3240ad-12cb-46a3-a0d1-c24d6d3afe8&title=)

We cd into the flatcBuild directory.

Then execute the make command

make //generate flatc

![](https://cdn.nlark.com/yuque/0/2022/png/2953420/1654064035160-6efe29a3-10f4-4dab-90b9-ef3ae74d5b82.png#clientId=u0aa37f49-7e08-4&crop=0&crop=0&crop=open in new window 1&crop=1&id=ZHJJ0&originHeight=1518&originWidth=1586&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=u2ab44a95-4a66-460e-98d2-f85c60bbd4a&title=)

In this way, flatc is successfully generated, and then you need to install flatc

make install //install flatc

If you run into the following error:

![](https://cdn.nlark.com/yuque/0/2022/png/2953420/1654064035144-3610c1ec-033c-4790-8a97-b85f0f13950d.png#clientId=u0aa37f49-7e08-4&crop=0&crop=0&crop=open in new window 1&crop=1&id=pWeAZ&originHeight=876&originWidth=1542&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=u14de19d0-566c-4993-9055-1a61d7b9900&title=)

Then change make install to sudo make install to solve it.

In this way, our FlatBuffers environment is installed.

Last update:
Contributors: sunzhe03