If you want to understand the job responsibilities of front-end practitioners, you need to start with a complete website application generation process. The process of a website application from scratch is roughly as follows:
1) The product manager communicates with Party A repeatedly, and gradually determines the product requirements and completes the design sketch;
2) The product manager conducts analysis based on requirements and sketches, submits PRD (requirements document), and negotiates software functions with developers;
3) If the PRD (requirement document) is negotiated and passed, the back-end development team conducts a feasibility analysis and improves the plan; after certain preparations, enter the back-end development and provide development documents;
4) The product manager makes prototypes and design documents based on the negotiated PRD and delivers them to the design team;
5) Designers with different responsibilities such as UI/IxD produce high-fidelity prototypes based on design documents and prototypes;
6) The front end participates in the visual and interactive review, and then completes the prototype drawing;
7) The front-end builds and develops pages according to the back-end/interface documents, and constantly communicates with the back-end on data and function-related content;
8) After the front-end and back-end functions are realized and the data is circulated, the testers conduct functional tests and record bugs (vulnerabilities), form documents and deliver them to the bug generator, and the front-end and back-end repair their respective bugs and repeat the test;
9) After the test is completed, the product can be delivered to Party A.
From the above process, we can see that in the process of web application development, the backend comes first, and the frontend can only be developed after the designer has produced the draft.
The front-end is indeed creating things. They have made one web application after another, but the design belongs to others, and the data also belongs to others. Their own autonomy has been compressed too much, which makes the front-end work seem to be just someone else's design implementation. In the whole team, there may not be much credit, but there must be a lot of hard work!
However, this does not mean that the front end is "chicken ribs". The front-end position is independent precisely because it is becoming more and more important!
In the entire project team, in addition to writing its own code, the front-end is more importantly the lubricant of the team. A small team usually has five people: product manager, designer, front-end, back-end and tester. The front-end not only needs to participate in the development of requirements documents and visual interaction review, but also communicates with the back-end and tests; in fact, in the entire application development process, the front-end is at the center of communication.
In the whole application, the front end is like a bridge, communicating with users and the services behind the software, not only realizing the design, but also giving vitality to the whole product. If a web application simply presents content to users, it is no different from a graphic novel and is relatively rigid. If you simply obtain information from users, it is no different from a questionnaire survey and lacks a sense of feedback.
The back-end needs to understand code logic, product managers need to understand human logic, and the front-end needs to understand both. What is written is code, but what is produced is not a program, but a product!
In fact, there are no hard-and-fast jobs and no hard-and-fast responsibilities. As I mentioned at the beginning of the course, the concept of front-end is now "big" and is constantly changing; it is your real responsibility to improve yourself, keep improving, and keep up with the trend!
Front-end development is the process of creating front-end interfaces such as WEB pages or APPs and presenting them to users . Through HTML, CSS, JavaScript, and various technologies, frameworks, and solutions derived from them, the user interface interaction of Internet products is realized.
Front-end development evolved from web page production, and the name has obvious characteristics of the times. In the evolution of the Internet, web page production is a product of the Web 1.0 era. The main content of early websites was static, mainly pictures and text, and the behavior of users using websites was also mainly browsing. With the development of Internet technology and the application of HTML5 and CSS3, modern web pages are more beautiful, with remarkable interactive effects and more powerful functions.
Front-end development follows the development of the mobile Internet and brings a large number of high-performance mobile terminal equipment applications. With the wide application of HTML5 and Node.js, various UI frameworks, and JS libraries emerge in an endless stream, and the difficulty of development is gradually increasing.
The Internet industry does have a large demand for front-ends, because mobile applications, front-end PCs, games, middle-end, desktop applications, VR, smart TVs, AI, small programs and other fields all require front-ends.
The front-end technologies are all developed based on the JavaScript programming language, and the mainstream frameworks used are nothing more than Vue, React, etc. It can be said that the front-end is " a new trick that can be eaten all over the world ."
It is recommended that you first understand the entire framework of the front-end, and then learn from the application requirements of the benchmarking companies~
Getting Started : HTML5+CSS3+practical projects→ mobile web
JavaScript stage : JavaScript foundation → JavaScript core Web APIs → data interaction & asynchronous programming Ajax\Git
VUE development : framework pre-class Nodejs&es6 → Vue2+Vue3 full set
React + WeChat Mini Program : React → TypeScript → WeChat Mini Program
Responsibilities for common front-end development engineer positions:
(1) Use Div+css combined with Javascript to be responsible for the front-end development and page production of the product.
(2) Familiar with W3C standards and the differences in front-end development of mainstream browsers, and be able to use DIV+CSS proficiently to provide front-end page solutions for different browsers. The performance and other optimizations of mobile HTML5 present users with the best interface interaction experience and the best performance.
(3) Responsible for the requirements of related products and the realization of front-end programs, and provide a reasonable front-end architecture. Improve and optimize development tools, development processes, and development frameworks
(4) Maintain good communication with product and background developers, be able to quickly understand and digest the needs of all parties, and implement them into specific development work; be able to independently complete the design and code writing of functional pages, and cooperate with the product team to complete the demand research of functional pages and analysis.
(5) Understand the related work on the server side, and have your own opinions on interactive experience, product design, etc.
Senior front-end development engineer
Compared with "front-end development engineers", they are more experienced and have greater job responsibilities. Generally speaking, senior front-end development engineers need to use JavaScript or ActionScript to write and package front-end interactive components with good performance, and skillfully use CSS+XHTML to perfectly output the visual interface. At the same time, it is also necessary to provide professional guidance and supervision for the front-end implementation of the Web project, and provide front-end skills training and guidance for newcomers and related developers in daily work. In addition, it is also necessary to track and study the front-end technology, design and implement the front-end optimization of the entire network. The rise of HTML5 and node.js (the background language for JavaScript programming) requires senior front-ends to be familiar with the back-end, and to consider the overall layout of the front-end in terms of business models, code architecture ideas, and other dimensions.
Front-end architect
Front-end architects are more management-oriented, but the responsibility requirements are not limited to management. Front-end architects need to lead team members to implement the front-end framework and optimization of the entire network, create corresponding standards and specifications for the front-end, and improve, promote and apply their own standards and frameworks. At the same time, it is also necessary to provide professional advice and solutions for the information architecture and technology selection of the entire website from an overall role.
The four career development paths of front-end engineers, and the job requirements of the positions involved in the development path
Path 1: Front-end development engineer → CTO (Chief Technology Officer)
If you are a technical player and are committed to long-term deep cultivation in the technical field, you can consider choosing this career development path.
The development path from a front-end engineer to CTO (Chief Technology Officer) is: front-end development engineer→full stack engineer→system architect→CTO.
Full stack engineer (15K~30K)
The so-called full-stack engineer refers to an engineer who has mastered multiple skills, is not only competent at the front end, but also competent at the back end, and can use multiple skills to independently complete the product.
Through the previous introduction, I believe everyone has learned that front-end engineers are responsible for displaying information to users, accepting and processing user interaction and input. Most of the information to be displayed to the user and the preservation of the user's input information are the responsibility of the back-end programmer.
As a front-end engineer, while deeply cultivating front-end technology, if you have spare capacity, you can consider learning some back-end technologies. We don't have to have a very deep grasp of back-end technology, but if we have an understanding of the basic model of back-end development, we can participate in the research and development of back-end projects. It is helpful for us to broaden our future career development path.
To do front-end development, the programming language commonly used now is JavaScript. For back-end development, there are more languages to choose from, such as Java, Python, PHP, GoLang, etc. At the same time, with the development of front-end technology, JavaScript can also be used for back-end development based on Node.js.
In addition to choosing and learning a programming language, back-end engineers also need to learn databases to save data. Common relational databases include: MySQL, Oracle, etc., and NoSQL non-relational databases: Redis, MongoDB, etc.
For start-up companies, the value of a full-stack engineer is very great. A full-stack engineer can be said to be an all-rounder. However, if a company does not understand the value of a full-stack engineer, then the status of a full-stack engineer will be very embarrassing. To put it bluntly, a full-stack engineer knows everything and knows nothing. Technology has two development directions, one is vertical and the other is horizontal. There is no right or wrong in these two directions, and they will all merge with each other when they develop to a certain extent.
System architect (30K~60K)
A system architect is a technician who finally confirms and evaluates system requirements, gives development specifications, builds the core framework for system implementation, clarifies technical details, and clears up major difficulties.
System architects mainly focus on the "technical implementation" of the system, because they are masters of specific development platforms, languages, and tools, and can give the most appropriate solutions to common application scenarios. The understanding of the ability to evaluate the cost that your team needs to pay to achieve specific functional requirements.
The system architect is responsible for designing the overall architecture of the system, taking into account every detail from requirements to design, grasping the entire project, and making the designed project as efficient as possible, easy to develop, easy to maintain, and easy to upgrade.
To become a system architect, it usually takes 5 to 8 years of work accumulation and precipitation. Because as a software development design architect, you must have certain programming skills, and at the same time have superb skills in learning new architecture design and programming. In addition, you also need to understand certain basic knowledge of hardware, network, and server.
Friendly reminder, if you ignore the continuous update of programming capabilities, it is difficult to become an excellent system architect.
Path 2: Front-end development engineer → product manager
The main job of the front-end engineers is to "make the page", and whether the page is beautiful and smooth, whether the user interaction experience is friendly, and whether the user input operation is convenient are all in the charge of our front-end engineers.
If you pay great attention to user experience and don't want to develop in the field of programming for a long time, you can consider choosing this career development path. The development path from a front-end engineer to a product manager is: front-end development engineer → product manager.
Product Manager (10K~50K)
A product manager is a position in an enterprise that is specifically responsible for product management. He is responsible for market research and determines which products to develop, which business model to choose, and what business model to choose according to the needs of products, markets, and users. At the same time, it is also responsible for promoting the development organization of corresponding products, coordinating R&D, marketing, operation, etc. according to the product life cycle, determining and organizing the implementation of corresponding product strategies, and a series of other related product management activities.
The product manager is the product leader. Generally speaking, the product manager is a full-time manager who is responsible for and ensures that high-quality products are completed and released on time. His tasks include listening to user needs; being responsible for the definition, planning and design of product functions; making various complex decisions to ensure the smooth work of the team and tracking program errors, etc. In short, the product manager is solely responsible for the final completion of the product. In addition, product managers also need to carefully collect new needs of users and information on competing products, and conduct demand analysis, competitive product analysis, and research product development trends.
As a front-end engineer, the frequency of dealing with product managers at work is very high. How can the page look better? How to make the user experience better? They will often communicate and confirm with the product manager repeatedly. Therefore, with the accumulation of front-end development work, we will unknowingly accumulate a lot of product manager-related knowledge.
If you want to switch to a product manager, we have a very big advantage as a technology-savvy person-we know what technology will be used on each page and how difficult it is to implement. At the same time, we also know which colleagues need to cooperate with, such as: interaction designer, Java development engineer, etc.
Therefore, if you are particularly sensitive to the market and product design, and at the same time hope that more people can collaborate and efficiently develop the products you design, and create greater value for the enterprise. After participating in several front-end projects and having a certain amount of front-end development reserves, you can consider choosing the career development path of product manager.
Path 3: Front-end development engineer → department manager
If you are talented in organization and coordination and like to give advice, you may consider choosing this career development path to develop into a management position.
The development path from a front-end engineer to a department manager is: front-end development engineer → software project manager → department manager.
Software project manager (15K ~ 40K)
The software project manager is usually the core backbone of the department, and is a leader in the team in both technical research and development capabilities and project management capabilities. If a project is to be developed, a core backbone is usually appointed as the project manager to ensure the smooth completion of the project's research and development. With the completion of the project development work, the appointment of the project manager will be automatically cancelled.
In the process of project implementation, project managers usually need to conduct accurate analysis and effective management of project cost, personnel, progress, quality, risk, safety, etc., so as to ensure the smooth completion of project research and development.
In layman's terms, a project manager must not only be able to do it himself, but also have the ability to coordinate everyone to work together. At the same time, he also needs to have a strong sense of time and cost control. If the company has a lot of business, there are usually multiple project managers in a department, because project managers are born with projects. However, working as a project manager within a department is often a surefire path to senior management positions. This is because an excellent project manager leads the team members to successfully complete one project after another, and only then will more and more people in the team support and recognize it, and it is possible to get more development space and opportunities in the enterprise. Chance.
Department manager
The department manager is the core manager and responsible person of the department. The most important job of the department manager is to determine the department's core business indicators according to the company's strategic development goals, and then disassemble the goals and formulate corresponding work plans.
In the daily management work, the department manager must organize the department employees to carry out the work according to the plan internally, and coordinate with other departments to coordinate and allocate resources externally. If you have served as the project manager of multiple projects in the department, and have led the team to complete one project after another, I believe you will have a good public foundation and credibility in the department. With the development of the company's business, once there is a vacancy in the position of department manager, the probability of appointing you as the department head will be high.
In a word, the project manager is responsible for leading the team to fight one battle after another, while the department manager is leading the entire department to fight to achieve the company's strategic development goals.
Path 4: Front-end development engineer → entrepreneur
If you have the ambition to start a business, but you are not willing to depend on others, and hope to create a world through your own efforts, you can consider choosing the career development path of partnership or self-employment. However, ambition alone is not enough to start a business. It also requires many, many suitable resources, such as: matching capabilities, excellent partners, suitable market opportunities, and so on.
Entrepreneurship is a very large topic, and it is difficult to explain clearly in the limited space. However, among our veteran students, there are some who choose to start their own businesses, some of them successful and some of them failed, but no matter whether they succeed or fail, as long as they invest in it, it is a valuable experience and wealth in life.
Here, I would like to prepare a sentence for you who are preparing to start a business - improve yourself and be ready at all times. In this world, the most worthwhile investment is to improve yourself. Regarding entrepreneurship, it is necessary to make a decision before making a move. It is best not to start a business lightly until the ability is not achieved and the opportunity is not mature.
Development prospects of front-end engineers
JavaScript is one of the comprehensive, simple, and result-oriented web development languages, which can be said to be very friendly to front-end engineers.
Compared with the difficulty of back-end programming languages, front-end JavaScript is relatively easy to get started, but this does not mean that companies do not have high requirements for front-end engineers. On the contrary, with the rapid development of artificial intelligence, 5G and other fields, the requirements for front-end engineers are gradually increasing. This is any recruitment demand found on a certain website:
From the recruitment requirements, we can see that the company's requirements for front-end engineers must not be simple page creators. Of course, companies are also very willing to use high salaries to attract excellent front-end engineers!
According to the latest statistics from Zhiyouji, the average salary of front-end development engineers in Beijing is 20.5k.
With the increase of work experience, the salary will of course be higher and higher. Generally, those with 3-5 years of work experience can reach 30k-40k!
The salary of front-end development engineers is high, and it is easier to get started than the back-end. Does it mean that the talents of front-end engineers are saturated now?
Big mistake! According to the front-end industry report released by the China Software Industry Association Education and Training Committee, the annual demand for front-end development engineers in my country is 160,000, of which about 40,000 are junior engineers, and about 120,000 are intermediate and senior engineers!
It can be said that choosing a front-end engineer now is an excellent time!
Stage 1 Basic introduction: The necessary skills for an entry-level front-end engineer to be able to complete static pages on the PC and mobile terminals, and have the ability to restore design drawings 1:1.
Stage 2 Technical advancement: Advance to become a qualified junior front-end engineer, able to realize the interactive effect of the page and realize the data connection with the back-end.
Phase 3 Vue development: Become the core competence of intermediate and senior front-end engineers, be able to realize the functional requirements of enterprise-level projects, and have project experience in content management systems, enterprise middle-end platforms, and e-commerce platforms.
Stage 4 React & Small Program Development: Advanced skills to become a mid-to-senior front-end engineer, able to meet the recruitment needs of 90%+ companies in the market, and have experience in web and mobile project development.
Stage 5 Employment Interview: Be able to improve your resume, easily respond to corporate interview scenarios and interview questions, and successfully get your favorite offer.
Basic introduction to the first stage
Pre-study guide: Tailor-made for students with zero foundation, teach you to build static pages on PC and mobile, let you upgrade from a beginner to a web page "makeup artist", and easily master HTML5 and CSS3 related knowledge.
1. Web front-end zero-based entry HTML5+CSS3+ front-end project
There are two practical projects at the middle of the course and at the end of the course. The first type of project is an enterprise website, which allows students to quickly practice the basic knowledge points repeatedly; the second type of project is an e-commerce website, which allows students to master more complex web page effects development process and layout standards. This tutorial strictly follows the professional development process: professional measuring tools to achieve 100% restoration of the design draft.
2. Mobile web development practice
This course adopts the 2+5 mode. The first two days undertake HTML+CSS, use font icons, plane transitions, animations, etc. to enrich the web page effects and presentation methods; the last 5 days complete the mobile terminal and multi-terminal adaptation effects. The course is designed in a closed-loop manner, and every day there are complete cases or projects in the course, so that students can apply what they have learned.
The second stage of technical advancement
Pre-study guide: Let the webpage "move" and take you to learn the core language of front-end engineers-JavaScript, realize webpage data interaction and animation effects, and realize the connection with back-end data.
1.JavaScript in simple terms-0 basic entry artifact
After completing this course, you will master the basic skills of JavaScript basics, such as the definition and use of variables, data types and mutual conversion, operators, flow control statements, ternary operators, arrays, functions, constructors, built-in objects, and objects. .
2. Web APIs at the core of JavaScript
Learn client development technology, be able to complete development tasks according to product requirements, such as visual interaction, data processing, security, performance, etc., master DOM operation methods, be able to analyze visual interaction requirements, design a reasonable DOM structure combined with CSS rules, and complete development Task.
JavaScript core tutorial, front-end basic tutorial, DOM BOM operation that JS must know
3. Data interaction & asynchronous programming - front-end advanced Ajax zero-based entry
This course is rich in cases, and the cases supporting knowledge points are rich and diverse, which can satisfy students' interest in learning; in-depth principles will explain in depth how to encapsulate your own template engine and Ajax functions; it covers a wide range, covering Ajax, cross-domain, JSONP, template engine, Throttling anti-shake, XHR Level2 and other common technologies.
AJAX from zero foundation to proficiency_Integrating a full set of tutorials on Git core content
The third stage of VUE development
Pre-study guide: Master multi-industry solutions, project development is ready to use, and help you get the popular framework Vue.js necessary for front-end engineers .
1. Front-end Advanced Node.js Zero-Basic Introductory Tutorial
This set of courses is a framework pre-course, focusing on paving the way for students to lay out the main knowledge points such as npm, packages, modularization, identity authentication, CORS cross-domain, and lay a solid foundation for learning the following Vue courses. At the same time, this course covers MySQL database, API interface project development and other back-end content, broadens the knowledge of students, builds a complete front-end and back-end knowledge system for front-end students, and helps students develop better.
2. Front-end framework Vue2+Vue3 full set of videos
After 5 years of repeated polishing and tempering, Dark Horse Programmer has launched a full set of the latest Vue2 + Vue3 basic courses. A total of more than 500 episodes of free videos will help you easily master the most popular Vue framework in the front-end circle!
The fourth stage React & applet development
Pre-study guide: React helps you unlock the capability map of intermediate and senior front-end engineers, and multi-terminal projects allow you to meet 90%+ enterprise needs.
1. Front-end React boutique tutorial
React is one of the most popular front-end frameworks nowadays, and it is the preferred front-end development framework of many big companies! After several months of careful research and development, the content includes: React scaffolding, JSX, function components, class components, controlled components, component communication, Context, component life cycle, high-level groups and other technologies.
Front-end React boutique tutorial, React zero-based entry to detailed explanation of the principle
Systematically learn the Ajax technology of web page data interaction, establish a knowledge system of front-end and back-end interaction, lay a solid foundation for students in network programming, and pave the way for the later study of advanced courses.
2. Quickly guide you to develop WeChat applets
This course elaborates in detail the basic knowledge necessary for small program development in terms of small program account registration, development environment construction, basic grammar, routing navigation, data request, subcontracting, and componentization. After learning the basics, use uni-app technology to realize the development of WeChat applets, which can achieve multi-device deployment at one time. The project has main functions such as homepage, search page, product list page, product detail page, shopping cart, login payment, etc. Covers the use of core technology points such as subcontracting, vuex, and component development.