I and hua Bai Double Eleven

On the count of fingers, this is the sixth week of working from home.

Thinking back to my 2020, it started at the STATION B party, listening to Mayday’s “Cheers 🍻” — thought it would get off to a good start.

The rain outside the window, my mood also followed the restlessly moving up, it is better to take this and we talk about me and bai hua and the team’s front-end technology, also count as a summary of feelings and other miscellaneous talk.


At the beginning of 2019, I transferred my post from GUANGZHOU UC to Hangzhou Ant, where I work in the Consumer Credit Division (micro loan for short). However, I always tell people that my team is huabeidebi.


First spend bai

At the beginning of spring, my first impression of Hangzhou was that it was ridiculously beautiful, like a picture. You know, I am used to the flowers and scenery of Huannong people, but I still admire the flowers everywhere in Hangzhou.


When I first arrived, my first impression of Huabai was that everyone’s synchronized work in the morning meeting was very full. Everyone had at least two things — inner OS: Are there really so many things to do?


Indeed, for those who have never used Huabei before, or who only use it when consuming, huabei is just a consumption tool.


Frankly speaking, I did not know that There is a unified front for Huayuan until I came to the top of The home page of Alipay or entered the “Huayuan channel” on the page of “My”. Inside the channel, we are most concerned about the amount of Huayuan and bills to be paid. Of course, the operation of modifying the repayment date of Huayuan is also here. In addition, Huabei also holds MAO activities from time to time, super value rights and interests (such as weekly card of convenience store and voice package of star repayment), light membership and so on.


Why do you choose flowers

After four years of college and morning tea in Guangzhou, why would a native cantonese want to “go north” to this place with completely different customs and customs?

