A summary of the practice of YUI3 in Taobao lottery

Introduction: The Spring wind blows the drums, YUI3 early to carry up the high-end "front-end team development" banner, swagger toward us, whether it is Yahoo's practice of YUI3, or D2 Oberkourd to YUI3 to share the temptation, all let people feel YUI3 bring people's sensory impact, now, Taobao Electronic magazine , online literature, lottery and other products have been used YUI3, today, let us to YUI3 in Taobao lottery projects in some of the practice to do some introduction, I hope to bring some references and help to colleagues.

1, Natural excellent frame

Taobao Lottery is a series of products containing many kinds of color, there are quite a lot of color between the common parts, a variety of digital color play is very similar, in addition, the same color also contains different play, the play is more approximate. For example, here is the Shuangse Qiu, Big Lotto, always colorful Samsung play and the single and dual play UI:

You can see, they choose the ball steps, betting additions and deletions of the operation, the number of calibration, additional behavior (tracking, and orders), as well as the logic of the split and the order, almost exactly the same, the difference between them is only, the combination of the selection of the ball, the special case, number of digits, the number of different numbers, and so on, In addition to play the original algorithm of betting is always consistent, so that the general logic can be drawn away, first of all, for the large category of digital color to do an algorithm library, and then the selection of the ball, betting operations, tracking and single and other general-purpose parts to do the function of the package, the formation of functional library, the final final page to achieve only these fragmented pieces of the function to assemble, and focus on the implementation of the various interfaces. Obviously, YUI3 is very suitable for this level of functional segmentation and module encapsulation, such as the algorithm library, functional logic fragment and play implementation of the hierarchical relationship between:

Processing module level relationship is Yui's strengths, code to indicate:

Yui.addmojo ({
___ ' SSC ': {
______path: ' Ssc.js ',
______requires:["C-framework"]
___},
___ ' C-framework ': {
______path: ' C-framework.js ',
______requires:["C-tools"]
___},
___ ' C-tools ': {
______path: ' C-tools.js '
___}
});

In the page to introduce SSC (always color) Module-name can:

Yui.use (' SSC ');

In addition, various play and function areas are connected through a unified interface. Because the YUI3 module relies on the mechanism to facilitate the implementation of high-level module to cover low-level module, which simulates the "overload" and "polymorphism." For example, each play is a separate module-name, each play the interface format is consistent:

Yui.add (' Module-name ', function (Y) {
___abacus["Module-name"] = {
______verify:function () {
_________//... This play of the selection of the ball verification
______},
______getnakedbets:function () {
_________//.. This play gets the original betting data
______},
______getwrappedbets:function () {
_________//.. This game to get the package after the betting
______}
___};
});

Apply this play to the page as needed:

Yui.use (' Module-name ');

In this way, at run time can be based on key (Module-name) to get each play object, by betting operations (C.basket), The auxiliary operation area (C.donkeyman) invokes the interface of these instant objects to complete the betting process, and c.basket and C.donkeyman do not need to know who he is calling, just to know that he has invoked the "one of a kind of thing" method. In this way, YUI3 for this level of functional separation provides a natural excellent architecture, in the subsequent development of a large number of similar functions, the details of the different color, as long as the degree of reuse to do reasonable, two times development is very fast, but also very convenient maintenance.

2, the most original decoupling idea

In my learning to use Yui process, the deepest experience is not the Yui implementation details is how exquisite, but the framework author buried in the source code the most original design pattern Essence-interface. The module communication relies on the interface, and the interface is used to connect each logic, and the implementation of the polymorphism depends on the interface. In Yui, from the packaging of node to the construction of base, million change the architecture has not been able to leave this most original decoupling way, when the center of gravity from the bottom to the application layer, still can strongly feel the interface in the function of decoupling power, for example, in the time of the page in a total of 10 selected number play,

Each game has the same interface, in the runtime, functional areas (such as c.basket betting operations) to play the call always through the interface, and do not care who is calling. Because each type of play is the same interface:

3,yui3 is more than a "framework"

