Hello everyone, I am Guo Shuyu, the author of “Detailed Description of Flutter Development”. I am very glad to have the opportunity to share with you today the topic of Flutter and big front end. Today, I will mainly share my understanding and thoughts from three aspects of Flutter, big front end and writing.

1. Why do I choose Flutter?

First Flutter

I came into contact with Flutter because I wanted to do an internal technology sharing of the company. The theme of Flutter was “Current Situation and Analysis of Mobile Cross-platform Development” because the company needed to do technology selection. At that time, Flutter was just coming out. I added it into the comparative analysis of ReactNative and Weex.

When I first learned about Flutter, I felt about Flutter: “What is it?”

Yes, my first feelings about Flutter were not good:

  • First, the nesting of Flutter disgusts me;
  • In addition, Flutter chooses Dart instead of JS because Dart has already suffered its own “Waterloo”;
  • At the end of the day, Flutter had very little third-party support

However, THERE was not enough material at that time, so I added Flutter into my research material in order to make up the number of words.

Of course, the law of true fragrance, as the deeper understanding, I found that I was “hasty!”

As I have experienced ReactNative and Weex, the biggest problem for me is performance and compatibility adaptation. The most representative problem is Why Airbnb Gave up ReactNative, which was popular at that time. ReactNative continued to face certain compatibility and performance issues in its late stages, which ultimately led Airbnb to abandon cross-platform development.

After learning more about Flutter, the first thing that surprised me the most was its rendering.

I still remember when I developed the basic project effects on Android, the first time I ran it on iOS, there was no problem, and the rendering results were completely consistent. Even when I used the interface effects that should have been unique to Android on Android, they also naturally appeared on iOS. This makes Flutter have a great attraction to me.

Why does Flutter achieve good cross-platform rendering? This involves Flutter’s unique cross-platform rendering engine.

This is because Flutter’s independent UI rendering gives it extremely low platform coupling, as shown in the figure. The platform-independent rendering engine also improves performance and ensures code reuse.

Why did I choose Flutter? It is to improve the reuse rate of code logic, so as to reduce the cost of the same logic in different platforms.

I’m sure you’ve all had the experience of iOS or Android developers saying, “This is what the system provides, you need to get them to change it”…

The advantage of Flutter

So what’s good about Flutter?

  • The UI of Flutter is platform-independent. The controls are drawn using an independent Engine. There is no need to adapt the platform interface independently.

  • 2. Skia engine directly interacts with GPU when drawing, there is no “middleman to earn price difference”, and even different platform versions support Vulkan and Metal rendering modes.

  • 3. Due to the better layering concept and independent rendering engine, The cost of upgrade of Flutter is relatively low. We can also see that Flutter has been advancing rapidly over the past year or two. (The upgrade cost here is compared to RN because the interface can be independent of the platform API)

  • The dependency depth of the third party is very low, and the dependency of the official framework is also very small, which is easier to trace. This is actually related to the concept of Flutter when it was originally created. This will be explained later.

Dependencies on Flutter are also shared globally, unlike node_module, where downloads are shared locally. The node_module of the same project was deleted due to insufficient disk space. After reinstalling the project, we reported an error. Then we had to find the node in the black hole.

Flutter disadvantage

Of course, blowing a Flutter doesn’t necessarily mean that a Flutter is better than any other frame. In some situations ReactNative is clearly better than a Flutter.

  • 1.Hybrid development on Flutter has no advantage, even drag. It is really a “win without defeat”, because Flutter only needs a platformSurface In the end, it’s about providing oneViewSo its page stack and render tree are detached from the native, which causes the cost of mixing a Flutter with the native or with the native.

For example, incorporating Flutter into the native framework is a big problem with page stack mixing. Although there are many third-party frameworks that do this, the overall experience and stability are still not satisfactory. The second is to mix native UI into Flutter, the most common of which is WebView. Due to the particularity of Flutter design, its performance and keyboard problems have always been a headache.

  • 2. Hot update, it does not have a mature code-push mechanism like ReactNative, and the packaged binary product itself does not conform to the dynamic strategy of the platform. Although there are many third-party frameworks that use similar mapping methods, the maintenance cost is still quite high.

  • 3. It should be understood from the previous introduction that Flutter is actually a separate game-like engine, so it consumes a lot of memory, especially if you are using Flutter for hybrid development. This is equivalent to having a small game engine in your application.

  • 4. Volume. The dynamic library of Flutter must take up a certain amount of volume. On Android, the system supports Skia, so it is better, but on iOS, the Skia engine needs to be packaged into the App, so the volume of Flutter is much larger.

