What is the front-end architecture of Bai?

In fact, our front-end architecture is far from mature, it can be said that in the traditional front-end architecture to the modern front-end architecture of the transformation, the transformation to introduce a build system as a sign (although the previous mobile version has introduced stylus), from the beginning of last year (2014), It is expected to last 2-3 years to achieve a more stable structure than I would have preferred.

The reason for expecting such a long time, is because overall, for front-end construction, modularity, component solutions, and so on very basic and pull the whole body of the facilities, I take the Ningquewulan, not see the first conservative strategy-it seems to be and I in the community always talk about the image of new technology is not very consistent? ^_^

There are three reasons for this strategy.

The first is the nature of the Bai is based on information flow, for all netizens, platform-level Internet services. Where this nature of the site, technology selection strategy is always biased conservative. Relatively speaking, it is possible to adopt new technologies more quickly by experience, targeting relatively small groups and restricting applications in specific fields. Like our internal systems, we're going to use new technology more.

Second, the more essential reason is that the architecture is not the light to decide what system on the line, but involves methodologies, tools, processes and even organizational structure and many other levels, it is necessary for the whole team to understand, implement, maintain and continuously improve. Team forward, architecture forward. It takes patience.

Third, the common People network front-end team after the establishment for a long time, including I only 3 people, the main focus on business. (Of course, many of our backend engineers, even pm, come with front-end development skills--don't think I'm telling the jokes.) Our CEO, who played meteor and went to Silicon Valley to meet investors three years ago, Nodejs Workshop with finance director & Our financial director on the spot only finished Hello said to buy a rhino after the book asked me to learn JS is not to see this is good to see you who dare in front of me as a technology company. Although there are some ways to try to change the main station, but for a variety of reasons. Last year we had more than 10 front end engineers, but it was not enough compared to the fast-growing business. So although the front-end architecture group was set up from the second quarter of last year, I am not in a hurry to introduce new facilities, because I think for our team of this size, the redundancy of resources is very low, the cost of detours is relatively high. I want to make sure that every facility introduced is correct. (Bat-scale companies are better, and multiple teams can implement several different architectural scenarios at the same time.) I just point to them to help us these small and medium-sized companies to explore, so I met their people preach them fast on the new technology, hehe. ）

In any case, there will be several important front-end architectures implemented this year, such as I expect to be on es6! this year. You can take note of what I said last December C4 (http://weibo.com/1960954893/BBKpY8uq3) and Feday this January (hax/es6-in-action GitHub) is ES6. This time is to play the real Oh. In short, I hope to steady forward, until next year this time to see again.

Answers to specific questions are as follows:

Q: Does Bai use sass/stylus/less such preprocessing tools?

A: The People's Network mobile version used stylus. The latest version of refactoring is based on the development and maintenance of @CSS magic Cmui/cmui GitHub. Desktop version because of the long history of development, has not introduced pretreatment tools, short-term will not change. But it should eventually be introduced in the long run.

Q: Common People Network JS Modular development is how to organize, whether the use of what modular tools, frameworks?

A: As you may expect, this piece of us is still stuck in the slash and burn stage. Bai Historically, scripts in the page have not been used much, although the possibility of introducing such as Seajs was considered long ago @sofish, but in practice, extensive scripting merges and a simple on-demand load (http://s.baixing.net/js/global/defer.js) are sufficient. But with the growth of development, of course, sooner or later it is to move towards a more mature modular scheme. So at the beginning of last year, we began to evaluate and test various programs, such as the newly developed functional components with higher independence are based on commonjs+browserify. Overall, because I expect all of the modular solutions to eventually be unified into the ES6 Module/loader, I basically want to be directly based on loader programs that follow ES6 semantics and APIs. However, the ES6 module was finalized and implemented slower than expected, and the loader specification was postpone to the independent spec. It is estimated that a modular programme will be introduced after the second quarter of this year. It's important to note that modularity is primarily about improving the maintainability of your code and focusing on the development phase. and focus on the deployment of the module load or generalized resource loading related areas there is a lot of possibilities to explore, only the draft standard in the preparation of HTML Imports, Serviceworker, packaging on the Web, HTTP2, We need to clarify the architecture of how these different components collaborate and form the entire system, which will be of great value and a long-term task for the overall performance improvement of Web sites and applications in the future.

Q: The complete HTML CSS JS code fragment component, is how to include in each page, including when the HTML CSS JS what processing? If this one of the JS and rely on a more basic JS module, this dependency is how to deal with?

A: Similar to the previous question, since the history of the BAI structure is relatively simple, so there has been no introduction of any identified component scenarios. In addition to the demand is not particularly large, compared to the modular system has been clearly unified to ES6, component systems are still completely uncertain situation. From the maintenance point of view, the module system in fact, the conversion cost is not too high, the component system is much more complex, to switch from one component system to another component system sounds very scary. In addition, the current industry's most popular mv* component framework is a purely browser-only solution, in the Bai main station such as the flow of information, SEO required, have a higher browser compatibility requirements of the site, can not be used directly. At present, the industry lacks a good unified browser-side and server-side scenarios, which is similar to the Bai of large Internet sites that do not directly introduce similar mv* component framework. Although there are no established plans at the moment, team members are encouraged to try new technologies and programs in the internal systems and in the newer projects that do not involve the master station, and a few internal projects have already tried angular. Component requirements are unavoidable in large Web applications (such as block and include collaboration issues · Issue #38 · Baixing/jedi GitHub), but the final answer may take some time to emerge.

Q: What does the code for the development environment do during the release process?

A: We have a set of PHP written deploy system, front-end resource compilation, compression, versioning, replacement path and other steps are implemented by the system. Since the beginning of last year, we have introduced Gulp to the mobile version of the front-end build, will gradually move the previous steps back to the Gulp tool chain, and add more processing, such as Picture optimization and module packaging. The desktop version should also be introduced this year.

Q:nodejs in the Common People network technology stack undertook what task?

A: The entire tool chain in the front-end build phase is completely based on the Nodejs platform, which goes without saying. On-line services, part of the logging system is based on Nodejs, and plans will further migrate more front-end-related log systems to Nodejs. In addition, we use Third-party services such as Leancloud message service estimation is based on the Nodejs platform (although not with us, but because this service is the first crab users, it does not have a JS SDK, I had to personally get a hax/avos-chat GitHub, so by the way. Our backend is based on PHP, but we don't reject other platforms, such as our new line of business with a Python based system. Internal systems also have many based on NODEJS platforms and may adopt new app frameworks such as KOA. The relocation of the master station system segment (especially the performance layer) to the Nodejs platform has always been optional at the architectural level. The current obstacles are more in the lack of nodejs experience in the operation of engineers, interested students welcomed the delivery of resumes.

Above。