Front-end architect, sounds like a very lofty position, in the eyes of most programmers, architects are generally engaged in back-end development, Java or C++ background, they tend to have these 18 skills, can solve various problems in the business. As if the architect has never had a relationship with the front end, is that true? Read through this article and you’ll see.

Meaning of the front end:

First of all, let’s talk about the job, what the front end means. The front end comes from the user interface, is the first place to contact with users, and is also the first barrier to measure the quality of a project product.

What exactly is a front end

, from the earliest DOS system has no concept of the front end at that time, most of the software interface is shown cold black white text on a console command, then, slowly is not only the user, even the programmer does not meet the present situation, developed a set of graphical user interface, make some functions more convenient for operation. Back then the front end was called a GUI(Graphical User Interface). The concept of multiterminal has not yet been distinguished, and most are native interfaces developed based on the operating system.

The image above is from DOS classic softwareDOS Navigator

With the development of the Internet, the birth of the first browser, Netscape, and the Internet Explorer series that followed, the term “surfing the Web” gradually entered the lives of most users. Until now the popular browser Chrome, as well as a variety of browsers in the country. JavaScript language, which mainly serves browsers and implements various special effects, ushered in the first wave of spring.This image comes fromNetscape

Until now, the front end has gradually broken down into:

Web front end (HTML+CSS+JavaScript), client front end (Android and iOS).

Or web refactoring engineers, JS engineers, UI/UX, cutting graphics, and so on.

So all of this is for the front end, so what’s the value of the front end?

What’s the value of the front end?

  • Implement interface interaction.
  • Improve user experience.

The first point is the front end of the work, is the main distinction between the function and the back end, but also the front end of the reason for the existence of jobs. Second, needless to say, a good front end is good for the user experience. The goal and value of the back end are high performance, high availability, scalability, and security of services. The value of the front end is “user”.

So as a qualified front-end developer, the goal is to make the user feel comfortable, so to fully demonstrate your value, you need to complete the following steps step by step:

  1. According to the product logic and requirements, the front-end UI of the corresponding service is displayed and users can interact with each other.
  2. Write maintainable code to reduce bugs and ensure a good user experience.
  3. Be able to familiarize with the existing business, propose areas for sustainable improvement, and implement optimization while completing functions.

Read a few of the above, is there a feeling of deja vu, is it very like a recruitment information OF JD. In fact, as an enterprise, the recruitment of a front-end development, must be able to bring value to the enterprise, which itself is also your value.

But, I want to say, seemingly simple 3 content, you really understand. The first and second are the embodiment of your technical ability, which depends entirely on your technical accumulation, then the third is the embodiment of your main motivation, this part can play a lot of places, a new person and a rich work experience gap may be reflected in here, we will talk about the specific later.

However, simply doing the three steps above makes you a good front-end developer, not an architect.

Is front-end value representation really important?

Ok, so we know the value of the front end, and you front-end development is still working hard to reflect their value, but people struggle, the front end is valuable, but this value is really important?

Compared to technologies outside of the front end

For a mature product business, the front end is often a thin layer, and this layer gives you the functionality, most of which is the UI presentation of the page and user interaction. Although the front end is the first barrier between the product and the user, it is only the first barrier, and there may be more than a dozen barriers behind it. For example, those engaged in back-end logic, those engaged in underlying database, those engaged in network security, those engaged in operation and maintenance, those engaged in big data analysis, or those involved in machine learning, which is now popular. Each related module has its own independent technical system, which can be said to be indispensable. So, the front end is not so “you have to” compared to the technology outside of the front end. That is, the front end does have value, but in the big picture, the value generated by the front end is not the core value.

Importance to the product business

Now a practical example, for the front-end developer, a line in some Internet companies such as BAT, etc., the company is “a good degree of attention to the front-end development has its own product lines of business, the entire front-end technology has a good atmosphere, and the ability to use the front technology continues to improve product user experience. However, for some other small and medium-sized companies or enterprises (I believe you are not all from BAT), the technical content of many front-end development is not very high, especially for some toB businesses, the core functions are from the back-end, from the optimization of the database. Or in the case of some of the more eye-catching AI functionality products, the core competency of these products may even come from hardware and algorithms. And most of the role that the front end plays is UI presentation, data visualization and so on. And much of the work is repetitive, and some of it may even be done part-time by back-end development. So the front end is very limited in terms of the importance of a business.

Here say so many, of course, is not for everyone to transmission: a front-end washed-up, quickly turned right, this kind of thought, of course, we still want to eat, want to say here is to keep a sense of crisis, only this sense of crisis, is let us constantly to explore and prestige of technology, continuous development to go on.

Advance of front-end technology:

Before you can become an architect, you need to have a strong technical reserve, which may not be limited to the front-end technologies. Here, of course, I first introduce some of the front-end technologies needed to advance.

Performance optimization

Colleagues who have worked in Daco should know that performance optimization is a stepping stone, because if you want to measure whether a front-end development is really experienced, performance optimization is a watershed, and its related processes mainly cover:

  1. The first is how to spot the problem.
  2. After finding the problem, how to analyze the cause.
  3. After finding the cause, the solution adopted.
  4. After the solution, whether the real user experience has been improved.

