This year’s front attack (middle)

Originally did not plan to write this article so fast, originally had done “this series should be only I see” of the preparation, but did not expect to finish the last article and some people urge more, thank you for your support 🙏 then speed up the writing progress of this article ~ series of other articles 👇👇

• This year’s front attack (on)
• This year’s front attack (2)

• Originally, I planned to write this series in two parts, but in the process of writing, I found that the length would be very long if they were put together 😅, so I decided to split it into three parts. The first chapter mainly introduces the current and future trend of front-end development, efficient team collaboration development configuration; The middle part is mainly career planning and factory selection suggestions; The next part will focus on how to build a front-end project from scratch.
• This article is mainly written for students who have just graduated or just changed their profession to pit. It summarizes some experience and learning experience, and can also be regarded as a guide to pit career with their own experience as an example.
• The technical stacks and frameworks covered in this article will not go into too much depth, but will mainly introduce career planning and personal growth planning. Those who are interested in a particular point in the article can do so privately.

Continued growth

The continuous growth here mainly refers to the growth in technology and professional ability. My personal opinion is that every industry needs knowledge barrier to support, otherwise it is difficult to make achievements in this industry or field, or even difficult to make progress. Even if it is to be a wechat business, a traffic network celebrity, without marketing foundation, without operation knowledge to support, without planning ROI, listen to the wind is rain, it is only a huge mobile leek. Let alone science and engineering course this kind of meeting is meeting, won’t be won’t industry. Therefore, in my opinion, it is necessary to constantly improve my knowledge barrier. It doesn’t matter what age you are, how much experience you have, what industry you work in.

As for the continuous growth of people in the front, I remember a sentence that the speaker said when I listened to a goose factory lecture in college:

The core of a programmer is one word: lazy

This lazy does not mean lazy, but code farmers from the bone should have a “repeat things to the machine to do” drive. I was a junior at the time, although not yet in the school entrance, but I decided to pit because of this sentence. A few days ago, he said something similar when listening to a big factory technology bull share. It basically sums it up:

• To abstract concrete problems, reuse logic as much as possible
• Automation of repetitive functions to improve efficiency and reduce human error
• Modular architecture design, easy to change and expand

Looking back at their own code farming experience, these three points in the pit after I feel more and more deep. At the beginning of writing code only focus on the implementation of specific business functions, running is successful; Then it tries to encapsulate the code to encapsulate the components, implementing the first step of “lazy” reuse code; Later, I will slowly use some scaffolding and engineering, which can improve some efficiency and reduce some human errors, and realize the second step of “lazy” automation; Then it will start to consider whether it is convenient for later maintenance expansion, whether it is convenient for other colleagues to access development, and whether it needs to dynamically load multiple sets of configuration, etc., to achieve the “lazy” third step easy to expand.

Learn what

What to learn, this is almost all the pit partners most puzzled a question, including myself. The growth of the front end was very rapid a few years ago, but it also meant that the knowledge ecosystem and skill stack at the front end were very chaotic. This is different from the relatively stable ecosystem of the back end, where learning can easily get caught up in a variety of emerging frameworks if you don’t choose the right direction or have some determination.

Following the above mentioned, the first state of mind to balance. The front end (by which I mean entry) is neither easy nor difficult. It is neither as easy as the online water army said, nor as tall as some so-called “great gods” said. My suggested path is as follows:

• First, lay a solid foundation
  • HTML + CSS + JSThe foundation of these three musketeers must be gnawed away.HTMLAt least master itDOM 和 BOMRelated apis;CSSBe at least familiar with common layouts and compositing layer concepts;JSRead the Little Red Book (or a similar one).
  • Don’t neglect computer basics. Knowledge of computer networks (especially HTTP), basic data structures (not handwritten, but at least the concepts and uses of several different structures), simple operating system knowledge (such as the concepts of threads and processes and common Linux commands).
