At the forefront of
We are the front-end artists team (cross-border supply chain performance experience team) of ICBU Experience Technology Department from Alibaba Center in Shenzhen. It has been established for nearly 6 years. With the continuous growth of the team and technical output, we have gained a relatively good influence inside and outside the group. [Boast: Currently Shenzhen Ali Center is the largest and most mature front-end team] So how did our team develop? What difficulties did you have growing up? How to break the game one by one? In this article, I will take a look at the history and uncover the whole development process from FY15 to fy19.
Our current office environment
Group photo
Before I start, I have to finish my task. Well, you guessed it, I’m here to recruit, and my boss wants me to make a poster. The key is to be quick and creative!
If you want to join us, please contact us at [email protected], [email protected].
Fy15 – Build aircraft by hand
The status quo
Founded in 2001, Shenzhen One Datong mainly provides outsourcing services for import and export process for small and medium-sized enterprises at the beginning. Its core business includes customs clearance, logistics, foreign exchange, tax refund and finance. November 2010 Ali began to hold the shares and acquired the wholly-owned shares in April 2014.
After the completion of the acquisition, the business concept is alibaba international website (www.alibaba.com) and onetouch.alibaba.com user system through, the upstream Alibaba international website to provide inter-enterprise (B2B) international trade platform, marketing consultation, price inquiry, procurement transactions, Downstream OnDatone provides one-stop offline contract fulfillment services for small and medium-sized enterprises, including customs clearance, foreign exchange, tax refund, logistics, finance and other comprehensive foreign trade services. The international station has accumulated CGS customers for more than 10 years, providing sufficient customers for One Datong. At the same time, One Datong completes offline service process, depositing real foreign trade transaction data, and feeding back alibaba International Station to build a credit system for buyers and sellers.
team
The team also began to integrate with Alibaba International site. ICBU Hangzhou team provided human support in the early stage, and three P6 students were sent to work in Shenzhen to assist in development. It was at this time that I began to slowly build the front end team of Shenzhen Foreign Comprehensive Service, and successively hired 4 students to support the whole business of OnDatone.
technology
Technically, at that time, the system of old one daton was an enterprise foreign trade ERP system built by ASP.NET. It was no joke to have a person squatting in the computer room and restarting the server during daily downtime. Therefore, we started the whole station system migration journey of WebX MVC architecture with Ali Java as the core. The workload of the front and back end reconstruction is huge, and the road is destined to be extraordinary.
Not only is the workload huge, but the technical ability of the entire technical team is uneven. In addition to a few internal transfer and the new club recruit Java development students, most of the old one daton ASP technical team.
Due to the complex composition of the team, there are great differences from Ali in project development and team culture. The front-end interface of the old One Daton system is basically developed by the back-end students using the template. There is no UI standardization at all, and interaction and visual design are not required. As a result, in the process of reconstruction, it is difficult for the old students to pay attention to the front-end system experience and the rationality of the architecture. At that time, the front-end technology stack selected Atom component based on JQuery and CSS layout scheme based on Apollo system, together called Alpha component system. As shown below:
From then on, the front end team of foreign comprehensive service started to explore the way of making aircraft by hand in the front end of the bloody and magnificent business.
Office conditions
At that time, Alibaba did not have its own campus in Shenzhen, but rented several floors of office buildings in Luohu Hongchang Square. Old office condition is relatively backward, for example, the whole product technical team will be once or twice every week iteration review meeting all of our employees, we can only in a narrow, phone is often no signal, next to the toilet, drainage of mobile screen, stand type quick review meeting from time to time I can smell of toilet wafts “fragrance”. Moreover, most of the newly recruited students were from Huawei, Tencent and other companies. They lived in Baoan, Nanshan and other areas. They spent 3-4 hours commuting to work every day, feeling hopeless in life.
The Ali people are good at finding happiness in their misery. In a small rest area, a miniature table was set up to start the joyful first session of billiards, which has since become an annual fixture of the Shenzhen team. Helpless pain and passion interpretation of Ali people serious life, happy work indifferent.
Fy 2016 – Planes begin to fly
The status quo
In fiscal year 2015, the main process of building the fuselage was outlined. But the business grew very quickly, with a front end team of 4 people, hanging 200 project requirements at the same time, literally; In addition, as mentioned above, several students in the team were far away from work (3+ hours back and forth), so they were either working overtime or on their way to work overtime every day.
At this stage, the most immediate challenge is to quickly understand the overall picture of the business, and identify the direction in the numerous project requirements, and focus on the attack; Such a scenario, the conventional strategy is to catch the first kick the ball, in the face of emergency project, human bottleneck problem, only by working overtime to solve the most direct and rapid way, the next step and step by step to seek breakthrough, that is, through the engineering efficiency and architecture governance solutions to technical research and development of bottleneck problems, followed by gradual layout in the future, The conventional path would look something like this;
technology
Technically, the solution that fits the current situation is the most feasible solution; At that time, the development mode was traditional local development. Teleport was used for compilation and Workman was used for resource construction to generate a large package of independent static resource files for page reference. As components repeatedly relied on the same content, the packaged files were usually very large and crashed when the console browser was opened. So there is the step-by-step optimization of the old UI technology architecture. Since then, the plane has begun to operate regularly and has begun to set sail;
Layout is out of the library and the application is split
Due to historical reasons, it was often necessary to do some updates and iterations for the whole system or all pages, so we abstracted a unified layout package for the system pages, which can well deal with the global characteristics of the page and site:
- For example, the quality control of page performance and abnormality was completely absent at that time. After the project went online, abnormal problems such as page blank were usually reported by front-line business students. Through the independent layout scheme, can be a good solution to such a lot of uncertainty caused by the problem;
- Another example: hope to add watermark to the platform to do security prevention and control, unified layout code, theoretically only need a few minutes to complete;
- In addition, the front end can be less concerned with the general menu, authentication and other issues, focus on the rapid development of the page;
Due to the packaging mechanism mentioned above, in order to separate layout, it is necessary to introduce a layout JS and CSS file in the page, and each front-end resource is built separately. If it contains the same dependency, it will repeatedly package the same content into different target files, which will lead to style coverage and other problems. Therefore, we adopt the layout out-of-storage scheme to solve the problem.
At the same time, in order to respond to the business quickly, we separated the general business components from the page logic code, and divided it into multiple front-end applications according to different business domains such as customs affairs, tax affairs, foreign exchange and orders, so as to reduce the cooperation problems such as pre-emptive environment and code conflict in the development process.
Scenario strategy
The engineering and architectural issues couldn’t be solved, so we looked for other shortcuts to r&d efficiency. We proposed a standardized scene design scheme for the background system: Standardization of every scene development code, uploaded to the seed vault, as a seed for the development of the new page, through the use of a command, scaffolding can pick up suitable scene from the seed bank code seeds, quickly generate key code of the page, the front-end students only need to step in modifying business logic code can be alignment, With this seemingly unglamorous solution, we reduced a page that would have taken 3-5 days to develop to half a day.
Our scene seed library is shown below:
team
In the beginning, I adhered to the agile morning meeting every day, made a quick review of the affairs, and tried to catch the ball first. If there was any problem, several students discussed and solved it together, and summarized it through the mechanism of weekly meeting. The process included project technology sharing and communication, business results review, etc. While resisting the pressure, we can also see the rapid growth of everyone. The team began to grow.
Fy 2017 – Change engines while flying a plane
The status quo
In this year, the business expects to achieve the target of double scale. The business strategy is to release the service workload of consultants, introduce partners, and leverage the ecological service capacity around the whole partners. By adopting the form of partner, we can not only carry out localized services in different regions well, but also serve more customers with ecological capabilities and drive more customers upward.
technology
Disadvantages of webX MVC layered architecture
At that time, MVC development mode under the Java system was still adopted. In order to solve the rendering problem of View layer, supporting template page rendering such as Velocity could also be introduced.
The problems here are mainly exposed in the aspects of collaborative efficiency and project quality:
- Synergy efficiency:
- Heavy dependence on development environment: Front-end development depends on the construction of back-end environment before development
- The development of VM content is inefficient: basically mock data is used for demo development in the front end and then applied to VM
- Front-end nested VM templates: Front-end students do not know the specific information about data objects, variables, and so on provided by Java.
- Backend nested VM templates: Backend students are not familiar with the UI implementation involved in the front-end template layer, such as event binding and CSS styles
- Project quality:
- Technology stack coupling raises quality issues such as static resource versioning, DOM restructuring in the VM layer, and so on
- The difficulty in unifying technical specifications leads to quality problems, such as the abnormal experience brought by interface data structure (error code, error information, grid general query), and the ununity of menus caused by the difficulty in reuse of layout independence.
At the same time but also not conducive to the development of students professional front end technology, such as the back-end classmates more expectations by providing the underlying micro service form, processing data layer, business logic, and the front students are also expected to back the content of the front-end technology stack, reasonable structure routing, straight out of the content page, user interaction, etc; Better in professionalism, efficiency, performance, experience (e.g., error code, straight out), quality, safety, etc.
The front and rear ends of the Node are separated
In view of this series of problems, we hope to get rid of the VM layer and realize the separation of the front and back ends (completely decouple from the technical architecture). The ultimate solution of the front-end technology is to introduce the Node BFF layer to solve the problems of architecture and coordination, and at the same time, to solve the corresponding problems of research and development efficiency through the establishment of supporting facilities.
Thus, momo led the hierarchical transformation of Node front and back end architecture, another bruising technology war.
If in a new project, try to use a new technical scheme to implement, in fact, is negligible; However, for us, the biggest challenge was the need to migrate all the functional pages of each system (the total number of functional pages is about 5 or 600). More challenging, such technology projects, once upon a time the weak position, is not a full-time business project, single project scheduling to do, only in a team students support the business project, through overtime or use their spare time to deal with, some students even arrange rest time during the Spring Festival at home in), the whole process is driving a plane in the engine.
At the end of fiscal 2017, we successfully completed the architecture upgrade of partner platform, with zero failure in the whole process and significant improvement in service performance, quality and other indicators. Since then, the situation of online WebX application downtime or page failure in the past has been eliminated.
React DPL Fusion
The UI layer was subject to the traditional implementation scheme of jQuery, exposing a lot of problems. At that time, ant ANTD already had some influence in react circle, so Momo explicitly proposed the idea of the front-end UI layer of react unified Group. In that year, ICBU and business Platform Experience Technology Department (formerly international UED Business Division) began to jointly build Mid-Taiwan DPL Fusion.
team
At approximately the end of the fiscal year, OnDatone began to move from Hongchang Square in Shenzhen to Alibaba Center in Shenzhen; Happy to finally not have to take a rickety elevator, have a meeting in a “scented” toilet, and have a 3 hour commute…
Before leaving Hung Cheong Square, students at the front and rear end took photos
I was so happy that I came to the new park for cycling in advance (in that year, shared bikes just became popular)
Moving into a new home, the team grows
Actually program out to sea
Fiscal 2018 — Fly Overseas, EWTP
The status quo
This year, Ma Yun called on the world to establish an E-WTP (Electronic World Trade Platform) platform to achieve “global buy, global sell”. And the first stop of EWTP (Malaysia), the landing main body is responsible for it is OneDatone. After business process and technology assessment, assessment in the first round down to the whole project more than 10000, want to achieve the minimum link to around 3000, because much of the work is the need to promote the whole Java technology system (many Java rely on middle service/middleware has no overseas deployment) international deployment. At the same time, we found that the entire technical team was not experienced enough in internationalization, and was also affected by the support and promotion pace of Ali Cloud and group middleware in the internationalization scene. There were many uncertain factors, high workload and great risks.
Business trip to Malaysia for research
technology
Breakthrough Node layout
With preliminary layout of the node layered architecture scheme, technology after several rounds of negotiations, and approved by the business side, the project team to reach an agreement, we gave up before and after the end of a full range of facilities are deployed overseas plan, but USES the node access layer out to sea, call the domestic Java service, by means of special line to achieve fast response of the business, architecture is as follows:
Through this scheme, Java only needs to be developed as common applications in China, and the overall workload is controlled to less than 1000 people per day, which is reduced by 10 times. Only one full-time and two part-time students were involved in the front-end and the project was launched in S1 stage.
This scheme, although the line performance delay belong to the category of business perfectly acceptable, but the international scene inevitably increase the complexity of the front-end architecture, especially in the problem on the screen, as a result, we began to have the application health degree of the Node, a system exception monitoring – bian que system prototype (Node runtime log visualized diagnosis platform).
team
This year, we gradually began to try to share the team’s technical sediment with an open mind. Miko, who recommended team appearance level to open source China, shared “eWTP Front-end Internationalization Technical Architecture”, and gained good comments.
In the second year, we organized the first front end Artist Salon in Shenzhen Ali Center to build our external brand — front End Artist Team.
Fy2019 – Fly to the skies and embrace the era of the All-cloud
The status quo
Ondatone upgrades cross-border supply chain
Ondatone is fully transforming the cross-border supply chain, with the vision of building a large platform for foreign trade coordination. Onedatone’s business has been upgraded from 3+N (customs exchange tax) basic service to cross-border supply chain saas services such as customs clearance saas, finance saas, logistics saas and so on.
technology
Next stop where the front and back ends of a Node are separated
After years of working in the Node space, we also encountered the technical bottleneck of separating the front and back ends of Nodes:
- The logic on Node is simpler than that on web
- The front-end workload increases due to the need to occupy front-end development resources
- The front-end needs to be concerned with more areas: operation and maintenance, server performance, and horizontal authentication
- In addition to building, deploying, and publishing static resource applications, there is an additional layer of Node application deployment and publishing
For the first two problems, we initially tried to develop eggx scaffolding to solve them. The development of the entire Node layer was basically automated or semi-automated, and the workload was reduced.
This year, the serverless concept took off and we started exploring the next stage of Node BFF, with the intention of eliminating the front-end operations layer through serverless dynamic scaling. However, the granularity of pure FAAS is too small, which is not suitable for our business scenarios. In addition, after two years of practice in the field of Node, our team has a relatively large number of applications, so we need to explore a lighter migration scheme. At this time, Qiao Feng proposed EAAS (Egg as a Service) scheme.
At the same time, we further explored the part of Node logic Controller layer that could not be automated, and found that the basic routine of this part of the code is parameter preprocessing -> service call -> result processing, so we launched the land game platform (Node layer logic visualization arrangement & code hot update platform), more details. See “Node Access Layer Visual Logic Choreography, can you do this?”
Over the years, in addition to continuing to dig in the field of Node, we have also been exploring better and faster solutions to build lists, forms, details and other pages in the background scene of class B, and produced open source solutions such as Formily/Alist.
In terms of quality assurance, we are responsible for F2ETest (multi-browser compatibility test scheme), UI-Recorder (UI recording automation test scheme) and other well-known open source projects.
team
With the gradual expansion of the team, the sense of happiness is also getting stronger and stronger. Most of the students of the Shenzhen front end team were selected to attend the meeting on the 18th and 20th anniversary of Ali, except @Jun, who failed to win the lottery twice in a row and held a hug to express comfort.
The future – Reach for the stars
Group photo of ICBU front end
The great leader Qiao Feng once said “Alibaba International station is the upper body, cross-border supply chain is the lower body, only the upper body and the lower body twist together, to create greater value.
The future has come to build a platform for greater coordination in foreign trade. Welcome you to join our shenzhen family and expand the frontier of leading the sustainable development of front-end technology.
Remember to contact us at [email protected], [email protected]