Archive

Archive for September, 2022

Databases For Front-End Developers: The Concepts Under The Hood (Part 2)

September 1st, 2022 No comments

In Part 1, The Rise Of Serverless Databases, of the “Databases For Front-End Developers” series, we talked about the hurdles and traps of scaling and maintaining your databases. We went from simpler and specialized alternatives like Content Management Systems and spreadsheets to self-hosted databases and, finally, to Serverless Databases.

Today, we go deeper into the rabbit hole. We will explore concepts to equip you to have your own opinions about which kinds of databases suit your specific needs. And this is important to stress up front: there is no right answer. Each database carries its own set of tradeoffs and advantages. If something looks like a “one-size-fits-all” solution, be careful: you might be missing something!

Anatomy Of A Database

Before we begin, it’s important to highlight that what we loosely refer to as “databases” are actually “Database Management Systems (DBMS).” A DBMS is a piece of software that enables the user to more ergonomically write, read, delete, or update information in a given set of data. For this series, we will focus mainly on Relational and Non-Relational DBMSs. There are many other types, all categorized by their data structures, but relational and non-relational are the most common for web development by any measure.

Both Relational (R) and Non-Relational (NR) DBMS have different terms for the parts that compose them. Such components are almost interchangeable in definition, and that’s why you can commonly hear a developer referring to a Document (NR term) as “Table,” which is its Relational equivalent structure. Don’t be afraid of confusing them; they appear often enough for this cognitive overload to disappear quickly with usage. Additionally, once you get more familiar with the differences of each data structure, you will realize they probably shouldn’t be used interchangeably because there are differences among them. But for now, and for the sake of simplicity, let’s focus on the similarities:

  • Schema
    It’s the description of the database (like a blueprint), describing the landscape of the database in a supported language. This is required by relational databases, and though not required by non-relational DBMS, many interfaces offer a possibility to define it too.
  • Tables (R/NR), Collections (NR)
    It’s the logical data structure, unsorted. A relatable example of this would be a spreadsheet table or a group (collection) of JSON objects.
  • Databases (R/NR)
    It’s the logical grouping of data. You group your tables in databases (user database, invoices databases) and your documents in indexes based on how you intend to query them.

Keys And Columns

To use a more familiar example, let’s take a JSON object as an example:

{
  "name": "Atila"
  "role": "DX Engineer at Xata"
}

Given that JSON, a column would be represented by the key-value pair (column name has value “Atila”), and the key follows the same meaning as the JSON spec, key name will access the value “Atila.”

A table has columns, and each column’s name determines the key with which you can access a value in a record.

In addition to the above definition, there are special kinds of keys. Such keys play a special role in the schema of your database and how you will interact with your data. Define these wisely: any minimal change to them can be considered a breaking change to your data layer.

  • Unique Keys (UK)
    The keys that are unique between records on a table. They also accept null.
  • Primary Keys (PK)
    It’s a special kind of Unique Key. There can only be one Primary Key per table, and it can never be null (Primary Keys are always considered required). Primary Keys are also indexed by default, helping with queries that want to filter on the value.
  • Foreign Keys (FK)
    When there is a relation between tables, the keys are represented as foreign keys at the extraneous table.

Example of Foreign Key: if each author in an authors table has posts (and posts is another table), post.title will be a FK at authors. And the junction between authors and posts is called a relation.

Mapping Your DBMS

Once you look at the different data structures and choose your DBMS, you are ready to draw the first connection from your data layer to your application layer. And suddenly, you noticed it isn’t quite straightforward to bring data from the database to your client-side (or even to your server-side API in some cases).

Here comes ORM (Object Relational Mapping) and ODM (Object Document Mapping) to assist your developer experience. Prisma is probably the most widely used ORM at the moment, while Mongoose has the largest ODM user base. It’s important to note they are not a requirement for connecting to databases. Still, if you keep an eye on how they build your queries (some specific cases can present performance issues on the account of the abstraction), they tend to make your life easier and fetching or writing data much more ergonomic.

When it comes to serverless databases, the need for them becomes a bit more questionable. And this is because many of these databases provide the users with an officially supported Software Development Kit (SDK). Your mileage will vary depending on the SDK, but they tend to have a big feature overlap with ORMs and ODMs, especially on databases that will keep the data layer behind an API (Xata, for example). This way, you won’t need to worry about translating your queries, and you can demand equivalent ergonomics between the SDK and an ORM.

Common Concepts

