A beginner explores the JavaScript Webix library.  
Part 6. Interaction with the server 
Tags: javascript, webdev, devops
Published: 2020-04-02 07:05:53

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/i0o5n4qdbc536u79yhse.png)
<p>My career in front-end developing has just started. Currently, I am on a trial period&nbsp;in one of the IT companies&nbsp;in Minsk. I am exploring the subtleties of the web-ui development on the basis of the JS&nbsp;<a href="http://www.webix.com/">Webix</a>&nbsp;library. I am happy to share my modest experience as a guideline of this curious UI library.&nbsp;</p>
<h2>SIXTH TASK</h2>
<p>Any operation in the Webix JavaScript library appears first of all on the client side. After that the server gets the result in case the data needs to be saved. The developer needs to connect the server and to work with simple queries, in case custom behavior is not intended for the project.&nbsp; </p>
<p>We will deal with the following issues:&nbsp;</p>
<ul>
<li>connecting the server part of the app;&nbsp;</li>
<li>methods of requests to the server;&nbsp;</li>
<li>how to track the download result;&nbsp;</li>
<li>how to track the result of saving. </li>
</ul>
<p>The&nbsp;<a href="https://docs.webix.com/datatable__index.html">DataTable</a>&nbsp;widget is described in detail in the documentation. </p>
<p>The source code is&nbsp;<a href="https://github.com/sashko-web/sources-for-articles-webix/tree/part-6-server-side">here</a>. </p>
<p>The finished application is&nbsp;<a href="https://snippet.webix.com/u40qcg46">here</a>.&nbsp;</p>
<p><strong>Connecting the server part of the app</strong> </p>
<p>We are going to work with the DataTable widget. The structure of the application has been changed in the source code. Two folders have been added: backend, with a simple server script on nodeJS, and the app folder, with the client code. There are&nbsp;&nbsp;separate files for the server operations. The films.js file is for the DataTable widget. </p>
<p><em>The DataTable widget code is placed in the table.js file of the app folder and is rendered in the Dashboard tab.</em> </p>
<p>First, we run the application on the local server with&nbsp;the following commands:&nbsp;</p>
<p><em>npm install</em>&nbsp;</p>
<p><em>npm run server</em> </p>
<p>Then there is the following in the terminal: </p>
<p>Server is running on port 3000...&nbsp;</p>
<p>Open&nbsp;<a href="http://localhost:3000/app">http://localhost:3000/app</a>&nbsp;in browser </p>
<p>To&nbsp;<a href="https://docs.webix.com/desktop__serverside.html#dataloading">load data</a>&nbsp;into a table we provide the path to the script in its url property.&nbsp;</p>
<p><strong>url:&nbsp;"/samples/server/films", </strong></p>
<p>To send<a href="https://docs.webix.com/desktop__serverside.html#datasaving">&nbsp;save</a>&nbsp;requests, the path to the script is indicated in the save property.&nbsp; </p>
<p><strong>save:"rest-&gt;/samples/server/films",&nbsp;<strong></p>
<h2>Methods of requests to the server</h2>
<p>We will use the RESTful API method and other methods for the data operations, such as: GET, POST, PUT, and DELETE.&nbsp;</p>
<p>With the&nbsp;<a href="https://docs.webix.com/desktop__server_rest.html">rest</a>&nbsp;prefix already set in the save setting, all requests will be sent via the corresponding built-in&nbsp;<a href="https://docs.webix.com/desktop__server_proxy.html">proxy</a>.&nbsp;The rest proxy matches the request method with the type of operation performed on the client. There are a few built-in proxies Webix suggests. It is also possible to create your own custom proxy.</p>
<p>We will track queries on the DataTable widget example. So, we go to DevTools-&gt;Network in the browser and look for the information on the desired request.</p>
<p>To load data to a table, we use the&nbsp;<strong>GET method</strong>.&nbsp;</p>
<p>We refresh the page and click on the request to the films script.&nbsp; </p>
<p>By default, there are no parameters in this request, as it is the first&nbsp;data&nbsp;loading into the component. </p>
<p>Thus, the server returns us the JSON array with all the data. </p>
<p>Result of the GET request:&nbsp;</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/oznjlc87vvmxtu1nqibq.jpg)
<p>To create a new record in the table, POST method is used.</p>  
<p>We use the form to add new data to the table.</p>  
<p>We send the following form data in the request body:</p>
 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4fn3ug600n3ha8s2nc8w.jpg)