From these questions, there are a variety of questions worth exploring, and some methodological issues can be found, so performance optimization is a very important point. Of course, we won’t go into specifics here, but I recommend reading mobile Web Performance Optimization from The Beginning to the Advanced.

Understanding of the framework

If you want to be an architect, go beyond the API usage of the framework.

For three of the most popular front-end frameworks, Vue, React, and Angular, basic usage is necessary, but it is also the simplest, and there are a variety of courses online that can make it easy for a new graduate intern to get started and get up to speed on projects. So why pick you when an intern can do a need?

So, grasp the principles of the framework, and understand the idea, and draw lessons from one another, is the key to the gap between most front-end programmers, here to give you Vue to give a few examples, see if you really master.

  1. The bidirectional binding in Vue is simpleObject.defineProperty()?
  2. How is Vue’s data dependency implemented?
  3. What is the essential difference between Vue’s Computed and Watch?
  4. How does keep-alive work?

We might as well try to understand the root of these questions, try to find the answer from the source code. Understanding the source code at the same time, is conducive to the understanding of the framework itself, to improve the ability to solve problems, and reduce the chance of bugs, help.

Dig deep into the node.js domain

Node.js is a great way for front-end engineers to get their hands on back-end logic, and it gives us a good reason to get our hands on it, but node.js isn’t just about back-end logic development. For example, webpack, Parcel, vue-cli and so on play an important role in front-end engineering, or Electron, which now allows JavaScript to develop PC desktop applications, are all closely related to Node.js. Here are a few examples. Here are a few points to try to advance:

  1. Unlike JavaScript on the browser side, the Node.js back end is directly facing the server to determine how to locate and analyze memory leaks.
  2. Try writing some WebPack plug-ins.

Canvas with WebGL

WebGL is a Web3D graphics specification based on OpenGL, which is a set of apis for JavaScript. To put it simply, think of it as a 3D Canvas, which, of course, may seem a little out of place for some people. Indeed, for most front-end development, it is not necessary to master complex algorithms or mathematical knowledge to use WEBGL-related 3D processing technologies and algorithms, but only need to learn three.js. But Canvas – or WebGL-based solutions can provide solutions to specific problems. Here are some examples:

  1. Implement a business requirement for a scratch card or wall.
  2. Images are compressed and cropped when uploaded.
  3. In terms of implementing frame animation, use the CSS3 and Canvas options.

In the above scenarios, just like when you get these requirements, if you don’t know anything about Canvas or WebGL, you probably don’t have any technical solutions to solve these problems. So, it’s not that you understand Canvas or WebGL very well, but as an architect, you need to have some technical breadth. To broaden your technology stack, and thus your problem-solving skills.

The Path to Architect:

Here, I seem to be getting to the point. Basic advanced knowledge is necessary for you to advance to a high-level front end, but it is not the core of who you are as an architect. Just as the so-called length of a master, you have to master one first. The first thing you need to understand is that as well as mastering the front-end technology, you also need to learn the skills beyond the front-end technology. Think outside the front end to see more. So if you want to move from a front-end veteran to an architect, take a look at the following.

crossover

If you only know how to write front pages, then no matter how good your skills are, you are an HTML master. True architects need to be able to cross boundaries, and as the technology continues to improve, there will be less and less opportunities to upgrade the technology architecture through job changes. The new changes at the architecture level will come from the spontaneous redefinition of their own work content and responsibilities, which is the boundary mentioned here. So it’s not that if you’re in a front-end development position, you can’t do things outside the front-end, but try to think outside the boundaries and solve problems.

Page seconds open is an important indicator to measure a front-end optimization, let’s summarize the optimization point from what aspects:

  1. Speed up, start with server-side rendering, and use Node.js to back end.
  2. Improve the launch time of H5 pages on the mobile Web, starting with webView, using iOS and Android skills to cross to the client.

User interactive operation experience is also an important indicator to measure front-end optimization. Let’s summarize the aspects from this optimization point:

  1. Improve user interaction experience, try to client-side web page, based on React Native or Weex, can also be across to the client.
  2. Improve the page animation effect, write high-performance front-end animation, can also be used to UI dynamic design span.

Properly crossing boundaries allows the architect to have a deep understanding of the business as a whole and to propose solutions to various problems outside the front end.

Early adopters

Technology is constantly evolving, and as an architect, it is very important to keep learning new technologies. The word “early taste” here means to keep a certain enthusiasm for technology, not only satisfied with the status quo, but also to keep learning.

  1. If you are used to developing pages with jQuery, try Vue, React.
  2. After writing ES5 code for a long time, it’s good to learn ES6.
  3. If you’re interested in HTML, CSS, or JavaScript development, learn Flutter.
  4. For a high-performance Web App, try a Service Worker.
  5. From the HTTP protocol trigger, retrofit spDY and HTTP2, try HTTP3.
  6. Try a new programming language: WebAssembly.
  7. Know for service, but do you know micro front end.

