What will happen to the front end in 2021? First, what is the purpose of our attention to these new technologies?
I believe that for those who pay attention to this issue, including me, in addition to understanding the trend of technology development as a topic for after-dinner conversation, the most important thing is to see whether we can be landed in the company and make some achievements, of course, promotion and salary are later.
Looking back the past
First of all, by “past,” I mean 2019 and before.
If history is the mirror, we can know the vicissitudes. Looking back at the past helps us make better judgments about the future. Let’s take a look at what’s been going on at the front of the big factories for the past few years.
Front-end engineering
This is probably the most discussed in the community in the last few years, the most asked about the interview term, so what is front-end engineering? I think we need to start with the following concepts.
modular
Let’s start with modularity in JavaScript.
Starting with ES6, the JavaScript language has its own natively supported modular solution, ES6 Module, which has the benefit that front-end users don’t have to use a community custom Module loading solution, but a unified one. By unifying the modular solution, you do not need to introduce additional code for the modular solution, but you also prepare for automated unified processing later.
Then there’s the modularity of CSS.
CSS modularity solves the problem of CSS class name conflicts, such as common BEM conventions and community-rich CSS Module solutions. With these things, front-end engineering multi-person development can gracefully resolve the problem of class name conflicts.
componentization
With the arrival of React Ecology and Vue ecology in various front-end teams in China, componentized development has become a standard, and excellent component libraries represented by Element and Ant Design have been precipitated in the open source community.
The programmers of The big factory have made another layer of abstraction and encapsulation on the concept of components, such as Ant Design Pro, a middle and background front-end solution with business components and business blocks as the abstract, and it has also unified the front-end tool library, front-end UI Design language and other solutions.
automation
The first is the automation of development.
Webpack and NodeJS play a big role in automating development. The server for localized development of front-end projects is provided by NodeJS (often used, but not necessarily nodeJS). Various auxiliary plugins and loaders in the development process are provided by WebPack ecology. Before going online, code packaging, code segmentation and resource processing are also operated by WebPack. It’s fair to say that many fronts have benefited from the introduction of Webpack and NodeJS in career advancement over the years.
With Babel, the front-end can write higher versions of JavaScript methods and automatically compile them to lower versions of JavaScript with WebPack Loader.
The second is the automation of deployment releases.
This is what a lot of big factory front-end infrastructure teams do, such as continuous release, version control, internal CDN building, etc.
Big front end
This is another buzzword that has been getting a lot of buzz in the last few years, but it’s not just hype, it’s actually expanding the capabilities of the front end and the existing organizational structure of the company. For example, in some companies I know, mobile and front end will be managed by the same team, collectively called the big front end team.
nodejs
This has already been talked about a little bit in the front-end engineering section, but I mention it again because nodeJS plays a role in engineering to provide the NodeJS environment and some of the back-end capabilities, while there are real NodeJS engineer roles and NodeJS projects in large front-end teams. For example, in the process of separating the front and back ends, some companies (such as Alibaba and Taobao) will develop a middle layer, which can be understood as a business interface aggregation layer maintained by a large front-end team. Front-end write interface is certainly the most convenient to use NodeJS, and nodeJS ecology is also booming. For example, in the early years, TJ alone carried half of the NodeJS ecosystem, and emerged such middleware-based development libraries as KOA and Express, and then Alibaba’s Egg, and then Nest.js. Now there is basically no naked nodeJS API writing.
Across the
Let’s start with mobile
First of all, the most direct cross-end is to set HTML pages inside the APP shell for development, which also gives rise to many hybrid solutions. The front-end also needs to understand the knowledge of the client and the design of JavaScript Bridge, which also reduces the position of APP client engineers 😂
Then, as the React ecosystem took off, Facebook opened source a cross-platform mobile app development framework called ReactNative, which lets you develop mobile apps using React’s front-end syntax, essentially a virtual DOM that maps native UI elements and calls native apis through Bridges. This kind of thinking has allowed the front end to reach out to mobile development and has led to the building of a large front end team. Vue Ecology also has ali’s Weex mobile development framework, which works on a similar principle.
Then Flutter came along, and it’s also a cross-end development framework, not really related to the JavaScript ecosystem, it uses the Dart language to develop the APP, and it has its own cross-platform drawing engine to ensure consistent UI performance across multiple interfaces, but because it’s also a cross-end solution, Therefore, it has received a lot of attention and learning from front-end engineers.
In the end, still want to bring a small program, mouth this technical solution is the product of business actually, every company want to content and ecology in their APP, so start WeChat applet (WeChat is not the earliest, but the development of the best), ali, baidu beat, bytes, etc. These companies have their own small program.
Let’s talk about the desktop
On the desktop I know the most used is Electron, which allows the front end to develop desktop applications in JavaScript. For example, bytedance’s flying book is done on the desktop using Electron.
Learn from the past
As can be seen from the technologies developed in the past, the front end is mainly engaged in unified, engineering and ecological activities. It has leapfrogging from slash-and-burn in the early years to relatively complete engineering development. The range of capabilities of the front end has also been expanded and things that could not be done before can now be done.
Many Internet companies’ front-end high P is also promoted in this wave, and get better career development.
Analysis of now
First of all, I define “now” as around 2020.
Now, basically, the front-end engineering transformation of major companies has been completed, and various transformation schemes and component libraries have emerged in an endless stream, so the front-end has a new gameplay.
Serverless
To be precise, Serverless is not a front-end technology domain, as it addresses the issue of freeing developers from the underlying architecture and operations of servers, creating the illusion of “Serverless”.
So why is this technology so popular on the front end?
This is because it addresses the missing capabilities at the front end of the development chain, the underlying server and operations capabilities. The front-end teams of various big companies are also trying to put Serverless on the ground. For example, you can see a lot of sermons about Serverless on Zhihu.
NoCode and LowCode
LowCode and NoCode products, in my view, are an extension and enablement of the existing capabilities on the front end by integrating them into other areas. In fact, major companies have already had relevant products landed in some specific business scenarios, such as advertising business and e-commerce operation, various requirements of landing pages can be solved by zero-code products, without the participation of code in the whole process.
So why bring up low code and zero code if we had it before? I think there are two reasons:
- Having previously addressed only certain business scenarios, I now want to gradually extend this capability to more business scenarios, such as outside the company, to do THE use of toC.
- So far, we’ve only solved the page level problem, and now we want to solve the application level problem.
Conclusion now
Of course, these are not the only technologies and solutions that are being discussed and are in progress, so you are welcome to add.
At present, the front end of large companies are also doing this in combination with their business. If your team is doing something related, it is better to join it, whether it is technical or professional development, there will be better harvest.
Looking to the future
React Server Component
This is still in the proposal. When it is mature in the future, it is likely to change the development mode of the front-end. The scope of the front-end React ecology has expanded to the service end, and a wave of new infrastructure and technical solutions can be considered.
Serverless Large-scale landing
According to the current development of the community and the internal development of major companies, Serverless should be launched on a large scale in 2021, and the operation and maintenance jobs will be further reduced 😸
NoCode and LowCode continue to grow
The concept of low code was reignited in early 2021 with the Nail launch, as nail usage and the toB side of the market have a lot of internal app build needs, so it’s not surprising that it’s highlighted the concept.
I believe that with the promotion of enterprises like Ali Nail, low code and zero code will develop better.
Need not anxious
Does that make you more anxious? Not really.
React core member Dan Abramov freely admits that he doesn’t know Flex, Webpack, etc., hasn’t tried Serverless, etc., “funky” technologies, he doesn’t know a lot of what you know, he doesn’t even qualify ali P7 by many hiring standards. But that doesn’t stop him from being a core member of React and his ability to do what he’s good at.
So, instead of using all of them, pick a technique that you like to use to get results, and go deep.
I am Ear East, currently in a large factory to do front, my public number is “front ear east”
The public number will update the article every week, mainly including: 1, front-end technical analysis, whether it is new technology, source code analysis, serialist tutorial, I will involve 2, programmers related career experience, such as how to promote programmers, programmers should pay attention to what to change jobs and so on
In addition, we also provide the following services: 1, resume modification 2, technical consultation 3, technical planning
Welcome to “Front ear east”