<p>When adding an entry to the server the response must contain the id assigned there: </p>
<p>&nbsp;{"id":"ImurRuK1k59qzy2f"} </p>
<p>This is important not to lose the connection between the data on the server and the client. The same id will now be used on the client.&nbsp; </p>
<p>To change data in table rows,&nbsp;<strong>PUT method&nbsp;</strong>is used. </p>
<p>We select the first row in the table to edit it in the related form. Then we change them and save. The entire record (object with data) with the changes will be sent to the server.&nbsp;</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/p776m1ovqx7ob4xlj44h.jpg)
<p>The server will return the following JSON: </p>
<p>&nbsp;{ status: &ldquo;updated&rdquo;}. </p>
<p>To delete data,&nbsp;<strong>DELETE</strong>&nbsp;<strong>method&nbsp;</strong>is used. </p>
<p>We delete the first row by clicking on the cross icon. </p>
<p>In this case, the entire row will be passed to the server. The main thing in the parameters is the id of the record to be deleted on the server.&nbsp;</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/va8mqgzmtq7ubhtck6be.jpg)
<p>The server will return an empty object, since no special confirmation is required for this operation. </p>
<h2>Tracking loading results</h2>
<p>To&nbsp;count the number of records loaded into the table and output it as a message, we&nbsp;use the<a href="https://docs.webix.com/api__link__ui.proto_ready_config.html">&nbsp;ready</a>&nbsp;handler. </p>
<p>The&nbsp;<strong>Ready</strong>&nbsp;handler is called once the first data is available in the component. We put the webix.message() function inside the handler calling the<a href="https://docs.webix.com/api__link__ui.datatable_count.html">&nbsp;count</a>&nbsp;method. When the data is loaded, the notification &ldquo;Loaded 250 records!" appears in the right upper corner of the screen.&nbsp;</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fpmqu5wm17ai8adqu7ko.jpg)
<p>Loading data:</p> 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fkfkpx3vw9jz7jby7pg6.jpg)
<p>In case of an error, the onLoadError event is triggered:</p> 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kegjtmll5gup8wv3h34x.jpg)
<h2>Tracking the result of saving</h2>
<p>To get the server response for adding, editing, and deleting operations, we&nbsp;access the&nbsp;<a href="https://docs.webix.com/desktop__dataprocessor.html">DataProcessor</a>&nbsp;module. You can use the API of this module to tune the data saving more precisely. To track the moment of saving, we use the&nbsp;<a href="https://docs.webix.com/api__dataprocessor_onaftersync_event.html">onAfterSync</a>&nbsp;event. </p>
<p>The DataProcessor module is accessed with the webix.dp(id) method, where id corresponds to the widget in question (here - Datatable). </p>
<p>The onAfterSync event is called after the response from the server is received and processed. In the event handler, we render a message via webix.message(). After saving, the phrase "Saved!" appears in the right upper corner.&nbsp;</p>
<p>We delete the first row in the table and here is the result.&nbsp;</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/199phw07pb3ygqd6uex1.jpg)
<p>The events handler code is in the script.js file after Webix UI initialization: </p> 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0ap888nnv2s6tqff2xh1.jpg)
<p>Errors in this case can be detected with the<a href="https://docs.webix.com/api__dataprocessor_onaftersaveerror_event.html" target="_blank" rel="">&nbsp;onAfterSaveError</a>&nbsp;event:&nbsp;</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/y32m5h29edy21d2a30rg.jpg)
<h2>Summary</h2>
<p>Using CRUD operations, we unout how to interact with the server part of the application. We considered the standard set of query methods and the way to track data loading and saving. The examples discussed in this article are available both for the DataTable and&nbsp;List&nbsp;widgets. Use the source code referenced at the beginning to try everything yourself.&nbsp;</p>
<p>The code of the finished application is&nbsp;<a href="https://github.com/sashko-web/sources-for-articles-webix/tree/part-6-server-side">here</a>.&nbsp;</p>