Shulou(Shulou.com)06/02 Report--

Product evolution

2012

All SUNING's website content management is on the core main system commerce, and the first version of the website is launched, and the theory of content management framework is formed. The subsequent products and technical ideas are also based on this framework.

2014

The content management business was split from commerce, CMS version 1.0 was born, and became an independent system, which established the concept of page template and modularization, and had the conditions for parallel development and flexible release, but the pain points still exist, such as the coupling of front-end template and back-end system, slow page iteration, low development efficiency, poor overall performance and so on.

2015

CMS 2.0 platform realized the dynamic and static separation of template and application, dynamic release of template, online editing, performance TP99 optimization, system automatic degradation, expanded and completed the management and support of most of the front pages of Tesco, and successfully promoted the transformation of Tesco from the PC era to the mobile era; the drawbacks are complex interface, low efficiency of page construction, and imperfect operation functions.

2017

CMS 3.0 mainly solves the problem of content management of original APP, abandons the concept of solidified template and overcomes the problem of data synchronization of multiple versions of APP. At the same time, the https of the whole Tesco station is completed, and the back-end fault tolerance and control are strengthened to ensure that 0 accidents occur throughout the year.

2018

With the strategy of "pole-building" and "coordinated development of multi-industries" put forward by SUNING, daily content management can not only be satisfied with the business in the retail format, as well as the traditional manual mechanical mode of work, therefore, the CMS platform (Titan 4.0) arises at the historic moment, the system architecture supports content management in different industries from the top level, and provides a rich library of module components, but also supports highly customized components. Access to various technical forms of OOP, ES6 and VUE fragments provides the basic technology for the formulation of specifications for the platform. Abstract concepts, dynamic data types and module components are adopted in the underlying architecture design to realize the separation of front and rear ends, which is the core of Titan platform back-end technology, which not only connects SUNING's internal team, but also empowers third-party brands and operators. By providing a variety of application function modules to fully connect with the application scene, application architecture and human "platform ecological construction".

Core competence 1: abstract business model and build system framework

Product, front-end development, server development, designer, testing, operation, the personnel growth rate of these positions is far less than the needs of business development, and the time limit is the same, that is, we often say that there is a shortage of resources. how to meet more demand under the condition of limited resources? The first is to improve efficiency and module reuse. The operation of visual editing, building block page structure and highly public module components become the core of solving the problem.

Combined with the CMS domain business model, the page-> module-> element-> data model-> basic field is abstracted from top to bottom to achieve building block page construction and high reusability.

Good business model abstraction is the basis of high reusability. The data structure is as follows:

Core competence 2: component-based platform, front and rear separation practice

The component platform mainly manages the whole process of module components in the system from scratch, including module source file management, online development, branch and version management, release process management, etc. The front-end development uploads the developed module component source files to the platform for management. Each module component is an independent release branch. Developers can submit branch codes on their own after development in the platform. If you need to go to the production environment, you also need to go through the approval of the release process before you can finally publish the module components to the production environment, and the module components released to the production can be used by each page. Let's introduce the front-end and back-end principles and working methods of the module components.

Back-end management of component standard development and release

Titan background provides a full range of module definition capabilities, front-end developers can use this ability to focus on front-end development, to achieve the perfect separation of front-end and back-end.

Module data definition:

Module style data definition

The module style definition actually specifies the style controls that the module contains, such as background color, style, etc.

Module business data definition

The definition of module data actually defines the various data items of the business data that can be maintained by the module, such as commodity name, commodity code, etc.

In the module data definition, dynamic data types (elements) are used to simplify the module data definition, which greatly increases the workload of module development. For abstract dynamic data types, if the data definition of some modules cannot be supported in some extreme scenarios, secondary expansion of basic fields is supported, and extreme business scenarios are supported.

Module page rendering definition

Titan uses the module definition to complete all the aspects involved in the page floor, in addition to the definition of the style control and the module business data maintenance item. of course, it also includes the floor rendering definition of how to integrate and render the style control content and business data content maintained by the operator. To provide this feature, Titan supports uploading JS files rendered by the module when defining the module, and uses high-performance cloud storage servers to achieve fast and accurate floor rendering:

Abstraction and definition of complex components:

In addition to the ordinary module, there is also a special module-Tab signature module. In order to deal with the Tab signature module, the system analyzes and abstracts it and abstracts the hierarchical concept of compound module-> layout module-> ordinary module:

Through the module level, you can flexibly configure to adapt to the complex floor scenarios encountered on the page, not only the single-layer Tab signature scenario in the figure, but also support double-layer Tab signature, or even three or more layer scenarios. The relationship between composite modules, layout modules and ordinary modules is realized by defining the relationship among composite modules, layout modules and ordinary modules. at the same time, the style and data definition of each level module still follow the general configuration definition scene of ordinary module, and realize the combination of dynamic and static.

From a technical point of view, the background supports dynamic module hierarchical relationship binding by defining module relation table, which theoretically can support any level of module relationship and has better flexibility and expansibility.

1) Composite module definition interface:

The relationship between composite module and layout module is defined by drag-and-drop, and the operation is simple and friendly.

2) layout module definition interface:

Define the common modules that can be selected by the layout module by drag-and-drop, and define the types of floors that can be placed on the page signed by Tab (for example, ordinary goods).

The component platform is an important concept for Titan because it is an abstraction that allows us to build large pages using small, independent, and often reusable components. When you think about it, almost any type of interface can be abstracted into a component tree.

For example, you may have headmap, broadcast, hot spots and other components on a page, and you can aggregate these components to a TAB through TAB. The "nesting" of the components enhances the shape of the components, so that the components can be mounted into the parent components, so a page is composed of many reused components. In order to prevent pollution caused by multiple components, the components adopt "disabled" design and closed isolation, which can avoid the impact of components on the overall situation. It can also make the components independent of the system, plug and play.

Backend release management process:

Data communication between front-end components and back-end systems

Component data is divided into "style data" and "business data". Style data provides presentation, business data provides logic, and does not interfere with each other.

The use of components will be instantiated, and a series of processes will be generated during the instantiation process, such as data monitoring, template parsing, virtual DOM generation, and then component rendering will be completed. At the same time, some functions called lifecycle hooks will be run in this process, which gives users the opportunity to add their own code at different stages.

The page is the only data object, and there is a simplex mode between the page and the component, and the data will only flow from the page to the component, while there is a duplex mode between the page and the "component control panel", which can send and receive data to achieve DOM and object updates.

Optimal practice of components

Components require independent cohesion, so the contents of HTML, CSS and JS are aggregated, and then WEBPACK is compiled to generate BUNDLE files. As a whole, the components are designed with OOP, which makes the components have the characteristics of objects, encapsulation, inheritance and polymorphism. Therefore, what is loaded into the page is the instance of the component, which also ensures that the same component can be loaded multiple times to avoid the problem of component pollution.

A complete component is divided into two parts:

Component content

The component content is a complete external JS file, which is divided into two sets of editing JS (providing visual display of Titan system and operation, no need to call business interface) and preview JS (real, what users can see). The editing JS focuses on the UPDATE operation of the data and selectively ignores the animation interaction of the components, while the preview JS does not UPDATE because the data has been matched, but pays more attention to the interaction and interface.

Control panel of the component

The component control panel is provided to the operator to visualize the operable page to achieve the final effect of the component. When adding a module, there is an option for "module control panel". The default is dual TAB, which can be modified here.

Style fields are added and generated by developers through the style editing feature of the component. For example, the style fields required by the component can be configured through the figure below. The field name in each field is unique in the current component. This field name will also be the key value of your data in the component.

Similarly, the fields needed for business data can also be added and generated through the data editing function.

1. Is a dual TAB display, the style and maintenance of the data fields are customized by the developer, giving developers enough room to expand.

two。 The business is polymorphic, the vision is changeable, and there are always field styles that cannot be generated by dragging and dragging, so VUE fragments emerge as the times require, such as image hotspots, which are custom style displays, developers' VUE implementation, and VUE implementation, which means that the page needs to be developed by itself. Developers, also in style editing, have a "page snippet" that pastes your compiled JS code.

Speaking of the implementation of the developer, the developer only pays attention to the display of the panel and the variable storage of the data, provides a general API for the data communication system, and completes the necessary data monitoring and data update operations to simplify the development.

The customization of the system has led to the generation of more complex custom components, such as the TAB component mentioned earlier, which is a composite component that supports nesting, and the panel is also a development customization.

Finally, the finished component, the release package is the ZIP package, the package name is the module ID, and the editFilePath stores the editing JS,modelFilePath and the preview JS. The two directory names are fixed. After packaging, release the component by modifying the function of the module

Core competence 3: diversification and extensibility of dynamic data model

The so-called dynamic refers to the ability to expand flexibly, does not need to go online and does not need to expand database fields, supports free expansion, and can quickly respond to the increasingly flexible needs of e-commerce websites. At the same time, the fields needed in the module components are disassembled and classified to form more fine-grained field components, and text input boxes, drop-down selection, single selection, multi-selection and so on all become these smallest units. any module component is formed through different permutations and combinations of these field components, which is very scalable, and when it meets different business needs, expanding fields becomes very convenient and fast. To achieve dynamic configuration, because the configuration does not need to be released, it greatly reduces the release risk of module components, has no impact on the pages and business in use, and has higher security.

