Original statement
This article is produced by YUX members of Reading Experience Design, please respect the original, please contact the wechat official account of Reading Experience Design (ID: YUX_design) for authorization, and indicate the author, source and link.
Introduction reading, understanding reading, including the team, including technology.
1. The overall strategy of technology selection “Maximize corporate income”
For the front end team, the key points that can maximize business revenue are summarized as follows:
Ensure product quality
1. Robust function: no blank screen, no jamming, normal operation, accurate data;
2. Excellent experience: loading experience, interactive experience, visual experience, barrier-free access to “search engines, auxiliary devices”…
Reduce labor costs
1. Reduce the early development cost;
2. Reduce later maintenance costs;
Technology selection for almost all projects is based on the above strategies and points.
As the user groups, platforms and scenarios of different projects are different, the emphasis on technology selection is also different. External site more focus on user experience, internal site more focus on agile operation and human cost control.
Second, front-end development mode selection
At present, there are nearly 20 people in the front end team of China Literature User Experience Design Department, and we support various product lines of China Literature.
Development mode of Reading text product line
1. Pure front-end development;
2. Separated development of front and rear ends;
3. Back-end led development;
1. Pure front-end development
Mainly for static pages, there is no template and frame machine to participate in, basically a front-end partner to Hold the audience. For example: read civil service website, recruitment site and some design sense strong and important operational activities page.
Because the autonomy is all in the hands of our front-end developers. This makes it easy to use your own Node.js tools to assist development, and to launch “compression, statistics, and share injection” and so on.
At present, the tool used more is “bobo desktop version” : https://github.com/yued-fe/bobo-electron
▲ Bobo desktop edition
2. Separate development of front and back ends
More than 80% of large and medium-sized projects adopt the development mode of front and back end separation. Depending on the nature of the project, either Node.js renders the template, or the Web side renders the template, but essentially JavaScript builds the page, with control in the front end.
All kinds of novel reading stations under the Group, such as PC station, Mobile station and corresponding background system, can be classified as such projects.
Among them, straight-out template rendering adopts self-developed frame machine “Ynode” : https://github.com/yued-fe/yuenode
There is also Yworkflow, a front-end development workflow tool: https://github.com/yued-fe/Yworkflow
This is similar to most front-end team workflows, so I won’t go into detail here.
3. Back-end led development
Due to irresistible historical reasons, there are still product lines like internal administrative systems, using the development mode of back-end rendering pages. When working with these projects, the front end has a lot of self-denial about delivering prototypes:
1. Do not use front-end preprocessors like Sass and Less;
2. Not using a modular component library like Seajs, but using a less efficient manual module integration;
3. Do not chase after new innovation, such as Vue is very hot themselves casually used is to be challenged;
In these projects, the front end is a support role, and the late maintenance is usually “back-end development” by colleagues from other cooperative departments. Front-end engineering, popular new technology, is relatively difficult for these colleagues to deal with. As a result, maintenance is a pain, and zhihu answers, “What is it like to maintain bad code written by previous companies?” That kind of question.
The separation of the front and back ends and the engineering of the front end really makes development easier. However, in these projects, we need to give up our comfort zone, use more basic code and use more traditional manual methods, and ensure quality through good code design “such as parameter interfaces are all exposed, and the backend can be easily configured, rather than coupling in JS by convention”.
These treatments do increase a lot of labor costs for front-end development, but the final result is that the project can be maintained in a sustainable and healthy way. This kind of self-denial and certain “self-sacrifice” to ensure smooth cooperation is the embodiment of a real career.
Iii. Specific front-end development technology selection “Shanghai Team”
Shanghai team main business for each reading site. For the same type of project, the current development model and basic framework are the same.
Front-end technology selection “Project Type”
1. PC sites with external users;
2. Mobile stations with external users;
3. Native App development for external users;
4. The user group is the management background of internal staff;
1. PC sites with external users
For example: Qidian Chinese, Qidian girl network, Qidian overseas edition, Hongxiu Tian Xiang, novel reading network, romance novels…
Separate development of front and back ends, page rendering directly, based on jQuery development.
Use straight out render reasons
1. Better loading experience;
2. Better SEO;
Use jQuery to develop the reason
1. Be compatible with IE8.
2. The audience is external users, so visual experience is very important and has high weight. Therefore, it is more suitable for tangible first, then line, that is, visual and behavior should be as separate as possible, is a sacrifice of a little development cost, but clearly the user is more important here;
3. Most page interactions are so lightweight that they are not data-driven at all;
The UI framework used is LuLu UI “http://l-ui.com/”, especially in the late project, LuLu UI takes over.
Bring LuLu UI
LuLu UI is a design-driven, user-friendly and flexible UI framework for user-side products.
2. Mobile stations with external users
For example: starting point Chinese network M station, starting point girl network M station, starting point overseas edition M station, Hongxiu Tian Xiang M station, novel reading network M station, love novel M station…
The Mobile site is mainly accessed by the browser. Therefore, page switching is also a traditional link jump, belonging to traditional Web pages. The front and back ends are developed separately and the page is rendered directly, so Zepto.
Bring the React
It is worth mentioning that qidian overseas edition has launched AMP and PWA since it is overseas, you know. Meanwhile, it is trying to reconstruct React. Why was React considered for technology selection? Here’s what co-creator Feifei had to say:
React was chosen to keep in sync with React Native on the APP terminal, and the exploration of AMP and PWA in Qidian Overseas edition was introduced.
3. Native APP development for external users
The front end group has directly participated in the development of Native APP, using React Native for development.
Bring the React Native
Why React Native? And do you have any experience to share? Let’s take a look at what wen Kang, the creator, said:
React Native supports hot updates. It is not too difficult to get started. The cross-platform, iOS and Android code reuse rate is 90%+. Suitable for projects that are not too complicated to animate, but ultimately depend on the project. In particular, it is ideal for projects that iterate quickly or require a lot of trial and error up front.
Two Suggestions
①. Do not use third-party library at will, it is not convenient to modify and maintain later, try to write or write by yourself;
②. In addition, we need the support of students from the client side, especially in the early stage, because the front end is still difficult to understand the bottom layer, so we need the help of senior students from the client side;
4. The user group is the management background of internal employees
The front and back ends are developed separately, and the page web side is rendered asynchronously, using vue.js.
Bring the Vue. Js
Why do enterprise management background projects consider using VUe. js for technology selection? What experience do you have in using it? Let’s take a look at what the main creative staff Chengrong said:
The general content is: the background management system has a large number of add, delete, change and check operations, suitable for bidirectional binding class library or framework rendering. There is also no compatibility requirement for “SEO, first screen rendering”, so a single page application is appropriate. The options are Angular, React, and Vue. Vue.js was chosen because vue.js is more developer-friendly for apis, documentation, etc.
I then shared some of my experiences with Vue, including choosing good UI components, enforcing specifications, splitting, and loading on demand. Automated testing is mentioned as yet to be built.
Iv. Front-end technologies and scenarios used by the Beijing team
The Products and business lines of the Beijing team are almost completely independent of those of the Shanghai team. Therefore, the selection of front-end technology will have some practices of its own. The following is zhao Ran’s introduction:
Vue.js
React provides a virtual DOM view layer similar to React, which can be integrated with other libraries. It also supports single-page applications, which is lightweight and easy to use. Suitable for short – term development of active pages and complex interaction in – side pages. However, the page rendering scheme of Vue leads to slow loading of the first screen and time-consuming loading of the first screen. In order to solve this problem, we consider using server rendering in the first screen, and there is no online project yet.
React Native
Use JavaScript to efficiently develop cross-platform apps that can compete with native apps. At present, in the iteration of “QQ Reading V6.6.1 version”, RN “React Native” framework is used for the first time to develop the medal library and a single medal detail page. After the client students access RN and successfully complete the iteration of APP version, the front end begins to gradually intervene in THE development of RN.
Template.js
The front-end only needs to write a template file according to the different incoming data, generate the corresponding data generated HTML fragments, render different page effects. This template technique was used for client-side embedded pages until the front and back end were separated.
NPM
Easy to download the various Node modules used in the project, Scripts function can be used for general task execution, we currently use with Webpack.
Yarn
It caches every package it downloads without having to repeat the download. You can also parallelize operations to maximize resource utilization and install faster than Npm.
Webpack
There are all the features of Browserify and RequireJS to treat the project as a whole, via a given main file “such as: Index.js “, from which Webpack will find all the dependent files for the project, process them with loaders, and finally package them into one or more JavaScript files that browsers can recognize. At present, Webpack is used to compile, extract, package and compress files such as Js, Less, Sass and.vue to realize the automatic construction of the project.
CSS preprocessor
Dynamic style language is used to write CSS in projects easily and quickly, which makes it easy to write reusable CSS modules. Depending on the needs of the project, variables, mixed macros, class placeholders, nesting, and so on are often used. Also trying to use the CSSnext plug-in for PostCSS to handle CSS styles.
Bodymovin
Bring Bodymovin dynamic effect
After cooperating with the designer, the designer exported the Json file with vector animation information after using AE to make the motion effect. On the Web page, the front-end restored the motion effect by rendering the Json file. In the process of App development, the proper use of animation can improve user experience and make our products even better. For some simple animation, we can easily achieve, but for some more complex animation, we may have to choose the appropriate implementation scheme, Bodymovin is a good choice, its advantage lies in the development efficiency and animation itself fluency and high degree of restoration. We used this technology in the “658 Publicity campaign”, which not only saved the time of animation implementation but also 100% restored the designer’s animation requirements.
Lottie
Lottie is an open source library of Airbnb that supports Android, iOS and React Native, and uses Json files to quickly realize animation effects. After developing using RN, we will try to implement complex animations using Lottie. For the animation effect of “QQ Reading V6.6.1” medal details page, the client developers were hesitant when they saw the animation requirements of the design at the beginning, because it was the first time to use RN for development and the development cycle was limited. After the front end recommends Lottie libraries to them, they can animate with simple code.
Five, the summary
For formal projects, the selection strategy of front-end technology in Reading literature must be to maximize product revenue and put users first. Considering the number of hundreds of millions of users, natural technology selection should be more cautious, so mature and classic solutions should be preferred.
But that doesn’t mean rejecting hot technologies. On the other hand, the adoption of new technologies, even if they are not yet mature, should be encouraged as long as they bring significant benefits to the product. For example, the practice of AMP and PWA in qidian overseas edition.
But it also creates another problem. Technologists have a natural desire to learn and practice new technologies, because it helps reduce anxiety and insecurity.
Especially those who are enthusiastic about technology. These mature projects due to the constraints of the specification, can not be random, it is easy to make developers feel powerless, this is how to balance?
Through marginal projects, experimental projects, and the team will initiate some valuable internal projects to meet such demands and accumulate valuable experience. It’s a very important board that’s embedded, with a very good balance between the product, the team, and the individual.
In addition, I think the front end of reading articles should be more cautious and low-key. In fact, a team for the technical selection of temperament style often has a close relationship with the cultural gene of the enterprise.
In a product-driven culture, it is more about making users and products better, making technology serve products and technology for products rather than technology for technology.
In an operations-driven culture, the essence is to do business by Shouting. Therefore, to stand on the cusp of the wave and become a trendsetter of cutting-edge technology is quite consistent with the corporate culture. Further, it’s actually the style of the founder.
Original statement
This article is produced by YUX members of Reading Experience Design, please respect the original, please contact the wechat official account of Reading Experience Design (ID: YUX_design) for authorization, and indicate the author, source and link.