Implementation

Server Part

The server of Bioeditor is written in Python 3.6, which is a flexible and cross-platform language and can reduce the learning costs we develop. Django allows fast prototyping and large-scale deployment, that's why we choose Django to be the basic framework.

About the Bricks Data

About Data Organizing

The initial data will be imported into a separate database.Bioeditor will link to it by creating virtual tables using MySQL's database view technology.Using database views may lower the speed of querying, but it also has a lot of benefits. On the one hand,it's easy to get started.Users don't need to care about the complex structure behind. On the other hand,it's safety for beginners, users who use views can only access the result set they are allowed to query.

About Search Engine

We followed last year's filtering of initial data to reduce the impact of unwanted bricks on search efficiency.We used natural language processing during the search process. After the language model is established, the extraction of text keywords is realized by processing such as statistical features such as TF and IDF. So that our search results are more in line with the needs of users. At the same time, we have made the search conditions more diversified.Users can find the bricks they need more conveniently under more query conditions. We will recalculate the ranking weights at regular intervals. The reason for not evaluating them in real time is that the task may update the whole table and become time-consuming.

Frontend Part

About Framework

About Frontend Framework To make it easy to build applications with the web, we use advanced frontend framework Angular6 which is an open source framework maintained by Google. It is based on the Model View Controller (MVC) Architecture which ordinarily utilized for planning rich web applications. Angular6 combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. It helps developers to build cross platform applications that live on the web, mobile, and desktop across Mac, Windows, and Linux.

Angular6 makes our web pages extremely high performance. It turns templates into code that's highly optimized for today's JavaScript virtual machines, giving us all the benefits of hand-written code with the productivity of a framework. And Angular apps load quickly with the new Component Router, which delivers automatic code-splitting so users only load code required to render the view they request.

Thanks to Angular popular, many well-know code editing products support Angular, like Visual Studio Code, Sublime text and WebStorm. We choose WebStorm as our IDE to makes code easily and spend less time.

When setting up our development environment, Angular CLI plays an important role. Angular CLI is a command line tool which makes build, add components and test faster. It has become one of the most essential tools for Angular.

We use Angular6 modularity system and component system to work together more easily and efficiently. The modularity system differentiate and combine the same and different functions and the component system can use less codes to do a good job. Benefiting from Angular6’s performance and rendering mechanism which are better than most current mainstream framework, including Vue and React, our web pages has faster response and more comfortable experience. With Karma for unit tests, our codes become stronger.

One of important reasons we choose Angular6 is the issue of network security. Angular6 has built-in protections against common web-application vulnerabilities and attacks such as cross-site scripting attacks. To systematically block XSS bugs, Angular treats all values as untrusted by default. When a value is inserted into the DOM from a template, via property, attribute, style, class binding, or interpolation, Angular sanitizes and escapes untrusted values.

About UI

In order to match our frontend framework perfectly, we choose Ng-zorro, which is written in TypeScript with complete defined types as our UI framework. The high-quality components and style of Ng-zorro help us complete our design quickly and provides better experience.

As a design system for enterprise-class products, Ng-zorro reduces the cost of redundant production through modular solutions based on deterministic and natural design values. With its simple and efficient design concept, NG-zorro allows designers to focus on better User experience.

Unlike Bootstrap’s 12 grid system, Ng-zorro use 24 grids system, so our web page has more detailed detail processing. Referring to Bootstrap responsive design, Ng-zorro has richer responsive choices to adapt to screens of different sizes.

About Editor

Drag and drop function Plugin Sortable is applied to Editor. Sortable is a minimalistic instrument for sorting elements within a list or between lists. Its library doesn’t depend on jQuery or other libraries; it uses native HTML5 Drag and Drop API, and works on both desktop and touch devices. It works on both desktop and touch devices well. It has a simple API, can be easily integrated with any project and represents an excellent replacement.