With the rapid development of the web front-end, more and more people are learning the web front-end. In the mobile Internet era, I believe that each of us has dozens of apps on our mobile phones. The development of these apps is actually in line with the current popular Web. Front-end development is closely related.
In fact, more than half of the apps nowadays are developed in Hybrid mode, that is, combined with Android and Web-side technology development. There are also many apps developed purely on the Web. For example, the well-known Qzone is developed using the React Native technology of the web front end. In addition to APP, the H5 page that we often see on the mobile phone is also mainly developed using HTML5 technology on the Web. Of course, the Web front-end is now not limited to front-end web pages and APPs. Server-side, desktop-level applications and even VR are involved.
1. Today, I will mainly talk about the knowledge skills and learning paths required for Web front-end development.
- HTML5 + CSS3 + JavaScript is the basis of Web development foundation. HTML is responsible for web page structure, CSS is responsible for web page style, and JS is responsible for logical interaction. The first two are more like markup languages, there is no logic, JS is the top priority of the front-end. Most of the new technologies in HTML5 need to be learned in conjunction with JS. The learning progress of each person may be different. At this stage, it is mainly to simulate the site, familiarize with the basics, try to write responsive pages in CSS, and understand the in-depth knowledge of JS, such as prototype chains, closures, design patterns, etc., which require more accumulation. Understand and practice mastering.
- JQuery + BootStrap + Ajax + JsonjQuery is an application library of JS, which can improve the efficiency of native JS development. Bootstrap is a responsive framework, which makes it easier to implement page support for multiple devices on mobile phones/tablets/PCs. Ajax technology is used for asynchronous interaction, and data can be updated without refreshing the page, such as map applications. Json is a data format, which is widely used in major programming languages. jQuery and bootstrap will simplify a lot of the amount of code written, it is a pleasure to use, but for those who are not very solid, it is recommended to use them sparingly. Ajax and json are usually used to interact with the back-end, and are often used in actual business.
- The Git/SVN version management tool is mainly used to avoid file conflicts during team development, and can also be backed. The front end recommends learning Git.
- Nodejs + Mysql /MongoDB (optional) JavaScript running on the server side. Express is its extended MVC framework. Among them, the most commonly used nodejs is the npm package manager, and there is no need to download resource packages from various websites. You can choose MongoDB or MySQL for database learning. The former fits better with Nodejs, but most websites now are a combination of PHP + Mysql. If you plan to learn PHP, you can learn Mysql first.
- ECMAScript 6 JavaScript language standard. Many new concepts have been added to ES6, and many deficiencies in the previous version of JS have been made up. More and more projects have begun to use ES6 for development. It’s best to understand ES5 before learning. At present, considering compatibility in actual projects, ES6 needs to be compiled into ES5 through Babel for deployment.
- The three front-end frameworks of Angular/React/Vue each have their own ecosystem, and they can choose to learn according to their needs. Currently, Angular is still the most in demand by enterprises, but react and vue are more popular in recent trends. Because the development of front-end technology is too rapid, and the update of tools and frameworks is faster than turning the book, it is better to learn from the document. In the learning process, there are many times when various construction tools are used.
- Other commonly used tools are the same to choose and learn according to your needs. The more commonly used one is now Web pack, which can pack multiple files of different programming styles. For example, modules such as ES6/AMD/CMD can recognize and compile them into files that can be run by the browser. Sass/Less, CSS pre-compiled framework, can write CSS code in a logical way. The Gulp/Grunt build tool can automate the work of compressing and merging the code.
- Other back-end programming languages At present, the market basically requires a back-end language, PHP / JAVA / Nodejs / Python, etc. for the front-end. The important thing to learn to program is to practice, type more code and try more. The ability to solve problems independently and the spirit of inquiry are essential. If you are interested, you can also build a technical blog yourself and upload several open source projects to github. These are good points. A good programmer is not just a programmer.
Precautions for front-end learning
First, you must have a solid foundation no matter what you do. Participating in web front-end training is no exception. Only with a solid foundation can you learn new skills more deeply. As a junior web front-end engineer, you must have the most basic technical elements: HTML, CSS and JavaScript. This is what you must master as a web front-end engineer. The entry barrier of the web front-end is actually very low. Compared with the learning pace of other languages, which is slow first and then fast, it is a fast and slow process. So in the early learning process, you will easily master the basic skills. With the wide application of HTML5 technology, the learning of the web front-end will become easier.
Second, pay attention to details. There is a saying that goes like this: "Details determine success or failure." Many web front-end developers ignore some details in order to pursue speed in their work. For example: add remarks to the code, code naming convention, code conciseness, etc. All these seem to be unimportant, but in fact they have seriously affected the progress of the project and the improvement of their own capabilities. In the development process, adding remarks appropriately can deepen the impression of technical points and facilitate quick search in the process of modification in the future; standardized code naming can facilitate communication between teams and improve work efficiency; and concise code can Intuitively show the role of a certain piece of code.
Third: Continuously strengthen learning. The reason why excellent web front-end engineers are excellent is not because of the length of their work, but because they have the ability to learn quickly. Web front-end development is a special job, covering a wide range of knowledge, and the Internet industry technology is updated very quickly, if there is no rapid learning ability, it will be difficult to keep up with the pace of the times. Therefore, as a web front-end engineer, you must continue to learn and improve your skills.
I am an old web front-end programmer who has been engaged in development for many years. Some time ago, I spent a month sorting out a web front-end learning dry product that is most suitable for learning. Various frameworks are organized and sent to every front-end small Partners, if you want to get it, you can add the following QQ group to get it for free.