In this part of our series, we are learning what to look for when choosing the stack for our data layers. It is essential to understand common concepts around maintaining and choosing a DBMS (from here on out, we’re back into referring to them as “databases” to remain consistent with the rest of the world).

The next sections will not go so deep that you jump out and find a job as Database Administrator (DBA), but hopefully, it will offer you enough ammo to engage in conversation with experts and identify the best solution for your use cases. These concepts are common for every kind of data layer, from a spreadsheet to a self-hosted database and even to a serverless database. What will vary is how each solution will balance the variables intertwined in these paradigms.

As Thanos (from Marvel: Infinity Wars) would say: “perfectly balanced, like all things should be.”

The most important concepts, to begin with, are Consistency, Availability, and Partition Tolerance. They’re better understood if presented together because the balance between them will guide how predictable your data is in different contexts.

CAP Theorem

This theorem describes the relationship between 3 components in a distributed system: Consistency, Availability, and Partition tolerance (C.A.P). The overall conclusion is easy to summarize: any system is only able to contemplate 2 of these components at the same time. Though just a simple sentence, this idea requires a bit of unpacking.

Consistency (C)

Within the CAP Theorem constraints, “consistency” refers directly to the data. When different clients make the same request, they will get the same response. When a written request is accepted and confirmed, all users will have access to this updated information at the same time.

Availability (A)

Every request will receive a response with data. No errors. However, this comes with no promises on whether the data is up to date or not. Depending on whether this is paired with consistency (C) or partition tolerance (P), you will get different behavior.

Partition Tolerance (P)

A “partition” is when the connection between two nodes in a system is broken. The CAP Theorem essentially describes how a system will tolerate the partition: enforcing availability (AP system) or enforcing consistency (CP system). Regardless of how small a system is, partitions can always happen. Therefore there is no such thing as a CA system.

To provide a more graphical example of each system, we can consider:

  • AP System
    Another node has a copy of the data. The user will get information back but without promises of it being 100% correct (up-to-date). It’s commonly implemented with DynamoDB, Cassandra, and so on.
  • CP System
    To return an error and accept the transaction is impossible. It’s commonly implemented with traditional sharded DBs, Citus, for example.

Though popular and very often referred to, the CAP Theorem can be considered incomplete because it doesn’t consider situations beyond the network partition. Especially today, with high-availability content delivery networks (CDN), and extreme connectivity, it’s crucial to take into consideration latency and deeper aspects of consistency (linearizability and serializability).

Consistency Confusion

It’s funny how “consistency” is a term that switches meanings based on the context. So, in the CAP Theorem, as we just saw, it’s all about data and how reliably a user will get the same response to the same request regardless of which partition they reach. Once we take a step away from our own system, a new perspective makes us ask: “how consistently will we handle concurrent operations?”. And just like that, the CAP Theorem does not sufficiently describe the intricacies of operating at scale.

There is a third meaning of “consistency,” which we will save for later; it’s part of yet another acronym (ACID). If the last paragraph left you scratching your head, I can’t recommend enough “Inconsistent Thoughts on Database Consistency” by Alex DeBrie.

PACELC Theorem

The first three letters are the same as CAP, just reordered. The “consistency” in the PACELC Theorem goes deeper than in the CAP Theorem. It follows the Consistency Model, which determines the contract between a data store and a system. To make things less complicated, consider the PACELC an extension of the CAP Theorem.

Beyond asking the developer to strategize for the event of a network partition, the PACELC also considers what happens when the system has no partitions (healthy network).

ELC stands for Else: Latency or Consistency?

  • Latency: Can you accept an occasional stale response for the sake of performance?
  • Consistency:
    • Linearizability: Will you accept a higher latency to sync data in all nodes of a network before considering the transaction done?
    • Serializability: In the event of concurrent transactions on the same data, will you handle them in parallel or in a queue?

Because of this, I consider the PACELC carries a better mental model for this new era of Serverless Databases. When healthy, it’s not a scalar classification “AP” or “CP”; it accepts a spectrum because latency can be high or not, and consistency can have different levels as well.

Once we start talking about the types of databases and their data structures and which guarantees each can give, we will also talk about a bit of system architecture and how your architecture can reduce the tradeoffs when even by enforcing consistency, you can strive for a low latency scenario.

See You Next Time

With that, I believe we are ready to start narrowing down our discussions on the differences between each database type. Moreover, it’s possible to discuss and level expectations on each solution taken and analyze architectures individually. From now on, we will focus on Relational and Non-Relational databases.

