OVERVIEW OF POPULAR APPROACHES IN CREATING CLIENT-SERVER APPLICATIONS BASED ON SCIENTOMETRICS ONAFTS’ PLATFORM

Most of the currently developed systems are based on the client-server architecture. This architecture is used everywhere, from mobile-native development to Web applications. However implementing an application based on this architectural solution requires quite a lot of effort from the software developer, and therefore, in order to simplify and speed up the development, certain standard solutions and approaches appeared. This article will discuss the most popular technologies used in the development of Web applications in the context of enterprise development. Also in this article will be mentioned the project, built on the architecture of "client-server" ScienceToMetrics. The main theme of this project is the study of science-metric indicators for the structural divisions of the faculty of the Odessa National Academy of Food Technologies. In fact, it is a portal for viewing and editing information on employees, in the future this portal may be extended to subprojects. In this project, the main idea of this architecture was embodied: decomposition of the application into atomic parts in order to distribute it to several hardware units of capacity to improve performance. The client is an independent application, which at the same time receives information from an external API-interface through REST-requests. In turn, the backend provides this API with certain security restrictions on the content provided. The backend for this architecture provides a layer for the content of the data users, whether it's a database (NoSQL, SQL) or an integration API with external aggregation systems. To ensure the necessary level of security, JWT (Javascript Web Token) authorization is used, which allows you not to create an explicit session between the client and the backend, but allows you to communicate through a token that stores all the necessary meta-information for this user. Volume 9, Issue 4 /2017 http://www.atbp.onaft.edu.ua/

. " " (1-8 2007 ., , ). -: " ". --2007 ., -.1. -.102 -104. [6] ., .,  data of the faculty. To achieve the goal following tasks were highlighted: to analyze the main problems of the subject area; analysis of existing analogues; the analysis and justification of the selection of means of implementation is carried out; the software product was developed, which provides support for the preservation of scientific and experimental data of the faculty.