Flutter nesting problem

Ok, so much for the pros and cons of Flutter, let’s finally talk about the nesting of Flutter. Why is nesting possible?

In fact, there are certain reasons: The Widget is not a real control, as shown in the code below, where testUseAll Text is used in three places on the same page, and the code renders normally. A real View cannot be loaded and used in multiple places on the same page.

In a Flutter setting, widgets are configuration files that tell a Flutter how you want to render. Widgets in a Flutter pass through Element, RenderObject, and even Layer to render. So widgets that are configuration files can be @immutable and can be refactored with every status update.

Flutter is not afraid of Widget nesting because it is not officially working. Nesting does not cause a serious performance penalty. However, we are also afraid of visualization problems caused by nesting.

There is no denying that the syntax of Flutter is rich, but the official solution is to abstract the configuration file, which is the most common Container in Flutter.

The Container itself in a Flutter is just a Container Widget, It provides flexible feature matching by matching basic widgets such as Padding, Align, ClipPath, ColoredBox, DecoratedBox, Transform, and so on.

This is actually one of the ideas that Flutter provided at the very beginning, so you can see that Flutter is different from the UI framework and cross-platform framework that you’ve always understood. To summarize:

  • First of all, its cross-platform innovation can achieve better performance and code effect, and its design will not affect the performance loss of experience due to nesting.

  • The hierarchical logic of Flutter in the Dart Framework causes developers to write widgets that are configuration files, internal elements that are instances, renderObjects that are drawn objects, etc. This is different from previous UI frameworks.

So if you want to understand Flutter, you need to understand the design of the soul in Flutter, the positioning and design of widgets, elements, RenderObjects, layers, etc. This is also the core of my previous book, chapters 3 and 4.

2. What are the technology trends of the big front end in 2021

The Flutter genus does not belong to the front-end

Why talk about the big front end after Flutter? I’ve actually been around a lot of front-end developers who said to me, “Flutter should not be a front-end.”

But what’s interesting about Flutter is that it came from the front-end Chrome team.

The founders and the whole team of Flutter are almost entirely Web based. In an interview with Flutter’s director Eric, Flutter came from an experiment inside Chrome where they removed some of the messy Web specifications. Performance in some benchmarks was up to 20 times faster, so Google started work internally, and Flutter emerged.

So there’s less grammatical sugar.

Dart is also Web based. Flutter is actually a front-end technology that can be applied to clients.

Is cross-platform widely used in China?

Is cross-platform technology widely used in China? The answer is yes. Here is a simple data. I have made a data statistics of 53 apps before, among which the application of cross-platform is as follows:

  • There are 20 models of Flutter;
  • React Native has 22;
  • Weex comes in 17 varieties;

It can be seen from the data that many of them use more than two cross-platform technologies, and even three of them are used. If you are interested in this part of the data, you can find my analysis on my official account or Nuggets.

In addition, I recommend an open source project: LibChecker can check the details of the packages installed on your phone. You can see the application situation of the cross-platform technology in reality by looking at it yourself. The picture shows the application situation of Flutter, React Native and Weex on my phone. Large front ends and cross-platforms have penetrated into a variety of development requirements.

Of course, cross-platform requires a platform! Therefore, the native development of the platform is the basic support, so the development of the platform itself is not “cool”, which is an important premise.

Cross-platform is not a “dimension reduction blow”, cross-platform and big front end just make the ability of development more common, so through various cross-platform capabilities, the client and front end merge into a big front end, note the “convergence”.

What does the big front end need?

The breadth of knowledge, the breadth here does not mean that you have to know a lot of technology, but you have to be able to abstract the technology and the expansion of general ability.

Of course, some people say, “Chew more than you can chew, but how to handle the situation of jack of all trades and master of none?

This is indeed a problem, but before THINKING about it, I found in my communication with some netizens that sometimes people just think about this problem, mainly using this question to convince themselves that they do not need to learn a new one.

More and less master is right, but vice versa is not, you do not learn more natural master, so this is a matter of personal measurement.

According to the simple score division, mastery does not belong to the category of 0-60 points, but 80-99 points, this part needs perseverance, savvy, the most important is to have the support of the work platform.

Why do you say so? In the process of communication, some people say that they want to go deep into XXX to master a certain technology, but eventually they still “pass through three doors but fail to enter”.