Of course it’s to see the snow! (Kidding.


Back to the point. First of all, of course, because the business is good, this point is beyond doubt. Posting a piece of net profit of Huabei in the first three quarters of last year, we can see that huabei business is still showing upward momentum. And that’s not even taking into account the singles’ Day and Singles’ Day shopping festivals. In the past year, we can also see that many of our friends are making similar products of Huabei, indicating that the whole market potential is still great, but the leading position of Huabei in the industry is still hard to shake. After all, alibaba is good at consumer and e-commerce.

Net profit of Huabei in the first three quarters of 2019


Although technology is not afraid of failing to find a good job, but the Internet winter of 2019 and the beginning of the epidemic in 2020 have clearly told us that only by choosing the right business can we secure our income, and then set our mind to study technology.


Secondly, the excellent knowledge base of the team is the second reason why I decided to come here. The knowledge base of micro loan was the most complete, organized and content I had ever seen at that time. Before coming to spend bai, I also read several documents carefully, and found that they are all meaningful, not for the record and record. After I came here, I found that under the encouragement and guidance of the boss, almost all the students here have developed the good habit of recording and summarizing, which is of vital importance to the growth of a technical person. After all, the longer it takes to graduate, the less motivated you are to keep learning.


Second, they want to see ant infrastructure. Ant, which advocates open source, launched well-known Ant Design (Mobile), AntV and Umi, all of which are desirable. I hear ants have a powerful infrastructure inside. Rather than use them, you want to understand the design ideas behind them, the design philosophy behind them, and even participate in them.


In addition to these big reasons, there are also some more personal ones.

For example, ant as an Internet financial company gives people the attraction, learn more financial knowledge is always a good thing.

I’m too young to have a family or a job, so it’s good to get out and see things.

Closer to Ali headquarters, I always feel that there will be some different opportunities, and it is always good to know more outstanding students here.

And want to know what it’s like to develop a product that you use every day

Wait, wait, wait…


Spend borrow borrow front end technology

So much for my personal thoughts, let’s move on to the real stuff. Share with you the front end team of spend borrow borrow, what technology does it use?


Spend bai architecture

First of all, the structure of huabei channel. Like the development history of many front-end teams, Huabei was an ordinary online Web page that relied on the client at the beginning, and a stable structure was formed after continuous upgrading and evolution: React was fully embraced, Node was introduced as an intermediate layer (BFF, Backend for Frontend), loading performance was optimized through off-line packages, Ant Design Mobile developed by the team (& maintained) was used on the UI, and Alipay applet was introduced. Diversified client forms.


What are the benefits of this architecture? Take the BFF architecture as an example.

The BFF architecture enables the front end to be service consistent, resulting in efficiency and flexibility:

  • Simplify client logic and reduce network overhead
  • Avoid meaningless transparent data transmission
  • Filter sensitive information
  • Multi-protocol Publishing


BFF architecture


In the development process, the front-end and BFF are done by the same person, which also helps engineers grow:

  • To equip engineers with server-side skills and expand their knowledge
  • Connecting upstream and downstream, and improving communication and coordination capabilities
  • A clearer project structure leads to a better division of labor
  • More service support and improved problem solving efficiency


In addition to H5, Node.js and small programs, the team also dabbles in many other fields.



Web 3D

Speaking of our team’s Web 3D, that’s amazing, so let me take a moment.


At the beginning, our team started to develop Web 3D graphics technology in order to enhance the fun of interactive products and commercial transformation data.

We did a number of technical studies, but the community solution was either not “Mobile First” or the editor was weak and didn’t meet the needs of actual development. However, the Native solution is not suitable for the Web environment because of its high cost and large output (hundreds of meters).


Later, we decided to focus on 3D graphics technology and created Oasis 3D, a 3D technology product for ant Financial front-end engineers and suitable for the future business development of Ant. It uses a microkernel architecture, supports component extensions, glTF 2.0 and matching PBR materials, and a rich variety of animation systems (bone animation, particle animation, Shader animation, and frame animation).

In addition, we also combine the art process with ant Financial’s front-end RESEARCH and development environment to explore an efficient and low-cost online workflow — Oasis 3D workflow, which not only meets the needs of interactive marketing business scenes, but also provides reliable rendering capabilities for industrial product display, data visualization and other business scenes.


Oasis 3D also appeared at D2’s interactive booth and was featured as the SEE Conf theme, which can be found in “Ant Financial Web 3D technology Exploration Road – SEE Conf”.


Ant Financial Web 3D technology exploration road



Browser Real-time build

If you attended the 14th D2, then you are familiar with this technology, because the lecturer is from our team hyun Ji little brother!


The xuan ji @ D2


Hyun Ji is in charge of the development of an important project in our team. The internal code name of the project is Gravity, which is a set of preview and debugging solutions implemented entirely based on browser technology.

Gravity makes a whole front-end development model fully portable to the browser with a decent runtime code compilation model, a complete browser-based file system, and a lightweight package management model. Because Gravity is completely browser-based, it is extremely lightweight, with server-0 requirements, user-0 configuration, and any visual editor, and Cloud IDE that can be quickly integrated based on Gravity’s plug-in capabilities.


Hyun believes that Cloud ides must be the future and that Web-oriented architecture must be the priority. Find out more about browser-based real-time Build discovery.


(Aside: Make a call for the Cloud IDE! Working from home during the recent epidemic, I feel the ease of Cloud IDE! Various environments do not need to build their own, NPM package makes the memory is not tight, anytime, anywhere to open the project can be developed)



Introduction of new technology

Some people think that business volume and technological change are irreconcilable, but Huabei does not see it that way. The front-end technology is constantly updated and iterated. Of course, Huabei also chooses to keep pace with The Times, which can be reflected everywhere.


In 2019, Serverless developed in full swing. Huabei also launched the first application of SFF(Serverless for Frontend) on Double Eleven, and successfully held the huge traffic volume of The cat night.


React Hooks are dear to many, but they won’t be used on big projects without careful research. This is really an itch for programmers who like to try new technologies! Many of Huabai’s engineers are also fond of React Hooks, which have been investigated and shared internally for many times and implemented in actual projects. React Hooks.


Each technical direction of the team will share the latest research technology/direction of the team regularly every month. Sometimes, I will choose some of the ones I am interested in to broaden my knowledge.



All in all

In this year of Huabai, in addition to the technical progress and improvement of business ability, I also “crossed over” to participate in the organization and publicity of the group’s front-end committee, D2 and SEE Conf, and build our team’s own brand. Thanks to my boss, I discovered more possibilities in myself.


Is there really that much to do? Yes. So my other feeling is that I have too many things to do, and I am really tired, but most of the time I am tired and happy, because I have seen my growth, it is good to eat more hardships.


By the way, at the end of last year, the front end team of Huabei Borrower got its own name — RichLab. It also has a column of the same name on Zhihu, and publishes high-quality articles. Want to say a lot of, but the space is limited, interested in private chat/comment me ~


If you (or a friend of yours) are interested in any of the technologies I mentioned above, or would like to find a good job in this bad situation, please feel free to contact me at [email protected] 📮



The recruitment poster is as follows, please forward it