Of course, while abstracting and granulating the components, it also takes into account the clustering of some commonly used data types, forming the basic elements in the system, such as picture elements, text elements, commodity elements, voucher elements and so on.

Dynamic data type definition interface:

Dynamic data types are realized by abstracting the basic fields (such as radio, check, color palette, time selector) and combining the basic fields into data types (elements):

Through conceptual abstraction and grading: page-> module-> element-> data model-> basic fields, and independent expression and storage of abstract conceptual physical models at all levels, achieve the dynamic binding of relationship management between conceptual abstractions at all levels and the independent definition of conceptual abstractions at all levels, and realize the dynamic and free expansion of data types without code change and version release. Provide better flexibility and future-oriented scalability.

Core competence 4: multi-terminal and multi-format support

Vision: covering the eight major industries of SUNING Group, it has become the cornerstone of SUNING's business components, platform and external empowerment.

Titan constructed the embryonic form of multi-format support at the beginning of the redesign, from the point of view of providing services for the whole industry of the group, and made the division of industrial concepts in the system design, so that the sharing of underlying system services among various industries at the same time will not affect their respective business logic, business isolation between industries, business logic isolation, reduce system risks, and ensure the smooth development of business in various industries. In the aspect of platform and reusability of components, it is also to solve the problem of resource gap between various industrial groups, to share the core front-end technical capabilities and design capabilities, on the other hand, it also integrates all the development resources and design resources of the group, and the module components of industrial design and development of each group can be shared.

Technical support Framework:

Core competence 5: strong self-inspection and monitoring to ensure system and business stability

Industrial isolation

The logic of each industry can be independent of each other, will not cross-interference, the underlying services are basically the same, support has its own customization needs.

Independent authority

The application and approval of permissions are completed in the system, and the roles and responsibilities are distinct. Users can only see their own pages or authorized pages in the system, which means that each user has his own workspace without being disturbed by pages created by others. At the same time, doing so also ensures the security of their own pages.

In-system self-test

The system will conduct some self-tests for the maintained page links, such as the size of the picture, whether the redirected link can be accessed normally, whether it is a SUNING link, and so on.

Sensitive word check

The system is currently open to internal employees and merchants. In order to prevent some sensitive words from being directly displayed on the page, sensitive words are checked during maintenance in the system. If they match sensitive words that exist in the sensitive thesaurus, will not be maintained into the system, and give a hint.

Sensitive map filtering

The method is basically the same as the verification of sensitive words, in addition to verifying the sensitive words on the picture, but also verifying some watermarks and illegal QR codes.

Pre-online check on the page

For manually created and maintained pages, it is difficult to ensure that there are no problems when they are launched, so when the page is launched, we conduct a systematic review of the page and set up various specifications of some pages (including page performance and first screen loading speed) in advance. The online verification will be matched one by one according to these specifications. If these specifications are not met, the page is not allowed to go online. To ensure that it can give consumers the best page browsing experience.

Round-the-clock real-time monitoring and alarm

For pages that have been online, page monitoring will be configured according to the degree of importance, and an alarm mechanism will be established for problems such as data invalidation and page expiration when the page is online, and a message reminder will be sent to the operators of the page maintenance. in order to find and solve the problem in time.

Page degradation

In the process of launching the page, it is hard to avoid the need for page adjustments, which may be data-level or page structure. The adjustment of the page structure has a great impact on the page as a whole, so it is obviously inappropriate to let consumers see the problems displayed on the page while adjusting the page structure in the system, so we have established a page degradation mechanism. when adjusting the page structure, the page will be automatically downgraded, making the page stay at the moment before changing the structure, and will not affect consumers' browsing the page. During the downgrade period, the page data will not be updated. After the operator has adjusted the page, the page will be re-launched and the page will be downgraded and the page data will be updated normally.

Our vision

Future product architecture diagram:

Future system architecture diagram:

In the future, it is hoped that more business and technical forces can join the Titan platform to provide technical support and product services for more and more customized channel activities. I also hope that developers can enjoy experience development, debugging, grayscale, and release a whole set of processes. give us valuable suggestions and improve together.

[author]

Bi Ding, Product Manager of SUNING Consumer platform R & D Center, joined SUNING in 2015, has been responsible for the product work of SUNING platform content management system, and has experienced system evolution, product revision and iteration. committed to the construction of SUNING industry-wide content management platform.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.