In a few days, on our season finale, we will cover the differences between NoSQL and SQL: what guarantees to expect, what that means to your data, and how that affects development workflow. Then we will be ready to jump right into Serverless Databases and what to expect going forward. I can’t wait!

As usual, feel free to reach out to me with feedback, questions, and/or requests for the next part.

Categories: Others Tags:

Useful JavaScript Data Grid Libraries

September 1st, 2022 No comments

This article is a sponsored by Bryntum

While there exist numerous data grid libraries with similar features out in the world, not all may adequately fit your business and app use cases. When choosing a suitable data grid library for your application, you must consider its feature set, performance, price, license, and support, among other factors. In this article, you’ll get a rundown of some popular data grid libraries that would be a great addition to any data-heavy application.

But first, let’s break down what a data grid is. A data grid is a table component that usually loads, presents, and manipulates a large data set. They typically ship with extended functionality like data filtering, sorting, selection, streaming, aggregation, highly configurable columns and rows, and so on to help users better read and handle the massive dataset. More specialized data grids even embed other components like charts and enable in-table editing. Owing to the enormous data they handle, data grids are often built with efficiency and streamlined performance in mind. Moreover, they tend to be highly customizable and extendable to meet niche use cases related to the data they present.

Data grids can be applied to a variety of use cases. For one, you could use them for simple tables while taking advantage of their enhanced search, filtering, aggregation, and functionality. Data grids can be essential on KPI dashboards to get a unified view of multiple indicators from several data sources. Another area they can be useful is on financial dashboards, where tracking and visualizing accounting and financial information is crucial. Data grids can also be helpful in inventory management systems to track and manage goods, orders, sales, and other commercial operations. These are just a few use cases they can be instrumental in.

This article will run down a list of popular data grid libraries specialized for handling large datasets. They will be evaluated on a number of different factors:

  • Feature set,
  • Price,
  • Licensing options and open source status,
  • Frontend framework support,
  • Ease of customization and extensibility,
  • Performance,
  • Documentation, learning resources, community, and offered support.

AG Grid

AG Grid is a mature and fast data grid with features such as:

  • Row and range selection;
  • Filtering across multiple data types;
  • Cell rendering;
  • Advanced in-table editing;
  • Grouping, pivoting, aggregation, and tree data;
  • CSV and Excel import and export;
  • Drag-and-drop functionality;
  • Clipboard functionality;
  • Embeddable components and accessories like tools panels, sidebars, menus, and so on;
  • Chart integration;
  • Internationalization;
  • Keyboard navigation.

Originally designed for Angular, it now also supports vanilla JavaScript, React, and Vue. It supports live data streaming. The grid’s layout and styling of its columns and rows can be customized through themes and CSS/SASS styling. “Accessories,” external components, and charts can be added to it to extend its functionality. While it offers a basic open source community version that is free to use, it does offer a licensed paid enterprise version with expanded functionality. The documentation available on its site is very detailed, but AG Grid only provides dedicated support for its enterprise product.

Bryntum Grid

Bryntum Grid is a pure JavaScript cross-browser compatible high-performance data grid. While it has a rich feature set, some of its more notable features include:

  • Inline cell editing;
  • Cell tooltips;
  • Customizable cells;
  • Localization and responsiveness;
  • Drag-and-drop columns and rows;
  • Column reordering and resizing;
  • Row filtering;
  • Keyboard navigation & Accessibility;
  • Scrollable grid sections;
  • Row grouping;
  • Grouped headers;
  • Summaries and aggregation;
  • Search and quick find;
  • Sorting;
  • Tree view;
  • PDF, PNG, and Excel export;
  • Virtual rendering;
  • Paging;
  • Multiple themes.

It integrates with any frontend framework, including Angular, React, and Vue. Bryntum Grid is optimized for superior rendering and scrolling performance through its virtual rendering. You can check out Bryntum’s detailed performance review here. When it comes to cost, Bryntum offers their grid on per-product pricing at a reasonable price. You can also purchase their complete bundle that includes other useful components like schedulers, Gantt charts, and calendars, among others. The grid is not open-sourced.

Bryntum offers training, webinars, guides, and various levels of extensive support that come in handy when learning to use the grid. Its API documentation is robust and covers multiple frontend frameworks, and there is a multitude of live demos on its site that demonstrate the grid’s powerful features.

Handsontable