Materials and Methods
In the analysis process of the main problems of the subject area, software analogues and means of development a systematic approach was used, object-oriented approach was used to construct the information model of the system, to create database storage NoSQL technologies was prefered. Developing process was realized with the help of the following tools: MongoDB as a free and open-source cross-platform document-oriented database, classified as NoSQL type, with the usage of JSON-like documents representation; Intellij Idea as a Java IDE; Intellij WebStorm as a JavaScript front-end IDE. The usage of Spring framework, allowed to pay more attention on business-logic of the application.
4. The main part 4.1. Server side best practices The first thing to talk about will be one of the most popular approaches for developing Java web applications known as Dependency Injection (hereinafter DI).
Inversion of Control is an important principle of object-oriented programming, used to reduce dependency between components in computer programs and is one of the five most important principles of SOLID. The most popular implementation of IoC is the Dependency Injection. Dependency implementation is used in many frameworks, which are called IoC-containers.
The main tasks of DI are reduce dependency level and simplify testing. The upper layer modules should not depend on the modules of the lower layers. Both types of modules should depend on abstractions. Abstractions should not depend on details. Details should depend on abstractions.
If the object x (class X) calls the methods of the object y (class Y), then X depends on Y. The dependency can be reversed by the introduction of the third class, namely the interface class I, which must contain all the methods that x can call for the object y. In addition, Y must implement the interface I. X and Y now both depend on I, and the class X is no longer dependent on the class Y; It is assumed that X does not realize I.
The elimination of the dependence of the class X on Y by the introduction of the interface I is called Inversion of Control (or Dependency Injection (DI)).
Let's consider an example: suppose we have a class A that explicitly has dependencies on ServiceA and ServiceB (Fig.1). This brings the following problems: If you need to change the dependency, you need to recompile the source code.
It is difficult to test classes in an isolation environment, since explicit dependencies can not be replaced by mocks and stubs.
Classes contain a repeating code of creation, defining, and managing their dependencies.
Usage of factories (Abstract Factory & Factory Method), forms a tight binding due to which, after making changes to the dependencies, it is necessary to recompile the program.
The most well-known IoC implementations (perhaps even the only ones) are Dependency Injection and Service Locator (Fig.2).
Dependency Injection plays the role of implementer of the dependencies as a separate component, which, depending on the metadata it has been provided, itself decides which dependency to implement into the class object. It is possible to develop such a component on your own, but mostly developers prefer to use components developed by third-party developers.
The most popular DI implementations at the moment are Spring Framework and Google Guice. Also recently, the usage of ORM frameworks in the developing web applications has become very popular. ORM is a programming technology that links databases to the concepts of object-oriented programming languages, creating a "virtual object database". It allows you to convert data from a relational representation to an object-oriented one and vice versa. ORM is used to simplify the process of storing objects in a relational database and retrieving them, ORM itself takes care of converting data between two incompatible states. Most ORM tools rely heavily on database and object metadata, so objects do not need to know anything about the structure of the database, and the database does nothing about how the data is organized in the application. ORM provides a complete separation of tasks in well-designed applications, in which both the database and the application can work with data each in its original form.
Volume 9, Issue 4 /2017 http://www.atbp.onaft.edu.ua/ More specifically, the use of ORM solves the problem of the so-called "discrepancy" paradigm, which states that object and relational models do not work very well together. Relational databases represent data in a table format, while object-oriented languages represent them as a connected object graph. The main problems and inconsistencies arise during the storage of this graph of objects in the relational database or its loading: The relational model can be much more detailed than the object model. To store one object in a relational database, several tables could be used; Relational DBMSs do not have anything similar to inheritance -a natural paradigm of object-oriented programming languages; In the DBMS, only one parameter for comparing records is defined: the primary key. While OOP provides both checking the identity of objects and their equality; For the connection of objects DBMS uses the concept of foreign keys, in object-oriented languages, the relationship between objects can be only oneway.
The operating principle of ORM.
A key feature of ORM is the mapping that is used to bind the object to its data in the database. ORM creates a "virtual" database schema in memory and allows you to manipulate data already at the object level. This view shows how the object and its properties are associated with one or more tables and their fields in the database. ORM uses the information of this mapping to control the process of converting data between the database and object forms, and to create SQL queries for inserting, updating, and deleting data in response to changes that the application makes to these objects (Fig.3). Using ORM in the project eliminates the need for the developer to work with SQL and writing a lot of code, often monotonous and error-prone. All the generated ORM code is supposedly well tested and optimized, so you do not need to think about testing it. This is clearly a plus, but at the same time, do not forget about the minuses. The main one is the loss of productivity. This is because most ORMs are designed to handle a wide range of data usage scenarios, much more than any single application will ever be able to use.

Client side best practices
As it is not difficult to guess, the success of any client part of the application depends on the order in 3 main directions of development: layout, styles, functionality. Each of the items should be described separately.

HTML5 elements.
To provide additional semantic value for our documents, you need to use the appropriate HTML5 elements, such as <header>, <article> and <section>, where necessary. However, in cases where HTML should be as "backward compatible" as possible, you do not need to apply identifiers or classes to them, because older browsers do not understand these elements by default and will not apply the style to them.

Attribute values You need to use quotation marks to surround all attribute values in HTML, even though quotes are optional in HTML5. This supports consistency between attribute values that contain spaces and those that do not.
Ids vs Classes HTML elements can be identified using the id and class attributes. An identifier is a unique name for this particular element; no other element on the page should use the same identifier. This uniqueness allows <label> elements to bind themselves to a specific input and URLs to jump to a specific scroll position on the page. Classes are not unique. The same class can be used for multiple elements within a page, and one element can have more than one class in the list with space separators. When names for an identifier or class appear, we use semantic names such as "secondary-nav" or "primary button" that describe the meaning of the component, rather than names like "left-nav" or "blue-button" that describe what an element looks like that can change with time. We also use lowercase names with dashes (kebab-case), unlike camelCase, which is widely used in the development environment. SS CSS is an unusual language that can easily lead to an increase in the amount of code, inconsistencies in the design or conflicting elements of the code. CSS should: be easy to maintain, follow fairly clear templates so that it can be understood, used on many devices.

