Dimensional Data

In our final outing in this miniseries about using Tabulator in your TMS WEB Core projects, we’re going to focus primarily on one area – performance.  While Tabulator in its simplest form is amazingly quick, there is a lot more to the performance equation than just Tabulator itself.  We’ll also look at one way to implement image lazy loading, potentially applicable to any TMS WEB Core project.  And we’ll even explore one way to monitor the progress of downloading data from an XData server. By the time we’re done, you should be well-equipped to build not only functional projects, but highly performant projects as well. Motivation. One of the defining characteristics of any application, whether it is a web app, a phone app or a Windows desktop app or any other app, is how much time the user spends waiting.  Waiting for the app to load.  Waiting for the app to display data.  Waiting for the app to respond to some kind of interaction. For example, clicking a button should ideally provide some kind of feedback, even if the action being triggered cannot be completed immediately.  Scrolling should also be as fast as possible.  “Buttery smooth” as one famous person in our field liked to describe it. There are plenty of statistics to be found (naturally, with varying degrees of applicability) that relate app performance to user retention.  If an app is slow, they’ll quickly move on to something else. So we owe it to our users (and ourselves!) to make things as absolutely performant as we can. There’s almost always something that can be done to make an app faster. But is it worth it? Tabulator. Just How Fast Is It? One of the first questions to address, then, is about Tabulator itself.  There are many JS grid libraries around.  Which one is fastest?  Well, we’re not the first to come up with that question.  In fact, there’s a GitHub project focused on exactly this – JavaScript Data Grid Performance Comparison. Unfortunately, the Tabulator figures are not yet included in their results, though a PR is pending. You can read more about it here, though. The news is good – the current version of Tabulator is easily among the top performers in this comparison in every respect.  So we’re already starting out strong in the performance department. While using Tabulator with all its defaults is great, one of the benefits to many of these JS grid libraries is the ability to customize what it is doing, as we’ve been seeing over these last several posts.  And sometimes, that customization can come at a cost if we’re not paying close attention.  As an example of this, in a previous outing, we made some changes to include the row count in the column header of our tables.  We implemented this using Tabulator’s own updateColumnDefinition() function, which did exactly what we wanted. However, it turns out that this function essentially drops and recreates the entire column (so it can be sure that all the column definition parameters are accounted for). When doing this with a column filled with images, this ended up being enormously expensive. And it also triggers a table refresh, which interferes with the live filtering function.  This particular issue is something that is being addressed by the Tabulator team […]

Creating Secure and Manageable Database-driven Web Services with TMS XData and Delphi With great pleasure we announce another great collaboration with Wagner Landgraf, architect TMS Business tools and Holger Flick, TMS evangelist and Embarcadero MVP. As of today, this new course is available for those who are interested. The course will also have a RAD purchase option which will give you 20% off! Click on the link below or use the coupon code RADPURCHASE. All information can be found here. This course will teach you step-by-step how to create TMS XData Web services in Delphi. First, the main focus is to create a template that you will be able to use in all your future TMS XData projects. The template will get you set up to create Web services with: configurable database connectivity, server parameters in a resource file, a modern UI with tray icon, switching to deployment as a Windows service, logging access control using JSON Web Token (JWT) This template will then be used to great a Web service for an example scenario. In this scenario, you will design a database, connect it to the template, implement the Web service backend, and then implement three clients. One VCL client to upload data from a CSV file into the Web service, and another VCL client to browse data from the Web service in a data grid and visualize it in a chart. The last client will be written in TMS WEB Core as an example for a Web client. All clients will implement user access control using JWT and a login dialog. The course is grouped into the following sections: Introduction Detailed introduction to the course. Some videos are free to watch before purchase which will allow you to determine if this course hits “all the marks” for you. I will start by giving an overview of all the course topics, describe the example scenarios, but will also motivate this course by giving examples for real-world Web services. Finally, we will prepare the development environment installing all the products and learning about TMS project wizards. Create a new TMS XData project Jump right into the development of a Web service with Delphi! You will learn how to create a new server and its associated project structure, get a glimpse at using version control, and where to download the source code of this course The section will close with a detailed look at the different components of an XData server and how to set up Windows to host a server. Updating the server container The server container is the core part of an XData server and will be discussed in detail. In particular, we will introduce the Singleton pattern to facilitate its accessibility in the server application. Adding services to the server Services are the means how you can add functionality to your Web services. An XData server can hold as many services as you design. In this section, you will implement your first service and its endpoints. Lots of examples will be given. Focus will be how to look at the data that is returned, how the data is formatted, how you define the data that is returned, and how you can easily browse your XData server using SwaggerUI. Adding database connectivity Using databases with Web services is an […]

Last time, we took a look at some of the ways that we can edit data in Tabulator in our TMS WEB Core projects. And that was just the most basic introduction to a very large and complex topic overall.  This time out, in our penultimate stop in this Tabulator miniseries, we’re going to look at how to get those changes out of Tabulator and back into our databases or wherever else we need to send it.  We’ll also augment our example from last time with a proper navigator and clean up a couple of the editing options.  And then we’ll look at how to create PDF, XLS and CSV files directly from Tabulator. Motivation. Having any comprehensive JavaScript grid control is great, and Tabulator is just one of many such controls.  Having a grid control that can do almost everything all by itself is also great.  But there may come a time, specifically if your grid supports editing, when it has to give up its data, or at least its changes, so you can send it elsewhere. And giving the user some degree of control over that process, or at the very least, some level of confirmation, then everyone benefits.  The plan for this post, then, is to offer up some ideas, both on how to implement the actual data transfer-type mechanisms and on how to keep the user informed. Navigator. When doing database work in a traditional Delphi application, there’s a handy little DBNavigator component that you can link to your TDataSource that provides a consistent set of buttons for things like next/previous or save/cancel operations.  In TMS WEB Core, there’s also a TWebNavigator that can be linked to a TWebDataSource in the same way.  But a Tabulator table isn’t really a TWebDataSource, so they can’t be linked in that way.  So let’s start out by making our own navigator for Tabulator. The underlying purpose is to help become more familiar with how Tabulator tells us what is going on in the UI, via events and so on, so that we’ll be better able to understand how it does the same thing when data is changing. As a bonus, we’ll have a handy place to put some of the other things that we’ll need a spot for as well.  So to start with, we’re going to pretty up our example from last time and add a placeholder for the navigator.  We’ve covered some of these design items previously, so I’ll just list them here for reference purposes.  But by all means, please post a comment if you’d like a bit more information on any of them. Bit of styling for the whole Tabulator – rounded corners, new font, darker column headers. Added a CSS for the styling that we don’t handle in code. Put Tabulator inside another DIV, with some additional styling for the outer DIV. Added Interact.js so the DIV can be moved around and resized. Drag from the navigator. Added ‘selectable’ option, so we can visually see what record is currently active. Added a placeholder DIV below the table where the navigator will be Adjusted columns and layouts to be more ‘responsive’ – give it a try! Numerous adjustments to the individual columns and editors.  Check the code for details. So our starting point for today […]