Hi digg friends, the second issue of “JTalk big front-end author interview” is coming. In this issue, we interview an author whom everyone is very familiar with in the station — Love cat de Xiao Guo (dig gold homepage juejin.cn/user/817692…). , he has maintained a high frequency of more articles in the nuggets of high-level authors, in their own field of continuous deep learning. Each of the authors have a lot of flash points, this interview with everyone to understand the love cat de Guo.

To introduce myself

What are the author’s main experiences, areas of expertise and concern? We see that the author has a book entitled “Detailed Description of Flutter Development”. When did the author get into Flutter technology and how did he first learn Flutter?

I am Guo Shuyu, Github ID CarGuo, the author of “Detailed Description of Flutter Development”. I have been deeply engaged in the field of mobile development for many years. At present, I am mainly engaged in the work related to big front-end, mainly involving the following fields: Flutter, Android, React Native, Weex, Cordova, and of course, sometimes “moonlight” iOS and Web related content.

I was invited by Nuggets in 2016. As one of the first writers to enter the platform, I have published more than 100 articles covering Android, React Native and Flutter, including some hot information in the field of technology. Of course, I am also a boiling point “fish master”, posted a total of nearly 500 boiling points.

With the nuggets along the way, can say in this several years of rapid growth, the nuggets platform gave me great help, through the nuggets also met a lot of bosses, got to go to some conference BBS to share the opportunity of technology and of course this also benefited from spare time writing and open source, they gave me more the way of communication and learning.

I came into contact with Flutter because there was an internal technology sharing at that time. The company had to do the technology selection, so the topic of the sharing was “Current Situation and Analysis of Mobile Cross-platform Development”, and it happened that Flutter was just coming out at that time. I was involved in the research and analysis of ReactNative and Weex.

My first impressions of Flutter when I first encountered it were not encouraging:

• First of all, the nested method of Flutter made me a little resistant at first impression;

• Second, Flutter chose Dart instead of JS because the Dart language had already gone through its “Waterloo” at that time.

• At the end of the day, Flutter had very little third-party support;

Of course, as I learned more, I realized that I was “sloppy”!

The cross-platform rendering effect of Flutter surprised me for the first time. I had opened the corresponding GSYGithubApp client when I learned React Native and Weex, so when I investigated and studied Flutter, I reconstructed the GSYGithubApp project to create a version of Flutter. Although I encountered many problems during the process, I gained a new understanding of Flutter by solving these problems.

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 me have a great attraction to Flutter, which leads me to the path of Flutter.

From Android to the big front end

From Android to the big front end, from Android to cross-platform and now to the big front end, how to adapt and transition along with the trend of technology development, can you give one or two examples?

In fact, the transition from Android to cross-platform is a natural process. With the maturity and stability of the technology platform, the threshold of the technology will be relatively lower, and there will be a pursuit of more efficient development methods.

Here’s a less rigorous example:

I still remember in 2016, when I led a mobile development team, there were at least 6 people, most of which were 3 Android and 3 iOS, which was basically the standard for a common small and medium-sized mobile app development team at that time.

However, in 2021, many small and medium-sized applications basically need only 2 to 3 mobile developers to complete the basic development requirements of the App. Even in the past two years, I have contacted many teams that have one Android, one iOS and one front-end joint development.

In the past two years, I have come into contact with many front-end businesses and started to take charge of app-related businesses through Uni-App, React Native and Flutter. Also interviewed some iOS and Android developers in learning front-end and small application skills; Perhaps this is what the circle calls a “roll,” though I prefer to call it a “vanishing bonus period.”

Earlier emerging technologies will because in the field of the “wild” and caused a lot of bonuses, the first batch of “eating crabs” often can win the lottery, but with the development of community and “cultivation” of other researchers, mature technology must make “the threshold” more and more low, the use of more and more convenient, business, the pursuit of technology must be “lower cost” and “higher availability.

Some shallow ecological examples:

• react 、 react-native 、 react-native-windows 、 Taro 、alitaSuch as thereactEcological;
• vue 、mpvue 、 weex 、uni-app``Jetpack Compose 、Compose for desktopSupport on mobile and desktop;
• SwiftUI 在 iOS.iPadOS.macOS.watchOS, tvOSCapability of component application;
• FlutterSupport on mobile, desktop, and Web;

As the picture above shows, we can see that more and more apps are beginning to use cross-platform capabilities, and I personally think this “technology dividend” is good for programmers. New technologies represent new possibilities, even new job opportunities. React Native and Flutter have both become important components of my career.

Of course, I understand the resistance to new things: most of the time we want to settle for what we have, and why all the bells and whistles?

Therefore, there is another point: to learn something, we still need to have a deep understanding of the framework and design ideas, and understand the design concept of a technology, so as to face the trend of rapid iteration in a “constant response to all changes” way.

Of course, some people say: “You see this guy is misleading others, chew more than the least, jack of all trades, why don’t I master a platform?”

