The Design And Implementation Of Data Docking Module In Alloy Store:a Front-end Component Platform

In the case of rapid development of Web front-end,traditional method is not suitable for the current complex and large front-end system while a variety of modular,component development methods began to be gradually put forward and applied to practice.Including the Web Component standards from W3C,a variety of template language,as well as React framework and other standards and technology,represents the future of front-end should be component development.However,the current component development lacks a good platform.Most of the components are depended on self-driven developers,which does not have a standard.In this condition,users are difficult to understand and select components.The existing component development platform provides some convenient features,like component uploading,installing,and saving.However,there are some disadvantages including a lack of visual preview and a lack of community interaction.In conclusion,we need a component-based development platform that provides these core functions and overcomes those shortcomings.The Alloy Store is an online component development platform that provides component publishing,installing,as well as previewing and running online.The entire system can be combined with npm,and provides an online site,while providing a more humane choice without abandoning the original experience.By using the BS architecture style,it can be divided into Display Module,Data Docking Module and Asynchronous Module.In Data Docking Module,it uses Redux in front-end part,uses GraphQL as a data interface platform,and encapsulates database-related operations into Promise object.The Data Docking Module provides data support for the entire system.In the front-end part,the use of pure function can control the data stream,ensuring the visibility and controllability of all operations.The design of the data interface allows the front-end and back-end of the system to be decoupled from a specific data model.At present,the whole system has been in use,carrying more than 30 components.In some way,it has improved the efficiency of our team.