• Then master a front-end application framework and release the full link of the application
  • Angular.React.VueFind one and nibble it off. Not only will be applied, but also the principle and source gnaw. Domestic environment, personal adviceReactorVue. Of course, their whole family bucket supporting ecology is also to master.
  • Understand basic engineering applications and the whole link process of application release. At least know things likeWebpackWhat are the building tools used and how do they go online after being packaged?
  • Once you have some front-end hands-on experience, you can start to get familiar with the upstream and downstream ecology, yes I meannode. Start to understand simple back-end knowledge, such asRESTfulServer, such as some database operations. In additionTypescriptIs also a very necessary knowledge point to learn.
• Finally, find a vertical area that interests you and study it in depth. In fact, this plate divergence is very wide, I recommend several directions, but ultimately depends on your interests
  • Dig deep into front-end performance optimization, which in most cases refers to network interaction and terminal rendering capabilities. Learn how V8 works; Such as understandingOSISeven layers andTCP/IPThe difference of four layer network protocol model and the application direction of each layer; And some of themJS runtimeCommunication with some render layers and so on.
  • Improve the ability of architecture thinking and framework design. For example, be familiar with various design patterns, such as the understanding of function packaging, such as the performance differences between various packaging tools and principles.
  • Cross-side development and rendering. Did you find the market rightnativeThe need for engineers has become less and less, and many large teams have turned over the entire application to a large front-end for unified development. Whether it’s classicRN.Weex, or better performanceFlutterOn the desktopElectronOr lightweight applets, are a form of cross-end.
  • Move into the full stack space. fromnodeAt the beginning, gradually familiar with the whole full stack r&d link. Of course, the so-called full stack is not as simple as some people think, it does not mean that you can write an interface. Rather, you need to be familiar with a lot of database operations and optimizations, how to catch error and statistical logs, how to do security and authentication, and even gateway and interface delivery.

The relationship between the above stages is progressive and the latter stage is the consolidation of the previous one. For example, when you read the framework source code in stage 2, you will have a deeper understanding of JS. For example, in the third stage, when you study Node, you will have a better understanding of some of the apis built by Webpack.

If you’re in the computer science department, you’ll notice that the basics are mostly college stuff. Why do you want to learn computer fundamentals? I have felt that this thing is so conceptual, not much help to the application. In fact, the more I find the importance of the foundation. For example, the project access is slow and the leader asks you to optimize. If you have studied computer networks systematically, you will naturally think about everything from DNS resolution to TCP handshake to TLS authentication. And if you don’t have the concept, you’re going to get stuck and go to Google, probably not knowing how to search. 😂 In addition, after working for a while if you do back-end or native development across domains, you will find that only computer fundamentals and architectural thinking will be useful after you cross domains.

I don’t recommend major in some of the emerging and unpopular application frameworks. Some people may think it’s cool to be out of the loop, but my advice is to tap into the advantages of learning other frameworks once you’ve mastered one popular framework for finding food. Otherwise you’re just stuck at the application layer, and you don’t know why anyone else is doing it. And purely from the application level, the frame is not easy to find a job.

Don’t get bogged down in learning the framework application layer. You don’t need to cover everything. Some students are always wondering whether I should learn React or Vue. In fact, many things in the application layer are connected by analogy. You know one frame so well that you can use another frame so quickly. As for staying in the application layer is actually not much help to their ability to improve. It means that you learn to write a TodoList in Vue and then learn to write a TodoList in React. In fact, it is useless to write a TodoList in Vue and then learn to write a TodoList in React. Instead, you need to pay more attention to the design concept of Vue and the principle of core API.

Here are some books I recommend. More good books can be recommended in the comments or private message me ~ recently also want to read some high quality books ~

HTML is not recommended, I think it is enough to read MDN or buy a hot HTML book. Frame level books are not recommended, I think the official website is good.

