How did we evolve from front-end technology to experience technology?

Wang Baoping, flower name Yubo. The name will be familiar to anyone familiar with the front end and SeaJS. A big name in the front-end sector, he is now the head of Ant Financial’s experience technology department. In this article, he shares his personal thoughts on upgrading from the front end to experience technology, and introduces the history and future development of experience technology in detail, as well as the vision of this experience technology opening.

What is the nature of the front end? How will front-end technology change as mobile and the Internet of Things evolve? We hope that you can have a further understanding of these problems and experience technology through the content of this article. At the end of the article, there are PPT and video links related to the article. Welcome to refer to them and leave comments.

Author introduction: Wang Baoping, alias Yu Bo, is currently in charge of the Experience Technology Department of Ant Financial. In 2008, I joined TAOBAO UED and established alibaba’s leading position in the domestic front-end technology field together with my team. In 2012, he joined Alipay, focusing on the Design language Ant Design, data visualization AntV, intelligent website construction, graphics and art. At present, we are committed to creating world-class ant experience technology that serves Ant Financial and hundreds of millions of customers in the industry, and are committed to making user experience better.

What is front-end technology

My first exposure to front-end development was in 2002 when I was in college, which is more than 15 years. For years I’ve been asking myself the question: What exactly is front-end technology? For a long, long time, the definition of front-end technology was very clear: HTML, CSS, JS technology on the browser side. We use these techniques to create a wide variety of pages, and we are the closest programmers to our users.

I started working with Node in 2009, and soon the front-end technology exploded. In the beginning, the front-end compression tool changed from Java-based YUI Compressor to node-based UglifyJS and other tools. In addition to the rapid development of front-end tools, frameworks such as Express have emerged in the server side area, and the front-end has started to complete the development of server side templates and even the entire MVC layer through Node. In Ant Financial, Node is mostly used as the BFF layer. BFF is short For Backend For Frontend and translated into user experience adaptation layer.

In BFF mode, the overall division of labor is very clear. The back end is responsible for service realization through Java and other languages. Ideally, it provides the front end with RPC interface based on domain model. The research and development based on BFF mode is very suitable for full stack engineers with front-end technology background. The benefits of this mode are obvious. The back-end can focus on the business domain and think more from the perspective of the domain model, while the data from the page perspective is left to the front-end full-stack engineer to deal with. Domain model and page data are two modes of thinking, which can be well decoupled through BFF to make each other more professional and efficient.

IN addition to the penetration of the service end, Ali started wireless ALL IN strategy from 2013, which has a great impact on the front end. Quite a few front-end engineers have become iOS engineers (few have become Android engineers, some Java engineers have become Android developers), and those who have not, have also started to invest heavily in Mobile Web development. In this context, front-end and client technologies are beginning to converge, especially at the container level. Since 2015, the Internet of Things (IoT) has gradually emerged, and the front end has been involved in the application research and development of IoT devices. The essence of the end is devices. Desktops, mobile phones and IoT devices are all devices, many of which will be directly used by users. With devices used by users, there will be human-computer interaction requirements and front-end work value. The front end is the engineer closest to the user, and this positioning has not changed.

It is very interesting that in the mobile terminal architecture, an architecture system based on RPC interface + gateway + BFF has emerged in recent years, which has advantages in r&d efficiency and network performance. As IoT applications emerge and become more complex, I believe BFF architectures will eventually emerge as well. BFF mode is not only a technical architecture, but also a multi-value-oriented layered architecture from the perspective of social division of labor. Each layer has a good space to play, not only to play the role of the hands of the industrial society, but also to use the head above the hands. Gears no longer follow passively, but begin to have self-driven power. At the same time, there was some similar convergence of occupations. For example, DevOps advocates development and also knows operation and maintenance, many large companies are implementing development and also know testing, which is transformed into a more professional quality tools department, and the emergence of DesignOps who also knows design at the front end. The emergence of various full-stack concepts is a re-exploration of a more reasonable hierarchical collaboration model. Confusing, success or failure like the wind.

I would like to add a note that the separation of front and back ends proposed at that time is not accurate, and I have been trying to correct the concept of front and back end layering over the years. Professional collaboration is key to efficiency improvement. The meaning of full stack means that after the evolution of layers, the technical stack requirements of each layer are all the horizontal skills of each layer, rather than the vertical cross-layer (there are very few talents who can cross the vertical multi-layer, just like it is very difficult to produce naturalists in today’s society). It is interesting to constantly explore better hierarchical cooperation, just like the relationship between husband and wife in human family. Neither male power nor female power is desirable. The evolution of society will eventually regard people as human beings, and every individual is equal and free.

Going back to the history of the front end, there’s only one thing that’s been said, the various modes of front and back end layered collaboration. The boundary of collaboration is data. The back end provides data service interface, and the front end consumes data to realize human-computer interaction. Backend as a Service (BaaS) has different meanings in different modes. In BFF mode, the front-end is also responsible for the PaaS platform construction of BFF layer due to the operation and maintenance deployment requirements of BFF layer. Engineering systems vary from model to model, and the essence of engineering is to get a bunch of people to do a bunch of things, which involves code specifications, collaborative processes, operations and deployment, performance and security, and many other areas that are not covered here.

