D2 Front End Technology Salon (Beijing field) record

Taobao Beijing front-end team here to share the highlights of the whole game

The Beijing venue by the Taobao technology carnival and Taobao Beijing new business front-end team co-organizer, the scene of more than 100 people, the entire venue around a strong technical atmosphere, technology, cattle have just stepped into the front end of the industry to share the new people together.
At the same time, the technical exchange will be Taobao Beijing front-end team for the first time organizations, there are many unsatisfactory places, such as a little formal, the focus is not on the exchange of discussions.
But the whole technology sharing process is very content, there is a harvest, so that the front-end practitioners once again established their own confidence, and more determined their industry development direction.
And the conference around a lot of technical highlights, such as multiple unit testing, automation tools, compiling platform, front-end technology framework, front-end team positioning, front-end development direction, and so on, too many attractive topics.

The first D2 salon Beijing & Hangzhou Station theme Speech Material view

Pull red Masterpiece warm video, affect a lot of people's heartstrings. September 25 D2 Salon Warm Video

First, the host (pull the red) opening to share

The host began to share the 6 session of the D2 Technology Forum, and in front of the industry's influence and direction. Each PPT selects the classic scene photograph, reminds many schoolmates ' memory, lets the old person feel the front end the development course, lets the new people be encouraged, lets the scene schoolmate to the front end profession to be more enthusiastic. At last, it introduces the process of D2 salon and the introduction of each link, micro-bo Live, lottery, interactive gifts and other content;

Second, the next is the guest sharing link

The D2 was fortunate enough to invite Baidu, Sina, watercress senior staff to share their technical and practical experience;

1 , the first to share on the stage is Baidu's Li Chengban, bringing the topic is "compiling platform"

Li Chengban is responsible for the development of Baidu space, he talked about the development of the web in front of the application has become increasingly complex, the front-end development of more and more people, will inevitably lead to more and more problems, including more people in parallel development of the conflict, more people than the development efficiency of the decline and so on the problem of chaos, so we must unify the norms This is the unified execution of the script is the front-end compiler platform, the compiler platform for us to actually solve two major problems, one is the unified code specification, and the second is the vulnerability check.

For example, XSS security issues, module catalog check, unified IMG folder, code specification check, HTML&CSS specification attribute tag check, template syntax, lexical analysis, etc. if the error is found, the compilation platform directly throws error prompts, if compiled by will compress multiple development small files and merge online.

At the same time Li Chengban also introduced the compilation platform can automatically complement the CSS3 private properties, developers only need to adhere to the specification of a browser, the other browser will automatically compile the platform to complement, greatly reducing the development time and human costs.

There is also a best practice scenario for file caching, that is, to use the filename +md5, just to clear the files that have changed. CSS sprites and so on have very good support.
The overall summary of the compilation platform is to allow engineers to reduce errors, reminding engineers not to spend too much time to solve small problems, improve efficiency and focus more on solving practical problems.

Problems with QA Links

A: How to judge the long accumulated code?
A: The compilation platform can be fully processed and configurable.

b:html dynamic label How to check?
Answer: The dynamic variable is not good to handle, unless the backend exception, browser plug-in detection can be done;

C:css Sprites tile quality drop how to solve?
A: The tools can not be a solution to the problem, did not think of a better problem when you need to manually change, the code compiled before the launch of the test.

D: How do I see the code when I'm online?
A: The development of the time can also manually to see the effect of the compiler platform function is modular, you can switch the corresponding function module.

E: How to sync to the engineer environment?
A: PHP code, take the download build platform, at any time to update can be downloaded in real time.
2 , the second share is to come to Sina's Chanbao, share the topic is "Multi-browser Unit test Tool"

Chanbao shared multi-browser unit test tools implemented using DELPHI+QT+PHP+JS. This sharing is mainly the product of the preliminary thinking, inherit the multi-browser kernel problems, and product advantages and disadvantages, the future expansion.

This product is to inherit the kernel from the client, ie kernel can inherit, other browser kernel is open source, can integrate in the client, the browser of the same client can communicate, the operation browser object can input through the API, can know clearly which browser is out of error, and can be multiple processes, Multi-core parallel development is resolved. The idea has started to develop the beginning, what language, the halfway problem solution to the final actual combat, the author PPT shows in very detailed.

At the same time on the scene to do the actual demo, remote Open the program, and open the child process, return test case results.

QA Link
F: After listening to feel this product is great, why not use the predecessors have developed a lot of frameworks such as Jsunit, Qunit and so on?
A: Because the existing framework is not comprehensive for browser support, testing UI logic is not supported. And through the Java startup of multiple browsers, through Ajax to achieve the purpose, there will be some problems, if the suspension will affect very large, receive no data, the risk can not control!