Some people say yui3 is too high, Taobao has no combo, high granularity and high performance between the fish and bear's paw? Non-also, dynamic merge code is a kind of thinking, and frame-independent, and CDN Independent, anyone understand the principle of dynamic merge code handwriting a new framework is not a problem, but also said Yui can not be merged with the Yui code, in fact, as long as to find the right place a little hack under Yui-loader, These are not the point, the key is Yui how to adapt to the development, testing, release and bugfix the whole process, the environment too much, debugging too troublesome, too little environment, many bugs can not be detected, engineers and QA seems to always be a pair of contradictions, of course, we can copy the online environment intact to local, do a mirror, Completely based on local development, this cost is too high, if a project development time is very long, the online environment updated several versions, the local mirror is still old, this is troublesome, even if there is svn, find log, on the code, also enough to make people headache. In fact, in Apache write a few rewrite rules can do real-time mirroring (can refer to here), no matter is the combination of code, or debug source is very convenient, do not look at a lot of compression code after thinking of what environment to switch to?

In the color of the project, Page.js is both combo after the transfer down the file, of course, here anyway or to do a "save as" operation, is a stopgap.

Therefore, YUI3 as a small part of Yahoo front-end technology, he brought the development of ideas to the inspiration far more than YUI3 itself.

4, the power of the norm

Thanks to YUI3 decoupling capabilities, page features can be further divided, pure widget-style interaction and functional logic, such as the lottery in the selection method is functional logic, and the page on the edge of the less visible interaction is a widget-style interaction, This kind of widget interaction has no semantics at the business logic level, just for interaction, and these fast-interacting code can be assembled directly in the page without having to mix the business-level semantics-free code into the code of the business logic, such as:

This includes simple paging, Tabview, expand Folding, pull-down menus, and so on, and these quick interactions are implemented in the page roughly as follows:

Tbloader.require (' Slide '). Onready (function (Y) {
___new y.slide (' J_donkeyman_subtab ', {
______eventype: ' Click '
___});
});

The logic, such as slide, simple-page, and collapse, is more suitable for widgets so that they can be used everywhere. Here you have to mention Y.base and y.widget, development of components for developers to build a set of ready-made templates, in fact, this can be a glimpse of Yui's understanding of the norms, the essence of the norms are unified, efficiency and rationality is secondary, whether it is simple paging, or complex point of tabview, but for simple widget,y.b ASE and Y.widget seem a bit wasteful, but in the idea of norm supremacy, what's the so-called, after all, uniform specifications can make developers spend less energy to make more robust and reusable components, this is Yui in the complexity and norms between the trade-offs, in the more complex projects, this trade-off value more can be reflected.

5, confusion in the snack-style front-end development

Here we have to mention that we are getting no technical content of the front-end work, compared to traditional software engineers, front-end engineers seem to be more accustomed to heap code, the surface looks like, the front-end development without algorithms, and rarely used design patterns, do not set up and detailed, and even did not draw a flowchart, because the front end is too "WYSIWYG", It is not easy to see the control and data behind the view, plus the ever-changing requirements change, the front-end engineers always seem to be busy responding to a variety of requirements, heap code to achieve the function, the final work is not designed out of heart, but patchwork, even if the realization of functional requirements, It is also difficult to achieve the quality of the diamond, over time, resulting in a system of complexity completely beyond anyone's control, and eventually become the biggest obstacle in two development, then, you are also lost in the fast-food type of front-end development? When you open the old "data structure" again, whether there will be a trace of decline?

If you're still confused, I just want to suggest you read Yui's source code, perhaps you will recall some about algorithms, design patterns, engineering, standardization to bring you the most early sense of programming beauty.

6,yui3 's flaws

Coincidentally, YUI3 too large body to bring more convenient development, also brings some obvious shortcomings, such as DOM operating performance is not high, learning costs are too high, getting started relatively difficult, not to mention in-depth understanding and skilled application, which seems to be Yui the most fatal flaw, compared to other frameworks, he is really too complicated, Of course, this and Yui positioning of the use of the crowd, however, this is what the so-called, we can not always stay at the entry-level level, is not it?