Title:	Knowledge areas	instructions
CSS world	CSS	Front-end foundation, Zhang Xinxu teacher wrote very well
The CSS revelation	CSS	There are some common application cases
Javascript advanced programming	JS	Buy the latest edition, commonly known as the little Red Book, front-end essential
Javascript Ninja secrets	JS	I still remember the book’s vivid introduction to closures and lexical environments.
JavaScript you don’t know	JS	There are three books, I think are good, as knowledge supplement
Learn JavaScript data structures and algorithms	Computer Fundamentals	Data structure foundation, algorithm knowledge introduction
The illustration of HTTP	Computer Fundamentals	HTTP introduction, if you have time, I would recommend computer network, which is the brick that you go to college
The Wolf book	node	The whole series, very well written books

Finally, a list of knowledge systems

	Depth of front-end technology	Ecological technology breadth
The application layer	Front-end basics, performance optimization, typescript, Node	Linux basics, data structures, Docker, databases
The principle of layer	In-depth reading of a framework source code, V8, in-depth JS	Computer networking, engineering (code robustness), algorithms

How to learn

Let me first show you a picture:

Many of you have seen this before, devOps. I don’t want to talk about it in detail, but I want to talk about the whole idea of learning, and I think I’ll just stick to this diagram. When you have no idea, look at this diagram, which link is weak, to find relevant learning materials. A brief introduction:

• Dev 即 development, corresponding to the development process
  • planIs the planning stage, including product solutions, ideas output
  • codeIt’s the development phase, how to implement your product. Learn the framework of the application layer at this stage
  • buildIs the build phase, where you learn to package builds, environment differentiation, configuration files, etc
  • testIs the testing phase, you can learn unit testing, end-to-end testing, etc
• Ops 即 operations, corresponding to the operation phase after the online operation
  • releaseIs to release, you can learn ci/CD and other continuous integration knowledge, such as how to push the package more automatically
  • deployIt’s deployment, which involves some operations knowledge, likenginxHow? How about a security certificate
  • operateIs how to operate after the launch
  • monitorI’m talking about monitoring, how do you capture online information, user behavior buried spots, error log monitoring, etc., and give feedback to developers

According to this diagram, a knowledge network should be formed gradually. This is critical. You can not understand a technology, but if you have no direction in mind, it means you don’t even have a chance to learn it. Because you wouldn’t even think of learning it.

What was the scariest part of your entire development career? I think the most terrible thing is not not to know, but not to realize that you do not know, and then do not know how to collect information and search for information. Sometimes I will hear some students laugh at themselves: for Google development, CV engineer. But have not thought of a very terrible problem, that is, you do not know how to search. That’s why more and more interviewers are asking, “How do you learn new technology?” And why they like algorithms.

If you don’t have an abstract understanding of the entire r&d system, what would you Google? Take 🌰, for example, now you don’t know how to go online after development. If you don’t have any ideas, you might be searching for “How the front end comes online.” Guessing the answer without looking at the search results must be pretty unreliable. Students who have a certain knowledge of the research and development knowledge system may search “nginx reverse proxy”, which is quite targeted, and much more efficient.

The algorithm works the same way. For example, 🌰, if you come across an API that you can’t use during development, just search the API documentation. But now if you want to make a multi-level tree sidebar, and you want to combine arrays into trees, that’s not very searchable.

Finally, I give you a few learning suggestions:

1. Pay attention to the foundation, in addition to the front-end knowledge, take time to fill the computer foundation, the best math also fill
2. Dare to look at the source, patience slowly, do not feel difficult or boring to give up
3. Stroll forum more, this has great help to the accumulation of knowledge system
4. Try blogging, not for publicity, but to get into the habit of writing. For example, I have written hundreds of notes, but almost none of them are public. If you encounter problems during development or want to move on, it’s easy to locate and review.
5. Try to open sourceOf course, after having certain ability. For example, write a simple plug-in. As I writenuxtAnd found thatmarkdownI had some problems with rendering, so I just wrote one myselfmarkdownFlowchart rendering plugin.
6. Buy a serverDesign your own app and follow the abovedevops, from design to R&D, from construction to deployment, from operation and maintenance to monitoring, this can greatly improve my understanding of R&D links.

Career planning and factory selection

Start by asking yourself: do you want to go the research route or the enterprise app route?

Scientific research route actually does not have what shortcut, read read bo honestly. What you need is more research resources and platform resources to make some theoretical support for industry applications.

