preface
In the past few months, my friends have added me to wechat almost every day, and the most common question they ask is — how should I learn the front-end technology is so complicated now? The subject is too big to answer in a few words; And because this problem really bothers a lot of front-end developers, I started this article on system output.
Although this article takes a long time, it certainly has its limitations; I hope you can point it out.
Into the topic
We feel that the front end is now one of the most important r&d roles, so the demands on us are getting higher and higher. So we need to learn more than just CSS & HTML & JavaScript. But those three pieces have always been fundamental to the front end, and that hasn’t changed. JavaScript is the most important of these three.
Next, I will combine my experience with some specific suggestions for the front-end learning path.
directory
- Three pieces of learning
- Library tools
- Front-end framework (MVVM) learning
- Browser & Computer Basics
- Front-end engineering
- Performance optimization
- Nodejs
- Data structures and algorithms
- Follow the gourd
Three pieces of learning
There is still a lot of entry-level front-end development every year. So the friend also gives a little advice to the beginning of the entry.
For starters, I don’t think you should start learning things like Vue, TypeScript, Webpack, etc. Emphasis should be placed on learning the basics of CSS & HTML & JavaScript.
CSS & HTML
For beginners I still suggest that CSS(3) & HTML(5) knowledge seriously study side. The best way to learn is to learn a part of their own in the code, deepen their memory.
Of course, if you would like, suggest that you can first copy a static page of the site (nuggets, zhihu, etc.), there are some properties can understand his actual implementation of the scene.
Of course, don’t rely too much on autocomplete when you start typing code. It won’t help you remember some attributes when you start using autocomplete. Study hard and it will pay off in the future.
Some things you need to know about CSS(3)
- Box Model (Standard & IE)
- Flex, float, Normal Flow, etc
- CSS common selectors
- The difference between inline, internal, and external styles
- CSS cascading rules
- Understanding of BFC and IFC
- Understand the application of CSS3’s transform, transition, animation and other properties
- Understanding responsive layout
- …
CSS is easy and complex; Because CSS always surprises you.
HTML(5) A few things you need to know
When it comes to HTML I think a lot of people are div shuttles. Because div is nice to use, you don’t have to worry about default styles.
Some people say that semantic HTML has many advantages, such as clear page structure, SEO, easy team development and maintenance; I admit all this, but I still like div shuttles.
- Semantic HTML (not sure why interviews ask)
- canvas
- LocalStorage, sessionStorage, cookies
- Use of video and audio
- Cache Manifest
- …
JavaScript
JavaScript has always been the cornerstone of our front end, and to a certain extent, the depth of JavaScript understanding determines your development. So be sure to learn by heart.
Now that most people skip the articles on closures, stereotype chains, scope chains, inheritance, etc., you can ask yourself do you really understand the basics?
There is a lot of basic knowledge about JavaScript, so JavaScript Advanced Programming is over 700 pages long; However, once you have a solid JS foundation, you will find it much easier to learn frameworks, or the source code of frameworks.
JavaScript (ES6+) some things you need to know about JavaScript
- Type conversion
- this
- Scope (scope chain)
- Prototype chains and inheritance
- Understanding closures
- Dynamic scope and lexical scope
- JavaScript execution mechanism
- promise & async
- …
You don’t have to understand the basics of CSS & HTML & JavaScript to get started; Some are basic, but they have their difficulties. It is senior also dare not say that they have all mastered, there is a good saying – the book read a hundred times, its meaning from the view.
The first time we learn can not understand, to at least can leave an impression on me. By the time you go back to this topic, you will have a new understanding. Learning is only one task that requires constant online, and repeated learning can help you stay consistently competitive.
I’m not saying you don’t need to learn other skills, but it’s best to start with a solid foundation.
In fact, the three major learning does not need to spend much time, there is a basic about 3 months can be roughly read. Whether you really understand this is a later story, but it is already a beginning.
CSS & HTML & JavaScript recommended books/websites
- W3C CSS&HTML Web tutorial
- The Definitive GUIDE to CSS
- CSS Revealed
- JavaScript Advanced Programming
- JavaScript you Don’t Know, vol. 1
- _ ECMAScript 6 Getting started
HTML doesn’t know what books to recommend. Personally, I don’t have a problem with tutorials and hands-on work.
Next we can learn some libraries of utility classes.
Library tools
For library tools we commonly use JQuery, underScore, Zepto, Moment, etc
- JQuery: Simplifies DOM manipulation for developers
- UnderScore: Provides useful functions
- Zepto: simplified version of JQuery
- Moment: Date and time manipulation library
These libraries provide us with great convenience, saving us the time to write related methods, and also making our programs more robust – our own methods are likely to be buggy in some cases.
Of course for these libraries we not only to understand the API, we need to learn its source code. See if you can think of this way if you write your own methods, these library tools are also a good learning tool, we should not ignore.
- For example, if you had to implement the throttling function yourself, how would you do it?
- How should filtering objects be implemented
- …
The answer to this question is found in the Underscore source code.
When we look at library tools, we have to go back to the basics of JavaScript; This has further laid a solid foundation.
Front-end framework (MVVM) learning
The most popular frameworks are React and Vue. If JQuery made it easier to manipulate the DOM, then the MVVM framework frees you from having to manually update the DOM.
As for which React and Vue to learn, it depends more on what companies are using (and not necessarily). React doesn’t take long to learn how to use Vue. We should pay more attention to the design idea and implementation principle behind it.
Some of the problems
- What is the basic principle of reactive
- Understanding the publish and subscribe model
- Understanding the Virtual DOM
- The implementation principle of front-end routing
- The implementation principle of nextTick/setState
- The diff algorithm
- Single page application (SPA) principles and pros and cons
- …
We don’t have to spend a lot of time using the API of the framework, we should study the design ideas and implementation principles behind them.
Vue or React which should I choose?
This question has been answered by many people, compared to many people who have trouble with it (some people study both and do not have this problem). But I still think you don’t have to pick which one is politically correct, pick what you need.
React or Vue: Which Javascript UI Library Should You Be Using?
Here are the points of the article:
The advantages of Vue are:
- Flexible selection of templates and rendering functions
- Simple syntax and project configuration
- Faster rendering speed and smaller size
React has the following advantages:
- Better for larger applications and better testability
- It is suitable for both Web and native APPS
- A bigger ecosystem, more support and better tools
Vue related materials
Personally, I prefer to recommend the official documentation for some learning materials about the framework. There are many problems that the official documentation has already made clear. There are books on the market that are little more than an expansion of official documents (not to mention some excellent ones).
- Vue Router official website Vue Router official website Vuex official website
- Analyze vue. js internal operation mechanism nuggets small volume
- Vue technology revealed
Browser & Computer Basics
If you want to move quickly to a senior engineer position, you must have some knowledge of browser & computer fundamentals. Because it gives you a better understanding of the front end.
The browser has always been the most important hosting environment for JavaScript, so it’s important to understand how JavaScript is executed in the browser.
Our front-end development contacts should be the browser, I remember the first year of work the most headache is dealing with the compatibility of IE. Many of the problems that arise at work are related to browsers, so I think it’s important to understand how browsers work.
Why learn how browsers work?
- Accurately assess the feasibility of Web development projects
- Look at the page from a higher dimension
- Solve most of the browser problems you encounter in an interview
Computer Fundamentals
We need to have a general understanding of the computer fundamentals, so that we can have a general grasp of the overall process. Not too passive in the actual development process.
A few things to know
- Browser caching mechanism
- The JavaScript execution mechanism in the browser
- Page Rendering principles
- Browser Security Issues
- Why do browsers cross domains
- How to optimize the page systematically
- Differences between HTTP and HTTPS
- TCP/IP protocol
- Three handshakes and four waves
- The function and principle of CDN
- Characteristics of forward and reverse proxies
- …
This is only a partial list of knowledge points, if you want to learn a comprehensive look at the following recommended materials.
Browser & Web Basics Recommended books/materials
- “How browsers work and practice” column
- Illustrated HTTP
- How the Web Is Connected
Front-end engineering
This is what happens when you work on the front end a little bit longer — the front end is getting more and more engineered and complex.
For the front-end development, now the front-end to do not just cut the page adjustment interface so simple, we need to understand the technology is undoubtedly more extensive.
A little insight into front-end engineering
As the complexity of projects increases, the front-end needs to do more and more work. Many problems arise when a project is complex, such as:
- How to effectively collaborate with multiple people?
- How to ensure the maintainability of the project?
- How to improve the quality of project development?
- How to reduce the risk of project production?
Front-end engineering subdivision, I think can be divided into modular, componentization, standardization of three directions. In other words, all the means and tools to improve the efficiency of front-end development and the quality of front-end application are the practice of front-end engineering.
modular
- JavaScript modular
- CSS modular
- Resource modularization
componentization
Each fully functional structural unit that contains template (HTML)+ style (CSS)+ logic (JS) separated from the UI is called a component.
That is, complex pages are broken up into independent components by function.
The canonical
- Coding standards
- The interface specification
- Git Usage Specification
- CodeReview
- UI element specification
Front-end engineering some knowledge points
- Understand the role of tools like Babel, ESLint, Webpack, etc
- The core principles of Babel
- Webpack compilation principle, build process, hot update principle
- Basic understanding of Nginx
- Understand Git workflow
- The significance and advantages of mocks
Performance optimization
What comes to mind when you think about performance tuning? The first question that came to mind was an interview question:
The detailed process from entering the URL until the page is loaded
Because from an intuitive level, the steps we need to optimize the front end are basically in this loading project.
Performance tuning is now an essential skill for the front end, and of course some of the so-called performance tuning techniques are now a standard to follow.
We need to focus on performance tuning in two directions:
- Runtime optimization
- Optimization at development time
Performance optimization of some knowledge points
- Front-end Performance Metrics, Performance Monitoring (Performance,LightHouse)
- What are the common performance optimization solutions
- Performance optimization of SSR scheme
- Webpack performance optimization solution
- React, Vue and other frameworks use performance optimizations
- Optimization scheme at network level
- Page rendering level optimization scheme
- Optimization of white screen
- …
Recommended data
- “Large-scale website performance optimization actual combat”
- “Principles and Practices of Front-end Performance Optimization” gold nuggets booklet
Nodejs
We know there’s a new upsurge in front-end development with Nodejs. JS is starting to be able to touch the back-end domain, so JS is more likely.
Nodejs some knowledge points
- The role of Nodejs in an application
- Differences between Express and Koa
- How Nodejs works at the bottom, and how it works with browsers
- The implementation principle of Nodejs non-blocking mechanism
- …
Data structures and algorithms
I’m also weak on this point, so I won’t expand it. You can scan LeetCode for this section.
Another book, Learning JavaScript Data Structures and Algorithms (3rd edition)
Follow the gourd
We have access to many excellent library tools or UI libraries in the process of project development. Lodash, underscore, Moment, Element-UI, ANTD Design, etc.
We may not be able to design these tools ourselves, but we can write them ourselves, and you’ll find a lot of incredible techniques, great ideas.
Copying is also a very useful technique for learning.
The last
You can follow my public account of the same name [Xiaosheng Fangqin], where I will share high-quality articles and we will make progress together.
If you want to join the “big front end communication group”, click on the “add group communication” to join immediately.