Most of the time, mastering a certain technology needs to be verified and promoted by business scenarios. If it is not a large-scale business scenario and has not experienced various extreme tests, the so-called mastery is only superficial.

And most of the time on the “exam”, the average person can actually do it and the range is about 75 points, 75 points that’s what I think the big front end is.

The 0-60 range is what most people can master, and the 60-75 range is something that takes some thought to achieve, and that’s the range of capabilities that can be quickly applied horizontally.

Therefore, the so-called mastery does not mean that you have mastered the invocation and source code of frameworks like React and Vue, or the API invocation skills of frameworks like Flutter and Android, but that you have understood the core ideas and concepts of these things.

  • Take Android’s Canvas skills and apply them to Flutter and the Web.
  • For example, my understanding of responsive development and state management can make good use of RN and Flutter, and even Jetpack Compose can be used quickly in the future.

The abstraction of technology allows your technology to migrate and adapt, so I see the future of the big front end as “not doing what I can do, but doing what I need to do.”

3. Why do programmers write?

This is a bit of a digression, but it’s actually a useful process.

What motivates you to write?

In fact, we should find an interesting phenomenon, that is, when the ancients wrote poems, there were many excellent lines with insufficient themes.

“I feel undervalued, and I want to find bole.”

The same is true in the world of programmers. If you find yourself blogging and working on open source projects all of a sudden, your colleague may be looking to move on.

What I really mean by that is, there is a need for motivation to write, or what is the motivation for writing in the first place, why do you start writing?

As I said earlier:

  • In order to change jobs;
  • And in order to increase the endorsement of career, show yourself;
  • Some even do it to make extra money;

After the initial impulse to write, keeping writing is the hardest part, and there is a key factor.

“Mentality”

One key to supporting continued writing is the “mindset.”

A lot of times when we write something, we will find: “Oh, it has been written on the Internet”, and then give up, this is a normal state of mind, but this kind of giving up will make it harder and harder to produce content, because you can’t guarantee that you will be faster than others.

In fact, when you want to write content, you find that others have already produced, then you can refer to the content of others is different from your idea, and then what is missing or can be improved, or you can describe your point of view from another Angle or a more systematic way.

Standing on the shoulders of others can see further, of course not to let you CV plagiarism, because plagiarism is not significant, and it is not a pupil to write silently.

This is one of the mindsets that writers need, not to be afraid of running into words.

And writing another state of mind is the “service”, writing is a service industry, started a lot of times we need to face the problem is that nobody see, sometimes have despised or denial, even some knowledge simply venting, these I have met, because you can’t please everyone to serve all people.

We provide content as a service and expect attention and communication, so compare yourself to an unnecessary emotional trap.

“Don’t be the trash can of other people’s emotions, just put the lid on or keep the lid off at the beginning.” Since then, I’ve learned to block or directly approve unkind comments, which may save me more time to do useful things.

Finally, good writing advances

Finally, what is good writing progression: that is, turning advanced content into down-to-earth content

If you read an article and think, “Wow, cool, but why can’t I just read it?” This shows that this article is not a good popular science content, this part often appeared in the early “RxJava”, “coroutine” and other fields of the article.

Good writing can generally be divided into three stages:

  • 1, writing a document is the first step, because you tell others how to understand what you write, so if you want to start writing, the easiest way to start is to write a document, to introduce your things clearly, is a good start.

  • 2, write source code analysis is the second step, that is to learn and share how to understand other people’s things, this process can let yourself in the process of learning a summary, and introduce the content of others is a kind of abstract ability of progress.

  • 3, write problem solving and application of ideas is the third step, tell others how to understand other people’s ideas, which requires the author to introduce the content of their own understanding, to be able to turn the content into a better understanding of the grounded text content.

In fact, the introduction of so much writing content is to tell you: “the big front is a kind of thought, is to make your existing ability can be used more widely, and writing is to help you abstract the ability of a process.”

This is also my experience in writing my book, from how to use Flutter and understanding the XXX of Flutter deeply, I have a new understanding in retrospect.

From this perspective, I think we can tell later people how to understand Flutter. In this way, although Flutter is constantly updated, this part of Flutter is the core concept of its design, so it will not be outdated and can also become a good content bearer.

For example, today’s topic is: the big front end is an idea that allows existing capabilities to be applied horizontally. Writing is the process of refining your technical thinking, thus helping you to turn your capabilities fixed on a certain framework and a certain platform into abstract capabilities.