preface
Not long ago, I saw a question on Zhihu: what are the front-end teams of Domestic companies doing in 2020? In fact, behind the front of a lot of students confused about the future. In the last few years, the front end has come on leaps and bounds, with a lot of new technology coming in. Although we say that we can’t move, but at least we have a goal to learn.
Five or six years ago, learn React or Vue and introduce it into your project. Using ES6 development, in conjunction with GULp or Grunt, to create a front and back end separation project would be awesome, taking the team from the Stone Age to the industrial age.
Then in a year or two, learn webpack, build a better development scaffolding, and then work with packaging analysis to do performance optimization. Sharing and promotion within the team is also a very good technical output.
After another year or two, I will learn from Node. With the server capability, together with Gitlab and Jenkins, the front end can make a good release system and iteration system by itself, and then introduce front-end monitoring services, etc. A set of completed front-end infrastructure will be very perfect. You can continue to grow, get promoted, and get more money.
The question is, what do I do now? What can I learn now?
Last year, Yuan Xin, chairman of Alibaba Front End Committee, pointed out four directions in his book Where are the Opportunities in the Future Front End:
- Set up service
- Serverless
- intelligent
- IDE
But for most front ends, it’s too directional and involves too many things. It is not like one or two knowledge points, according to the tutorial document to learn a study, and then look at the source code of what, master almost. And a lot of it seems to be super, online search intelligence, serverless, a lot of fields outside the noun into the eyes, I do not know where to learn. And most of all, even if I did, my company, my business, didn’t seem to need it.
As a result, many students become anxious and don’t know what to study, let alone what to do. Basic technology is mature, business, the front end seems to be only a sticky page, it is difficult to have a point.
Having said so much, I can’t come up with any very good methodology, but I think our insurance front end team as a whole has done a good job. I would like to introduce it here and see if it can give more output to other students.
Business situation
First of all, a brief introduction to our business, nothing about technology, without any background.
- Commercial insurance business: in fact, it basically covers all kinds of insurance you know, life insurance, health insurance, property insurance, accident insurance and so on. There are other things you might not think of, such as refund insurance, pet insurance and so on
- Mutual-treasure business: Mutual-treasure is our star product in the past two years. I won’t tell you more about it. In short, it is the key issue of Ant and the group. Alipay search mutual treasure can understand more
- B-end services generated around assessment, claim settlement and other links of insurance products: Ant Insurance, as a platform service, connects with all kinds of insurance companies and other related companies, and also provides them with many corresponding services.
It is generally understood that Ant Insurance is a platform-level business that also provides services for BC end. Let’s talk formally about what’s going on at the front end.
Technical matters
Marketing and operation system
Let me start with my own part. I am currently in charge of the front-end issues related to the growth of insurance users, so it focuses on the marketing and operation system.
Intelligent components
Componentization is presumably something all teams do. In addition to basic UI components such as ANTD and Element, some basic business components are also deposited to facilitate the reuse of similar functions by different products.
A C – side page is often composed of many components. Page = ComponentA + ComponentB + ….. . A component UI = Fn(props, state), Fn is the component code. The page of insurance is basically thousands of output, especially some of the operation modules, such as red envelope screen, marketing banner and so on.
In general, the state of a component is the internal state that handles some business logic, and the core that determines the component UI is the component props. Therefore, most of the routine is: the root node component of the page obtains the configuration props of each component from a certain data service with thousands of faces, and then allocates it to each component to render the page with thousands of faces.
So the question comes, for such a page that needs thousands of people to operate, how to abstract components, how to associate with a data service, how to achieve rapid reuse and delivery across the page?
In the end, we realized a set of intelligent components, which integrated thousands of data recommendation services on the traditional components to realize the visual operation configuration and rapid delivery of components.
Intelligent building
Many companies have their own building services, and Ant also has a site building service – Yunfengdie. The version that supports mobile site construction internally is called Morpho butterfly. It allows you to develop components and templates, select the components you want from the templates, configure the props that the components need, and build your own mobile site. Based on this capability, insurance also exports a large number of marketing sites.
The problem is that the props configured with the Morpho service are statically written to death. As I mentioned in the intelligent component above, you can configure thousands of data according to rules such as different groups.
Therefore, based on the underlying services of Morpho Butterfly and the ability of our intelligent components, we have realized a set of building services for thousands of people. With such ability, our operations will be able to directly build a fine operation of the marketing page.
Smart camera
Most of the functions of the camera in the front end are to shoot some information materials of the user and upload them after obtaining them. In the insurance business, there are many such scenarios. Such as:
- The car is damaged to determine the damage, through the camera to take the car damage screen, simple judgment of the car damage level.
- Claims service, through the camera to take the case, medical expenses and other information.
- Pet insurance, by taking pet dog nose print, to obtain the unique pet identification, pet nuclear body.
However, the acquisition of these pictures is not so simple. Most of the information taken by users is of poor quality, which requires intelligent guidance on the terminal, which involves some machine learning and related algorithms. In the past, the algorithm engine was done by the client team, but it was heavily dependent on the client version, and the cross-side capability was weak. Since 2013, based on Tensorflow.js, we have run the algorithm engine on the browser side, and made a lot of performance optimization and supporting mid-stage services, and finally realized a set of cross-end and fast iterative smart camera development system.
The Denver nuggets couldn’t play video, intelligent camera video related to language finch see view: www.yuque.com/wuomzfx/uxz…
Engineering efficiency
React development framework -Remix
You may have heard of Remax. In fact, during the same period, our Mutual Treasure business line also produced a small alipay program React research and development framework -Mars. Mutualtreasure is the first alipay mini program of insurance, but it is slightly different from ant’s React system in terms of research and development paradigm. In order to improve the r&d efficiency, our technical students also developed a more internal-oriented R&D framework. Of course, there are a lot of overlaps with Remax, so now our Mars has been merged with Remax. After the merger, the external brand name is still Remax, and the internal brand name is Remix. – The safe Alipay applet can now be happily developed based on React with hooks.
Cod: LowCode solution under BFF system
Is there a way to improve efficiency further? As Cod came into being, we developed a set of code choreography and service choreography capabilities, which can directly consume and choreograph remote services provided by the backend in the C side in a way similar to GraphQL.
summary
In addition to what has been mentioned above, our business also includes the commercial insurance center Taiwan system, and the joint adjustment tool based on Electron technology. I won’t go into details.
On the whole, insurance is still close to business demands and engineering efficiency, and has done a lot of technical construction, basically involving all the front-end students. Most students can develop their own skills with business development. Then these technical construction, indeed also relatively attached to ali economic committee put forward some directions. For example, in the field of intelligence, we have the construction of terminal intelligence; In the field of construction, we have the construction of fine marketing pages; The capabilities of service orchestration and code orchestration brought by COD, broadly speaking, also belong to the Serverless domain and so on.
To tell you the truth, when we do these things, we don’t really think of any direction, but we walk along these roads. I have to say, the big boys are still very strategic.
recruitment
Said so much, one is to provide you with some reference, on the larger hand or hope to attract outstanding talents in the industry.
At present, ant insurance business has a strong momentum of development, and it is a new generation of engine for future growth of ant. Moreover, Internet insurance is still in the blue ocean stage, and many things are still 0-1 construction. There are many opportunities and possibilities, and outstanding front-end talents are urgently needed.
In terms of technical team, the current team size is 40 +, including several front-end teams. Vertically, we carried out business scale and specialized group division, such as our user growth team. Horizontally, all kinds of virtual technology groups are set up so that everyone can choose the technology direction they are interested in for in-depth study and exploration.
Overall, the business is developing well, the technology is great, the future is clear, and the growth can be expected
Specific recruitment requirements, also not lengthy. Overall: solid technical foundation, in-depth in a certain field (Node/ interactive marketing/construction/terminal intelligence, etc.); Good at precipitation and continuous learning in learning; Optimistic and outgoing personality.
Recruitment level: P6-P8
If you have any ideas, you can send your resume to email: [email protected] or you can send a wechat to me, AND I will add you to talk about it in detail
Team photo **
Finally, some photos of our daily study, life and entertainment are included.
Weekly discussion and sharing
Have an occasional drink
Take a trip to the city balcony to experience Expensive Life
Lovely girls
Love pair programming
Play the chamber of Secrets
Finally, handsome boy town building, hoping to attract more girls
