The Design And Implementation Of A Webpage Style Replacement System Based On Node.js

As a part of their work,front-end developers should not only consider the contents and features of a web site,but also focus on the design and implementation of the graphical user interface(GUI).The presentation of a web page is strongly affected by the GUI.However,a great design requires both a good taste of art and aesthetic abilities.Usually,a front-end developer does not have such knowledge and skills,so the professional designers have to undertake this part of work.This will lead to a huge communication cost.On the other hand,the Internet itself can be viewed as a massive collection of works including a large number of excellent web design patterns.It can thus provide inspirations and experiences to designers and developers.Currently,most design reuse is accomplished with templates.Templates use standardized semantics to render content into pre-customized layouts.Unfortunately,the abuse of templates will produce homogenized webpage structures,limit the ability to customize,and restrict developers' creativity.Therefore,we argue that style components and theme colors can be extracted from any existing web pages.We then use the extracted materials to transform other pages that need to be optimized or revised.This process can be called as automated style replacement and we further implemented an online system to do so.The core process consists of the following three ideas:(1)extracting color data and component data from web pages as materials;(2)performing component replacement,color replacement,and optimized operations to complete the replacement process with the evaluation on the result page;(3)preserving original CSS information of components and pages for developers to compare.Specifically,the work of this thesis is summarized as follows:· A browser automation architecture is developed based on the browser automation framework called Selenium Web Driver.We integrated a set of functions such as creating and deploying of browsers' drivers,accessing site,executing script,and collecting result.Meanwhile,we implemented page scrolling screenshots,virtual DOM,and other helper methods for subsequent algorithms.· A mechanism that can execute multiple replacement tasks with different parameters at the same time is designed and implemented.· Algorithms that carries out color data collection,component data collection,and style replacement are implemented.· We implement this system based on Node.js environment using React-related front-end technologies and the back-end framework called Egg.js.We try our best to provide users with an easy-to-use interactive interface as well as displaying clear and intuitive results.A team collaboration part is also provided in the system to help users achieve higher co-work efficiency.