3 and next comes to watercress Zhang Kejun sharing "front-end infrastructure practice and thinking"

In this quote Kerjun quote:
"Front-end technology architecture is what I have been thinking about, 4 years ago, I was in Taobao shared a static file based on ant files compiled system, at that time, the basic architecture does not have a global understanding, in the actual development process is not better to promote the application, we only the most simple tool applications!" It was two years ago that we realized the meaning of the infrastructure, the better organization of the application, the foundation of the front-end team running at high speed.

I was a graduate in 02 to participate in the front-end development of the 10 development, front-end team functions of a great transformation, production to development, Web page to practice, to the desktop application of the transformation. In fact, very few teams really change, and many teams are still stuck with the page as a quality measure. Now development is just a lot of people, many company team is an assembly line, in his position did not play space, the actual front-end role did not play out better. So I feel for companies that want to start a business, they don't need technology Daniel, they need to be a team! The front-end engineers understand the principle better than the designer, so they see Yahoo to hire engineers abroad, but actually do not understand Chinese characteristics. Front-End development can not be separated from the entire technical system, the product design needs more and better links, the follow-up links should be less the better. Front-End development early is placed in the design department, I feel that the front-end should be placed in the technical department, to the watercress, in the Department of Adjustment, want to put the design department ued, now put to the technical department!

The combination of the front and back ends makes a bigger difference. Can not be one-sided to do one thing, the role is limited, should be based on the overall situation can be applied to the actual. The infrastructure is built like a tree, with lush foliage and a tool-spec system. The infrastructure is more like a budding seed, with all the wisdom of the entire technology sector built. Tools most need to be aware of the specification and quality to define, set up a set of orderly development tools, to find a higher quality of the excellent experience, do not deviate from the original intention of doing things. ”

See the importance of JS framework, Kerjun next to share the actual application of the specification and tool system, including the Code management of the compilation system, JS reference specifications, compiled after the line, CSS Oo abstraction, the re-use of code resources, HTML5 application of the development framework, automation tools, Technical documents and training, etc. very much experience content, also in PPT have very detailed elaboration.

More detailed description can be seen Kerjun authentic

QA Link
G: How to grow quickly as a new entry-level front-end developer?
A: From the background, on their own pattern has a big plan, front-end basic JS CSS HTML must master! In learning to take the correct learning methods, read more people recommend classic books, do not what books to see, see more foreign websites. After this enrich their knowledge system, rich performance debugging, the increase of new technology! Skill is necessary, and the enrichment of knowledge is a late concern. Need to judge the study, should not ignore the foundation!

Third, the recruitment link

Watercress, roaming, NetEase, Sina Weibo, Baidu space to introduce the company's characteristics and the urgent need for talent. Finally low-key as the host of Taobao Beijing front-end team leader of a boat to introduce the work environment Taobao.

Four, tea break time, prepared a lot of snacks and tea, many people to share, make new friends, reunion old friends, micro-broad screen and Hangzhou synchronous live rolling.

V. Group discussion & Draw

Three guests sit on the stage to discuss with the students at the scene

Q: The work is very limited, many people will only CSS, the assembly line of work, but I will feel that he did not study fine, this pipelining is feasible?
Kerjun: Many large companies need to produce a large number of static pages, in order to quickly improve the product, the network reconfiguration phase of the legacy of the problem, from the company and personal development is not very good, some people will think it is good. But this idea needs to be criticized, so that the personal career direction is very limited, this is the company does not give a person enough space to cause. So the front-end engineers should have a variety of capabilities, was tethered to the post 5 6 years, was destroyed by the company! Pipeline mode only in the company's perspective, very irresponsible, is a stable way is not the best way, need to change, change to pay the price. Discourage pushing your own company. Only in a company unique technology, front-end development does not have a lot of technology can be developed, as long as the foundation can be good for personal growth benefits.

W: I disagree with Kerjun's point of view, I have looked at the code of each website, is not very good, may be the legacy of the problem, and large companies have a good process needs to learn, many sites did not learn, such as Tencent's website to see more, in fact, see things very messy, not see good things, test basic things are not sitting well. Still less than the way of pipelining, only do a good job, certainly will not appear such problems. Look at the personal development of things, the work on the assembly line can be accepted, a person can work in multiple positions. This will also allow you to grow. Second, if the work on the assembly line does not need to deal with people, communication will not waste time, as long as the engineering drawings.

Moderator: If you think of everyone as a nail may hinder personal development, but pipeline work can reduce communication, which requires the company to weigh the weight.

Kerjun: Pipeline is a process, many companies can go to follow the traditional pipeline work, only to transform the following can be both.