The skills listed above, which can be triggered from a front end perspective, are essential for an architect to keep learning about every new technology.

Building tools and platforms

A programmer who can only write code is called a coder.

When the technology reaches a certain height, the ability to improve the business will gradually become less, so we should jump out of the technology itself, to improve the tool platform around the business, also to serve the business. As an architect, you have to have that ability.

When it comes to tools platforms, people can quickly connect to some of the tools on their team. Here I would like to discuss with you what ideas should be used to plan and review our tool system, as well as what points we can further improve.

For the sake of generality, here are also some examples of tool platforms:

  1. For development debugging, you need tools to improve development efficiency, such as Fiddler, which is commonly used on the mobile Web, or small program emulators.
  2. For performance testing, we need some tools that can perform stress testing and online regression testing after release, such as Tencent WeTest, etc.
  3. For statistical analysis, every business needs tools that can provide the product staff to observe the data. Of course, due to the sensitivity of data, each team generally has internal tools, as well as external similar tools such as Google Analytics.

You can see that the tool platform is built around each of the key nodes in our r&d process, which together we can call engineering. Engineering is a very popular concept in recent years, and it is also a very clear development direction for the front end. In fact, the improvement process of tool platform is the promotion process of architecture engineering.

As an architect, you need to have a keen nose for these nodes. And in the appropriate time to make a tool platform to improve the business, to do repetitive problems, think about whether to develop an automated tool platform to deal with, this is not the code to improve the business solution.

Process and Normalization

As an architect, it is important to develop and standardize processes. Don’t underestimate the power of a specification, it can greatly improve the efficiency of development. A really good specification does not constrain users, but helps them quickly identify problems and improve efficiency. The specifications here can be summed up as:

  1. Structure specification: Reasonable layering and componentization is essential for the code structure of a project, both front and back.
  2. Code specification: This is the code codereview, codeView regularly, it is best to use some automated tools.
  3. Process specification: The review, development, test and release phases of the project need to have process constraints, which need to be formulated according to the actual situation of the team.
  4. Standard landing: The most important thing for the standard is to implement the standard landing. When the standard is formulated, we should review from time to time whether the standard is actually landed. This should be the basic principle that every member of the team adheres to.

methodology

So-called methodology, can only say it is abstract, the methodology, here mainly refers to the complete a small demand, or to undertake a major project, in the concrete implementation process, must have certain methods and skills, I believe you have seen the dome under the video, the methodology of is very strong. In fact, to put it bluntly is to do things to have routines, here is an example of performance optimization. When it comes to performance optimization, how can we prove that optimization works? We can use the “sandwich law” (our own name) :

  1. First, before optimization, we need to find the current situation of the problem and have data to support the state before optimization. So learn to collect data.
  2. After having the data, we need to find out the cause of the problem and put it into practice while analyzing the data. At this stage, you need to document the specific optimization principles.
  3. After optimization, you need to find ways to verify, and during the verification process, you also need to collect data.

So here we have the data before optimization, the principle of optimization, the data after optimization. Through data comparison, we can easily prove that our optimization is effective, and can make a very beautiful summary, as an architect, this is a good scene to establish prestige.

The above three steps can be iterated again. That is to say, we achieved the effect of the first optimization, but after further investigation, we can optimize again. Each optimization is supported by data, which is the methodology of performance optimization.

Safety awareness

Why should security be singled out? For a business, security is the first element, just like a country, security and stability is the premise of all development, once the business security problems, all may be lost in a moment, the cost is very heavy. Therefore, as an architect, you must ensure the stability of the business, which can be summarized as follows:

  1. Say no to low-level code security issues such as XSS and CSRF on the front end.
  2. For large-scale operation activities, you need to be aware of disaster recovery and backup. For example, you need to prepare a backup plan and an alternative plan.
  3. Try to use instrumentalization to solve and prevent security problems. For example, large enterprises such as BAT have a layer of guarantee mechanism at the operation and code level, such as Tencent’s Door God system.

The team cooperation

There is no perfect individual, but there is a perfect team.

Even if is an architect, I believe that he is not always in a fight, a good product business, always born in the team, so keep and team personnel’s communication is essential, the communication is not limited to daily words, or meeting, party building activities even in private, is can get to know each other. So the goal of teamwork is for everyone on the team to define their responsibilities and get the most value out of them, and it is the architect’s responsibility to maintain this partnership. And your recognition is also given to you by the team members. Only by maintaining a good atmosphere can the team members be convinced.

Finally, a few misconceptions about front-end architects:

  1. Architects are not equal to full-stack engineers.
  2. The architect should not be completely detached from the code, but don’t be stuck writing code.
  3. The architect should look beyond the technology itself to the business from a global perspective, identifying and solving problems.
  4. The architecture of any project is not set in stone from the start, it should be iterative and evolving, and the architect has the responsibility to ensure that the architecture is innovative.

Finally, I hope that all the front end colleagues can break through all obstacles and be smooth sailing on the road to becoming an architect!

Welcome to the new book: HTML5 Mobile Web+Vue.js Application Development In Action