Handsontable is a spreadsheet-like data grid with these note-worthy features:

  • Custom column headers and menus;
  • Summaries;
  • Column and row hiding, moving, and freezing;
  • Column filtering, sorting, groups;
  • Column and row virtualization;
  • Custom row headers;
  • Row sorting, pre-population, and trimming;
  • Clipboard functionality;
  • Selection;
  • Cell merging and rendering;
  • Cell editors and validators;
  • Comments;
  • Multiple cell types like dates, passwords, checkboxes, and so on;
  • CSV and other file type exports;
  • Internationalization.

It works with plain JavaScript, Angular, React, and Vue. Handsontable can efficiently handle large datasets without performance problems. You can build and use your own custom plugins to extend the functionality of the grid. It has a free and open-source version for personal projects and a commercially licensed version that you can purchase. The Handsontable commercial offers extended support. Its API documentation is thorough, and its site provides many examples, guides, case studies, and a developer forum.

DHTMLX JavaScript DataGrid

The DHTMLX JavaScript DataGrid is a grid that ships as part of the DHTMLX Suite UI widgets library. Some of its important features include:

  • Data editing, formatting, sorting, and filtering;
  • Row and cell selection;
  • Column drag-and-drop and freezing;
  • Column and row reordering;
  • Tooltips;
  • Excel exports;
  • Keyboard navigation.

The DHTMLX DataGrid is compatible with React, Angular, and Vue. The grid’s rows, cells, footers, headers, and tooltips can be customized through its API with CSS styling and templates. The library it’s included in is not open source. It has a free standard edition with a limited API that sometimes makes it cumbersome to nearly impossible to adapt the component to basic professional requirements. Its PRO paid licensed edition ships with expanded functionality that solves the aforementioned issue. On its website, you can find in-depth documentation, samples, demos, and a community forum. Expanded technical support is included only in the PRO edition.

Kendo UI Data Grid

The Kendo UI Grid is a data grid that is part of the Kendo UI library that bundles several other components. A couple of its essential features include:

  • Excel and PDF selection, copying, and exports;
  • Inline, pop-up, and batch data editing;
  • Custom data editors and validators;
  • Column virtualization for local and remote data;
  • Filtering, sorting, selection, search, sorting, and drag-and-drop;
  • Row and toolbar templates;
  • Frozen, sticky, resizable, and reorderable columns;
  • Column menus and multi-column headers;
  • Globalization and localization.

The Kendo UI library is available in jQuery, Angular, Vue, and React versions. The grid supports live data loading. The libraries are native to each framework it’s released for and are not wrappers. As such, they have fast native performance. Its column and row virtualization features render only visible parts of the grid for better performance. The library ships with themes that can be used to customize the grid. The other components available in the library can be embedded within the grid to extend its functionality. The library is not open source nor free. The grid has comprehensive documentation, demos, and samples, and its site has a knowledge base. It also has a community forum and feedback portal. Expanded support services are offered to its customers who purchase licenses.

DevExtreme Data Grid

The DevExtreme Data Grid ships as part of the DevExtreme component suite. Its noteworthy features include:

  • Filtering, sorting, grouping, and searching;
  • Data summaries with aggregate functions;
  • Master-detail layouts;
  • Row, batch, cell, form, and pop-up data editing;
  • Data validation;
  • Single to multi-select record selection;
  • Fixed, resizable, recordable, and hidden columns;
  • Customizable Excel exports.

The suite is compatible with jQuery, Angular, React, and Vue. It has a non-commercial license that is free but has limited features. Its complete license version isn’t free but enables pro features. The grid can load and bind to the large datasets server side. However, beyond 10,000 rows in the grid, it is easy to spot the frame rate dropping when scrolling. The suite offers a theme builder that you can use to generate a custom theme for the data grid. On the DevExtreme site, demos, code examples, exhaustive docs, and webinars are made available, and you can file tickets if you encounter bugs. Dedicated support is only offered to complete license holders.

FusionGrid

FusionGrid is a data grid that is part of the FusionCharts library. It ships with these features:

  • Filter, sort, and search;
  • CSV, JSON, and Excel exports;
  • Row and cell selection;
  • Nested columns and column grouping;
  • Real-time data updates.

FusionGrid offers free licenses for non-commercial use. Enterprise customers have to purchase licenses that are available at a variety of pricing tiers. The grid works with plain JavaScript and frontend frameworks like Angular, React, and Vue. FusionGrid supports the loading of large datasets without hampering performance. It is not open-sourced, and its site provides limited documentation and examples, so only paid license holders receive dedicated technical support.

Tabulator