This is indeed a problem, but before I thought about it, I found in my conversations with some netizens that sometimes people just think about this problem, mainly using this question to convince themselves that they can “lie down”. In fact, more and less fine is right, but vice versa is not, not you do not learn more natural fine.

It’s best if your job provides you with scenarios for deep mastery, because many times mastery of a technology requires a business scenario to validate and advance it. However, if it is not a large-scale business scenario and has not experienced various extreme tests, the so-called mastery is only superficial mastery in many cases.

In my opinion, mastery does not mean that you have mastered the invocation of frameworks like React and Vue and the recitation of source code, nor the API invocation skills of frameworks like Flutter and Android, but that you have understood the core ideas and concepts of these things.

• Such as theAndroidonCanvasTo use the skills ofFlutter 和WebOn;
• An understanding of responsive development and state management, for example, allows me to learn more aboutRN 和 FlutterIt can also be used well, even in the futureJetpack ComposeCan also be used quickly;

The abstraction of technology allows your technology to migrate and adapt, so in my view, the future of the biggest front end is “not about doing what I know, but doing what I need.”

About the Flutter

Since you have written a book on Flutter, can you briefly introduce your knowledge and understanding of Flutter, its current status and advantages compared to other technologies?

Flutter is a cross-platform UI framework. At its core, Flutter addresses the cross-platform capabilities of UI, so it is not a cross-platform framework that can “do everything”.

So you can see that Flutter will need various platform plugins to support its non-UI capabilities, as well as some platform build capabilities to improve the Flutter development experience. ** So Flutter is not about killing the original platform, it’s more about “parasitical” relationships.

Second, the key to Flutter is its control rendering ability to interact directly with the GPU via Skia, which can be Either OpenGL or Vulkan on Android depending on the situation. IOS also uses Metal to speed up rendering if there is support for Metal.

Therefore, Flutter can be well decoupled from its controls and platform and achieve good performance, as shown in the diagram above:

• For the native Android, the native code through SKia finally to GPU rendering, Android native system itself has skia;

• For Flutter, the Dart code controls pass through the SKIA to be rendered on a GPU. The SkIA used on Android and the SKIA packaged into the project are used on iOS.

• For ReactNative/Weex and similar projects, they are running in their respective JS engines, and finally through mapping to native controls, using native rendering capabilities for rendering;

• For Hybird’s cross-platform frameworks such as ionic, the main use is WebView’s rendering capabilities;

It can be seen that cross-platforms such as ReactNative/ Weex are closely related to native platforms:

• Benefits: If you need to use the control capabilities of the native platform, the access cost will be lower;
• Disadvantages: rendering heavily depends on the ability of platform controls, more coupling, differences between native controls between different systems, different versions of the same system in the control of the property and effect differences, combined in the later development process is a great maintenance cost.

For example, a debugged style on iOS fails on Android. Styles that work on Android are not supported on iOS; Control effect in iOS platform, in Android has a different display, such as drop-down refresh, Appbar, etc.;

Flutter differs from this by rendering directly using SKIA and GPU interaction, implementing platform-independent controls on both Android and iOS platforms.

To put it simply, most of the widgets in Flutter are not compatible with Android or iOS. However, blending with native widgets is costly and difficult, and the framework and engine face more compatibility challenges.

Suggestions for Flutter learning

For learners of front-end Flutter, can you share the author’s own learning experience? You can share your own suggestions for Flutter learners at different stages.

The most important thing about learning about Flutter is to understand that the widgets inside Flutter are not real controls.

Although the interface code we write with Flutter is basically widgets, widgets, as an immutable object, cannot be a truly working UI object.

The real View-level objects in Flutter are Element and RenderObject. Element’s abstract object is the BuildContext that is often used in Flutter.

Here’s an example THAT I often mention:

As shown in the following code, testUseAll Text is used in three places on the same page, and the code renders normally. If it is a real View, it cannot be used in multiple places on the same page.

So widgets in Flutter are more of a configuration file status:

The configuration code used to describe the interface, so describing the file is largely free of performance concerns about nesting, and we can also configure templates to optimize the maintainability of the code.

Therefore, I always emphasize that it is more important to understand the elements, RenderObjects and even Layer behind the widgets than to learn how to use the hundreds of widgets in Flutter. So that you can systematically understand:

• How does a Flutter layout through BoxConstraints and Size?

• How does Flutter accomplish sliding and typesetting of lists via SliverConstraints and SliverGeometry?

• What is the role of Element in Flutter? How does it abstract into context and connect widgets to RenderObject?

• How does each Layer of a Flutter work independently? How does each Route maintain its independence in a drawing board and Canvas?

Only by understanding these issues can we become comfortable with Flutter and be able to “juggle” the UI details of Flutter in our daily development.

