The 25th AMA gold team invited The author of The Better Scroll, Huang Yi, to do a three-day Ask Me Anything (AMA) (the event has ended). Here we have selected some questions from users and Huang’s answers.
About Huang Yi
Huang Yi, a front-end architect at Zoom, has worked for Didi and Baidu. He graduated from University of Science and Technology Beijing. He is the author of better Scroll, an open source library, and a MOOCs teacher
The list of questions in this article
- Views on technology
- What does The big guy think about Flutter? – @ love of learning
- Which direction will the front end focus? Are there any pain points in the front end that need to be solved? – the @ Cheng Jian
- How do teachers see the future of desktop applications such as electron? -@zoomdong
- How to separate the front and back ends of existing traditional projects? – @big ambition _ front end
- Do you have any suggestions on front-end performance optimization? -@Gerry0808
- Views on non-technical issues
- How do you get on the front end architecture road without a great project? – @ # 1 small white
- How does the technology improve during the growth period? – @xiao Xuan classmate
- How to do career planning – @wang Zilin
- How should Vue advance and improve -@Wongchisum
- How do we advance the primary front end? -@soft-regale
- How can I improve myself, busy with business or based on the old framework? -@whj768702
- When you were new to the Web front end, how many books did you read per day? In what way? It takes ten years to sharpen a sword
- I want to promote the scheme of Vue SSR, there is a feeling of impotence. Do I need to resign to improve -@AppleSun
- How can I develop my architecture thinking? – @Dream and Qinghe
- Now multiple unified development framework so much, there is no learning advice -@TheShining
- How to improve their own workflow, which includes project initialization, local development, coordination, testing, online and other links, how to explore out? – the @ RandyHo
- Share how you think about the team members you want to select and how you assign and evaluate their work – @Tang Feng
Select questions from the community
Views on technology
What does The big guy think about Flutter? – @ love of learning
What does The big guy think about Flutter
Flutter is in the ascendance, but it still needs to be tested in business. Watch out for mobile companies like Didi, Ali, Tencent, tiaotiao, etc.
Which direction will the front end focus? Are there any pain points in the front end that need to be solved? – the @ Cheng Jian
Huang, the front end trends in recent years have been MVVM, componentization, engineering, and typescript. Where do you think the front end will focus in the next few years? Are there any pain points in the front end that need to be solved? Looking forward to your reply, thanks!
The front end is usually done in several directions: complex applications (such as Web Doc scale), data visualization (2D, 3D), front-end engineering, architecture.
Pain points such as the current very popular multi-terminal framework, itself is worth exploring a direction, but due to the standard and implementation of each end is inconsistent, resulting in the current state of debugging difficulties, many pits.
In addition, if you are interested, you can also take a broader view, such as AI, introduction to machine learning and so on.
How do teachers see the future of desktop applications such as electron? -@zoomdong
How do teachers see the future of desktop applications such as electron?
Electron makes it easier for front-end engineers to develop desktop applications, but it’s still a desktop application and needs to be installed, and most enterprises prefer the Web approach. Besides, I think PWA can pay more attention to it.
How to separate the front and back ends of existing traditional projects? – @big ambition _ front end
Hello, may I ask how to separate the front and back ends of the existing traditional projects? What would be a better development process with a separate front end and back end?
To give you an example (I won’t use the actual Zoom example due to some sensitive information, which is partially similar), let’s first list the pain points of traditional projects:
- Old technology (ES5, jQuery, no modularity, componentization, no MVVM framework, no mature build solution)
- Complex project (hundreds of pages, all integrated into a large Web project, coupled back and forth) 3. It cannot be deployed independently, resulting in low release efficiency
To list some of the technical challenges: 1. It is difficult to introduce advanced front-end development methods (pure Vue development, WebPack build) under existing projects. 2. It is impossible to refactor all pages at once. It is costly and risky
Here’s a look at the features of the old project, combined with a picture (at the bottom) :
- Multiple pages, click on the left navigation will jump to a new page
- Server rendering, template based rendering, and left, header, and bottom are common templates.
- Services on the right are independent. Services on the right of each page are different and different templates are rendered.
Finally, the design idea of refactoring:
- Refactoring by page granularity
- The red box on the right side of the page provides a placeholder node that is rendered with Vue and is actually executing a JS code. (Vue is an example here, other frameworks are similar).
- The executed JS code is maintained in a separate repository, allowing for state-of-the-art development and experience (TS/ES6, Webpack, modularity, componentizing, any MVVM framework).
- After going online, you only need to build the JS warehouse to execute. The packaged JS and CSS code can be independently published to the static resource server, and the configuration file can be updated at the same time.
- The template for the main frame reads the static resources it should load from the configuration file
The above is only a refactoring scheme for such scenarios. As an architect, it is necessary to be able to analyze the pain points and characteristics of the current project and propose a reasonable solution based on the scenario.
The separation of front and back ends is the mainstream development mode at present. It physically divides the development of a project into front end and back end. The front end and back end can develop projects in parallel, and data interaction can be completed through the asynchronous API interface.
Do you have any suggestions on front-end performance optimization? -@Gerry0808
Hello big guy, I coordinate Hefei, recently in the use of vUE reconstruction before AngularJS 1.x project. New project forms and other forms are based on configuration, which will lead to a long response time on the front page. Do you have any suggestions on front-end performance optimization? (PS: The system focuses on service data processing, and the user is highly configurable. The first screen is about 7s at present, and may be added later)
Performance optimization requires analyzing performance bottlenecks first, which can often be identified with chrome developer tools. In general, the first screen can cause performance problems. In the case of SSR, the server may be stressed and focus on the time from request to server response. If not SSR, depending on the size of the static resources loaded on the first screen, you can usually consider loading on demand to reduce the load volume, and if the page is rendered by interface data, you also need to pay attention to the response time of the interface. There is also a pre-render solution, which is similar to the skeleton screen idea, first output some placeholders (such as base64 images) in HTML to render things immediately after the page loads, so that the user has an expectation to wait, and then remove the placeholders after JS renders the page.
Views on non-technical issues
How do you get on the front end architecture road without a great project? – @ # 1 small white
How can a small company get on the front end architecture road without a big company background and a great project
First, you need to be a skilled worker who can respond quickly to the company’s business needs. Then can think what pain points in the development process, can by technical means, such as the development tools and plug-ins to improve development efficiency, in this process, you can go to a survey of the wheels of the industry have a mature, the wheels can not meet your requirements, to do research and even to contribute to the wheels, In this process, you will be exposed to and learn a lot of knowledge that you have never been exposed to. In addition, you also need to spend more time to study, study in the direction of your work related technology stack, learn well.
Wait for oneself to have certain ability, might as well send resume to admire big company, just mentioned these experience can become resume bright spot. When you enter a large company, you will encounter more challenges, business scale, development efficiency, performance, stability and so on will be higher requirements, as you continue to face challenges and solve problems, you will naturally grow. Sure, you may start out as a cog in a big company, but you can take the time, research the tool chains you come across, and volunteer to take on challenging tasks. If your skills are recognized, you’ll be exposed to more challenging tasks. Being able to identify the pain points of a problem and come up with a solution that fits the scenario and makes sense is what front-end architects usually do.
As I mentioned above, there are a lot of times when you need to step outside your comfort zone and spend more time and effort thinking and summarizing. So, it’s not easy to be a front-end architect, so go for it
How does the technology improve during the growth period? – @xiao Xuan classmate
I am going to use your Better Scroll recently. I would like to ask you about your personal growth. My current job is just to make some webapp of cover, or some application of reptile. Compared with my friends, I always feel that the things I do are not on the table and can not be taken. And personal technology, performance optimization, the number of bugs also have a bottleneck. I just wanted to ask Big How you broke through. Second, how to balance the gap between ideal and reality. Third, could you share with me how you improve your technology during your growth period? I always feel that I can’t find the direction. I know everything but know nothing
Getting through the bottleneck involves jumping out of your comfort zone and doing something that needs to be solved but that you’re not currently good at.
2. Calm down and compare yourself, not others.
3. You can see the specific introduction in Figure 2 (Mr. Huang’s self-introduction). I am mainly motivated by interest. In the process of studying will also learn a lot of knowledge, accumulated precipitation down.
How to do career planning – @wang Zilin
What do you think about career planning? I have been in the front end for several years, but I feel I am in a bottleneck period. I am confused and have no clear goals.
Usually do technology up 2 ways. 1. Pure technology route: Architect technical expert 2. Technology + management route
Find your direction first, if you are interested in technology, suggest route 1, otherwise go to route 2.
As for management, I am not very good at it. My experience is that first of all, you need to be good at your own technology so that the subordinates can recognize you. Secondly, you need to think about how to give full play to the maximum value of the team, seek benefits for the team members and pay attention to their growth. But no matter which route, your technology must be better, and I do not recommend working for 5 or 6 years to turn pure management, time is too short, even if you do not fall behind technology.
So at present, you still need to improve your technology, break through the bottleneck through the need to jump out of the comfort zone, solve some problems that you need to jump to solve, it is best to find some pain points in your current job, through technical means to solve. I see you’re at Bytedance, and you can keep an eye on what other teams are doing.
I know the headline has a very cow force big guy – Zhang Yuan Wei, he is my mentor in Baidu period, you can also find him to communicate 😀
How should Vue advance and improve -@Wongchisum
Teacher, I would like to ask how Vue should advance and improve? I always feel that I am at the technical level of a business boy
- Do complex applications, think about how different scenarios can be solved under Vue, and figure out the boundaries of Vue’s responsibilities (what Vue can and cannot do).
- Learn about the implementation principle of the surrounding ecological tools such as Vue-Router and vuex, and try to write some simple wheels, such as custom instructions, plug-ins, etc.
- Read the source code to understand the core principles of Vue implementation.
- Participate in the co-construction of Vue or surrounding ecological tool source code.
How do we advance the primary front end? -@soft-regale
Big guy junior front end how to advance the bottleneck feeling
Breaking through a bottleneck involves jumping out of your comfort zone and doing something that needs to be solved, but that you’re not currently good at, requires a jump. Like doing complex applications; Delve into the implementation of a technology stack that you use in your work; Use technology to solve pain points at work. In addition, you can also read some classic books and some advanced video courses.
However, if you are at an initial level, there is still a lot of room for improvement and it should be difficult to reach the bottleneck
How can I improve myself, busy with business or based on the old framework? -@whj768702
Big guy, working overtime every day is serious, busy with business, or based on the old framework, how can I improve myself? I feel confused
First of all, we need to improve our development efficiency. We need to think about whether we can abstract some common modules and components, whether there are pain points in the development process, and whether there are problems that can be solved by tools rather than people. If you can find some problems and solve them by technical means, it will be an improvement.
Secondly, whether the old framework needs to be upgraded? If so, how to upgrade smoothly and how to minimize the impact of the upgrade on the existing business. If the impact is significant, think about whether the organization of the existing project is reasonable. If these problems are thought out clearly and solved, it is also a promotion.
Third, in terms of the business I do every day and some tool chains and technical stacks I come into contact with, have I mastered their principles deeply? Can I quickly locate and solve bugs and pits? Can I quickly build one if the existing wheels cannot meet the needs?
Finally, if you feel that the company is not paying enough attention to technology, you can also consider switching to another pit.
When you were new to the Web front end, how many books did you read per day? In what way? It takes ten years to sharpen a sword
When you were new to the Web front end, how many books did you read per day? In what way?
I read the front end of the book is not much, far less than a few a day, the classic Red Book and rhino book I have repeatedly read, the early is basically a coding – reading – coding – reading rhythm. I also recommend reading books on breadth, such as the Authoritative Guide to HTTP, Mastering Regular Expressions, Head First Design Patterns, and How to Clean Code
I want to promote the scheme of Vue SSR, there is a feeling of impotence. Do I need to resign to improve -@AppleSun
Company and FTP cut figure before, now have a separation not the before and after the end, but the boss think front efficiency is too low, now has a new project, I’d like to push the vue SSR, did a lot of homework, but the meaning of the boss seems to think the front-end is too slow, I couldn’t move of a powerlessness, do I need to improve through resignation
When you propose a plan to the boss, do you enumerate the pain points of the current situation and the advantages of your plan? In addition, the advantages should be supported by data, such as efficiency can be measured in the unit of “people/days”. Then it’s up to your boss to be reasonable, if it’s completely subjective that the front end is slow, then I think it’s very unreliable.
How can I develop my architecture thinking? – @Dream and Qinghe
Mr. Huang, how should I cultivate my own framework thinking?
This needs long-term experience accumulation, say a few key words, reference, thinking, summary, communication. Draw lessons from is to stand on the shoulder of giant, for example can learn zhang Yunlong big guy’s blog: github.com/fouber/blog
Thinking is to think more about how my design is the most reasonable, whether to solve the current business pain points, how to be developer-friendly, user-friendly when launching.
Summary is every experience in writing down, accumulation and precipitation. At this time, we can also think about what is unreasonable and what is a better plan.
Communication is to share some cases, discuss and communicate with everyone, and collide some different thinking sparks.
Now multiple unified development framework so much, there is no learning advice -@TheShining
Now there are so many unified development frameworks, there are no suggestions to learn
First think about whether your business needs multi-end framework, such as App, H5 and small programs need the same design, the answer is that in many cases are different, from the product design, App is usually the most complete function, H5 retain the main function, and small programs are mostly a quick entry.
Secondly, most of the multi-end frameworks are not mature at present. If it is a core business, it must be used with caution. In many cases, large companies will also use this kind of multi-end framework in some simple business that is not operational demonstration.
Finally, the technology selection must be made, so the technology stack, the maintenance of the framework, and the activity of the community should be weighed.
How to improve their own workflow, which includes project initialization, local development, coordination, testing, online and other links, how to explore out? – the @ RandyHo
As for the front-end development, how to improve your workflow, the current workflow is very primitive, the process is clear requirements – project development (development environment/formal environment)- test – go live. If you interview in a big factory, the work flow is more vulnerable. Such as Huang Lao including project initialization, local development, coordination, testing, online and other links, is how to explore out?
These are trained in the companies, in fact, the programmer should more to think about a demand from all aspects of produce – fall to the ground, now most people can do it from the development of a project – online each process properties, actually in Zoom we can start from the design of the product, they will be to design products should be how to implement, the user needs to what kind of function, An engineer should design and develop products from the perspective of owner, and be responsible for product testing and launching. So even in a company with a lot of product managers, engineers can be involved in the design and discussion of products.
Share how you think about the team members you want to select and how you assign and evaluate their work – @Tang Feng
Mr. Huang, when you were in Didi, you were the first member of your team. Did you build the team? Could you please share with us how you considered the players you wanted to choose, and how you assigned and evaluated their work
I was the first one, but I didn’t become the leader later, so I can’t talk about some things here. I would like to share how I recruited people when I was the head of the WebApp front-end architecture team. It mainly depends on whether the candidates are in line with the overall temperament of the team. For example, our team is fond of toss technology and sharing, and if a candidate is outstanding in this aspect, it will definitely be a big plus.
The assignment of work mainly depends on the situation of each person, usually one person will be responsible for a piece of business, but also have related technical direction. I will assign some basic development work to fresh graduates, because they need to do a lot of business, and I will assign some challenging work to some potential students, so that they can grow quickly. In addition, our team also has excellent students who will take the initiative to take charge of some technical direction, which I encourage very much.
Special: Better scroll
Maintenance and new edition issues
I recently found a bug with the Better-Scroll. Lateral scroll wheel play. Set passthrough vertical to trigger the tap event on the element (if the finger is only drawn in portrait, it does not trigger the horizontal scroll). There are still many issues on Git 😄. You’re too busy, big man. And your vue tutorial is great 👍
At present, the better Scroll is mainly maintained by my former partners in the Didi team. Recently, we are mainly working on the reconfiguration of 2.0. The official version will soon be released 😀
This issue of AMA community friends collated article
Thanks to Full Stack For organizing this AMA from a development perspective, read portal: juejin.cn/post/684490…
Due to the length of this issue, only some of the questions are included in this issue. Mr. Huang also answered many other technical and non-technical questions. Welcome to his AMA to exchange technology, Portal.
Past AMA
- AMA: The author of Spring Cloud Microservices, DD, talks about development architecture and career planning
- AMA: Listen to Geng Tan Zhang, senior technical expert of Ant Financial services, micro-service, architecture, and log
- AMA: Listen to Liu Wangshu, author of “Android Advanced Unlocking”, talk about Android development and advanced things
- AMA: Listen to Wu Jifeng, Client Architect of Xianyu, talking about Flutter and mobile development
- AMA: Tencent Omi framework author –dntzhang talk about front-end development, learning path and technology progression