Recently, Zhihu received some questions. It is difficult for the front end to learn, and the answers have been updated for several times. Now let’s share it with the Nuggets.
The original zhihu question:
preface
Front-end work for more than two years. Most of the front-end principles and frameworks are fully applied. It is now common to be asked to interview new employees (mainly because of their ability to do the job, and there are many employees who have been in the company for more than 3 years).
The study method that says me below may be useful to you!
First, lay a good foundation needless to say
HTML, CSS, JavaScript three major pieces, complete mastery. Look up MDN if you don’t understand.
HTML focuses on semantics. Distinguish between block-level and inline labels. The rest is in the documentation. There are also some meta definitions in the head.
The CSS. Focus on box models, positioning, hierarchy, transitions, animation and transform. Know principles and rules. Most of the work is scripted to the design. It is not difficult to master the above 99% reduction. Let’s focus on a few common layouts. Work on Flex when you’re done. Finally get sass, less. That’s pretty much it.
JavaScript. The key comes, the little Red Book read a grasp of the basics, and then go to see “JavaScript you don’t know”. These two sets are enough, not so many.
Understand every point. The ES6 is basically fine. The following questions should be understood first, with the following priorities:
- This usage, related principle
- Prototype/Prototype chain
- closure
- Object-oriented correlation
- Synchronous async/callback /promise/async, await
- Modular CommonJS, AMD
Do this to understand these more difficult concepts first, to your JS understanding more in-depth. Next, in terms of starting to look at frameworks:
Second, the framework
Early to be able to use, late to understand the principle.
New guys do Vue first. Vue is an easy framework to use. Following official documents is not a problem. Principles to improve their own understanding. Learn how to read source code. I visit Github a lot.
Before learning about frameworks, I particularly recommend that newcomers get to know Babel and WebPack for more than just use them. Some of the fundamental things that we use in our work. Babel will show you how to compile code. Webpack teaches you how to package files such as and. It’s not particularly difficult to write your own compilers and packaging tools. Anyway, after looking at vue, React source help quite big.
After Vue family bucket, learn React, learn React hooks. Back to Vue. You’ll see how similar they are but how different. Go to practice summary more, to the overall framework understanding will be more and more profound.
Three, how to read the source code
When newcomers start looking at source code, they fall into two dilemmas. First, I don’t know where to start. Second, after reading the feeling of nothing to gain.
This is also normal. Most frameworks we’re familiar with have thousands or even tens of thousands of PRS. Too much detail can get in the way. Master the rhythm and flow. Learning principles is also difficult. Even finding an entrance is like looking for a needle in a haystack.
Suggestions from the following aspects:
-
Pick something simple. Don’t start with VUE, React, webpack. It’s too hard. It’ll just discourage the new guy.
-
Don’t read it for an interview. Instead, the effect is not good, the interview a little deeper to ask a little answer. Usually interested in more pondering. In order of difficulty, function library < component library < framework < engineering is typically represented by Lodash < vant < vue < Webpack
-
Hand lift simple model. Vue, Webpack, Babel all have easy projects for you to masturbate. Some founders even broadcast masturbation live. More abroad, YouTube search a lot of. Even if you don’t read the source code, write a simple demo to improve the principle and understanding are great.
-
Debug open source projects. Pull the project down first. Run down in vscode and break the core function more. Let’s see how the variables diff. A deeper understanding of it.
Read the source code is someone else’s, learned is their own. While learning notes, thinking about principles and summarizing experience. So let’s talk about front-end engineering.
Four, front-end engineering
Now the most popular packaging tool Webpack used. Use vue-cli2, vue-cli3, create-react. But webpack is still something to master.
Focus on Babel and Webpack first.
Learn about compilation and packaging.
Configure webPack yourself. Try writing down the Webpack loader and plugin yourself.
Learn a little bit about Node.js before you can do this. You don’t need to learn everything about Node.js. General daily use of reading and writing files FS interface, path path interface. All of these apis are easy to write in a couple of demos. Basically, webpack configuration files don’t contain much node stuff. Finally learn to configure the webpack configuration file yourself.
There are a number of WebPack plugins that you need to know if you want to optimize packaging volume and speed. The core of Webpack is the plug-in.
Of course, front-end engineering is not only these, CI/CD sustainable integration, Umi understand. Sh a variety of script automation command, code generation technology understanding.
Front end is hard to learn – original problem entry