Webix JavaScript library through the eyes of a freshman. Part 6. Interaction with the server
I am a newbie front-end developer. At the moment I am on probation in an IT company in Minsk. I study web-ui development with the JS Webix library. I am looking forward to sharing my humble experience and to saving it in a sort of a study guide of this interesting UI library.
SIXTH TASK
Webix is a JavaScript library where operations first occur on the client side, and only then the result is sent to the server if the data needs to be saved. There are no strict requirements for the back-end. It doesn’t matter how the data is processed on the server, the main thing is that it should be able to process requests of a certain format and provide responses in a correct format. All that is required from the developer is to connect the server and work with simple queries, in case custom behavior is not intended for the project.
Let’s consider the following tasks:
· connecting the server part of the app;
· methods of requests to the server;
· how to track the download result;
· how to track the result of saving.
The article uses the DataTable widget, which is described in detail in the documentation.
The source code for working with the article is here.
You can find the finished application here.
Connecting the server part of the app
Here is an example based on the DataTable widget. The application structure has now been changed in the source code. It used to be an ordinary index.html file with JS files connected to it. Now two folders are added: backend, with a simple server script on nodeJS, and the app folder, with the client code. Server operations for each widget are described in separate files. For the DataTable widget, it is the films.js file.
The DataTable widget code is placed in the table.js file of the app folder and is rendered in the Dashboard tab.
To start, let’s run the app on the local server.
We open the command line for the application folder and execute the following commands one by one:
npm install
npm run server
After that, the following entry will appear in the terminal:
Server is running on port 3000…
Open http://localhost:3000/app in browser
Open the specified link in the browser.
The server script the DataTable widget supports all basic CRUD operations.
To load data into a table we specify the path to the script in its url property.
url: “/samples/server/films”,
To send save requests, the path to the script is specified in the save property. The path will be the same as in the url, only with the rest prefix. We will talk about REST further.
save:”rest->/samples/server/films”,
Methods of requests to the server
Request methods define the desired actions with the resource. By default, Webix uses the GET and POST methods, but we will use the RESTful API and all methods that are appropriate for our data operations: GET, POST, PUT, and DELETE.
With the rest prefix already set in the save setting, all requests will be sent via the corresponding built-in proxy. The rest proxy matches the request method with the type of operation we performed on the client. Webix offers several built-in proxies for any issues. If needed, you can create your own custom proxy.
We will track queries using the DataTable widget example. To do this, we go to DevTools->Network in the browser and find the information about the desired request.
To load data to a table, we use the GET method.
We refresh the page and click on the request to the films script.
By default, this request will not contain any parameters, since we are dealing with the first loading of data into the component.
As a result, the server returns us the JSON array with all the data.
Result of the GET request:
To create a new record in the table, POST method is used.
We use the form to add new data to the table.
We send the following form data in the request body:
When adding an entry to the server the response must contain the id assigned there:
{“id”:”ImurRuK1k59qzy2f”}
This is necessary in order not to lose the connection between the data on the server and client. The same id will now be used on the client.
To change data in table rows, PUT method is used.
We select the first row in the table to edit it in the related form. Then we will change them and save. The entire record (object with data) will be sent to the server alongside our changes.
The server response should not contain specific data (the response can also be an empty object, as shown below), but in our case the server will return the following JSON:
{ status: “updated”}.
To delete data, DELETE method is used.
We delete the first row by clicking on the cross icon.
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.
The server will return an empty object, since no special confirmation is required for this operation.
Tracking loading results
Let’s consider a situation when we need to calculate how many records were loaded into the table and output it as a message. To do this, use the ready handler.
The Ready handler is called immediately after the first data is available in the component, and only once. We put the webix.message() function inside the handler calling the count method. As soon as the data is loaded, the message “Loaded 250 records!” will appear in the right upper corner of the screen.
The moment of loading data:
If any error occurs during data loading, the onLoadError event is triggered:
Tracking the result of saving
While saving you can get the server response for adding, editing, and deleting operations. Let’s look at the DataTable widget example.
To do this, we need to access the DataProcessor module that enables saving operations. You can use the API of this module to tune the data saving more precisely. We only need to track the moment of saving, so we use one of its events, which is onAfterSync.
The DataProcessor module is accessed with the webix.dp(id) method, where id corresponds to the widget in question (here — Datatable).
The onAfterSync event is called when the response from the server is received and processed. In the event handler, we will render a message via webix.message(). After saving, the message “ Saved!” will appear in the right upper corner.
We delete the first row in the table and look at the result.
The events handler code is in the script.js file after Webix UI initialization:
Errors in this case can be detected with the onAfterSaveError event:
Summary
Using CRUD operations, we figured out how to interact with the server part of the application. We reviewed the standard set of query methods and the way to catch data loading and saving. The examples discussed in this article are available not only for the DataTable widget, but also for the List. You can try it yourself in the source code referenced at the beginning of the article.
You can find the code of the finished application here.