Tools
Libraries or tools should be selected based on the benefits they provide. Common types of tools related to CSS can include: concatenation of files (placing in bandles), preprocessors, minifactors and postprocessors. They should be seen in the context of the rest of the site building process, internal and continuous integration processes. Also worth mentioning are css-frameworks like Bootstrap, Semantic -which allow you to place components on the page, making the layout adaptive.
Basic rules for formatting CSS files: use a new line for every selector and every declaration, use a single space before the opening brace in a set of rules, use lowercase for elements and shorthand hex values, e.g., #aaa, hyphenate class selector names; avoid underscores and camelCase, quote attribute values in selectors, use one level of indentation for each declaration, the closing brace of declaration goes in the same column as the first character of the set of rules, use a single blank line between sets of rules.
Putting each selector on its own line and each property on its own line is great for readability and so version control systems can clearly show which parts have changed in a diff.
The attributes within a selector can be alphabetized for easy scanning and so that compression algorithms like gzip have a greater chance of finding repeatable patterns.
Javascript Today the development of single-page applications is difficult to imagine without Angular.js.
To begin with, Angular.js has a huge community. It includes both members of the permanent development team, and just those who want to contribute to the development of the open source framework. Angular.js hosts a lot of conferences, it is talked about in Hakaton and disputes in the thematic IT community. There are many books and online resources on Angular.js for developers. For customers this means: by choosing Angular.js, you will not only be in a trend, but you can always find developers to support your project.
Declarative way. When creating templates in Angular.js, a declarative programming paradigm is used. This makes the code more lightweight, makes it easier to read and support, since the required final result is described, and not all steps to achieve it.
The language of the templates in Angular.js is HTML. It is expanded with directives that add information about the required behavior to the code (for example, about the need to download a specific module immediately after the page is loaded). Directives allow you to concentrate on developing logic and work more productively. They can be reused, which also increases the readability of the code.
AngularJS uses an MVC schema that separates the logic, presentation, and application data. This allows you to create single page Web applications (Single Page Application). In Angular.js, there is a $ http service that provides interaction with remote HTTP servers using XMLHttpRequest or JSONP. When you pass a JavaScript object to the server, it will automatically be converted to a JSON string. After receiving the response, the service will also try to convert the received JSON string to JavaScript. Using the $ http service, you can create your own service with complete control over the processing of URLs and data.
Templates in Angular.js are HTML code, supplemented with elements and attributes of Angular.js. The framework complements the template with information from the model to show the user a dynamic page. To process data and format values obtained from the model, filters are used. They allow you to display the necessary data to the user without having to make changes to the original data.

Practical part
Most of the principles and conceptions from this article were applied to "Science to metrics" project, for his improvement and simplifying code realization.
First version of application was released in 2016, and now now has undergone tremendous changes. First of all: client-side part will be turned from dynamic JSP templating to full SPA(Single page application) on Angular platform. The latest Angular version provide strong opportunities of TypeScript, which nowadays considered "Java-like" language in client-side development. Also scss-preprocessor, which simplify writing style sheets for each component in Angular environment without redundancy. Node packet manager used to bind dependencies from other open sources, and Webpack -for minifying and packing static content and sources.  For back-end development Spring Boot will be used, a lightweight framework that takes most of the work out configuring Spring-based applications. It will allow to draw more attention to business logic of application instead of configuring project and all of it's dependencies and also simplifies deploying it. Relational RDBMS MySQL will be changed to NoSQL MongoDB. Decision to change DB approach was based on two main cons, which are valuable to any modern application:: 1. Unlike relational databases, NoSQL databases easily store and combine any type of data, both structured and unstructured. You can also dynamically update the schema to evolve with changing requirements and without any interruption or downtime to application.
2. NoSQL databases scale out on low cost, commodity hardware, allowing for almost unlimited growth.

Results
The result of the development is a software product that should provide access to information regarding the publications of the ONAFT employee and his personal information regarding his publication activities. Many useful functional abilities -like reports generations or data modification will be implemented in this portal app.