The emergence of server-side Node and various terminals makes the front end enter the big front end category. At this time, the front end is far from just the page realization technology of the browser, but the connector of the back-end service and human-machine interface.

What is Experience technology

I belong to the wireless ALL IN strategy and choose to stay on the front end of PC Web. Despite the company’s shift to wireless, the PC business has not stopped. With the strategy of “big middle stage, small front stage” of the whole Ali Group in recent years, more and more enterprise middle and back stage products are in a chaotic stage of war, and designers are very missing. A quick grab is a large number of products with bad experience. Along the way, there was a growing sense that something was wrong, that there must have been some point at which we failed. I didn’t think twice about it, but since there was a shortage of designers, we would try to recruit them. Therefore, the Experience Technology Department began to have designers, which was a very difficult start. I am very grateful that although it was difficult, I found some designers who believed in the value of mid-background products as MUCH as I did. Once there is a designer, the user experience of the whole backstage product is suddenly enhanced.

The integration of the design team and the daily collisions and exchanges have greatly changed my thinking. No matter how great the front-end technology is, it is difficult to directly solve the user experience of the product layer. For mid-background products, the value of design is far more than improving the appearance level of products. More and more value of design lies in going deep into the business logic of products to help business comb product information architecture and task flow. User experience is a very comprehensive thing, which requires all kinds of professionals to focus on the same product and work together to really improve the product experience. Designers suffer a lot in this process. A lot of middle and back office products are very vertical business products. Middleware, ECS, ODPS and other technical terms make designers suffer a lot.

The following story, in today’s share of each lecturer, many have been mentioned. The focus of the team began to move very clearly in several directions:

• TWA direction: This is a larger concept than BFF. TWA is the abbreviation of Techless Web App, which is a technical concept. It is hoped that more and more developers can no longer pay attention to the process, construction, environment, deployment and other things, and achieve Techless technology, so that every developer can quietly and happily code.
• Intelligent UI direction: Ant Design is a Design system, antD is the React implementation of Ant Design. The development of ANTD in recent years not only makes front-end coding faster and more exciting, but also rekindle the hope of a time-honored but endless field: is it possible to build intelligent visual human-computer interaction interface? This field has been very popular within Ali in the past two years, with various construction products emerging endlessly. At present, it is still in a relatively vertical field, and there are few industry-level generic products. We’re starting to try, and we believe we’re in the right place at the right time to do something, and we’re working on it, and we might be able to show it to you in the near future.
• Data visualization: Those of you who have been following us believe that you have an overall understanding of G2 and AntV (see Ant Financial Open Source: Data-driven Graphics Syntax for Highly Interactive Visualization G2). In the direction of visualization, we started to put our staff into it in 2014. At the beginning, the idea came from science fiction films. If you like watching science fiction films, you will notice that all kinds of human-computer interaction interfaces are all kinds of visual effects, and there are very few traditional web pages. Visualization is a very old field. Vertical multiplication, which we learned in primary school, is a kind of visualization that can help us reduce the cost of memory and improve the speed of calculation.
• Interactive graphics: We’ve only been doing this for a little over a year, but it’s a direction we’re very committed to. Many children are more resistant to books, but have a natural love of games. Ant Forest transforms public welfare from a form to an interactive game. More and more forms of human-computer interaction will be interactive graphical interfaces. There is a big trend towards pan-interactivity in applications. Alipay is a life service platform, and the interaction of various life services is interesting, which must be more attractive.

Looking further into the future, I believe that naturalization and virtualization will be two major trends in experience technology.

For example, when I share a PPT and want to turn the page, I need to click the keyboard button, why can’t the computer directly understand my intention and automatically turn the page? For example, I can turn to the next page by simply pointing my head down. A lot of what we do now, when we jump out of it, we see a lot of unnatural things. Tmall genie and other smart speakers are far from natural interaction when they are really used. Ant Design values, the most important is the natural values, all just began to explore.

Virtualization. Virtualization not only refers to AR, VR and other technologies, watching the Matrix, Westworld and other science fiction movies, will have more physical sense of virtualization. What would our human-computer interaction look like if every child was born with a chip with all five senses? So many possibilities and challenges await us.

All of this is experiential technology, a fusion of technology and design, a connection between service and user, a formula shown in the figure below.

Experience technology is the formula UX = F (Services), which can transform all kinds of services (back-end services) into first-class user products through the integration of technology and design. An implementation of this formula is that ants experience clouds. Ant’s initial intention to experience the cloud is to help you with your dreams and turn your excellent ideas into terminal products through cloud experience.

Experience cloud has just started, currently in the internal services of Ant Financial, Alibaba Group, at the same time quickly incubated the cloud butterfly, sparrow, small money bags and other innovative products. It’s far from perfect, but we want to grow with our users as soon as possible. There’s a lot of excitement going on, and by experiencing the openness of technology, we hope to bring more equal opportunity to the world.

At the end of the article benefits: article related PPT nail plate link: https://space.dingtalk.com/s/gwHOAB39IQLOD7oxKAPaACBiMWI3YzYzZWRjOTg0NDVmOGI1NGU4Y2YyODY0MWQ2Yw

Password: bvNk

Video link: https://v.youku.com/v_show/id_XMzMwMzg2MDIwOA==.html

Happy learning ~