58 Home Zhou Junpeng: Webpack PK fis, realize front-end engineering I prefer the former

Zebian: Chen, focus on the front-end development areas, to seek reports or contributions please email chenqg#csdn.net.
Welcome to join the "CSDN front-end developers" group, participate in hot, difficult technical exchanges. Please dabigatran the main "rachel_qg", apply for the group, be sure to indicate "company + position". Another can apply to join CSDN front-end development QQ Group: 465281214.

In 2016, SDCC (china software developers Conference) successively entered shanghai, shenzhen, chengdu, Hangzhou and all Over. November 18-20th will be the perfect ending in beijing. As an important sub-topic of the general assembly, front-end development topics have been invited to 58 home to senior front-end engineer Zhou Junpeng as the conference lecturer, on-site will share the " webpack-based Front End Engineering Solutions " Keynote Speech.

Zhou Junpeng is currently responsible for the research and development of front-end engineering, back-end separation solutions, and is the developer of the 58 home front end Engineering solution Boi. Prior to interviewing him, the interview was a comparative analysis of several mainstream front-end building tools, and the use of tools to build front-end engineering solutions of many experience .

Invited guests to introduce

58 Home Senior Front end engineer Zhou Junpeng

Zhou Junpeng, currently 58 home senior front-end engineer, has worked in ctrip, youku, focusing on the Web application layer architecture, front-end engineering and Middle-tier research, the use of Webpack has extensive experience.

CSDN: first of all, please do a self-introduction, the current work and the main focus on which technical areas.

Zhou Junpeng: hello, My name is Zhou Junpeng. Currently working in 58 home front-end team, responsible for front-end engineering, and front-end separation solution research and development work, 58 home front-end engineering Solutions Boi Developers. The main research direction is the Web application layer architecture, including front-end engineering and middle Tier.

CSDN: as an example of a project you recently participated in, what is the front-end infrastructure like?

Zhou Junpeng: take 58 Home Wallet homepage for example, This project belongs to the reconstruction project, the problem that needs to be solved includes: improve the homepage rendering speed, improve the user experience, solve the problem that the development cycle lengthens and the on-line process is not clear caused by the front and back end division of Labor.

• Infrastructure: front-end technology selection for vue+commonjs, using BOI to build the development environment. The rendering of the UI is implemented by the front-end (Vue), which provides only the data api. Commonjs as a modular Solution. All resources other than the first screen are loaded on demand. The user enters the page to load only the first screen of resources, after the first screen UI rendering finished or user scroll to the bottom of the page to trigger the loading and rendering of the secondary screen resources, and so On.
• Architectural highlights: from a development perspective, the Back-and-forth separation mode shortens the development cycle, while the division of labor clearly improves the efficiency and maintenance efficiency of bug Fixes. From a user's point of view, Although front-end rendering is not as efficient as Back-end rendering, the gap is not obvious on mainstream mobile devices on the market today.

All resources except the first screen load on demand, reduce the initial resource volume of the page, speed up the first screen rendering, and then add the resources lazy load and the Client's cache reasonable use, so that the first screen can be displayed in front of users as soon as Possible. Interested students can read this article "front-end separation and modularity-58 home page refactoring road" See more Details.

CSDN: Please simply evaluate the current mainstream of several front-end building tools, in your opinion, webpack have what advantages and disadvantages?

Zhou Junpeng: I personally think that the current front-end building tools on the market can be talked with Webpack only Fis. On the current time node (end of 2016), I personally prefer webpack.

In fact, I think that FIS is not a simple building tool, but a complete set of front-end engineering Solutions. FIS ' Workflow and configuration is elegant, more semantic than webpack, and more in line with the general knowledge of front-end Developers. For example, different types of resource-differentiated configuration, resource positioning, etc.

If there are any shortcomings of the fis, first of all, compared to Webpack,fis more "chatty", the ability to expand slightly weaker; second, there is a degree of "kidnapping" of project code, such as CSS sprite function need to write in code special logo, HTML need to comment on the way to declare dependencies, etc. finally, the development of front-end technology is very fast, FIS is not ideal for some newer technology and framework support, such as Vue and React. But overall, I think FIS is a very good front-end engineering Solution.