I think most people, like me, still want to go the enterprise app route. Regarding this part of career planning, I set myself the following goals:

• Learn the front end foundation well first, can complete the front end aspect work independently
• Then get familiar with the whole r&d link process, which is said abovedevopsThe process of
• Improve my abstraction ability, pay attention to teamwork and framework building (in fact, I think at this stage, I already feel like an architect, of course, THERE is still a big gap between me and this stage)

About the mill plant

If you count internships, I’ve worked for four companies myself. When I was a junior in college, I went to a small workshop focused on accumulating experience. In my senior year, I had a formal internship (also considered as a school recruitment) and went to a state-owned enterprise. Then I found that I really did not like the leisurely style of fish farming of state-owned enterprises, so I went to a ROUND D Internet company invested by Ant. After working for one year, I found that I couldn’t meet my growth plan any more, so I left for a big factory until now.

From my own experience, I have worked in a small workshop, a medium-sized start-up company, a state-owned enterprise, and a large factory. I think I have something to share with you.

• The first thing you should never do is go to a small workshop. What is a small workshop? It’s like three or five people, maybe a dozen people, register a company, and then hire some people. This is hardly conducive to personal growth. At first I thought, it’s okay I’ll get some experience. It’s a waste of time there. Not to mention learning, it can be a stumbling block in your path.

Extremely non-standard development environment, for a newcomer who knows nothing, it is easy for the newcomer to develop wrong development habits, even some strange development concepts. And then there’s no orientation program, and you’re stuck, and your r&d team is stuck. You don’t know what to learn, regular employees don’t know what to teach. The internship ended before I knew what had happened.

• Choose series according to your own situation: medium-sized start-up companies, state-owned enterprises, large traditional enterprises. In fact, most of you are still in this range. Of course, I am not a super top school, nor do I have any super enterprises to recruit, AND I am not quite clear about the employment situation of a super school. For these companies, to see their own personality and preferences to make a choice, there is no which is better than which kind of this said.

If you are honest and do not want to compare yourself with others, a state-owned enterprise or a large traditional enterprise is a good choice. The working style and career development of state-owned enterprises give me the impression that they are very stable. Simply speaking, you should do what you are qualified to do. But I don’t like this way of working. It’s boring and boring, and I have to do a lot of weird things myself. Like crazy asking you to stamp it or something. The classmate that also has unicom says must send mobile phone card first… The bank classmate said must sit the counter first… Gree’s classmates said they had to go to the workshop to experience it. Just a lot of weird stuff.

If you prefer new things and a dynamic work environment, go to a medium or large Internet startup. Although this kind of company does not have such a huge system, nor such a perfect new training, but at least it has a relatively standard development process, colleagues generally get along with more vitality.

• Get the offer to go to series: Internet factory. Dachang has perfect new employee training courses, industry-leading technical support, and no need to worry about the salary and welfare system.

First, let’s talk about the welfare that we care most about. There is no need to talk about the salary of the big factory. In addition to the salary, there are many invisible benefits, such as the package of three meals, such as various afternoon tea, such as rich group construction, such as housing subsidies and so on. It is also very good for your own growth. You can get in touch with the development and release experience in the industry. There are many sharing meetings and internal courses in large factories, and you can also learn a lot of different knowledge by signing up for classes.

Finally, resume. Personal experience, never, never write about something you only know a little about. It could be a plus if you’re dealing with a small business, which no one understands anyway. But the big factory is not. As long as there is anything on your resume, you can ask 💩. Don’t assume that you’ve seen something, or that you know a little bit about it, just because you’re on your resume will embarrass you. Also, don’t write full stacks unless you’re really good at it. Similarly, if you only know how to write one or two apis and then write the entire stack, ask yourself if you doubt life.

The next trailer

Originally, I planned to finish this series by writing two articles, but I found the length was too long, so I decided to make a separate issue of the content related to building front-end projects. In the next installment, I’ll talk about how to build a front-end project from scratch.

2020.10.18