Team:USTC-Software/Implementation

Project

Overview Improve Implementation

Attribution Demonstrate

Human Practice

Human Practice Integrated Human Practice

Collaborations Model Medal Team

Validated Contribution

Overview Feedback Getting Started Apply An Account Edit A New Report Intelligent Search Engine Society For More Information

Implementation

Backend Part Django Python3 Nginx Standford CoreNLP Django-rest-framework Frontend Part About Framework About UI About Editor

Implementation

Backend Part

Django

Django is a free and open-source web framework, written in Python, which follows the model-view-template (MVT) architectural pattern.

Django makes it easier to build better Web apps more quickly and with less code, it emphasizes reusability and "pluggability" of components, less code, low coupling, rapid development, and the principle of don't repeat yourself. It also provides an optional administrative create, read, update and delete interface, which is generated dynamically through introspection and configured via admin models.

Python 3

Python is an interpreted high-level programming language for general-purpose programming. Python has a design philosophy that emphasizes code readability, notably using significant whitespace. It provides constructs that enable clear programming on both small and large scales.

Python features a dynamic type system and automatic memory management. It supports multiple programming paradigms, including object-oriented, imperative, functional and procedural, and has a large and comprehensive standard library. It is cross-platform and it interpreters are available for many operating systems.

Nginx

Nginx is a web server which can also be used as a reverse proxy, load balancer, mail proxy, and HTTP cache. Nginx can be deployed to serve dynamic HTTP content on the network using FastCGI, SCGI handlers for scripts, WSGI application servers or Phusion Passenger modules, and it can serve as a software load balancer.

Nginx uses an asynchronous event-driven approach, rather than threads, to handle requests. Nginx's modular event-driven architecture can provide more predictable performance under high loads.

Standford CoreNLP

CoreNLP is a program of natural language processing, it provides a set of human language technology tools. It can give the base forms of words, their parts of speech, whether they are names of companies, people, etc.

It makes it very easy to apply a bunch of linguistic analysis tools to a piece of text. A tool pipeline can be run on a piece of plain text with just two lines of code. CoreNLP is designed to be highly flexible and extensible. With a single option, you can change which tools should be enabled and disabled.

Django-rest-framework

Django REST framework is a powerful and flexible toolkit for building Web APIs.

REST framework use packages for OAuth1a and OAuth2 in Authentication policies, its serialization that supports both ORM and non-ORM data sources. It customizable all the way down, and it has extensive documentation and great community support.

Frontend Part

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-known 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 differentiates and combines the same and different functions and the component system can use less code to do a good job. Benefiting from Angular6’s performance and rendering mechanism which are better than most current mainstream frameworks, 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 the 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 a 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.