R: What time do you expect the front end specification frame to be completed in watercress? In the implementation process by what means to promote? How to solve the contradiction between system norm and development project?
Kerjun: Never finished the day, the demand from the development, rather than the ideal to create, it is really from the product development characteristics and process encountered problems before this figure. Watercress is a start-up company, value the realization of the project, put forward the concept of technology recovery, a lot of accumulation is extracted from the practice, we also have to consider adding no unit test, but the change is good or bad we need to see demand, technical framework is very difficult, but need to adhere to. When I was in the watercress two years ago, there was not a lot of stuff in the front end written, the whole station is unified a JS all the code coupling is too strong, now the problem exists, we focus on all the front-end engineers, everyone to cut this thing, but we will not go to sit like this, we go back to write a tool, build a framework, In the back-end compiled, and then gradually cut things out, one is to improve the basis of the structure, and the second is to gradually improve.

C: Taobao page to the right landing, before using CSS sprites to achieve, but then changed for what?
Moderator: This is the actual implementation of practical considerations, the norms do not necessarily die to comply, to see the actual situation.

D: Baidu space to compile the platform can open source, can be promoted out?
Li Chengban: are based on third-party development, but the overall no open source, including coding standards Company There are differences, it is not possible to migrate over, we even go to use a lot of time to spend very long;

D: Is there any official development of technical ideas?
Li Chengban: Not at the moment, but the foot maintenance, how to do after will be updated well.

F: Front-end engineer learning is a ladder-like find yourself very hard but the results are very little, how to smooth through the conversion?
Li Chengban: itself is not this professional, is back-end PHP, found that the front-end can be applied to find the framework of things many deficiencies. Then often go to the forum, to see the site, to see the Web subscriptions, after a period of time will find a direction.

F: Why not outdated, and keep abreast of new technologies?
Li Chengban: A person with limited energy, now has a big front mode, a lot of things we have to sit, but skills must be mastered, but knowledge is dispensable. There are plenty of opportunities for knowledge-rich words, so important projects require performance optimization, and you will be able to translate knowledge into skills.

Chanbao: Technical elimination met a lot of new technology many need to think about, many are new bottles of old wine, a lot of things just need to look at it can, need a solid foundation;

Moderator: Front end technology looks very shallow, new people are confused, I have been working for several years also cut the page, will realize how to break through their own bottlenecks, it depends on your foundation, data structure, these if done well, will find a lot of things can play, new good brother is very important, he will give you more guidance, someone will be better led.

G: Process Development A lot of process, each link estimation time problems, there is no better way?
Kerjun: Many companies are starting from the basis of the place, product design stage The more the better, the less the beginning of the better, the product design should have engineering concepts inside, the design of the program has industrial ideas in, so that the development process will have the basic information base, in the resulting scheme will be more reasonable, he had to PRD line diagram out, Later it can be easily built, and the UI comes out with a slight change in the UI's flexibility to accommodate. Front end efficiency is very high, the most root is that the design, the designer should have the idea of engineering development in mind, let the designer dirty their hands; many designers reject this kind of thing, we want to promote him to improve, all characters must have the concept of engineering;

Moderator: The product manager will not consider that the front end needs to be done to fill these vacancies.
H:window cache problem? Experience with front-end and back-end issues? Why does the watercress have no games?

Moderator: The cache follows the HTTP protocol; The browser automatically caches the page, the cache time is related to the HTTP header setting, tells the client whether to cache the page, sets the cache through the HTTP protocol, LastModified, and so on the server, Do not want the browser cache to be set on the server side, use Cache-control to control, not initiate the request, and the weak cache send server side returns whether the cache needs to be cleared. Such settings can be implemented, or the longest time stamp and so on, you can find a lot of solutions online.

Kerjun: Product development can be appropriate front-end to check the back end to do, you should give them to ask.

Kerjun: Reading, listening to music, are all around the topic of life, the game will not be tied to life;

H: Is there experience in program integration testing?
Chanbao: There is no good solution at present;

Kerjun: frequently changing requirements, our automated testing, has been a group of topic forms submitted;

Moderator: At present Taobao also only kissy used in unit testing, test cases, test framework, when the core content changes, the application of the use case to run one side on it.

L:css test, is the browser compatible work necessary?
Chanbao: Simple should and CSS box model matching whether it can be tested, visual viewing there is no difference, but the automation tool will throw the problem, which we do not need to test. There is no need to report visual CSS problems.

What do k:js unit tests do?
Chanbao: JS unit test does not apply to all teams, if the code base requirements are not high, in fact, do not need to, we do this thing is to do a method, with a more lazy way to solve the problem;

Six, the last photo, organized a corruption, everyone has a fruitful!