“Perfect Ajax” - a new approach to building real client-server web applications
“Perfect Ajax” is a new approach to building web applications, in which the web server does not generate a single line of HTML code and interacts with the outside world only through web services; and the client interface is implemented only on the basis of client HTML, CSS, JavaScript.
The article consists of two parts. In the first part, which is more lively and provocative, I will try to interest the problem, talk about the technology “Perfect Ajax” and show its application using the example of our project “Synthesis of Knowledge Testing System” (which has some interesting features, such as using server-side JavaScript on the Mozilla Rhino platform, a prototype-oriented ORM and support for SPARQL (query language to the Semantic Web).
The second part - more boring will contain many technical details and will be released next time.
')
By a good tradition, I award with pluses all participants in the discussion, including constructive critics, with whose opinion I disagree.
Try to guess: what architecture are web applications?
To client server speak? I expected you to answer this :-)
Well, let's see. In the client-server architecture, there are:
The advantages of the client-server architecture are obvious; we all know them:
But, do web applications relate to client-server architecture?
Indeed, in web applications there is a server responsible for the business logic of the application.
But! The client is not responsible for implementing the interface, but also the server. The server is processing the client form. The server generates the HTML code of the user interface.
The client, i.e. the browser only renders the ready HTML interface code. This is, in fact, the same thing as attaching a monitor to the server and declaring this monitor as a client ...
It is unlikely that such an approach can be called a full-fledged client-server architecture. It has many disadvantages:
However, we know in history an example of such an architecture. In the 70s, mainframes were common. A mainframe is such a huge iron chest (server) to which workstations (clients) were connected. Moreover, the workstation was just a monitor with a keyboard. And any actions of the client at the workstation were processed on the server, sometimes even such as handling keystrokes and drawing the screen [2] . Well, we know how popular mainframes are today ...
Of course, in modern web applications, part of the interface logic is implemented on the client using JavaScript.
Part of the data is loaded using Ajax and visualized on the client.
But, nevertheless, many actions related to the user interface are still performed on the server. Using Ajax now in many ways even exacerbates the situation, because leads to scattering the implementation of the interface between the server and client code.
The “Perfect Ajax” approach is built on the following principles:
I will describe this architecture on the example of our project “System of Interactive Testing of Knowledge“ Synthesis ”.
In the "Ajax" concept, the server must satisfy a single condition: do not generate a single line of HTML code and communicate with the outside world via web services. In all other respects, its implementation is not limited by anything.
Here I will describe the structure of the server in our project, because it has a number of interesting features: the use of server-side JavaScript on the Mozilla Rhino platform, a prototype-oriented ORM, and the ability to use SPARQL, the query language for the Semantic Web.
However, your server implementation may be completely different and not at all like ours.
, .
, «» web-.
.
— - JavaScript-, web-:
, «Ajax-» «Hivext: ».
The article consists of two parts. In the first part, which is more lively and provocative, I will try to interest the problem, talk about the technology “Perfect Ajax” and show its application using the example of our project “Synthesis of Knowledge Testing System” (which has some interesting features, such as using server-side JavaScript on the Mozilla Rhino platform, a prototype-oriented ORM and support for SPARQL (query language to the Semantic Web).
The second part - more boring will contain many technical details and will be released next time.
')
By a good tradition, I award with pluses all participants in the discussion, including constructive critics, with whose opinion I disagree.
Try to guess: what architecture are web applications?
To client server speak? I expected you to answer this :-)
Well, let's see. In the client-server architecture, there are:
- Server - responsible for storing data and implementing the business logic of the application.
- Client - is responsible for user interaction [1] .
The advantages of the client-server architecture are obvious; we all know them:
- Business logic does not mix with user interface.
- You can implement several clients with different user interfaces: a command line interface, a windowed Windows interface, Flash, a web interface, a mobile interface, etc.
- The client computer is not resource demanding;
- Etc.
But, do web applications relate to client-server architecture?
Indeed, in web applications there is a server responsible for the business logic of the application.
But! The client is not responsible for implementing the interface, but also the server. The server is processing the client form. The server generates the HTML code of the user interface.
The client, i.e. the browser only renders the ready HTML interface code. This is, in fact, the same thing as attaching a monitor to the server and declaring this monitor as a client ...Comment:
Here, however, there is one subtlety. Two concepts should be distinguished: web-applications and the system “browser-web-server”. Web applications run on top of the browser and web server, just like Java applications run inside the JVM, .Net applications run on the .Net Framework, and HTTP runs on top of TCP / IP.
The system “browser - web server” really has a client-server architecture: the web server accepts and processes requests, and the browser visualizes the result.
However, here we are not talking about the “browser - web server” system, but about web applications running inside it.
It is unlikely that such an approach can be called a full-fledged client-server architecture. It has many disadvantages:
- Mixing business logic and user interface;
- It is difficult to implement multiple user interfaces;
- Third-party programs cannot access the server (unless a special api is written);
- Most of the processing load of the interface falls on the server.
- Etc.
However, we know in history an example of such an architecture. In the 70s, mainframes were common. A mainframe is such a huge iron chest (server) to which workstations (clients) were connected. Moreover, the workstation was just a monitor with a keyboard. And any actions of the client at the workstation were processed on the server, sometimes even such as handling keystrokes and drawing the screen [2] . Well, we know how popular mainframes are today ...Of course, in modern web applications, part of the interface logic is implemented on the client using JavaScript.
Part of the data is loaded using Ajax and visualized on the client.But, nevertheless, many actions related to the user interface are still performed on the server. Using Ajax now in many ways even exacerbates the situation, because leads to scattering the implementation of the interface between the server and client code.
| So, I propose the “Perfect Ajax” approach, which calls for the development of the Ajax idea to the logical end and to completely abandon the use of the server to implement the user interface of web applications. |
The “Perfect Ajax” approach is built on the following principles:
- Web server:
- It implements only the business logic of the application and does not generate a single line of HTML code;
- Interacts with the client through web-services : accepts text requests and returns only data;
- It implements only the business logic of the application and does not generate a single line of HTML code;
- User web interface:
- It is implemented only on the basis of client HTML, CSS, JavaScript.
- Interacts with a web server through an object-oriented wrapper library over web services;
- Used exclusively semantic layout .
The controls (tabs, menus, trees) are described by high-level HTML constructs. - The library of controls gives HTML constructions the appearance and functionality of the corresponding control simply by hanging the necessary styles and event handlers without changing the HTML code of the element.
- It is implemented only on the basis of client HTML, CSS, JavaScript.
- Any third-party developer can implement his version of the user interface, not only in HTML, but also in Flash, Windows, Mac, etc.
"Perfect Ajax" in our project
I will describe this architecture on the example of our project “System of Interactive Testing of Knowledge“ Synthesis ”.
Server
In the "Ajax" concept, the server must satisfy a single condition: do not generate a single line of HTML code and communicate with the outside world via web services. In all other respects, its implementation is not limited by anything.
Here I will describe the structure of the server in our project, because it has a number of interesting features: the use of server-side JavaScript on the Mozilla Rhino platform, a prototype-oriented ORM, and the ability to use SPARQL, the query language for the Semantic Web.
However, your server implementation may be completely different and not at all like ours.
Server architecture
- DBMS - stores data.
- Prototype object-oriented core of business logic - implements the object model and application functionality.
- ORM - connects the database with the prototype core business logic.
- Web server - opens the program's functions to the outside world through web services.
DBMS
- All data is stored in a regular relational database.
- Moreover, only “pure” SQL is used, without add-ins of specific DBMS: stored procedures, etc. This makes the database independent of one or another DBMS.
- The database is linked to the object core of the application's business logic through a prototype-oriented ORM.
Object core of business logic
- The entire object model of the application and its business logic is enclosed in a prototype-oriented core.
- The kernel is written in server-side JavaScript, based on the Mozilla Rhino platform.
- Despite being underestimated by many developers, JavaScript is an amazingly powerful, flexible, and beautiful language, superior in some cases to the flexibility and functionality of monsters such as Java or C #. And we use to the maximum its capabilities, such as prototype-oriented OOP, object-like-hashes, functional programming, closures, etc.
- Also, the prototype-oriented paradigm of JavaScript allows much more flexibility to work with the database through ORM.
- Mozilla Rhino compiles javascript into JVM bytecode.
Due to this, our server-side JavaScript does not become a “thing in itself”, but can use all the abundance of the developments of the Java world. - Generally, server-side JavaScript based on Mozilla Rhino is a separate large topic, and I will try to write a number of articles on this issue.
Prototype oriented ORM
- ORM is used to connect a relational database with a prototype object-oriented core of business logic.
- , . :
, 10 , 10. - ORM - — !
, . , , - ORM (., , « »). - ORM .
, , ; , .
, SPARQL — Semantic Web. - , . ORM ORM. .
- - ORM — , .
Web-
- Web- - — - web-.
- HTML-.
- Web- , .
, , web- .
, .
, «» web-.
.
- — - , .
- - — - web-, .
- — () HTML-;
- — HTML- .
— - JavaScript-, web-:- ( web-, ) - web-.
- , web- : .
, - - web-. .:
3 «» .
web-, -Sintez.// <br> var objStudent1 = Sintez.getStudent ("this.firstName = '' and this.secondName = ''");<br> // 3 "" <br> var objClass1 = Sintez.getClass ("this.getClassNuber() = 3 and this.liter = ''");<br> // <br> objClass1.addStudent (objStudent1);<br>
- web-, . - , , - web- JavaScript, : .Net, Java, Delphi, Flash .
- -, . - , , .
, , - .
- , , , .
- HTML- .
- HTML- , .
- HTML- , JS- .
.
HTML-, « » JS CSS-.:
, HTML-: .<ul id = "ulTree1"><br> <li><br> 1<br> <ul><br> <li><br> 1-1<br> </li><br> <li><br> 1-2<br> </li><br> </ul><br> </li><br> <li><br> <!--...--><br> </li><br> </ul><br>
, JS-Controls.Tree. .// <br> var objTree1 = new Controls.Tree ($("ulTree1"));<br> // , selectAll () <br> objTree1.selectAll ();<br>
,Controls.Menu:// <br> var objMenu1 = new Controls.Menu ($("ulTree1"));<br> - : «HTML — ()».
.
, «Ajax-» «Hivext: ».
Source: https://habr.com/ru/post/47074/
All Articles