The answers to these questions are mainly concentrated in Chapter 3 and chapter 4 of The Practical Description of Flutter Development, which is the core content of the book. Other content may change with the upgrade of the Flutter SDK, and this part is the soul design concept of Flutter. Can follow version iterations without becoming obsolete.

Big front-end learning tips

Now the single point of technology in the actual business application is less and less advantage, what is the author’s advice for learning the large front end?

First of all, it is not to say that there are fewer and fewer advantages, but for a large group of developers, there are few positions and scenes to go deep into the bottom. As I said before, if there is no corresponding scene and platform, it is actually difficult to support your development on the road of in-depth mastery.

Here’s an example:

You want to get deeper into audio and video, so you start learningFFMpegAnd you learned how to passFFMpegPlay video, transcode coding, cross-compile and more… And then what?

If you want to continue to become proficient, you need to start to understand video encapsulation protocols, video encoding formats, audio encoding formats, network protocols and so on, and then you need to practice:

• How to optimize encoding for different formats;
• How to optimize and reduce redundancy for different protocols;
• How to optimize the key frame and frame sequence;
• Under different network conditions, the bit rate is optimized for playback.
• How to reduce the delay of livestreaming frame catching;
• How to compress and transmit video without losing frames as much as possible;

Corresponding to the above content, if you do not have the real scene and user data, it is difficult to support you in this road to continue to master advanced studies, of course, I do not advise you to give up, if you have the ability and conditions, certainly in a certain technology can continue to master is the king.

And what is the big front end? That’s the breadth of knowledge! The breadth here does not mean that you have to know a lot of technology, but that you have to be able to abstract the technology and expand the general ability.

Big front-end capabilities require you to be able to achieve 75 points on one platform and apply that score to other platforms in a very short period of time, as mentioned earlier:

• Leverage Android’s Canvas skills to Flutter and the Web;

• The understanding of responsive development and state management can also be leveraged by RN and Flutter, and even Jetpack Compose can be quickly picked up.

The abstraction of technology allows your technology to be transferable and adaptable, and it only takes a short period of documentation and adaptation to complete the platform’s work. In my opinion, the future of the biggest front-end is “not what I do, but what I need to do.”

On Continuous Writing

We also see that the author is a gold digger of high-level authors in the more frequent authors, and the content quality is very good, what is the biggest impact of writing to you? Any writing tips and advice?

Writing has influenced me most in three aspects: learning, memory and inspiration.

learning

First of all, the basis of continuous writing is learning. In fact, I am often impatient to learn foreign articles and documents, and when I choose to translate them into Chinese for output, I will patiently read the corresponding content, because I cannot translate the content well without reading it.

The other thing is, when I’m writing, I often get to a point where I stop and think, “Why?” Because a lot of times “knowing something” and “understanding something” are two different things.

When I write an article, I need to turn “I know” into “I understand”, and turn scattered knowledge into a system that can be colluded with. Only when I really understand the “what” of this knowledge point can I turn it into a well-understood text, which is actually a process of my learning.

memory

First, the second purpose of continuous writing is to remember.

As you can see on Nuggets, I’ve written a lot of articles on everything from Android, React Native, Weex, to Flutter. I’ve written about frameworks, as well as in-depth issues and issues, but I’ll probably forget a lot of them after a while.

Therefore, when I choose to convert the content I want into articles, I can retrieve the corresponding memory through these articles when needed, which is also one of the purposes of my output.

incentive

Finally, there is motivation. Writing is a good positive motivation for me, because what I write is read and enjoyed by others, which gives me the motivation to keep producing.

I believe that many programmers can try to do open source and writing in the past, because it is in itself a good packaging itself, but that there is a mistake: it is possible you think that as long as open source can night fire, a project as long as write a good letter can night 10 w +, it is very difficult, with this attitude often bring down easily.

In my writing experience, it’s good to get at most a few hundred views for an article, and then it’s all about time and promotion.

“Even the smell of wine is afraid of the back alley.”

• Introduce your article through a companion project;
• Go to the major platforms to contribute;
• To answer other people’s questions and build your own community;

This is a long process, but I always like the saying that “people tend to overestimate the short-term benefits and underestimate the long-term returns”, continuous sharing and promotion is an important factor.

In addition to writing topics may find: “Oh, the original online has been written”, and then give up the subject matter does not write, this is a very normal state of mind, but such a give up will make you more and more difficult to produce content, because you can not guarantee that you must be faster than others.

In fact, when you need to write content, after you find that others have already produced corresponding content, you can refer to others’ content to see if there is any difference with your idea, and then what is missing or can be sublimated, or even you can describe your point of view from another Angle or in 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.

Finally, writing provides a service of content and expects attention and communication, so compare yourself to an unnecessary emotional trap.

“Don’t be the trash can of other people’s emotions, put the lid on or stay away at the beginning.” When faced with unkind comments or ineffective communication, I choose to block or stay away, which may save me more time to do useful things.

Benefits to the