More focused on building than FIS,WEBPACK. I was very unaccustomed when I first approached Webpack. All resources to JS to compile the portal, CSS must use Plug-ins to export independent files, HTML can only reverse inject static resources and so On. Webpack's working mode is the absolute admiration of the component and spa, all the static resources are integrated in a component JS file, I think this is the future direction of Development. But for the time being (at the end of 2016), at least most Web applications in the country have not yet done so.

Since Webpack so "anti-third view", Why still think it good? I think Webpack's advantages are much greater than the "inconvenience" of its model:

• Although Webpack's work mode is a bit "weird", its configuration and scalability is excellent, and compared to fis,webpack more focused on the building itself, developers have a lot of space to transform and expand;
• A high degree of integration with the new technology of the front end, such as vue, React, Angular (these Frameworks are also examples of components, in common with the idea of webpack), and the corresponding loader or plugin are official or framework authors, not "unsolicited" third parties provide ；
• The life cycle is very elegant, compiler and compilation have their own life cycle, and almost every stage exposes the hook function, making great use of the extension;
• The community is a huge force. This means that when problems are encountered, more people can be consulted and Helped. In this regard, the community power of FIS and Webpack is not an order of Magnitude.

of course, The advantages of webpack far more than I have SAID. Finally have to spit Groove Webpack document is too "abstract", haha, in the development of Boi process, a large part of the time is in the study of Webpack source Code.

CSDN: Please describe the front-end engineering solution that was built at the core of the 58 home to Webpack.

Zhou Junpeng: Boi is a complete set of front-end engineering solutions, built to Webpack as the core, while providing scaffolding, remote deployment, mock services, and More. Support multi-page development, and provide environment configuration features, developers can separate for the test environment and production environment for independent building and Deployment. Support for custom front-end caching policies (hash/query), custom code specifications, and a variety of modular schemes (ES6 modules/commonjs/amd).

In addition, Boi has been integrated with the cloud platform to test the sandbox, which covers the start, build, deploy, test, and launch of the Project. A detailed plan will be presented in the Presentation.

CSDN: What do you think is the difficulty in building a front-end engineering solution? 58 home in the process of the construction of what to do and Explore.

Zhou Junpeng: I think the point of the front-end engineering solution is that you will never be able to collect all the functional requirements. therefore, developers often need a long pre-preparation time, this part of the time is used to design the framework of the infrastructure, the second is as comprehensive as possible to collect requirements, three is to carry out detailed technology selection and Evaluation.

however, the framework or tools can not be a full solution to all the requirements of the business development, which resulted in the team invested a lot of time and effort to develop the framework or tools, after the completion of development, on the one hand, the existing project migration takes time cost and risk control, on the other hand, the framework may not be able to solve the new requirements, And team members also need a certain amount of learning Costs. In other words, the cost-intensive development of the framework in a short period of time it is difficult to improve the quality of the team, coupled with the business needs of entrepreneurial companies, the development cycle is short, more do not allow waste of time and energy to do purely technical project.

58 Home Front team at the beginning of the project Boi established such a principle: first solve the problem from 0 to 1, and then solve the problem from 1 to 100. With the quarterly iteration cycle, the functionality provided by the BOI phase is a requirement that is met in a specific project, without any redundancy. As a developer of boi, I am personally certainly ambitious to make it bigger and stronger, but Boi is for all team members and must start from the needs of the team and keep the cost to a minimum. In addition, the framework is a black box for the consumer, and the user is exposed to only the configuration api, so you must keep the configuration API consistent regardless of the number of late Iterations.

CSDN: What advice do you have for companies that want to build their own front-end engineering solutions?

Zhou Junpeng: not a suggestion, according to their own experience to say a few immature point of view it. First of all, before the project to build their own front-end engineering solutions to investigate the market already have similar products can solve the team needs, think about whether their team really need to build their own solutions. If a project is identified, several aspects need to be identified before it can be put into development:

• Time and labor costs that can be invested;
• To list the current functional requirements of the team as comprehensively as possible;
• Do not "forward-looking", the first version of the solution only for the current requirements, The purpose is to allow team members to transition to new scenarios as soon as Possible. More comprehensive functionality is implemented in Iterations.

The last opinion is also the word of mouth of the handlers: don't reinvent the wheel. If you compare a set of solutions to a car, the functional modules that implement each link are a single wheel. In the premise of guaranteeing stability and availability, the function module chooses the stable existing module as far as Possible.

CSDN: How do you keep yourself growing in the face of fast iterations of technology? What advice do you have for new people?

Zhou Junpeng: The development of the front-end technology in the past few years is very alarming, exaggerated point, feel a nap woke up Backward. But I personally think, no matter how development, the root of technology is inseparable from the basic knowledge of the computer System. No matter what the new framework, technology, the underlying principles are in the school textbooks in black paper written in plain White. And many of the "new" technologies at the front end have moved some "old" concepts to the front-end, for example, from backbone to angular, absorbing the conceptual model of mvc, which is already commonplace in WPF for Today's fiery mvvm. School teachers often say a word, original aim, basic knowledge is the most serious.

therefore, for the new Person's proposal is: do not be impetuous environmental impact, learn basic Knowledge.

In recent years, with the rise of the front-end, there have been a lot of "front-end framework using engineers", focus on a framework is good, but not limited. Work so far, I have experienced a lot of interviews, also interviewed a lot of candidates, met interview only asked the framework of the interviewer, even when the first sentence on the electric plane asked with no use of XX framework, if the answer is not directly rejected. however, I will not ask specific questions about the framework, unless the Applicant's resume clearly says "proficient in the xx framework" when interviewing Candidates. I always think that the framework, or the front-end, are just a computer practitioners of the application of the ability, the wind may change at any time, the wind, blowing away is only the rubble of the roof, and the wall STANDS.

Csdn:11 month 18th, in the SDCC 2016 front-end development topic, you share the topic? What benefits will the audience receive from the presentation?

Zhou Junpeng: My shared topic is the front end engineering solution based on WEBPACK. First of all, summarize the pain points in the front-end development and the front-end engineering to solve the problem; then analyze the characteristics of webpack and the positioning in the front-end engineering, according to Webpack can solve and difficult to solve problems lead to 58 home in front of the engineering aspects of exploration and practice finally, I will briefly talk about my personal understanding of the future development of the front-end Engineering.

I hope that we can learn from the 58 home front-end engineering exploration and practice to draw some experience, to build their own front-end engineering solutions to HELP. At the same time, 58 home to Webpack's experience in the use of the hope to help you more to explore the Webpack function and Potential.

Related Articles:

Stackla Front-End team leader Shintingyu: a different life for foreign front-end developers

At present, all the speakers of the SDCC 2016 front-end development topic have been confirmed, the following is the guest list and the topic (in No particular order), please see: SDCC 2016 front-end development of the lecturer, the topic of large Jiede.

• Stackla Front-End team leader Shintingyu
  
  • Keynote: the end of life
• QQ Music & Universal K-song Senior Engineer Shangcong
  
  • Keynote: the national K-song react native best practices
• Are you hungry? node team leader Huang
  
  • Keynote: build a high performance real-time monitoring system by hand
• 360 zhongheng, Front-End engineer of the odd dance group
  
  • Keynote: developing highly interactive Web applications with Vue.js 2.0
• Ruff architect, JavaScript Expert greatlypraised
  
  • Topic: IoT system architecture with front-end thinking
• 58 Home Senior Front end engineer Zhou Junpeng
  
  • Keynote: Front-End engineering solutions based on Webpack

Want to have a technical discussion with these experts on the spot? At present, the SDCC 2016 conference tickets 80 percent sales , buy more concessions, is to hard work for a year you, year-end best gift, perhaps this, SDCC can be more real service Developers. "registered participants"

58 Home Zhou Junpeng: Webpack PK fis, realize front-end engineering I prefer the former