Front-end early chat conference, a new starting point for front-end growth, jointly held with the Nuggets. Add wechat Codingdreamer into the conference exclusive push group, win at the new starting line.
The 14th | front-end growth promotion, 8-29 will be broadcast live, 9 lecturer (ant gold suit/tax friends, etc.), point I get on the bus 👉 (registration address) :
The text is as follows
This is the 11th front-end early Talk girls front-end career development special session, is also the 71st early talk session, from ant Financial experience technology department senior front-end expert – Shen Yu share.
A graduate of Zhejiang University, Shen joined Alibaba Group in 2008 and later ant Group. She has been the core developer of The Node Web framework Chair, the technical lead of the Basement Baas service, the technical lead of Nine Color Deer, and now the technical lead of Cloud Phoenix Butterfly. The topic she brings today is “My understanding of doing front-end in the past 10 years”. So, we turn it over to our little sister, the sinkfish.
First, about me
Just the host has given me a simple introduction, then I will not talk about this place. My experience is relatively simple. Now I am working in the Experience Technology Department of Ant Group as the technical leader of Cloud Fengdie, an enterprise-level application design and development platform. I’ve actually been front-end for 12 years, not 10 years. A lot has happened in the past 12 years, so I’d like to take this opportunity to review with you the overall development of the front-end during this period.
A brief history of the front end
1, 2009
People may also feel strange, you have a front, why do you draw? In fact, when I joined Taobao.com in 2008, there was no professional front end team in Taobao.com. All the front end students were in the experience technology department. The Title should be called interaction designer, and we were in a big team with designers. In fact, a lot of page layouts at that time still use the old technology of table, so many of our designers can do some of the web. At that time, the front end students were more focused on some important pages like the home page of Taobao, while some activity pages would be completed from beginning to end by the designer students. It wasn’t until early 2009 that our company officially allocated a front end team, which to my knowledge was the first front end team in the country. So in 2009 we actually had the front end.
We have a look at the right of this map, I just cut taobao now home page. If we take a closer look at the two pages, not much seems to have changed, except that the pages are wider, fit for larger screens, and the design is more contemporary. If you look at these two pages alone, that’s true, even though we’re using all sorts of new technologies to make browsing smoother. But the front end actually goes much further than that.
2. 2008 ~ 2012
“Browser wars” may not be very meaningful for some new students, because Now Chrome dominates the world, including in 2018, Microsoft also announced the use of Chromium as the kernel of their browser, so the compatibility problem of the PC era browser has been completely solved. But back then, browser compatibility was a headache. If you look at the graph on the left, there are about 10 different browsers, and that’s not a complete enumeration. So for the front-end students at that time, the biggest headache is to deal with the front-end compatibility problem. Unfortunately, IE was still the mainstream in the market, and as a mainstream, it was extremely non-standard, implementing a lot of things that were not standard and performed poorly. So Diss IE became a daily activity for programmers at the time. The middle picture was a popular programmer cartoon at the time, so you can see how slow IE was. Because conditions were particularly harsh, programmers struggled with what we now see as ridiculous problems.
It was also a very frontier time, and we lacked some basic infrastructure — front-end frameworks were very important infrastructure. At that time, major manufacturers in China were developing their own front-end frameworks, and I participated in the development of Kissy on Taobao. In fact, Baidu, 360 and Sina all have their own front-end frameworks. At that time, front-end communication between these big factories was very frequent, so after one exchange, I came back and drew the cartoon on the right, mocking the front-end framework of the big factories at that time. Unexpectedly, the cartoon became a popular style, and many programmers read it. We also feel that this state seems not very normal, but at that time the front end is not like now, there is such a broad industry vision, so we have been trapped in this bureau for a long time. As you can see, the period from 2008 to 2012 is a period of four years. It is not to say that there has been no development in these four years, but the development has been very slow.
3, 2013
But our development process is not plain sailing, especially in the early for a long period of time, the status of mobile taobao may be similar to an accessory, or a supplement. By 2013, the company had decided that this was not going to work, that we had to accelerate our mobile business. So there was a very famous event called Ali’s “wireless All In” event. At that time the company sent a lot of personnel, resources to do wireless mobile phone Taobao. The battle was won. It was a close one.
But it will probably be around 2015 before the business really takes off and the Mobile First mentality takes hold. At that time, I was particularly impressed by the fact that there were so many people on our Intranet, tens of thousands of people, that we would often do some product marketing on it. Tens of thousands of people could not be ignored, right? It was during the Double 11 promotion in 2012 or 2013. PD of wireless mobile Taobao said on the Intranet that everyone should use wireless Taobao on Double 11 this year. Because at that time, I don’t know if you have any impression, the second kill is very popular, is a yuan a second a very expensive thing. The PD of our wireless Taobao said come and use the page of wireless Taobao, the water level of our server can be low, and the second kill will not be stuck. So you can imagine that at that time, even when we made wireless All In, the user base was not large enough, but the trend was very clear. Now, almost everyone has a cell phone. In this case, we can easily see that even though some great changes seem to us today, they can’t happen overnight. Just like when we started mobile Taobao In 2009, to 2013 wireless All In, and then to the market is completely wireless, there is plenty of time to react. So most of the time, as long as we follow the pulse of the development of The Times, there is enough time to do the corresponding countermeasures.
So why are browser compatibility issues just beginning on the wireless end? This is because at the beginning, we made a Native App. At that time, iOS and Android programmers were very scarce. Many of the front ends have been moved to iOS and Android development during this time. But in these two areas, the cost of personnel training is very high, and the research and development cost is not low. In this era of rapid development, if everything is developed with these two technologies, the cost is very high. So slowly the H5 made its way back into history. Because the cost of Web technology is very low, we try to add H5 pages in the wireless App to deal with the development of some non-core pages. Slowly, small program appeared again, this time we already know, today’s wireless, today’s mobile phone end, really important is the entrance of a few wireless traffic, and small program may also be a very important entrance. So Web development technology has returned to the stage of history. Of course, the most core apps and the most core pages will be developed using native iOS and Android.
As you can see, there’s a PWA at the bottom of this page, and I don’t know how many of you have seen it, or have a sense of it. It is a solution that hopes to use Web technology to make Native applications. It is a product of Google. So far we haven’t seen the trend of PWA being particularly popular, but it’s been around for years, so keep an eye on it. It’s actually quite interesting how these technologies trade off.
4, 2015
At that time, we did not have long time to breathe or confused, soon we were busy again, why? Since 2015 is known as the first year of toB, a lot of things happened in that year, we found that the business of toB was also very prosperous and promising. So at this time we also released our first toB UI component library, Ant Design, or AntD. It has grown from a very single toB component library to a very large family of visual solutions, business scenario templates, and Mobile component libraries. Last year, our GitHub repository had the highest Star count of any open source project on GitHub, surpassing Google’s Material Design. Ant Design has been a bit of a struggle for us, and we’ve been maintaining it since 2015.
The Owner of this project is in the group next door to us, called Right By right. Sometimes I would tease him and say, “You said that your Ant Design is used by so many people, what is its competitiveness? He simply threw me two words: beautiful. Yes, most of the time we often stress that we should have a big picture, to have a global vision, but we can not fall behind the work in hand, just because this thing is really good, can fit into some scenes in our work, it is very vitality.
In the upper right corner of Keynote is a business analysis scene, which is extremely complex and may have hundreds of thousands of nodes to operate. Such a complex scene brings new challenges to technology, such as: How to ensure performance of computations with hundreds of thousands of nodes, how to render information effectively to users, and so on, these new problems are waiting to be solved. In fact, as our business becomes more and more complex, it will drive technology further.
And in the bottom right corner of Keynote is a very nice big image, which is another branch of visualization, which is more advanced, called the big screen. It’s a beautiful thing to see on a big screen, which you see in a corporate reception or a government office, and it’s actually the size of several walls. It’s very visually demanding, and you can see it’s very detailed. Recently, there is also a popular word to describe this kind of large screen, which is called digital twin. It means to create a city that is exactly the same as our daily life by digitization. It is usually used for traffic control or financial control, when the large screen is very useful. What makes these screens special is that ordinary computers can’t run, they need special machines to carry them.
In fact, I didn’t have a line of code involved in either of these two things, they were all done by the students in the next group.
While Node.js has always been a toy, it’s actually been around for a long time, including Express in 2010, socke. IO in 2011, LinkedIn and Uber in 2011, Ebay came on board in 2013. Another special thing that happened in 2013 was the birth of the radical Web framework Koa, which brought some new ideas and inspirations to everyone. So our team started planning to build an enterprise-level Web framework for Node.js in 2014.
If you look at this graph in the middle, this is a record of our code submissions, and you can see that it’s still very active. This framework is called Chair, and I am mainly involved in the part of the framework to open up the connection with the existing technology system. This one is called Egg, and it’s an open source version of Chair, which means that students from other companies can build their own enterprise-level Web frameworks based on egg if they want to use it. So in this framework, what is our first battle? We used it on the cashier page of Alipay with the most traffic at that time.
In fact, this process is very bumpy, there are a lot of technical issues to solve first, such as performance, security. Let’s say you say performance is bad, right? In fact, node.js is very good at IO intensive processing, so we can Benchmark to see whether Java performance is better or Node.js performance is better, these problems are relatively easy to solve. What was difficult was that we didn’t have a development process in place; We also need to integrate into the existing development architecture, which is completely parasitic on Java. In fact, for a long time, the front end did not have its own release process, after the front end students wrote a template language, he needed to submit the script to the warehouse, by the Java students to do the final release. There is also a further issue, which is to consider the development of the relevant personnel. As we all know, everyone in the university has received relevant skills education, so for students studying C and Java, he may come out of school with such skills; But for now, Node.js isn’t a permanent college course. So this is very difficult.
At that time, there were many difficulties in this matter, but I won’t go into details about the rest, just talk about the part of the work I participated in at that time. There were two main types of work I did.
One is the work of getting through to the existing Java server, getting through to the Java server is very troublesome, you often need to parse its RPC requests, you need to know what its protocol is… So during this time, I wrote a lot of protocol parsing code, including some protocol parsing like Java IO, to actually connect to the Node.js side, so that we could actually connect to various services on the production side.
Another was very real difficulty is, we now see on the Keynote of the pay treasure to the register page, there are a lot of business, if we want this thing to be able to use a lot of words, we can’t all the code in this business, all written again and again we can’t put this business. At the time, we were using a template called Velocity in the Java architecture. The bad thing about this template was that it was too flexible, too advanced, and it was completely different from today’s templating languages like Vue. It is a template language that is very close to a programming language. So what to do? At that time, we wrote a transformation parser to convert the Velocity template language into nunjunks template. In fact, the Velocity template language is a superset of Nunjunks. During the transformation process, we also did a lot of functional checks. It also prompts the developer how many issues have been found during the process that require manual transformation.
Through such a series of efforts, we can really run within the existing system. So if you’re doing something new and you want to prove yourself, the best way to do it is to do a benchmark project. At that time, we took the alipay cashier page with the highest traffic to do it. Fortunately, we finally made it. The seeds of 2014 followed, and by 2015, the framework was generally accepted.
There are two good applications in this regard: one is alipay’s small program IDE, which was also developed using Electron at the beginning; One is our spike. As we all know, in fact, many students who develop nails are doing “contacts” in the early stage, so there are a lot of front-end students. Later, when we turned to Dingding, we didn’t have so much experience in making Native apps, and we were especially short of people. We hoped to make a version as soon as possible to verify it and see if it could be recognized by the market. So at that time, a group of front end students made the first version of the pin using Electron technology. Although the final nail version was changed to the Native version, in fact, the Electron version also ran for a long time, until it was reported that there were many performance problems. But in fact, this is a matter of opinion, a lot of times when people say a lot of performance problems, we often give an example: you go to VS Code, VS Code slow? VS Code is not slow. VS Code does it in Electron. So a lot of times it’s also important to see how well the technology is being used.
But as AI becomes more and more widely used, its threshold will be lower and lower. We have made some attempts in this area, including the intelligent design platform of Alibaba in 2015, and the intelligent design draft to code platform in 2018. Both of these platforms were running under the scene of marketing promotion. At that time, the Banner during the Double 11 or The June 18 promotion, or the picture of recommending products, had reached hundreds of millions of levels, which was impossible to be done manually, so we had to rely on technology for production capacity. So they came up with some ideas like this. Another is what our team is doing now, the Ant enterprise application design and development platform. You might say, doesn’t this look like an IDE? What kind of artificial intelligence is it? So we’re going to hit the no sign, and we’ll talk about it later.
5, 2018
This is a picture I took of some related products in our company. There are a lot of them, at least 10 of them. There must be many more I don’t know, just like the previous lecturer who shared their IDE, I don’t know about that.
You can see from left to right, the earliest is the big screen visual data analysis products, which are developed with the wave of big data; Then to this wave of intermediate ARTIFICIAL intelligence, Data Works big Data development and Pai ARTIFICIAL intelligence visualization development; To the third column of Alipay small program IDE and our H5 & small program building site IDE, the two youngest IDES are our Cloud IDE, also known as Cloud IDE, and Cloud Fengdee enterprise application design and development platform.
In addition to the ides to which these programs are directed, several other complex editors have appeared, namely, rich text editors and spreadsheets, for example, as shown below. So if we go back today and look at the whole front end, it’s actually very fast. Many students with relatively short working years can not even imagine that we are facing such a scene in 2008. So there is a saying in the industry that everything that can be done in JavaScript will eventually be done in JavaScript, including today’s ides are all written in JavaScript, so it’s pretty amazing.
6, 2020
Development to now, in fact, we will find that, first of all, the domain of the front end is more and more wide, in the original front end industry, all we need to know is CSS, JavaScript, HTML, and some surrounding things, but there are not so many important things to play like now; The other thing is, it’s really getting harder and harder, and you see the whole front-end work moving up, from writing pages to writing editors to the mobile browser kernel, all the way up, and you have more control over things as you go up. These two trends are clear. So for us, what we have to think about is, as the front end today, can we be satisfied with doing those pages? The answer is definitely not, we have to see where the next wave is in the follow-up development of the front end, we have to step on the pulse of the wave, maybe there will be a better next round of development.
That’s about my summary of the last 12 years of the front end. In fact, this summary is very personal, and some key technologies are not included in today’s share, such as IoT, Web Assembly and other technologies. Relevant students can also pay attention to them.
3. Be present
1. What is papilio yunnanensis
2. Problems and challenges
If you look at the cartoon on the left, it’s about the front learning curve, and I think one of the students in the community did a really good job of drawing it. It started out as the simplest one, but by the time it got to the end, this guy was overwhelmed, and there were so many stacks, and that’s true to a large extent. We said that although today’s front-end technology has changed a lot, the overall technical difficulty has also become greater, and it is very difficult to recruit better front-end students, so we hope to lower the threshold.
The other one is high quality. This may not be very well understood, because generally speaking, in the background business can run on the line. A very typical example is in the middle of the screen, which is also a screenshot of a mid-back product within our company. However, as we have just mentioned, 2015 is the first year of toB business, and toB business has attracted more and more attention in recent years. Many heavyweight businesses of Ant are also toB businesses, including ant Block Chain, Ocean Base, mPaas and other platforms. All these will allow us to put forward higher requirements for the overall quality of the background.
Of course, its own business is very complicated, to what extent? I was talking to one of my classmates, and they were talking about a signing product that they were in charge of, and the signing form, you can imagine how many fields — 800 fields! 800 fields, I think it’s hard for a person to fill out, 800 fields, can you imagine how to display them properly on the page? So the complexity is also very high. Under such a background, we decided to make such a product as Cloud Swallowtail to solve such problems.
We had a lot of questions about this product initially. If you think back to the page WHERE I talked about the Web IDE, there was one IDE called Cloud IDE and one IDE called Cloud Papilio, and the two were paired. Cloud IDE is a Pro Code IDE. Cloud Phoenix butterfly is the pinduoduo of programming world. When it comes to Pinduoduo, everyone feels “Low”, right? In fact, I was also troubled by this matter for a long time, because everyone thought that the cloud butterfly seemed to be very good, there are a lot of core technology, but when it comes to hiring people? “No, I’m going to Cloud IDE.” Probably is this state, let a person very distressed. But then I got over it. Why is that? Because I found that recently the market value of Pinduoduo more than 100 billion, this thing is quite fierce, and I checked, Huang Zheng is my elder brother — are graduated from Zhejiang University.
Line! I could be a pinduoduo in the programming world! Because a lot of time as it is “Low” market, of course, this “Low,” said not pretend bility Low, but we can really cut the user’s demands, know their pain points, and then put the way to solve the problem, difficulty to a minimum, so that we can maximize the covers quite a lot of the audience, this may be of the value of the product itself. On this premise, we have laid down some principles. First of all, it has to be simple and Low enough that we can make it accessible to as many people as possible. But at the same time its function must be strong enough, otherwise there is no way to cover the quality requirements of commercial grade products; The other is that no matter what kind of repetitive work is, it’s always dirty work, and we want more of that dirty work to be done by machines, and more creative and challenging work to be done by people. And then there are some capabilities that we may be incubating right now, which is that it’s not just a front-end IDE, we want it to be a design platform, front and back.
When we think about the product positioning, do not tangle. And it turns out that this thing that we thought of does have some surprises. Today, due to time constraints, I will not tell you in detail how we plan to design this product and what its future development is. Instead, I will talk to you about one or two thoughts in the process of making this product.
3, thinking a: do the same as PPT application
So how Low do we want it to be, how Low does it have to be for designers and PD to be able to participate? The first principle we settled on was, we’re going to do applications like we do powerpoint. What does it mean to make an application like a powerpoint presentation? If you look at the little picture on the left, this is a common drag and drop method for similar products in the market. The drag and drop method is based on Flex layout technology, so when you drag an object onto the canvas, you can usually only add it in the top and bottom or left and right bits. When you want to do some typography on this stuff, it’s actually a very complicated process to get it in the right place, and these are some of the products that are out there.
So how do you do this on a cloud swallowtail? Take a look, this is really like doing PPT to do applications, is to put where you want to put, there is no concept of layout. In fact, this technology is not the first initiative of Yunfengdi, because it has been used in some visual website building products on mobile terminals, but it is much easier to do on mobile terminals. Why is it so easy? First of all, it doesn’t have to worry about flexible layout, because there are some differences in screen size on mobile phones, but just do a full screen scaling, there is no layout problem at all. Without layout problems, we don’t need to identify parent-child relationships between these elements. But both of these issues are huge problems on the PC side, and it’s often joked that the thing that keeps a professional developer out of the front end is CSS. This is a joke, but it illustrates the complexity of the layout problem. So when we are in the layout, we need to consider a lot of problems. We finally decided to make it available in this very simple way. Those of you who are sharp-eyed or experienced may see that this experience like making a PPT is not as efficient as the little picture on the left, but there is a solution, and we are working on it.
This is the base of our whole product, and it sets the tone for the whole product. So what were the results? As a result, everyone did pay the bill. Not only the front end students used it, but also the back end students. What’s more amazing, we also found that someone used our online PPT, which was amazing. So, when you get to a point where you have a product that’s powerful, people’s imagination of the product may exceed their initial expectations.
4. Thought 2: Open component architecture
Speaking of open component architecture, what is open? This means that components developed in the Pro Code world can be used in Cloud Butterfly with a simple import operation. That sounds pretty good, right? We don’t have to reinvent the wheel, everything that’s great in the Pro Code world we can take and use. But it’s actually very difficult to make it that easy for users, because it takes a lot of work to import a small NPM component. For example, what is a component specification? How do I parse this NPM component? Do you want to build after parsing? Build! Because we can’t say, like Pro Code does, when the user releases, wait a minute and I’ll run a 10 minute build. Generally we want it to be released in seconds, so we need to build well in advance. How to edit the properties of an NPM component? In fact, these only solve the problem of our manual operation. Finally, we hope that a student with Pro Code who writes and publishes these components every day can send them directly to our platform when he sends them. In this way, it can be used either to write codes with Pro Code or to build with cloud papilio. This is a very good idea. So we are also doing research and development link open recently.
In the component world, one of the most frustrating things is called version upgrade. Many products have very fragmented versions, including our own component libraries. In Cloud Butterfly we have a principle that there is no version fragmentation, we force users to upgrade, we use a Codemod technology, all the components of the upgrade seamlessly, when users see the prompt, just need to upgrade mindlessly. In fact, this is a very good attempt. In the process of these attempts, we also had some exchanges and communication with the students of Pro Code, and even some feedback. For example, later students of Pro Code may also try to make version of Codemod. We can also retroactively improve some component specifications of Pro Code. At this point, the open component architecture really brings Pro Code and Low Code together, and we can share the output.
5. Thought 3: Data-driven intelligent research and development
So we want machines to do this kind of repetitive work, including design. So if you look at one of the capabilities that we’re doing right now: This is a form, and you select an API, you can select the fields to fill in, and it will automatically generate the form based on the META-information of the API and its API configuration. Of course, this is a very simple demonstration, as you can see, all the verification, typesetting and so on are automatically generated by the machine with one click.
Eventually we decided to go from API to production. Why is that? Because the design of background application research and development is standardized, we will not see a lot of flashy background research and development every day, and in the mainstream scene such as forms and tables, the standardization involved is more obvious, there is not so much design innovation. In addition, with metadata on the API, there is a lot of business information, which is an unmatched advantage of image-generated code. It also eliminates the designer’s work. So we finally decided to generate the artifacts directly from the data interface. At that time, there were some disputes about which AI technology to use. Finally, we used a relatively simple way like expert system, which had a better effect.
You can have a look. This picture is the first version of technology prototype we made in the second half of last year. The one on the left is the manual design version, and the one on the right is the design and development version of Papilio yunensis. Indeed, it’s not that the quality of manual design is not good, but the business of toB is more about rational design. To do this, there are probably three or four hundred design rules waiting for you. As a human, you are not good at remembering these things, which is exactly what machines are good at doing.
The funny thing is that we started incubating at the beginning of last year, and the output in the first half of the year was very poor. Later in the second half of the year, we thought it would not work and had to be improved. And then we work with the designer to figure out how best we can do this. Back in the conference room, we said there was a goal for this, right? Always have a goal. Nobody spoke, so I said let’s make it a goal, let’s make it a goal, to produce higher quality than the average human designer. At this time, everyone stopped talking and thought it was a design, how could it be higher than artificial design, at most close to it. We couldn’t. So we said, let’s get close to the manual design standard, and then after a while, we made the prototype, which is the picture you see in Keynote, and the whole project team was really inspired. So we decided that it was absolutely OK to be higher than the artificial level. It turned out that was the case, and we were really recognized very quickly in the business. So a lot of times, when you think about something, you need to think more boldly. Even when designing something as difficult as this, the things that seem to us to be the least programmatic, there may be a trace.
6. Thinking 4: Mixed mode
We made a plan based on the micro front-end architecture, combining Pro Code and Low Code applications. As a developer, he just needed to choose his own research and development method at will.
We can see that the following is a product page of Yunfengdie. On the left is our IDE, which was developed with Pro Code, and on the right is a series of other pages except IDE, which are all self-developed by Yunfengdie. At this time, it is not appropriate to use a single r&d approach to complete our r&d work, and a mixture of the two may indeed be the best solution. This solution actually solves the problem of user confidence as well.
More interesting is that the user starts with our lack of confidence, and then we do the research and development of hybrid architecture, after a period of time we find that the cloud of swallowtail butterflies so popular intelligent form, form, Pro Code classmate also don’t want to write their own, they said can cloud swallowtail butterflies do component-level mix, in cloud swallowtail butterflies on a component, Can be embedded in the Pro Code Code, Pro Code NPM package can also be embedded in the cloud butterfly? OK, this thing can be done, what happens when this thing is done? You don’t have to think about what type of r&d you choose, you have to think about what type of r&d is really right for your business. Those routine tasks may indeed be very fast, and can be done quickly and well.
Although we did this at first because of the lack of confidence of users, in fact, we found that after users really accept us, there are many projects that use 100% cloud Swallowtail to develop. With the exception of highly complex pages like Yunfengdee, which have one or two very special IDE classes of their own, the rest of the page is very suitable for development with products like Yunfengdee.
7. Thinking about the future
The figure on the left illustrates the scope of application of cloud Butterfly. We divide the application of a company into two dimensions. One is the scale of users it faces, from small to large, including team level, department level, enterprise level and toC. Another dimension is its interactive particularity. The yellow areas are very suitable for this type of development. Cloud Swallowtail butterfly in fact, there is a part of the mixed research and development, is just told you about.
So what do we think is the future of enterprise R&D model? This is the picture on the right, the current situation, lots of Pro Design, Pro Code. After the first version was released in the second half of last year, just under 20 percent of the business last year was carried by Yunfengdie. This is not easy for Yunfengdie. As I said just now, we have OB business, so it is a great challenge to carry out the research and development of many complex applications. Last year, about 40 percent of all products were designed and developed by machines, and about 60 percent by people.
We hope the future will look like the picture below. First of all, Pro Code and Low Code can be further integrated, and there will be a real correlation between them. For example, the components produced by Pro Code can be used in Yunfengdi. Meanwhile, Yunfengdi also has many natural advantages. It can collect users’ needs and usage data very accurately, and give a lot of feedback to students of Pro Code, which can promote a virtuous cycle. Gradually, these students of Pro Design and Pro Code will deal with more and more complex scenes. For the conventional RESEARCH and development work, we will gradually close down to platforms like Yunfengdie. In the future, 70% of the work on Yunfengdie may be done by machines, and the remaining 30%. Part of it is designers, part of it is engineers. We hope that Fengdie cloud can improve the development of background applications, so that people have more time and opportunities to participate in more challenging things.
Ok, so that’s some of my recent work and interesting things.
Four, some thoughts
1. Know yourself
The first is knowing what you have, what you want, and what you can give up. In everyone’s questions, many students will pay attention to their own management, should learn this, learn that. It’s really a simple question of what you want and what you can give up. In my opinion, management is a close shave — a close shave is not a serious word. Why do I say it narrowly escaped death? Because teams of at least 10 people need a part-time manager, teams of more than 30 people may need a full-time manager. When you go into management, it’s a completely different track, it’s probably a different track than when you were doing technology. For example, consider how people are happy to work, how the team is built, how the last position is replaced, how to set the direction for the team, how to communicate and report upward. At this time, many students may say, our team development is relatively fast, no one to lead the team, so I have to lead; Or I’m not good at it without a team. What do I do? It’s good for everyone to figure out what they want. If it’s just because they think they have no future without the team, there’s no need for that. We have a lot of high-P independent developers working in the company, working very well, very happy, and they don’t bring a team, it’s really about personal development. And if it’s painful to bring a team, it’s probably better not to bring a team, number one.
2. Identify and define problems
The second point is to learn how to identify problems and define them, and how to solve them can be learned over time. As programmers, we are often problem solvers, and we learn how to solve problems. But many students, especially those who have worked for some years, will gradually find that it is more important to identify and define problems in the process of work. For a simple analogy, I was just saying why do we want to be a cloud butterfly? Because we have more than one thousand front-end, 1/3 in the background application, urgent need to solve the problem of research and development efficiency and threshold. So 1/3 of the people are doing this, in fact, it is quite sensible, but if you say to the boss, I think the performance of the current front-end research and development students is too low, this sentence may be difficult to Get the boss to this matter. So it’s very important to how to describe the problem, including how to found the problem, because a lot of time is moving forward, you will find that the problem is not so obvious, it may even be a lot of the time we all think this is not a problem, until you do it, they said the original can you solve the problem of this is really something. You may often be dissed or discredited by others, but if you really want to know what to do, you can be firm.
3. Focus on the basics
The third is to form their own knowledge system, pay attention to the accumulation of basic knowledge. This is the most important thing I think for students who have a shorter working life. For programmers, we still have to do their job well, lay a good foundation, because if the foundation is not good, go to the management post may be just an accident, it is difficult to go long term. In the body of knowledge, some of it is basic knowledge, and some of it is application level knowledge, and application level knowledge is the kind of knowledge that you can learn in two or three months, if not two or three weeks. But be able to recognize what is basic and what is applied. It may take a lot of effort or effort to learn the basics, but once you’ve learned it, it can benefit you for a long time.
4, inadvertently inserted willow
Number four is to learn useless things, do useless things, and meet useless people. This may be the same as the eel sister above, which is that all the useless things you do now will eventually be strung together in the future. Indeed, I think back to some of the work I did in 2015 while working on the project Chair, which is our Node Web framework for ants. The first one is to get through the existing Java service system, which can be done because I spent more energy to learn Java after work. The other is to compile the Velocity template of Java into nunjunks template by machine. This is just because I learned the dragon book called “Principles of Compilation” before I learned it, I just used it. If you want to learn this thing now, it may be difficult. Because I watched it off and on for six months. You can have a look at this warehouse. There is a screenshot on the right, which is some of my exercise records on GitHub at that time. After entering Ali, many students gradually do not update them. But the Star number of this warehouse is rising all the time, because you may not find the answer to the second problem set. Today in the conference would also like to call for today’s audience of students, if students are interested in this thing more, also welcome to become a supporter of the warehouse, because I was busy to the inability to maintain this thing for many years, but I see someone is using constantly, constantly someone to PR, I feel wasted quite a pity.
5, quasi extreme
The fifth is the pursuit of perfection, the hardest road may be the best. If we take the easy route, we will often face low-quality competition; But if we take the hard road, it may be hard at first, but it will open up more and more. Like to start when it comes to cloud swallowtail butterflies when selecting a visualization of the canvas base, we chose a may seem the most difficult free drag the canvas, because we want users to be able to have a like do PPT application research and development experience, this do have a lot of technical problems to solve, of course, this process of Bug also make a lot of, Users also scolded a lot, but to today, we really feel that this road is the right way, and we continue to be recognized by users.
5. Book recommendations
So why do you recommend the basic books above? Because there are some basic algorithms in the field of artificial intelligence, may let everyone feel the most headache is these things, just above the “linear algebra” corresponding to the artificial intelligence industry is very many basic algorithms, can be said to be a very appropriate introduction to the basis of an artificial intelligence algorithm. If you’re interested, I suggest you take a look. Including the above “probability theory” is the same, because in data mining, probability has a very large role. Ok, these are some of the books I recommend today. Don’t be intimidated by these books. They look very thick, but they are actually quite interesting.
Join us
“Add wechat Codingdreamer invited into the Group, if you are interested, you can directly find a small sister in the Group to contact the resume ha”
Ok, at the end of the day, this is the biggest motivation to talk to you today, so I hope you have any questions, please feel free to communicate with me.
Q & A
As a front-end, I don’t understand the service side, and I don’t usually work on the service side. I want to learn something about the service side, but I don’t know how to start, so I often fall into deep self-doubt. Do you have any good suggestions?
If it’s an early front end, it’s probably all about self-doubt. As I mentioned before, it was hard to get involved with the server without Node.js. While some of you may have learned to write PHP, if PHP isn’t used in your company’s production environment, there’s not much use for it.
Two suggestions that I think are sound and practical are:
First, take a look at what your company’s overall server architecture is, and then learn something that is closer to your company’s server architecture. For example, if your company uses Java — probably most companies use Java, and some innovative companies use Node.js, learn Java. Learning a language is, in my opinion, an application-level thing, so it shouldn’t be particularly difficult. Find opportunities, learn from them, use them.
Second, we should pay attention to the training of basic ability, for example, if you learn Java, do you know what an HTTP request is? What’s the difference between an HTTPS request and this? What is the latest HTTP2, HTTP3? Because these things include multiprocessing, multithreading, and so on, which are probably the things that are really common under the language. Many students feel dizzy when learning a language, not dizzy of the language, but because the knowledge below the language may not be very solid. So the second piece of advice is to learn something about it.
And then the third piece of advice is a matter of opinion: go somewhere more challenging.
2. How do you manage your time? How do you master yourself to learn so many things? In the case of a small front end team, where the business drives development, how should we handle this situation and gradually let the technology and business drive each other?
“Take control of your time.” First of all, I have to say that compared to some of the other panelists today, I probably did have a longer working life, so I had more time to learn. You work for five or six years and you don’t have that much time to learn. For another thing, I do value my time in the morning. I usually get up earlier. If my company usually goes to work at 9:00, I may have an hour and a half between 6:30 and 8:00 to continuously learn something. This period of time will not be disturbed, which is a very efficient period. Of course, I’m a little embarrassed to say this now, because I had our baby a few years ago, which does affect girls a little bit, but there’s not much you can do about it except to constantly calibrate your time.
“For teams with a small number of people on the front end, it’s usually business-driven development,” and the same is true for large front end teams, without much difference. Just how you look at the business in this scenario, for example, can you see something further in the existing business, this is very important. In fact, my team may be a very large front end team of Ant, but there are also some teams with a relatively large front end. For example, I just mentioned that there is an IDE for big data development. The students in that team are also very good, which is related to the size of the business to some extent, but not absolutely. There are some small groups that can do something really awesome. In addition, if you really don’t think too much play place, such as you sweep the floor at home every day, of the robot when it if you can think of can be particularly cattle, if unexpected, is likely to sweep the floor every day in the home, feel no sense of worth, may really have to stop to think about the value of the things you want to do what. At the end of the day, if you still feel confused and confused after talking to others, suggest that you take a look at other teams, those dynamic teams that you think are doing particularly well, and how they are doing, or that a change of environment is OK.
3. Why API to production and not UI to production? What’s the difference between the B-end and C-end products?
There is an API platform in our company, which collects all available APIS of the company and some API meta information. Although this meta information is not complete, it can be completed in Yunfengbutterfly. What is the meta information? For example, there’s a field called userId, which might be an employee ID, and when you have some meta information like that, you get a richer understanding of the API, and the products that you generate from the API, first of all, it’s a collection of our design team’s understanding of the whole design rule, that is, the machine does the design; Second, because we know a lot of meta information in the API, we are better able to understand the business and make things that are directly deliverable. If you’re talking about UI to product, you’re missing out on very important business information, you have to cut the page out based on what it looks like, but there’s really no way to close the loop of functionality, and you need the designer to do the design work first. But the problem also depends on the specific scene. I emphasized just now that the mid-background RESEARCH and development does not have high requirements for design quality, but for the particularity of design and interaction, because you do not want to make a flower, right? At this time, UI to product, it also has a lot of application scenarios, for example, when we do some promotion, recommend baby, recommend products, such as things, its logic may be less, more inclined to display, this time UI to product is easier to use.
There is a difference between b-end products and C-end products. Generally speaking, I think b-end products are more functional requirements and have less specific requirements for design, but it does not mean that we have lower requirements for quality. Because you see we have so many external commercial toB products, that necessarily means it’s very demanding. In addition, the logic of the B side may be unimaginably complicated. Most of the time, c-side students will think that the B side is very simple, that is, to make forms and forms. But when you are faced with tables and forms with 800 fields, what should you do? This may be hard to imagine on the C side. For c-terminal, it also has many challenges, such as the novelty and advancement of design, including the large volume of C-terminal, which may not be comparable to THAT of B-terminal. It depends on specific issues.
4. Do most of the programmers around you stick to the game? Did anyone else change careers? What did the students who changed careers do?
Most of the people I know are probably geeky, so many of them are still on the front lines of coding, including some high P students who code every day. But also have change of profession, not be to say programmer this road must a road walk to black, everybody can go according to own plan. For example, some students we know may think, no problem, I went to P6, P7, I have mastered the whole front-end research and development of some basic things, I go out to start a business, there are also such students, in fact, very good, may be much more nourishing than us. But that’s a personal choice. And then there are those who are in management, which is a minority, because as I just said, the proportion is there, for example, there is one manager for every 30 people, which means there are very few managerial positions after all.
This article is formatted using MDNICE