Tabulator is an open-source and free data grid with a rich feature set that includes:

  • Keyboard navigation and touch-friendliness;
  • Tree structures;
  • Connect tables;
  • Row, cell, and column context menus;
  • User action history, undo or redo actions, and a clipboard;
  • Column summaries and calculations;
  • Localization and RTL text direction support;
  • CSV and Excel exports;
  • Themes;
  • Data editing, validation, formatting, persistence, and mutation;
  • Row selection and grouping;
  • Filtering and sorting;
  • Column and row freezing.

It is written in pure JavaScript and works with several frontend frameworks, including Angular, React, and Vue. Large data sets are rendered in it fast with a virtualized DOM. Customization of the grid is only limited to CSS styling. It has comprehensive documentation and examples on its site. The vibrant community of contributors behind it can be interacted with on Discord and GitHub.

Toast UI Grid

Toast UI Grid is part of the Toast UI library. Some of its notable features are:

  • Data summaries and calculations;
  • Hierarchical tree data representation;
  • Custom data input and editing elements;
  • Themes;
  • Keyboard navigation;
  • Clipboard functionality;
  • Custom cell renderers;
  • Virtual scrolling;
  • Frozen, hidden, resizable, and reorderable columns;
  • Selection and sorting;
  • Cell merging;
  • Data validation.

The grid is free and open source. It is distributed in three packages for plain Javascript, React, and Vue. Its enhanced virtual scrolling functionality lets you load large datasets without degrading performance. The grid can be customized using themes for a unique look and feel. Its website offers exhaustive documentation and detailed examples on the grid.

FlexGrid

FlexGrid is part of the GrapeCity Wijmo UI component library. Some of its features include:

  • Client-side and server-side data binding;
  • Cell customization;
  • Cell data maps;
  • Virtual scrolling;
  • Clipboard functionality;
  • Editing, sorting, and filtering;
  • Grouping and aggregation;
  • Tree Grids and a Master-Detail mode;
  • Excel imports and exports;
  • PDF exports and printing;
  • Globalization and Right-to-left text direction support;
  • Row and column pinning and freezing;
  • Sticky headers;
  • Search and filtering;
  • Column drag-and-drop reordering and resizing;
  • Cell merging.

FlexGrid works with Angular, React, Vue, and PureJS. Its bundle is small, and the grid is fast and loads quickly. You can customize cell content with data maps. Unfortunately, Wijmo is not free or open-source. The GrapeCity site provides in-depth documentation, a knowledge base, a forum, case studies, white pages, demos, webinars, and video content. Technical support is offered at a premium, separate from the license purchase.

FancyGrid

FancyGrid is a grid library with chart integration. Its notable features include:

  • Filtering and sorting;
  • Chart integration;
  • Theming;
  • Checkbox selection;
  • Row and header grouping;
  • Forms;
  • Excel and CSV export;
  • Internationalization;
  • Column reordering;
  • Grid to grid drag-and-drop;
  • Tree Grid, sub-grids, and sub-forms.

This library works with plain JavaScript, Angular, React, Vue, and jQuery. You can extend its functionality by embedding charts and customizing it using the themes it offers. Its source code is available on Github, and licenses are available at several tiers. Its documentation is good and contains detailed examples. Technical support for license holders is available through Slack and other communication channels.

Webix Data Table

Webix Data Table is part of the Webix UI library and includes features like:

  • Editing, sorting, filtering, and validation;
  • Row and column drag-and-drop and resizing;
  • Clipboard support;
  • Column grouping;
  • Header menus;
  • Sparklines;
  • Sub-rows and sub-views.

Webix is offered on a free and a paid license tier. It works with jQuery, Angular, React, and Vue. Its components are small and written with pure JavaScript. Unfortunately, the lack of row virtualization makes the component unsuitable for big data sets unless you use paging. You can customize the grid only using CSS. The standard version of the library is free and open source, while you need to purchase a license to access its enterprise version. Detailed documentation, webinars, tutorials, and samples are available on its site. Technical support is only available for license holders.

Conclusion

Data grids are essential in developing any modern SaaS or internal business-critical applications. A good table component should offer advanced functionality like configurable cells, rows, and columns, sorting, filtering, grouping, summaries, and so on. Data grids mainly improve the readability and make the manipulation of large datasets easier. Professional data grids should also be able to handle massive amounts of data without degrading your app’s performance. They also need to be customizable and extensible to fit niche use cases related to the data they present. When choosing a data grid library, you have to consider the frameworks it works with, pricing, licensing, technical support, and whether its feature set fits your business needs.

Categories: Others Tags: