Forem: kevbosaurus

Top 5 MySQL GUI tools in 2021

kevbosaurus — Tue, 26 Oct 2021 16:37:18 +0000

Ahead of Postgres and SQLite, MySQL has been the leading relational database for years. This is corroborated most recently by Stack Overflow's 2021 Developer Survey, in which 50.18 percent of all respondents (73,317) claim to have used MySQL extensively and plan to do so in the coming year.

However, many find MySQL challenging to manage despite its simpler design. GUIs have become increasingly central to delivering exceptional user experiences. Database managers are faced with a number of tasks, including the following:

Object management and automation
Data analysis
Creating and executing queries
Developing and debugging stored routines

MySQL Shell might feel unapproachable, and even its fundamental components like MySQL Workbench or MySQL Connectors don't appeal to everyone. Some may not even require every advanced feature under the database's umbrella. Thankfully, the third-party tooling market has grown substantially throughout MySQL's twenty-six-year history.

This article breaks down the leading MySQL tools and their benefits (plus potential drawbacks).

Selection criteria

The goal was to find tools with well-rounded functionality. Each is evaluated on the following:

Features---what can you do with the tool, and how well do these capabilities align with MySQL's native functional offerings? How might these tools exceed expectations, or democratize the utilization of MySQL within teams?
Platform compatibility---is the tool developed for specific OSs, or does it have cross-platform availability for Windows, Mac, Linux, and even the web?
SQL autocomplete support---is the MySQL Intellisense feature baked in or emulated, both to save time and reduce scripting effort within the editor?
Special MySQL support---does the tool integrate with MySQL in any novel ways that differentiate it from competitors?

This assessment is meant to be as objective as possible, with added comments that you might find helpful. Here are the top five picks.

Adminer

Adminer interface, via online demo editor

Perhaps one of the more no-nonsense members on this list (in stock form), Adminer aims to provide powerful functionality within a simplified package. Launched in 2007, the tool prioritizes security, performance, and size. You can select your preferred look from over twenty-five included themes---sourced by Adminer's developers, with others contributed by community members.

Installation

The tool promises robust database management using a single PHP file. This makes it relatively easy to set Adminer up on any machine with PHP. Learn how to set up PHP on your computer with this guide.

You can install optional MySQL database servers either locally or remotely. This second option lets you tap into a remote machine as needed, saving space on your physical drive. Accordingly, it may be advantageous to install any database extensions for MySQL that you cannot live without. This is great preparation for the remaining steps.

Finally, download the latest Adminer PHP file directly from Adminer's website. Any associated plugins you'll want to add are hosted and documented on this website and on Adminer's GitHub page. Getting started is as easy as logging into your essential databases.

Features and MySQL support

To understand how Adminer stands out, compare it with another leading MySQL GUI, phpMyAdmin. Adminer offers numerous improvements, according to its developers:

It's available in a MySQL-only version---purpose-built without excessive bloat
Permanent logins
Automatic field generation
Multi-index manipulation
Complete foreign-keys support with an associated interface
Full support for triggers, routines, and events
Absolute and relative modification support in bulk
Safer row cloning with confirmation, avoiding overwrites
Seamless anywhere-synchronization using an ALTER export
Multi-query SQL results displayed in a single view
Concurrency with multiple tabs during complex operations

Adminer requires secure logins for all integrated databases, and employs rate limiting to thwart brute force attacks. It's built to be lightweight and rapid thanks to asynchronous data downloading. Table fetching isn't a limiting factor when requesting lists.

Among other features, Adminer allows plenty of table manipulations---especially those involving listing, indexing, altering, creating, dropping, and adding records or indexes. You can execute any SQL command using text fields and files. It's also possible to create new databases, export data structures, kill processes, and display users alongside their rights. Adminer allows all of this while encouraging you to harness your preferred data type.

Best use cases

The makers of Adminer highlight two seemingly paradoxical benefits: its simplicity and its customizability. But customization isn't necessary to get the most out of the GUI. It's available for power users, while the base package remains usable to novices.

That said, flexibility is a major strength of Adminer. It allows experienced developers to stretch their capabilities with plugins, extensions, and other APIs. It's great for those with solid knowledge of PHP and avoids the one-size-fits-all pitfalls of other applications. Finally, the toolset is welcoming to newcomers thanks to liberal inclusion of text fields, drop-downs, toggles, checklists, and radio buttons.

Beekeeper Studio

Decidedly the junior compared to something like Adminer, Beekeeper Studio first launched in early 2020 as a modern approach to MySQL database management. This is reflected in its aesthetic, which mirrors that of other GUI-centric applications in the past five years. The interface and editor come with numerous content views, most of which are information-rich and well-organized. Development has also been steady, with forty-one releases in the past year and a half (at the time of writing).

Installation

Beekeeper Studio is compatible with Windows, Mac, and Linux. The program is built primarily using Vue, TypeScript, and JavaScript. No PHP downloads are required locally. To get started, install the appropriate .dmg or package directly from Beekeeper's website.

You can get started with Beekeeper within minutes, depending on your OS.

Features and MySQL support

Beekeeper highlights a host of key features on its homepage. Security is highly important, given that SSL encryption is standard for all database connections. Beekeeper will hold onto your password for safekeeping. It also helps you connect through firewalls via specific ports.

Beekeeper Studio supports SQL autocompletion through the built-in editor, which provides dev-friendly features like syntax highlighting and pop-up suggestions. This makes it much easier and less tedious to fly through numerous SQL queries. Beekeeper also provides the following:

Support for dozens of concurrent tabs within one unified window
Quick saving and organization of common SQL queries
Quick and easy data table changes, with the ability to stage changes later on
Straightforward creation, editing, and deletion of table columns, indexes, and relations using the GUI
Data export in CSV, JSON, JSONL, and SQL in just a few steps---even in conjunction with specialized data filters

Beekeeper also supports multiple run contexts. It's possible to run all queries by default, run the current highlighted query, or run selected queries only. Once data is retrieved and arranged in a table, you can filter, sort, and peruse this information however you wish. Beekeeper also supports a number of default keyboard shortcuts.

Best use cases

Beekeeper Studio is designed to work with several DBs, like Postgres, SQLite, and SQL Server. It's not built solely for MySQL and is therefore better suited for day-to-day data lookup and manipulation, as opposed to intensive or detailed projects. Compared to something like Adminer, Beekeeper supports a smaller array of MySQL-specific features, which you might miss.

The editor is the star of the show here. It's attractive, easy to work with, and relatively powerful. If you're looking to bang out numerous lines of SQL queries, you'll feel right at home within the app.

CloudBeaver

CloudBeaver's integrated schema diagrams\
Released around the same time as Beekeeper Studio, CloudBeaver is a smaller, open-source project supported by a stable of thirteen contributors. Because of this, development schedules are a little more deliberate, but that hasn't stopped CloudBeaver from fine-tuning its lightweight, user-friendly GUI. The interface is clean and has both dark and light modes. CloudBeaver also presents users with informative visualizations, keeping you engaged and organized as databases scale. Being a web application, this tool is accessible to a larger subset of users without consuming too many resources or disk space.

Installation

CloudBeaver comes in three flavors. First is the web application, which leverages a web server and JavaScript frontend. While this method is accessible, CloudBeaver warns that the setup process can be somewhat complex.

Next is the popular community build, which is free. CloudBeaver distributes this as a Docker image on Docker Hub or as source code.

The final version is CloudBeaver Enterprise. The development team has made a Docker container specifically for this purpose, or you can secure an AWS-compatible version within the AWS Marketplace. The application is predominantly built using TypeScript and Java.

Installing CloudBeaver requires the Terminal and some scripts. Use either docker pull dbeaver/cloudbeaver:latest to pull the current build, or docker pull dbeaver/cloudbeaver:dev to grab the newest developer build.

You can run CloudBeaver using the Terminal, using daemon mode, or by accessing localhost databases.

Features and MySQL support

At the macro level, CloudBeaver offers you its data editor, data export, entity diagrams, SQL editor, AWS-and-Docker integration (RDS, Redshift, Dynamo DB, Docker Hub), and execution planning. However, let's dig a little deeper to understand how helpful these features) are.

The data editor displays data from tables and queries in a readable list format composed of labeled rows and columns:

Scanning these custom categories and arranging data in a sensible format is doable in a snap. Both relational and document-oriented databases are supported. Quickly view values for all data types, read from tables regardless of length, use the dedicated data-filter panel, or even order tables based on column numbers.

For export, CloudBeaver supports CSV, XLSX, XML, JSON, and SQL INSERTs formats. Entity diagrams offer more interesting features. Should you want to visualize your entire database schema, Beaver will provide a flowchart-style diagram with labels and categorized data points. Unique keys, foreign keys, and automatic layouts are supported by default. You can even export this visualization as a PNG or SVG file for safekeeping.

The SQL editor supports syntax highlighting for different dialects and even provides auto-completion for columns, tables, SQL keywords, and procedures. Query results are viewable in multiple concurrent tabs.

You can integrate CloudBeaver with your AWS account to unlock authorized browsing of AWS databases using AWS credentials and RDS authentication. This type of process relies either on Kerberos or Active Directory, and thus allows you to clamp down on unintended access. You also have compatibility with Docker environments and the ability to serve local or remote databases.

Finally, the execution plan feature generates a query-execution tree in a results tab and evaluates whether scripts and queries are designed to work optimally in their existing formats.

Best use cases

If you prefer integration with AWS, you'll love CloudBeaver. The tool is built from the ground up with these platforms in mind, offering an expansive list of possibilities for serving and pulling databases from multiple sources.

CloudBeaver is also good for team collaboration---you can invite contributors to join project workspaces with a simple, shareable link. It's a viable solution for enterprises and common users alike---while other tools don't offer specialized corporate versions. That alone speaks volumes.

phpMyAdmin

phpMyAdmin demo interface

A stalwart in the database management space, phpMyAdmin launched in 1998 and has since enjoyed voracious support. GitHub has recorded 469 releases since launch---an ambitious schedule made possible by over 1,100 contributors. It's written mainly in PHP.

Installation

At the OS level, phpMyAdmin supports Windows and various Linux distributions. However, be warned that macOS is NOT supported.

Choose an appropriate distribution kit from the website's Downloads page, unzip it, connect to your web server, and configure the tool accordingly. You might opt for MyAdmin's new wizard-style installation, which makes things easier.

There are three other ways to install phpMyAdmin: using a Git package, via Docker, or via Composer. These utilize images and tarballs.

Features and MySQL support

The web-based phpMyAdmin tool allows you to use either the GUI or direct commands.

The tool also offers the following features:

Support for MySQL functions like browse or drop for tables, databases, fields, views, and indexes
Create, copy, drop, and rename functions for the above items
Support for server configuration proposals and server maintenance
Importing and exporting data in a wide range of formats
Administering multiple servers
Creating multi-format database graphics
Creating complex Query by Example (QBE) queries
Global and subset database searches
Transformation of stored data using predefined functions and formats---even converting BLOBs into links or images

phpMyAdmin supports both LTR and RTL languages. The tool has been translated into seventy-two languages, making it accessible for global users.

Best use cases

phpMyAdmin has had plenty of time to develop a list of highly requested features. Administrators and architects can trust it to handle tasks ranging from menial to intricate.

MySQL Workbench

MySQL Workbench was launched in 2015 as a visualization tool for database architects, developers, and DBAs. It's a full-fledged suite that allows you to data model, develop SQL, and administer everything around your databases. It's written mainly in C++ and has twenty-five releases stored on GitHub.

Installation

MySQL Workbench is available for Windows, macOS, and Linux distributions. It's designed to work best with (yet doesn't require) a MySQL server connection, along with simultaneous client connections.

MySQL Workbench can be installed via the command line. However, there are unique installation pathways for each OS.

Features and MySQL support

MySQL Workbench is primarily a GUI-centric tool and thus ditches the scripting interfaces found elsewhere. Designed to work with MySQL Server 5.6+, it offers the following:

create and manage database-server connections, connection parameters, and integrated query execution
assemble data into meaningful graphical designs, reverse and forward engineer between schemas and live databases, and edit all database elements as needed. The Table Editor makes it easy to alter tables, columns, indexes, triggers, options, privileges, inserts, and partitioning
server-instance management, auditing, backup and restoration, and performance-health monitoring
data migration between versions of MySQL or moving data from other database systems to and from MySQL
MySQL Enterprise support

Use cases

Like phpMyAdmin, MySQL Workbench is made for both novices and experts. As the native database management option for MySQL, the tool excels at supporting the database technology without major hiccups. It's perfect for those hoping to keep everything under one proverbial roof.

Conclusion

As you can see, there are plenty of exceptional (and approachable) MySQL GUIs on the market. No tool is perfect, but your needs and preferences will help determine which is ideal for you.

It's also true that simple is often better. At Retool, we work to make it easy to build apps and tackle other projects using your team's data. We aimed for a clean, organized GUI enables you to quickly view, edit, and analyze information whether you prefer lists, tables, or richer visualizations.

To learn more, give it a try.

What is low code?

kevbosaurus — Fri, 25 Jun 2021 22:51:54 +0000

Low code and no code have all the hype, but among developers, they also have equal amounts of skepticism.

In March 2021, no code pioneer Zapier acquired no-code community Makerpad. In April 2021, UiPath, a provider of low code automation software, IPO'd at $31 billion. Gartner predicts that by 2024, more than 65% of application development activity will come from low code application development platforms.

Software is eating the world, but low code and no code are making developers rethink how software is made.

Of course, (some) developers tell a different story. According to an Evans Data report, one in five developers never use low code, and almost three-quarters of developers use low code less than half the time. And anecdotally, many developers express a similar sentiment to low code as Reddit user blahblahblah does below:

In this article, we're going to dig into open questions, including:

What is low code?
What's the difference between low code and no code?
What are the major use cases for low code?
What are the benefits and drawbacks of low code?
What does low code say about the future of software development?
What are some good low code development platforms?

Throughout, we'll return to the thesis that though low code may not be disrupting or replacing software development, it is transforming it.

What is low code? A primer

Low code is the development of software via a visual, drag-and-drop interface. The logic is simple and the UI is intuitive, but the results are scalable, secure, and performant.

The three components of low code

A low code development platform consists of three major components that are, by and large, common across all low code tools and platforms.

A visual integrated development environment (IDE): This is the core of a low code development platform. It's usually a drag-and-drop interface that developers use to model workflows and declare logic. As necessary, developers can also use it to add hand-written code. Typically, developers use the IDE to create most of the app and then customize the last mile with hand-written code.

Connectors: Depending on the low code platform, various kinds of connectors plug the platform into a variety of back-end services, databases, and APIs. These provide extensibility and increased functionality. Developers tend to prioritize connectors because the usefulness of a low code platform is directly tied to what it integrates with. Some early low code platforms are short on connection functionality, leaving developers with with unnecessary workarounds or missed requirements.

Application lifecycle manager: Again, depending on the low code platform, it might also include tools for debugging, deployment, and maintenance across testing, staging, and production. If a low code platform promises robust results that match those produced by hand-coding, then it needs to come with lifecycle management to match the standard software development lifecycle that developers run when creating software from scratch.

Though low code platforms and tools can differ widely, they all tend to share these three components.

What does low code do?

The primary goal of low code is to reduce the amount of "hand-coding" (i.e., code done from scratch) and increase the amount of code reused and apps developed. Low code is highly composable, meaning that when you use the visual IDE to construct a component, it's easy to then reuse that component in different situations. You get the initial speed of using an IDE and then even more speed as you reuse the resulting components.

The reason why it's called "low code" (as opposed to "no code," which we'll get into in the next section) is that low code development is split roughly 80:20 visual coding to hand-coding. You build about 80% of your app using a low code UI and then hand-code the rest---usually last-mile specifications, as necessary. In the below video, for instance, our developer advocate, Chris Smith, uses in-line JavaScript to get an order total for a MongoDB admin panel.

The future of low code is bright

Developers have plenty of reasons to be skeptical of low code. Many have seen the rise of technology fads that similarly promised the reduction---or even the elimination---of traditional programming. The elders among us will remember Visual Basic and PowerBuilder.

That skepticism is belied by the research. According to Mendix research, 99% of organizations surveyed report that they'd benefit from the capabilities of low code platforms.

Our own research shows that 89% of developers enjoy building with low code, 90% of developers believe low code meets their needs, and 89% of developers plan to keep building with low code. And, as we mentioned at the top of this article, Gartner predicts that more than 65% of application development activity will come from low code application development platforms by 2024.

Companies, analysts, and developers agree: low code is here to stay. We're reaching an inflection point where the capabilities of low code technology are actually ready to meet their promised potential.

Low code vs. no code: The differences and similarities

Let's bust a myth right from the get-go: low code and no code are not the same thing. They share some similarities, but on close inspection, those similarities become superficial. At a fundamental level, the technologies are different.

What is no code?

If low code is the minimization of hand-coding, then no code is the elimination of hand-coding.

No code also uses a visual workflow builder and IDE, but it doesn't require developers to hand-code at all, a feature that poses both advantages and disadvantages.

At first glance, that difference seems minor. If anything, it seems advantageous for no code---why code a little when you could skip coding altogether? But it turns out that difference makes all the difference.

Low code vs. no code: the small differences

The first differences you'll notice between low code and no code involve differences among target users, design, and UI. Though these differences aren't minor, they make low code and no code applications look slightly different.

Target user: Low code is for semi-technical business users and technical developers, whereas no code is just for business users. Since low code still involves some hand-coding, many low code tools still require software developers to either handle development or take it over the last mile.
Design: Low code platforms still depend on hard code for software architecture, whereas no code tends to have model-driven workflows and declarative logic.
UI: Low code provides greater flexibility, enabling developers to add hand-written code to visually developed components, whereas no code is a closed system that tends to lock users into the abilities of the no code platform in question. The ramifications of this lock-in vary depending on what platform you choose.

If these were the only differences, you could imagine low code and no code someday converging or a vendor offering a platform that effectively does both. This ignores the fact, however, that low code and no code are different at a fundamental level.

Low code vs. no code: the big difference

No code abstracts away code, whereas low code retains the ability to code. Though that difference might seem small on the surface, the ramifications are profound.

Low code is a natural extension of web frameworks, component libraries, and the long tradition of borrowing pre-built work and adding in nuances that are unique to your situation. Developers have always strived for more composability, and entire businesses have been built on this desire: think API-first companies like Twilio and package managers like npm.

Low code is less a disruption and more a continuation of this tradition. Low code helps developers move faster, both by helping them make decisions and follow through on actions more efficiently. That speed, however, doesn't sacrifice anything---low code respects the fact that developers will still need to customize.

The ability to customize is a DNA-level difference, and it has ripple effects. No code aims at a new audience with a new proposal: turn all of the code into UIs, logic, and simple steps, such that non-technical business users (or "citizen developers") can now "code."

No code, by its very nature, is opinionated and inflexible. While both low code and no code manifest similarities (namely the drag-and-drop visual IDE mentioned above), they approach different problems and solve them so distinctly that the possible end results are entirely different.

5 low code use cases

Low code use cases range from the complex (such as full-on app development) to the relatively simple (such as landing page design).

1. Internal tools

Internal tools aren't flashy, but developers spend a lot of time working on them. According to our research in The state of internal tools in 2021, developers spend nearly a third of their time (30%) building internal applications.

It's not that this work isn't impactful (it is; for companies with more than ten employees, one in three employees are using internal apps a developer has built). It's that internal tools aren't always how developers want to spend their time nor how businesses want to spend their development resources.

With low code platforms, you can develop internal tools faster and even enable some non-developers to build them, too.

2. UI design

Some low code platforms let you build an intuitive user interface from drag-and-drop components. This is especially useful for back-end developers who may have to build dashboards but aren't familiar with UX best practices.

This use case bleeds into others on the list. A popular internal tool, for instance, is a sales dashboard that helps sales reps track deal flow. The sales team might ask a back-end developer to make such a tool, and while the back-end developer can easily handle the data, they might not be able to present that data in an intuitive way.

With low code, a back-end developer can easily spin up a UI that they can layer onto the data they retrieve.

3. Integration and automation

Platforms like UiPath, Workato, and Appian provide ways to integrate apps and automate the processes that connect and flow between them.

Many companies, large enterprises especially, are stuck with legacy infrastructure (think SAP, Oracle, Citrix) that they can't afford to rip out and replace. These companies, however, are increasingly feeling the heat from nimble startups relying on custom-built tools, SaaS apps, and APIs.

With low code, enterprises can achieve some of that speed by connecting and automating those legacy systems. Enterprises can then adjust and iterate much like startups can, leaving them less vulnerable to disruption.

4. Basic app development

Low code tools like Bubble.io enable non-developers to spin up entire web apps, and low code tools like Memberful enable non-developers to add specific features to their apps (in Memberful's case, membership).

Some of the results of Bubble.io, according to their showcase page, include:

Teeming, a cloud-based tool that helps remote teams bond via interactive work sessions
ResidentStreet, a platform that connects people looking for "mid-term accommodations" (1-11 months) with furnished properties
Incomee, an accounting tool for freelancers

This use case is one where the difference between low code and no code really matters. Be aware of the customization limitations of no code as your app scales.

5. MVPs and prototypes

The minimum viable product (MVP) methodology, originating with famed startup expert Eric Ries, asks developers and startups to ship products faster, get feedback earlier, and build with customers in mind. MVPs (and prototypes, a similar idea) are a great use case for low code.

The idea is this: don't invest tons of development resources into an app or feature you're unsure of. When you're building an app from scratch, the necessary up-front investment is immense. You have to think about hosting, the back-end, the front-end, the UI, maintenance, monitoring analytics... the list goes on.

Those are all distractions from what your primary focus needs to be at this early stage: your user and what they need. Low code helps you delay those important business decisions, so that you can make them later, when you have a stable business and customer traction.

With low code, you can get most of the way toward your final product, test it with your customers, and then, and only then, make an investment you're confident in.

Why low code? Benefits and drawbacks

Low code has a variety of benefits and drawbacks, all of which depend on which low code platform(s) you choose and how you use it.

Low code benefits

Though low code comes with many benefits, they generally come down to three core ones.

Increase time to value (TTV)
Compared to hand-coding, low code development gets developers from idea to execution to production much faster.

According to Kintone research, developers using low code tools "get applications out the door faster than large IT departments. They turn around their required applications in a matter of weeks, or a couple of months. Only 17% report turnaround times exceeding three months."

Improve developer productivity and efficiency
Many low code platforms come with pre-built components, and most come with the ability to make components you can reuse, making low code development eminently composable. Developers can borrow, build, and reuse components as they go, making them more efficient over time.

Improved productivity and efficiency is backed up by research, both in terms of sheer speed and the ability to meet previously unmet demand via improved efficiency:

Forrester analyst John Rymer says that low code platforms "have the potential to make software development as much as 10 times faster than traditional methods."
Caspio research shows that 63% of organizations using low code platforms have the skills and resources to fulfill the demand for custom apps, whereas only 41% of organizations not using low code can say the same. Similarly, 61% (as opposed to 38%) of organizations using low code typically deliver custom apps on time, on scope, and on budget.

With low code, developers can ship faster.

Better use of existing staff
Developers are in short supply.

According to the Bureau of Labor Statistics, "employment of software developers...is projected to grow 22% from 2019 to 2029, much faster than the average for all occupations." Demand for software developers is already outpacing supply, despite the ever-increasing need for software. This is backed up by TechRepublic research, which found that 83% of CIOs struggle to find tech talent.

Low code allows already hired developers to move faster (as covered in the previous benefit), but it also allows non-developers, such as operations staff, to take part in development. Companies can produce more software with existing staff.

Drawbacks

Low code isn't without its drawbacks, but you can defeat many of these by choosing a modern low code platform that fits your use case.

Vendor lock-in

Perhaps the top reason developers fear low code tools is the risk of vendor lock-in. Whereas hand-coding is inherently flexible and extensible, low code platforms have the potential to lock developers into a limited ecosystem.

This drawback varies depending on which low code platform you choose. Legacy low code application development platforms, many of which resemble no code more than low code, can absolutely lock you into their ecosystems. Modern low code platforms, however, tend to be built on the aforementioned tradition of composability, meaning that there's an inherent respect for the need to customize.

Retool, for instance, is built on Javascript and SQL, meaning developers versed in those languages can easily add on to what they develop in Retool.

Shadow IT and governance

IT might be resistant to low code adoption.

According to Jason Bloomberg, an IT industry analyst, "IT has been telling business stakeholders for years that the six month/million dollar plan is the only way to build enterprise software," but now, according to Simon Chan, Founder and CEO of DigiVue Consulting, "the same systems can be implemented by smaller players at a fraction of the price and in a fraction of the time," which "has leveled the playing field."

What might appear to be a level playing field to a business user, however, can appear to be a threat to IT. IT has long had to resist the encroachment of so-called "shadow IT," and a low code program might appear to add fuel to that fire. Imagine, the IT admin might fear, if employees were not only adopting SaaS tools without permission but were building apps without permission?

This isn't IT being controlling. There are serious ramifications, especially in terms of security, from letting more people build software. And they're not wrong --- according to Kintone research, more than one in four surveyed organizations have no citizen development policy of any kind in place. The problem is less with low code itself and more with how companies implement and scale low code programs. Eventually, governance becomes necessary.

Scalability

Some developers have an instinctual resistance to low code platforms based on the assumption that any code that isn't hand-written can't be robust enough to scale. This assumption isn't true---low code apps can scale to enterprise proportions---but the nugget of truth is that many low code platforms aren't built with scale in mind.

Outsystems, for instance, in a surprising moment of vendor honesty, notes that "When it's time to scale, integrate with existing systems, or perform under extreme conditions like a mobile banking app on Black Friday, the [low code] application could buckle under the weight of functional and nonfunctional requirements. If an application built with low-code needs updating or if the underlying technology needs changing, good luck."

The solution here tends to be picking a low code platform that *can *develop apps that can scale. And scalability tends to come from leaning into low code's advantages. No code apps are much more likely to suffer from scalability problems because they aren't customized. Use low code to build your foundation but hand-code your way to scalability.

How low code will shape the future of software development

Low code development will not replace traditional software development. Full stop. But it will change software development---and in some areas, the change will be dramatic.

Low code will add (more) abstraction

Low code, understood historically, is another layer of abstraction between developer and code.

You can trace the roots of low code back to the fourth-generation programming languages (think Visual Basic and PowerBuilder) and computer-aided software engineering (CASE), rapid application development (RAD), and business process management (BPM) tools from the 1990s. These early tools and platforms tried to fulfill the same promise modern low code does: build real apps in less time and with less code.

It took another couple of decades for the brand name to form, however. The first popular instance of the phrase "low code" occurred in a 2014 Forrester report and has been on a steady rise since.

Searches for "low-code app development platform" on Google Trends

If you want to get technical, you can trace low code back through the history of code, too. The history of code is itself a history of abstraction: every programming language is a more human-readable version of binary code. What's unreadable to us now, like FORTRAN, was a big step toward readability back in the day. As Nacho Iacovino, developer advocate at Clerk, wrote in a guest post for us, even modern options like React are "a low(er)-code option, compared with the alternative of vanilla JavaScript which would take many more lines of code to achieve the same results."

In the same way, low code is another step toward readability and up the ladder of abstraction. Viewed this way, low code isn't a departure from history so much as it is a continuation.

Low code will add, not disrupt

A major reason developers are skeptical of low code is the hype. A simple Google search reveals the scale of the hype. "Is low code the future" returns over 2 million results, and articles on the topic include titles like:

Why Low-Code Automation Is The Tech Of The Future
Why low-code and no-code are the future of enterprise applications
The Future of Software is No Code and Low Code Programming
Low Code Is The Future Of Application Development
Low-code programming -- the next frontier in app development

Realistically, low code isn't the future; it's part of the future. Internal tool development, our specialty, provides a perfect example.

Internal tool development (which developers spend 30% of their time doing) is an ideal use for low code. Though two out of three developers default to building from scratch (instead of using a spreadsheet or a SaaS tool), 88% of developers that *do *build internal apps using low code plan to keep building that way in the future. In other words, most developers have a need that low code solves for but aren't using low code---but once they try low code, they keep using it.

More than likely, low code won't disrupt, displace, or destroy software development. Instead, developers will try particular low code tools, especially ones specialized for specific use cases, and replace hand-coding development when it benefits them to do so.

Low code will expand the circle of software development

According to Scott Brinker, VP of Platform Ecosystem at HubSpot, the best way to think of low code is to think of it as a way to expand the circle of people who can develop software.

Low code, as well as no code, enables more people to build software. This bears out in the research so far. According to Kintone research, many non-IT low code developers are power users "embedded within line-of-business departments building the applications."

Power users are becoming more powerful, so powerful that they can now develop software. According to John Rymer, an analyst at Forrester, he can "see maybe 100 million people---business people---engaged in producing software."

That means that companies don't need to hire software developers for every software need. That doesn't mean that developer hiring will slow, but that companies can reallocate developer hiring away from some projects (say, internal tool development) and toward customer-facing features as well as complex and unique software development problems.

The impact of low code on startups and enterprises

Often lost in the discussion of low code and its effects is context: low code looks very different to startups and enterprises.

Low code and startups

Startups are time- and resource-strapped, which is the primary reason they adopt low code tools. With low code, their existing engineers can move faster and make a greater impact in three primary ways.

Internal tools will be easier to make
With low code tools, developers can re-focus from internal tool development toward customer-facing features. For startups, who may only have a couple of developers, this time and effort are precious. With product-market fit still on the horizon, early-stage startups need as many engineering resources as possible dedicated to iteration.

Back-end developers will be able to develop better services
Back-end developers are well-versed in systems and functionality but not in UX design. With low code, even back-end developers can create pretty, intuitive apps and tools. The ever-elusive 10x full-stack developer becomes more attainable if you can enable back-end developers to create things only a front-end developer would normally be able to make.

Validation will come sooner in a startup's life
As we covered above, low code enables companies to rapidly build MVPs and prototypes. This is especially useful for startups, who may still be settling on a product and pursuing product-market fit. The right low code tool will also enable rapid iteration, such that startups can debut and improve products before dedicating much in the way of hand-coding.

Curtis Cummings, a Senior Software Engineer at On Deck, said in an interview he did with Retool, "I've been on a couple of different projects in my consulting career where we had this perfect spec, we built it perfectly to spec, went out to users and it fell flat on its face because all the assumptions that backed up that spec weren't validated or grounded in user data."

With low code, startups are less likely to fall on their faces.

Low code and enterprises

Enterprises are not, generally, in want of resources like startups are, but they are often stuck with technical debt.

Enterprise technical debt, driven by prior investments in now legacy technologies, is encouraging many enterprises to adopt low code and pursue modernization. There are three primary use cases for enterprises and low code.

Improved agility
Low code tools, especially those from the RPA and workflow automation fields, will enable enterprises to move more nimbly. Enterprise technology stacks are often overly complex, old, and slow. Low code automation tools can reduce the negative effects of that complexity. These tools can automate the steps involved in the processes these legacy tools run.

Software robots, offered by low code RPA tools, for instance, can run unattended, meaning they can operate in the background, 24/7, handling all the agonizingly manual processes legacy tools typically require.

Modernize and connect legacy technology
Enterprises are not only stuck with legacy technology; those legacy technologies are themselves often stuck in disparate silos. Connecting your ERPs to your CRMs and back again, for instance, can be a nightmare. Enterprises often face the choice of either living with it and being inefficient or hiring armies of consultants to fix it all, which is expensive.

With low code, enterprises can modernize their legacy technology stacks without ripping them out and replacing them. Low code tools can layer on top of these tools and create a much more usable, intuitive interface. Business users can then access and use systems they previously would have had to request help from developers to use.

Digital transformation
Forgive the buzzword, but for enterprises, digital transformation is a serious pursuit. Many enterprises are still operating on paper and, if not paper, so-called "digital paper" systems --- technologies that weren't designed with the internet and native digital capabilities in mind.

In clinical research, for example, as product manager Stephanie Morillo points out in this Twitter thread, many organizations still use Excel. Rather than use a modern database tool, enterprises (and their employees) use a tool that lacks version control and can't handle the thousands of rows necessary for their purposes.

If ever there was a need for low code, this is it.

Low code is in your future (even if it isn't the future)

Big brain, hot take "thought leadership" on low code often relies on the phrase "the future of," as if software development --- an already complex and diverse field of technologies and methodologies --- will somehow evolve into one, simple thing. Well, it won't. That doesn't mean, however, that low code won't create incredible change.

Low code will transform the field of software development by empowering developers to choose when and where they want to spend time hand-coding. With low code, developers can build less and architect more. As more developers adopt low code, the industry will shift in big, unpredictable ways.

Full-time developers, armed with low code (or arming business users with low code), can re-focus from solving simple problems to solving complex problems. The effect of this reallocation is hard to understate and hard to predict. Developers run the world these days (see Stripe, Twilio, Atlassian, Datadog, MongoDB, etc.), so imagine if these kingmakers shifted their internal tool development efforts (30% of their time) toward changing the world. And that's only one use case for low code!

On-prem vs cloud: Why you have more options than you think

kevbosaurus — Wed, 16 Jun 2021 01:10:26 +0000

The debate between on-premise vs cloud is nothing new. Every company has different needs, and developers have spent endless cycles debating the pros and cons of on-prem and cloud software to solve for their particular needs.Rather than try to end the debate, we wanted to provide a deeper context and frameworks for evaluating your options. That includes looking into the rise of self-hosted software, which has the potential to, if not end the debate, at least push it in a new direction.

On-prem vs. cloud: The debate in a nutshell

A couple of decades ago, the debate between on-prem and cloud didn’t exist—simply because cloud computing wasn’t a thing yet. As cloud computing emerged and gained popularity in the mid to late 2000s, so did the debate about moving workloads from on-prem servers to cloud servers.

Equipment ownership

The primary difference between on-prem infrastructure and cloud infrastructure is that you own on-prem while you rent the cloud.On-prem infrastructure exists—you guessed it—on-premises in server rooms that a company builds and maintains. Cloud computing allows companies to host workloads on third-party servers. These servers aren’t really “in the cloud”—the biggest AWS data center in America, for instance, is in Virginia.

Essentially, when working with the cloud, you pay for infrastructure as though it were a bundle of different services—storage and compute among them. One of the advantages of this model is that you can pay for additional services (AWS offers a whole bunch, such as analytics, containers, databases, and more. The public cloud is always at the ready, waiting for you to pay up and get more.

Maintenance

The second major difference between on-prem and cloud is maintenance—particularly, the costs of that maintenance. On-prem infrastructure, by definition, is local and physical, meaning you need IT staff to buy, rack, and connect the servers that you need. And that’s just the setup. Then, you need them to manage the servers, which includes the management of hardware, software, security, and performance. If you want to expand, that’s another order and another busy IT person.

On-prem software requires licensing and installation, and when that software needs updating (which it always does), then you again need IT to download and deploy updates. According to ZDnet, it costs $731.94 per machine per year just to power a server. That base price plus all the setup and maintenance costs can add up––and then you need to cool it all, which, according to DataSpan, will be almost half your investment.

Cloud infrastructure outsources all that setup and maintenance to a data center that handles setup and maintenance (and they can do so at scale if you pay up). By running workloads in the public cloud, companies can pay for storage and compute on an as-needed basis, meaning they can scale up or down depending on usage and company growth.

With public cloud providers offering servers all over the globe, that scale also means global coverage at the click of a button. Plus, due to that global coverage, if a data center in one region goes down, a data center in another region can pick up the slack.

And whereas on-prem infrastructure requires ordering, racking, and installing a server, public cloud servers provide near-instant provisioning, meaning scale-up happens about as fast as you can request it (i.e., pay for it). To sweeten the deal, public cloud providers also offer an array of cloud services that you either can’t get on-prem or would have difficulties getting on-prem, such as machine learning or quantum computing.

Control

Control is the most complex, gray-zone difference between on-prem and cloud. Theoretically, since you (the company) own and operate your on-prem servers, you have more control than you would if you handed over your servers to a third party.
The costs of cloud computing make that clear. Entire businesses, such as The Duckbill Group (led by the inimitable, sarcastic Corey Quinn), have sprung up to help businesses control cloud spend.

AWS is notorious for runaway cloud spend. A recurring controversy, for instance, involves students spinning up AWS instances and unknowingly accumulating a bill worth thousands of dollars.

Hey friends,

I have a panicked student in my DMs who’s accidentally racked up an $8k AWS bill.

My suggestion of “talk to Support” is no good—apparently they won’t issue a billing adjustment. Anybody got better ideas, or know someone at AWS who can help them out?

RT for reach?
— Alex Chan (@alexwlchan) May 30, 2021

Cloud costs are just the beginning. Every other part of your cloud infrastructure falls prey to the same pattern—a pattern that’s in part inevitable due to the infrastructure not being yours.

Ultimately, AWS (or Google Cloud or Microsoft Azure) can do whatever it wants with its servers and services, and you’re beholden to their whims. That lack of control makes many businesses uncomfortable.

For some businesses, not owning their own infrastructure isn’t just uncomfortable—it’s illegal. Organizations that handle highly sensitive data (like medical or financial transactions) may be required by regulations such as HIPAA and FERPA to keep their business off the public cloud.

Startups and enterprises face different debates

Startups and enterprises are coming into the on-prem vs. cloud debate with different priorities.

Startups are starting from scratch and must consider agility, speed, and upfront cost; enterprises are starting with technical debt and must consider prior infrastructure investments. You can’t understand the debate, nor your place in it, until you understand the business context.

The startup perspective: Start small and scale as necessary

Before public clouds (and AWS especially), startups had to raise entire funding rounds just to afford the server infrastructure that could support a minimum viable product (MVP). But the rise of the public cloud meant that even the scrappiest startup could test out a half-baked idea without too much expenditure.

With public clouds, startups can start small and scale their cloud expenditure as they grow, meaning they only pay for what they use. This cost model makes the public cloud appealing to startups. As startups grow, however, they may experience vendor lock-in. If you started on AWS, it’s always going to be easier, logistically, to stay on AWS.

Even if the costs rise—even if the costs rise a lot—you’d still have to compare those costs to the costs of switching, which includes any potential downtime as well as the opportunity costs of reallocating engineers to migration.

Counter-example: The startup perspective described above isn’t universal. Dropbox, for instance, a 14-year-old company, eventually moved off AWS and built its own data centers. Dropbox ended up saving almost $75 million over two years.

The enterprise perspective: “If it ain’t broke, don’t fix it”

Enterprises (large companies that may have been around since before the Internet, much less cloud computing) invested in on-prem infrastructure before the public cloud was an option. As such, by necessity, most enterprises will have some measure of on-prem infrastructure to deal with.

Migration to the public cloud is notoriously costly and difficult. The vendor lock-in that startups experience, mentioned above, is worse for enterprises attached to on-prem infrastructure they can’t easily replace. And, of course, this on-prem infrastructure isn’t sitting there. It’s operating and maintaining essential workloads. Replacing it all risks downtime and necessitates time.

According to Cloud Security Alliance research, 90% of CIOs have gone through failed or disrupted migration projects. Plus, only 25% met their deadlines for migrations. To complicate things further, a Fortinet study found that 74% of companies have actually moved applications back to on-prem from the cloud.

Counter-example: Despite the reasons above, many enterprises are still shifting to the public cloud. HSBC, for instance, a bank founded in 1865 that employs over 200,000 people, migrated to AWS.

CAPEX vs. OPEX

So far, we’ve covered the debate in primarily technological terms, but there’s also a financial lens through which to view these arguments.

You can slice through the startup vs. enterprise framing and translate the debate into purely financial terms: capital expenditures (CAPEX) vs. operational expenditures (OPEX).

On-prem requires an up-front investment in server hardware (a CAPEX cost), whereas the public cloud scales up and down as you use it (an OPEX cost). Depending on your funding and how you want to account for infrastructure costs, either on-prem or cloud might be more appealing.

The rise of self-hosting (and an end to the debate?)

For years, the on-prem vs. public cloud debate has assumed that the two approaches are contradictory and opposite. In recent years, however, a new infrastructure option has emerged: the private cloud. With the private cloud, you may be able to end the debate—and have your cake and eat it too.

What is self-hosted software?

Self-hosted software is software that you run on your own cloud infrastructure. In the case of a company that purchased a new email tool, you’d run the email software in your private cloud instead of using the SaaS version that is hosted on the public cloud.

In a sense, you can get the best of both worlds. With a private cloud, you get the scalability of the public cloud but the control of on-prem. That means you can scale like a startup but remain in control like an enterprise.

The multi-cloud future

The great on-prem vs cloud debate may end in a whimper instead of a bang. Nowadays, many companies use both private and public cloud infrastructure (a setup referred to as “multi-cloud”).

Flexera research found, for instance, that 92% of enterprises and 61% of SMBs (which includes startups) have a multi-cloud strategy.

The future might not be any single option but an amalgamation of many options that evolve as companies grow and their needs change. Or once the next AWS-type revolution comes and upends everything again.

Companies are increasingly offering self-hosted options. We here at Retool, for instance, now offer the ability to self-host a Retool instance. The Retool self-hosted option is especially helpful if you have a lot of data that you can only access via a private network, a local network, or a virtual private network (VPN). Plus, you can use Docker, Kubernetes, Heroku, or Render for on-prem deployment.

Re-evaluate your infrastructure needs from first-principles

The cloud, especially for startups, has become something resembling a common-sense choice.

Of course you deploy on AWS, the assumption goes, what else would you do? Though the revolution AWS started can’t be understated, you also shouldn’t overstate its permanence. The changes the public cloud created are massive, and from its inception to the foreseeable future, deploying software in the public cloud (SaaS) will be a viable strategy for many companies.

For an increasing number of companies, however, the private cloud is becoming an option worth thinking about. Much of technology, as in business and society, is cyclical—don’t assume the death of on-prem infrastructure until you evaluate your options from a first-principles perspective.

The private cloud, especially, points toward the resurgence of on-prem. The future might be more local than you think.

The best React Native datepicker libraries

kevbosaurus — Thu, 10 Jun 2021 17:39:30 +0000

Date pickers are a common and essential component for many apps, especially those that facilitate event booking—like a hotel booking app—to aid seamless date selection. Date pickers improve app usability by reducing the complexities of date validation issues by ensuring that invalid dates cannot be entered, restricting date ranges, and eliminating date format confusion (for example, is July 9, 2010 or September 7, 2010).

The React Native framework used to provide React-Native date picker APIs for Android and iOS—DatePickerAndriod and DatePickerIOS—are now deprecated. Your choices now are to either build a date picker from scratch or use another date picker library.

We researched and tried a handful of popular React-Native date picker libraries, narrowing down to four options based on factors that make a good library. Out of the top four libraries, we found the React-Native DateTimePicker is the best; we’ll walk you through our reasoning for the selection.

What to consider before choosing a library?

We considered several factors in making our selection for the top React-Native date picker libraries and landed on the following:

Documentation: Documentation is a necessity for every library, so you need to check if the library has a documentation file or site. Is the documentation detailed and written in simple language? Does it clearly highlight how to install and set up the library, how to use the library with some code examples, and have solutions to common issues or FAQs?

Popularity: If many developers are actively using a particular library, then it’s likely to get the job done. Popularity indicators we looked at include metrics like the number of downloads recorded on the library’s npm page, number of forks, stars, users, and contributors on GitHub.

Code update frequency: If the codebase of a library is not frequently updated that means it is not actively maintained. Metrics you should look out for are: last commit date (anything greater than a year ago is a cause for concern), number of open vs. closed issues (the latter should be greater than the former), and date of the last version release.

Usability: How easy is it to use the library? Do you have to learn any new technologies outside your existing tech stack? Does it support all platforms you need?

Bundle size: When adding a package, how much extra weight will this add? Will it significantly increase the size of your app? You can use bundlephobia to check.

Reputation of creators: Who are the creators/maintainers of the library? What is their experience? Have they successfully built and maintained other open-source libraries?

Why React-Native DateTimePicker is the best date picker library

As mentioned, we used the factors discussed above to assess several React Native date picker libraries, and React-Native DateTimePicker stood out from the pack. It is the most popular, has the most downloads, and was created and is maintained by the React Native community—the same group that builds and maintains most popular packages in the React Native ecosystem.

Here are detailed specs of this top-notch library:

Documentation: Documentation is available via the repo’s README.md on Github. It is elaborate, shows how to install, set up, and use the library’s ‘DateTimePicker’ component, and also discusses all accepted props
Popularity: 46 contributors, 1.2k stars, 16.2k users on GitHub, approximately 150k weekly downloads
Code update frequency: Since the first version was released on 18 June 2019, new versions with are released at least once every month
Usability: Supports Android, iOS, and Windows. Supported by Expo — the official toolchain for building React Native apps
Bundle Size: 188kb
Reputation of creators: Created by and actively maintained by the React Native community

Notable React-Native date picker library options to consider

Based on our assessment, we found other React-Native date picker libraries that are worth recommending as well. If React Native DateTimePicker doesn’t suit your needs, here are three other alternatives that are popular, have good documentation, and are also simple to use.

React-native-modal-datetime-picker

Documentation: Documentation is hosted on the repo’s readme.md on Github. It is straightforward, covers all the basics required to install, set up, and use the DateTimePickerModal component from the library, alongside a description of all acceptable props and answers to popular FAQs.
Popularity: Approximately 100k weekly downloads, 2.2k stars, 9.1k GitHub users, 76 contributors
Code update frequency: The repo is active. Over 66 releases since its first release on October 6, 2016
Usability: Supports Android and iOS. Also, Supported by Expo. But, it uses React-Native DateTimePicker under the hood, so it is dependent on it. It is a good alternative if you want to show your date pickers inside a modal.
Bundle Size: 35.2kb (lightest weight of the bunch)
Reputation of creators: Matteo Mazzarolo, a software developer at inVision

React-native-date-picker

Documentation: Documentation is hosted on the repo’s readme.md on Github and it covers all the basics required to install, set up, and use the ‘DatePicker’ component from the library, alongside a description of all acceptable props and answers to popular FAQs.
Popularity: It has 826 stars, 24 contributors, 1.5k GitHub users, and approximately 26,000 weekly downloads
Code update frequency: Since its first release on 8 April 2018, there have been 71 releases, with at least a new version with code updates and bug fixes every month
Usability: Supports Android and iOS. Not supported by Expo. It is ideal if you want a unified date picker design across your Android and iOS apps.
Bundle Size: 157kb
Reputation of creators: Henning Hall, JavaScript developer at SF Studios

React-native-calendar-picker

Documentation: Documentation is available via the repo’s readme.md on Github. It is elaborate, shows how to install, set up, and use the library’s ‘CalendarPicker’ component, discusses all accepted props, and showcases several code examples to achieve different tasks.
Popularity/Active community: 579 stars, 1.4k GitHub users, 38 contributors, approximately 5000 weekly downloads
Code update frequency: Over 31 version releases. Ever since the earliest release was made on March 10, 2018, at least 5 releases are made yearly to fix bugs and update the codebase.
Usability: Android and iOS. No time picker. Not supported by Expo. It is a good alternative if you just want a simple calendar interface for date picking across all platforms.
Bundle Size: 99.6kb
Reputation of creators: Stephani Bishop, Senior software engineer at Netflix

Getting started with React-Native DateTimePicker

You’ve heard our take on the React-Native DateTimePicker. Now, let’s give you an overview of how you can install and use it in your project. Before you get started, ensure you have XCode >= 11.6 and React Native version 0.60 or greater.

1. Install via npm /yarn

npm install @react-native-community/datetimepicker --save

2. Rebuild project

npx pod-install

3. Import and use

import React, {useState} from 'react';
import DateTimePicker from '@react-native-community/datetimepicker';

const App = () => {

const [date, setDate] = useState(new Date());

const onChange = (event, selectedDate) => {
 const currentDate = selectedDate || date;
 setDate(currentDate);
};

 return(
      <DateTimePicker
         value={date}
         onChange={onChange}
       />
 )
}

For more detailed instructions and examples, check out the library’s README.md

A React-Native date picker library for every use case

When sifting between different React-Native date picker libraries, based on factors like ease of use, active development, and popularity, then React-Native DateTimePicker is the pick of the litter.

That said, as we’ve proven with our full list of libraries, there’s no dearth of popular, efficient, and highly usable options when it comes to React Native date picker libraries — regardless of your use case.

Top React component libraries (2021)

kevbosaurus — Fri, 28 May 2021 20:19:16 +0000

Because of React’s ubiquity (169k stars on GitHub), developers have a near-endless supply of UI libraries with custom components to draw upon to build applications. But not all React component libraries are created equal. Some are best for general purposes, others were created specifically for web development, and many are tailored for niche use cases like enterprise product production.

We’ll review React component libraries in this post considering several factors like popularity, use cases, documentation, resources, support, etc.

Material-UI
Ant Design (AntD)
React Bootstrap
Grommet
Rebass
Blueprint
Semantic UI React
Retool

Honorable mentions

Fluent React UI
Onsen UI
Evergreen

Material-UI

GitHub Stars	Weekly NPM Downloads	Stack Overflow Questions	Origin
68k	1,9M (May 2021)	12.5k	Google

Developed by Google in 2014, Material-UI is a general-purpose customizable component library to build React applications. The folks at Google designed Material-UI as an adaptable system of guidelines, components, and tools to make app building beautiful yet straightforward.

Material-UI components

The Material-UI component library offers a wide range of options from app bars to time pickers.

Google also provides guidelines for usage, design principles, dos and don’t, and best practices for each type of component. This makes it easy for developers to build well-designed apps regardless of intuition for design.

Material-UI themes and theming

Material-UI offers several free and paid themes to get started with. Paid themes start at $59 for a standard license and increase to up to $599 for an extended license. The key difference between standard and extended licenses is the ability to charge end users. Both are limited to the usage of the theme for a “single application.” Most themes offer a robust set of features, documentation, and support.

For those who want complete control over design elements, Material-UI allows for custom theming to “systematically customize Material Design to better reflect your product’s brand.” Material Design is beneficial for applying consistent design across your app and making global design changes with minimal effort.

Material-UI documentation and support

Material-UI is well documented and supported. Documentation covers everything from installation to components to styling and guides for implementing utilities like server-side rendering and localization.

For support, there’s plenty of free options like the Material-UI community, Stack Overflow, and GitHub. Material points technical questions to Stack Overflow, where more than 12.5k questions have been posted. GitHub is used exclusively as a bugs and feature requests tracker. On the paid side, Material-UI suggests purchasing a Tidelift subscription which offers “flexibility of open-source and the confidence of commercial-grade software.” At the rate of $200/hr or $1500 per day, “Custom work” can be requested for help modifying Material-UI to meet specific requirements.

Apps and websites built on Material-UI

We've grabbed a few screenshots from the Material-UI website below. See the full showcase of public apps using Material-UI here.

Ant Design (AntD)

GitHub Stars	Weekly NPM Downloads	Stack Overflow Questions	Origin
71.4k	610k (May 2021)	3.2k	Ant Financial

Ant Design (also referred to as AntD) brands itself as the "The world's second most popular React UI" although, it's unclear who they view as the most popular. AntD differentiates itself from other React component libraries as a design system for enterprise-level products. AntD has also developed a design philosophy based on four values: Natural, Certain, Meaningful, Growing.

Notable companies that have bought into AntD's design philosophy include Ant Financial, Alibaba, Tencent, and Baidu. Ant Design was created by Ant Financial and was launched in 2016 — more in this Show HN thread.

Ant Design components

AntD offers a set of more than 50 components that serve as building blocks for enterprise applications. They also recommend using other React third-party libraries for components that fall outside of the Ant Design specification, such as the React Hooks Library or React JSON View.

Ant Design theming

Ant Design doesn't offer the same pre-built theme options compared to a library like Bootstrap or Material. At the time of this writing, Themeforest offers 12 themes at prices ranging from $12 to $999. That's a pretty stark difference from Material themes on Themeforest, which has more than 1,500 themes built with Material Design. And Bootstrap has an order of magnitude more than Material with more than 30k themes listed on Themeforest.

AntD offers Ant Design Pro, an out-of-box UI solution for enterprise applications. Ant Design Pro comes equipped with templates, components, and a corresponding design kit.

In addition to Ant Design Pro, AntD packages designs for data visualization, mobile, and graphic solutions so developers can start with a package based on a particular enterprise use case.

Ant Design documentation and support

While AntD does have documentation, it doesn't offer the depth of documentation that a framework like Material-UI has. AntD's component documentation is easy to understand and includes examples and API properties for each component. AntD components also include internationalization support for dozens of languages and uses Less.js for styling components.

While it doesn't appear that Ant Design offers any paid support options, they have an engaged community and many resources for self-learning. AntD uses GitHub Issues for bug tracking. AntD also facilitates community discussions via GitHub, Stack Overflow, and Segmentfault.

Examples of apps and websites built on Ant Design

React-Bootstrap

GitHub Stars	Weekly NPM Downloads	Stack Overflow Questions	Origin
19.4k	838k (May 2021)	2.9k	Twitter

Initially named Twitter Blueprint, the Bootstrap framework was built by Mark Otto and Jacob Thornton at Twitter. Bootstrap predates React by a couple of years (Bootstrap’s initial release was August 19, 2011, and React’s was on May 29, 2013). Bootstrap started as an open-source CSS framework centered around helping developers build responsive, mobile-first front-end websites and applications.

React-Bootstrap is a bit different but very similar to the original Bootstrap framework. React-Bootstrap replaces the Bootstrap JavaScript, and each component has been built from scratch as a proper React component, without unneeded dependencies like jQuery.

React-Bootstrap components

React-Bootstrap’s component library skews toward web development. With less than 30 components, React-Bootstrap also doesn’t provide the breadth of component coverage that a Material-UI or AntD offers. Less can be more, especially for those familiar with Bootstrap and know it can accommodate their use case.

React-Bootstrap themes and theming

Due to the widespread use of Bootstrap for web development, there are thousands of free and paid Bootstrap available. Generally, custom Bootstrap themes work with React-Bootstrap as long as Bootstrap defined classes and variants are used.

React-Bootstrap documentation and support

While React-Bootstrap doesn’t offer any official support, there is a massive, active community and plenty of resources supporting Bootstrap. The React-Bootstrap website suggests starting with support in one of three places:

Stack Overflow to ask specific, detailed questions
Reactiflux Dischord to discuss via chat
GitHub Issues to report bugs

Apps and websites built on Bootstrap

Grommet

GitHub Stars	Weekly NPM Downloads	Stack Overflow Questions	Origin
7.2k	21.5k (May 2021)	84	Hewlett Packard Enterprise

Grommet was developed by HPE and offers a more vibrant (and not so Google-y) look and feel compared to alternatives like Material-UI or AntD. From their marketing site copy, Grommet positions itself as “a React-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package.”

Reading between the lines, Grommet is lighter weight, and from the looks of their website design, it also has bolder component designs.

Grommet components

Grommet provides a bold and robust set of components to use. They categorize components into the following categories:

Layouts — a system for layout of an app with components like headers, footers, grids, cards, sidebars and more.

Type — components for headings, markdown, paragraph, and text.

Color — set color schemes for branding, accents, status, and neutral colors.

Controls — components that let users interact with an app like menus, buttons, navbars, etc.

Input — components where users input things like text, check boxes, file uploads, etc.

Visualizations — components for more rich visualizations like calendars, charts, avatars, etc.

Media — components for video, images, and carousels.

Utilities — catch-all for components that improve user experiences like keyboard shortcuts, responsive elements, infinite scroll, etc.

Grommet themes and theming

While there are not a lot of pre-packaged Grommet themes available, Grommet does provide two useful tools for customizing a theme:

Grommet theme designer — an interactive demo admin panel to create custom Grommet themes by adjusting elements in the admin panel itself.
Grommet designer — an interactive canvas that lets you build and save experiences with grommet components.

Grommet documentation and support

Grommet doesn’t offer any hands-on support. They do have an active Slack community, and, like other frameworks, bugs are submitted via GitHub Issues. In addition to that, Grommet provides resources, including a template/pattern library, component library on Storybook, and a codesandbox for each component.

Rebass

GitHub Stars	Weekly NPM Downloads	Stack Overflow Questions	Origin
7.3k	68k (May 2021)	10	Brent Jackson

Rebass was created by Brent Jackson, who is currently a front-end developer at Gatsby. React primitive UI components are at the core of the Rebass library, which are coupled with a Styled-System. The Rebass Styled System is compatible with CSS-in-JS libraries and reduces the need to write custom CSS into an application using style objects instead of embedded CSS strings. As a result, developers can build faster and add a theme and design elements on top of Rebass primitives. Rebass is also very lightweight, with a footprint of about 4KB.

Rebass components

Rebass comes with a foundational set of primitive components that can be “extended” to build a component library with a consistent API and styles defined in a design theme. Foundational include primitives for app structure (responsive boxes and flexbox layouts), text (heading, text, link, button), images, cards, and forms. The Forms component includes many interactive sub-components like inputs, textarea, sliders, switches, and checkboxes.

In addition to primitives, Rebass offers documentation on recipes for common use cases like grids, navbar, and image cards.

Rebass themes and theming

While Rebass doesn’t have a library or 3rd-party ecosystem of pre-built themes, it does offer a lot of theming flexibility and customization. Themes are applied in Rebass using a ThemeProvider component. Rebass follows Theme Specification for defining theme objects and design tokens for use with UI components. Rebass is compatible with Theme UI and Styled System, which both work with Rebass with no additional configuration required.

Rebass documentation and support

Rebass provides thorough documentation centered around getting developers quickly up to speed on how Rebass works. As the concepts of primitive components, theming, and design systems are understood, developers using Rebass can fully customize and extend the library. There is no paid support or official Rebass communities listed in their documentation.

Blueprint

GitHub Stars	Weekly NPM Downloads	Stack Overflow Questions	Origin
17.8	168k (May 2021)	345	Palantir

Blueprint is an open-source React UI kit developed at Palantir. It differentiates from other React frameworks as being “optimized for building complex data-dense interfaces for desktop applications.” Not a huge surprise, given Blueprint’s origins out of Palantir.

Blueprint components

In addition to its core component package, Blueprint separates component libraries based on use cases and significant dependencies.

Core components — provide the essential components for any app built on Blueprint. This includes components from buttons to form controls to tooltips and trees.

Datetime components — offer a complete set of components for building apps with date and time dependencies. These are components like a DatePicker, DateRangeInput, DateInput, etc.

Select components — a package of components for selecting items from a list such as Select, MultiSelect, Omnibar, QueryList, etc.

Table component — robust table component the features cell and header rendering, virtualized viewport rendering, editable headers and cells, and more.

Timezone component — a TimezonePicker for handling and selecting Timezones.

Icon components — a package of over 300 vector UI icons which can easily be modified by color, size, and effects.

Blueprint themes and theming

Blueprint not the framework to use if you’re looking for a variety of themes to start from. However, Blueprint does offer light and dark mode themes out of the box, and design elements like classes, color schemes, and typography are customizable.

Blueprint documentation and support

While Blueprint provides detailed documentation, it lacks community and support options. The Blueprint GitHub repo appears to be the most active place for reporting issues and getting support from contributors. There are also a few hundred Blueprint questions on Stack Overflow.

Semantic UI React

GitHub Stars	Weekly NPM Downloads	Stack Overflow Questions	Origin
12.3k	176k (May 2021)	2.6k	Jack Lukic

Similar to Bootstrap-React, Semantic UI React is the React flavor of the Semantic web framework. Also, like Bootstrap-React, Semantic UI React is jQuery-free to make it fully React compatible. Because of its origins in aiding with responsive, HTML-friendly web design, Semantic for React is better suited for web development vs. application building.

Semantic UI React components

Semantic UI React has a respectable library of over 50 components. Semantic UI acts as a layer on top of the React components and offers Semantic themes as CSS stylesheets.

Components grouped in the following categories:

Elements — includes foundational components like buttons, dividers, lists, images, and headers. More specialized components like image reveal and rails for content that protrudes borders are also included in the Elements grouping.

Collections — components like breadcrumbs, forms, grids, menus, and tables are included in the Collections category.

Views — visual components like cards, advertisements, comments, feeds, etc., are included in the Views category. Note: that many of these components (e.g., advertisements) are unique to Semantic UI.

Modules — includes modular components like modals, popups, progress bars, and more.

Behaviors — visibility, which provides a set of callbacks for when content appears, is the sole component in the Behaviors category.

Add-ons — additional components like radio buttons, toggles, and sliders are included in this category.

Semantic UI React themes and theming

When using Semantic UI React, it’s important to note that it does not have custom theming options and fully relies on the theming of Semantic UI. Semantic UI theming and design is based around Fredrick Brooks’s concept of “progressive truthfulness.”

Progressive truthfulness is perhaps a better way to build models of physical objects…Start with a model that is fully detailed but only resembles what is wanted. Then, one adjusts one attribute after another, bringing the result ever closer to the mental vision of the new creation, or to the real properties of a real-world object.
Frederick Brooks, The Design of Design: Essays from a Computer Scientist

The idea is to remove complication and analysis paralysis from web development. Rather than building from a blank slate, developers can specify how components should differ from the default theme using CSS variables and let Semantic UI handle the rest.

In addition to theming, Semantic UI React provides layout examples for using grids, responsive design, sticky nav, webpage construction, etc. These layouts offer a useful starting point vs. starting from a blank slate.

Semantic UI React documentation and support

Semantic UI React provides thorough documentation. Most documentation of components includes code to try the component, codesandbox, and live examples. Within the Buttons component alone, there are 36 different button variations from a static button to floating groups of buttons — all come with code to copy/paste.

Retool

Disclaimer: there is bias at play in this overview.

Retool is a platform for building internal applications. It comes with a complete set of powerful 50+ components out of the box. Because Retool is a platform and not just a component library, you can:

compose applications with 50+ drag-and-drop components
connect to any data source or API to work with all of your data sources seamlessly in one app
customize how your app works by writing JavaScript anywhere inside of Retool

Retool also lets you deploy applications as a cloud-hosted solution or on-prem and comes with enterprise requirements for security, reliability, and permissioning built-in.

Retool components

Out of the box, Retool comes with 50+ components to build internal applications. We also offer custom components if you need to load other interfaces into your applications dynamically.

Retool components are grouped in the following categories:

Commonly used — as the name implies, these are core components like buttons, tables, text, dropdowns, etc.

Inputs — components that allow for user input and interactions. These include components like a checkbox, date range picker, rich text editor, slider, etc.

Data — these are components that aggregate data like a calendar, JSON explorer, and query builder.

Charts — build interactive charts in your Retool apps while also providing the full flexibility and customizability of the Plotly.js charting library for more advanced use cases.

Display — visual components that provide users with context such as a progress bar, alerts, timers, and video viewers.

Retool themes and theming

Style editors — Style editors are available across all Retool plans and allow you to customize your Retool components within the Retool UI by editing the style properties (e.g., color, border-radius) of any component.

Themes — Themes are available on the Retool Pro and Enterprise plans and allow you to apply style customizations across any of your applications.

Custom CSS — When inspector styles and themes don’t cover your needs, you can leverage CSS directly in Retool. Custom CSS styles can be applied across all applications within your org settings.

Templates — We also offer ready-made templates as a quick starting point for building internal tools from real-world use cases.

Retool documentation and support

Compared to React components libraries, Retool offers far more extensive support and support. If answers can’t be found in Retool documentation, customers can turn to the following support channels:

Community forum — Retool’s Discourse forum is the best place to get tactical product help.

Power users Slack — If you’re a Retool Power User, you can request access to our sort-of-exclusive Slack group for our most engaged developers.

Reschool — a learning course for getting started with Retool from scratch that includes basic SQL and JavaScript training.

Intercom — use the Intercom chat within the Retool platform to for live support

Email — send an email support@retool.com

Enterprise support — Retool customers on enterprise plans get access to a dedicated support representative.

Honorable mentions

Fluent React UI

GitHub Stars	Weekly NPM Downloads	Stack Overflow Questions	Origin
397	44k (May 2021)	1k	Microsoft

Fluent React UI is Microsoft’s design system adapted for React. It’s built on top of the Fluent UI design language, component specifications, and utilities. Fluent is the UI framework used in the latest versions of Microsoft applications like Powerpoint, Word, Outlook, etc.

Components — Microsoft uses the name “Controls” instead of components. Either way, Fluent React UI offers a wide range of controls/components that are built with the React framework.

Theming — Fluent React UI comes with a theme designer, component styling guide, and a theming deep dive guide.

Documentation and resources — Microsoft and Fluent contributors maintain a Fluent React UI wiki for advanced usage, building, and contributing to Fluent UI React. They also offer a frontend bootcamp learning course which includes exercises with Fluent UI React.

Onsen UI

GitHub Stars	Weekly NPM Downloads	Stack Overflow Questions	Origin
130 (React) 8.4k (original)	1.2k (May 2021)	1163	Monaca

Originally based on AngularJS with support for jQuery, Onsen UI offers an adapted framework for React. Onsen was developed by Monaca Software which specializes in mobile app development and is based out of Japan. Based on the mobile-first origin, the Onsen UI framework is well suited for building mobile apps.

Components — Onsen UI comes with more than 100 components designed for mobile experiences.

Theming — Onsen UI provides a Theme Roller to customize themes for mobile platforms and styling, which can be downloaded and applied.

Documentation and resources — Documentation for Onsen provides a getting started guide for React. Onsen UI also showcases several samples to demo and a “playground” to test your code and interactively learn the Onsen framework. There’s also a community forum to tap into help from others using Onsen.

Evergreen

GitHub Stars	Weekly NPM Downloads	Stack Overflow Questions	Origin
10.8k	7.2k (May 2021)	-	Segment

Evergreen is a React UI Framework developed by Segment. It centers around a design system that was created for building “ambitious products” on the web.

Components — Evergreen offers 30+ components built on top of a React UI Primitive. Evergreen also provides “patterns” which are common reusable combinations of components.

Theming — Evergreen ships with two themes: 1) A default theme that reflects Segment’s current brand, and 2) a classic theme from the first version of Evergreen. While there is no theme builder with Evergreen, it offers an extensible theming architecture to customize the look and feel of the components as needed.

Documentation and resources — In addition to documentation, Segment has created an Evergreen Figma library available on Figma Community.

Finding the perfect React checkbox component

kevbosaurus — Thu, 27 May 2021 04:59:02 +0000

Many websites and applications use checkboxes as a critical way to help users select more than one option—whether they’re filling out a form, adding their preferences, or searching for the perfect product.

If you’re using React, you have a lot of options when it comes to building checkboxes into your application.

You can build a React checkbox natively, but libraries like Bootstrap and Material-UI come with checkbox components that are easily implemented, and the excruciating pain of styling is already handled for the most part. In addition to these larger libraries, there are also several standalone components you can choose from.

With all the possible options, it might take a while to research, identify, and evaluate which checkbox component might work better for a particular solution. Rather than sink all the time and effort into doing this painful research yourself, we’ve compiled several common checkbox use cases and helpful suggests for the React checkbox components that best fit the use case.

Simple checkboxes

Best for: Straightforward form requests
Recommended Component: DIY

The native React checkbox component is a good choice when your application only has a few checkboxes and styling is not a priority. But once things get more complicated, you should definitely consider your options.

It can be challenging to style the native React checkbox component (i.e., vanilla JavaScript) due to how many scenarios need to be taken into account. Does it need a disabled state? Does it need an error state? A success state? Can multiple boxes be checked at once?

Not to mention, the native checkbox doesn’t respond well to CSS customization. This is such a problem that a common technique used to style native checkboxes is to hide them, replace them with labels, and style the labels.

Checkboxes can also have complicated presentation, error handling, and validation requirements. This could be a tree of checkboxes or requirements for one group of checkboxes be dependent on other values throughout the site.

You also need to think about whether your checkbox component will be handled through React or the DOM. When there are complicated requirements like this, you are on your own managing that complexity and handling the UI states in a native component solution.

Solving for these problems, especially if you need multiple checkboxes in an application, can result in having to write a massive amount of repetitive boilerplate code.

Folks use Bootstrap and similar libraries because it makes their lives easier, and one of the primary ways these libraries do this is by providing an integrated, uniform system of components.

If you’re using a library that includes a checkbox component, it’s a better choice than the native component because there will be less development lift in terms of styling and browser compatibility.

It varies per library, but library checkbox components can alleviate many disadvantages of the native component.

So, before choosing to use a standalone component, check your library’s documentation to make sure it doesn’t have the feature you’re looking for. In particular, library checkbox components are usually easier to style across browsers.

Trees of checkboxes

Best for: Multi-level configuration options
Recommended Component: react-checkbox-tree

Sometimes, a simple group of checkboxes will not suffice, and you need a multi-level tree of checkboxes. For example, you might need to have the user enable or disable a lot of configuration options.

You could definitely implement a tree of React checkboxes yourself, but using the react-checkbox-tree component does a lot of the heavy lifting for you.

One note, this component does require the use of the font-awesome library, which makes this solution the largest option (38.9kb minified for react-checkbox-tree and 30.2kb minified for font-awesome) and therefore the slowest to load.

Groups of checkboxes

Best for: Simulating relational checkbox options
Recommended Component: react-checkbox-group

Usually, several checkboxes are logically grouped into one multiple-choice question, and you have to write some boilerplate code to make individual checkboxes appear related.

For example, if you want the user to select fruits from one list and vegetables from another list, you have to present the checkboxes that way, validate the user’s selections, and then provide a way to obtain both results. The more of these checkbox groups you have, the more tedious it is to maintain the code and the longer it takes to download your application.

It is fairly arbitrary to determine when application code becomes difficult to read or the application is loading too slowly, but using the react-checkbox-group component (1.1kb minified) can help alleviate both of those problems.

Indeterminate checkboxes

Best for: Non-boolean options
Recommended Component: react-input-checkbox

A checkbox usually indicates a true or false situation, but sometimes, you want to allow no value to be selected at all for a checkbox; in other words, you need the checkbox to have a third indeterminate state.

This situation might arise in nested checkboxes, where if all children checkboxes are checked, so is the parent, but if they are not all checked, the parent will remain in the indeterminate state.

You also might want to force the user to explicitly choose a true or false option. If you’re using a framework, you should check to see if your framework’s checkbox already has an indeterminate status option. Otherwise, the react-input-checkbox component (2.8kb minified) allows you to have an indeterminate option.

Pretty checkboxes

Best for: Out of the ordinary, custom UIs
Recommended Component: pretty-checkbox-react

While the styling of a React checkbox is important, the main concern is usually providing a way for the user to select from multiple options. But if you’re especially concerned about the styling of your checkboxes or you’re looking for a checkbox-related feature not mentioned here, then pretty-checkbox-react (5.5kb minified) might just be the component you are looking for.

Some of the highlights for this component are radio buttons (single selections), display options (icons, scaling, sliders), property forwarding, and internationalization. You can also use hooks to abstract the presentation code from the logic code.

Choosing the right React checkbox depends on your needs

You can build a React checkbox natively or use any of the myriad libraries where components are available in order to address different use cases, styling options, and browser compatibility.

If you’re already using a JavaScript library, then your first move should be to check out what checkbox solution is already available to you. If it meets your needs, there’s no reason to weigh down your project with more packages.

If you aren’t already using a library or your library doesn’t have a checkbox component, then you should check if the native checkbox component is enough for your needs.

But if your use case requires many checkbox groups, trees of checkboxes, checkboxes with intermediate states, or significant styling, then using one of the standalone React checkbox components mentioned in this article is a good path to take.

Best library for checkbox trees: react-checkbox-tree
Best library for styling checkboxes: pretty-checkbox-react
Best library for checkbox groups: react-checkbox-group
Best all-around checkbox implementation: react-input-checkbox

Best PostgreSQL GUIs in 2021

kevbosaurus — Thu, 27 May 2021 04:27:46 +0000

If you’re a modern web developer, chances are you’ve interacted with PostgreSQL (“Postgres” for short). It’s the second most popular database among developers overall, and almost 70% say they love working with it.

PostgreSQL ships with a built-in CLI called psql, but nobody wants to write queries via the command line, even if you’re a veteran database administrator (DBA). This post will review the best PostgreSQL GUI tools available for querying, visualizing, and analyzing your Postgres data, as well as remotely accessing and navigating database servers.

1) pgAdmin

Overview

PgAdmin is one of the most popular GUIs available for Postgres users. Database objects are immediately easy to find on a left hand menu. PgAdmin is on it’s fourth major version and supports all of PostgreSQL’s features while also being open-source.

Strong Points

PgAdmin’s greatest strength is that anybody can use it, anywhere. You can configure it to run on any cloud server and then access it from all of the major operating systems; Windows, Linux, and MacOS.

PgAdmin runs as a web application, meaning it can be deployed on any server, including your computer. This is convenient if you’re running Postgres as a distributed database across multiple servers, as you can include PgAdmin on each. Admittedly, this is a feature more targeted at the Database Administrator (DBA) level than the Analyst or Engineer level, which involves more SQL than production database management.

Useful Shortcuts for your Editor

SQL Query Editors are where most Postgres users spend their time when manipulating data. PgAdmin’s SQL Editor provides an extensive list of useful shortcuts for quality of life improvements. They cover most of what you’d want to accomplish when writing queries that need maintenance friendly white space.

Drawbacks

The main drawback of PgAdmin is installation barriers, especially for SQL developers who aren’t experts at the command line. Running a Postgres GUI as a web application from your terminal is something that newcomers should not be expected to figure out from the ground up. Managing multiple servers, databases, and the usage that comes with them, is definitely a more advanced terminal skillset.

2) Navicat

Overview

Navicat is not as popular as PgAdmin but definitely comes with many of the features you would expect from software that makes talking to databases easier. Navicat is a paid tool and isn’t open-source, so it comes with many more features than the typical open-source tool. Unlike pgAdmin, for example, Navicat supports multiple SQL dialects, like MongoDB, MySQL, and PostgreSQL.

Strong Points

Installation of Navicat requires no more than three lines of terminal commands in Ubuntu. It is easy to get up and running and has multiple features which make it a great choice for team collaboration. You can easily improve team productivity for the SQL your team writes via Navicat’s job scheduler.

An add-on feature called Navicat Cloud also allows for Navicat SQL-specific team collaboration. This cloud friendliness extends to how easy it is to connect to data sources, like cloud databases, local flat files, or SSH tunneling and SSL.

Navicat also comes with a powerful data modeling tool, which lets you visualize database structures and design schemas.

Modern Aesthetic

The aesthetic of Navicat’s GUI is slicker and more modern than pgAdmin’s. One of the neat things about Navicat is that it gives the user a choice of dark or light theme from the start (for those dark mode die hards out there).

Drawbacks

The main drawback to Navicat is the price. Cost may not be as much of an issue for a business looking to maximize their database users’ efficiency, but it could be frustrating if you’re an individual looking for a simpler query tool. The Navicat trial is only available for 14 days, and you have to buy licenses to be able to work with PostgreSQL or MySQL.

Navicat for PostgreSQL pricing consists of three tiers: non-commercial ($119), standard ($199), and enterprise ($299).\

3) DBeaver

Overview

DBeaver is open source like PgAdmin. However, it supports different types of databases like Navicat. DBeaver also has an enterprise version which provides advanced plugins for productivity. You can run DBeaver on all of the common Operating Systems; Windows, Linux, and MacOS, and import and export data from a variety of file formats, including CSV, HTML, XML, JSON, XLS, and XLSX.

Strong Points

At least for beginners, the best thing about DBeaver (at least in how it compares to the other GUIs so far) is that it runs as a desktop application. Database objects are easy to find on the left-hand side menu, and connecting to my local Postgres database was intuitive. No CLI experience is necessary for you to start.

DBeaver, being open-source, has both free and paid options. An easy-to-sell concept: start with a deadline-less free DBeaver and transition into a paid tier as your organization’s needs scale.

Drawbacks

DBeaver’s main strength is also its main weakness: desktop applications only have as much power as your machine. To unlock the productivity levels you need in distributed development situations, you’ll have to turn to its enterprise option.

4) HeidiSQL

Overview

HeidiSQL is the only GUI on this list that was built exclusively for Windows. Just like DBeaver and Navicat, HeidiSQL can connect to different database drivers, like MySQL, Microsoft SQL Server, and PostgreSQL. HeidiSQL is free and open-source.

Strong Points

Like many Windows desktop applications, HeidiSQL is easy to download and install. If you’re siloed in Windows and your IT department is firm on that, HeidiSQL is a great option for connecting to a Postgres database.

I was able to connect to a database with only a handful of credential fields. The console prints out the commands that the GUI executes in real time — much like a log. This visibility into the back end makes it a useful tool for debugging and troubleshooting database problems.

Drawbacks

HeidiSQL is pretty lightweight, so it’s missing some of the power features that advanced users might need, like a debugger, and has no cross-platform support.

5) Datagrip

Overview

Datagrip is a cross-platform integrated development environment (IDE) from the folks over at JetBrains (makers of IntelliJ, PyCharm, etc.). That means, you can use it on Macs, Windows, and Linux. Unlike PgAdmin or Navicat, it is not a web application and can run as a local application like Spotify, VSCode, or RStudio.

Strong Points

DataGrip is intense, and it’s built from the ground up for power and customizability, ranging from dark themes to plugins for the many database systems and dialects available.

As an Ubuntu (Linux) OS user, installing dependencies requires two bash CLI commands. Installing DataGrip only requires one. A single terminal with an open log remains open when I launch DataGrip. This terminal prints out log information about the app as it's running. You can run it in the background, but I like DataGrip’s balance between command-line usage and desktop application.

Drawbacks

With a range of plugins and up-to-date development, it’s no surprise that DataGrip is a paid tool at $199 per year, per user, for the first year ($159.00 for the second year and $119.00 thereafter). Unlike pgAdmin or Navicat, DataGrip is not built to be an administrator web application that you can deploy on any cloud server. It’s made for querying.

DataGrip is more than enough for many small businesses because a desktop application can help them solve most of their urgent database problems on one or a few computers. That said, another solution may be better for deploying and managing many Postgres DBs.

6) OmniDB

Overview

OmniDB is open-source software that works on Mac, Windows, and Linux. It’s focused on lightweight, no-frills, Postgres database management.

Strong Points

Despite being open-source, OmniDB retains a lot of the SQL development features that a lot of the paid GUIs have, including features like SQL autocomplete, syntax highlighting, customizable charts for database metrics, and complete debugging tooling. Release notes show that OmniDB is most focused on Postgres.

Drawbacks

OmniDB is a lightweight tool, meaning it works great for one or a few SQL developers who need a free option for fundamental database work. It’s not, however, the best option for SQL developers who need a wide community of support, documentation, and at-scale deployment for their databases.

7) Beekeeper Studio

Overview

Beekeeper Studio is a cross-platform open-source database management desktop app that works on Mac, Linux, and Windows. It supports a broad set of databases, including PostgreSQL, MySQL, SQLite, SQL Server, CockroachDB, and Redshift.

Strong Points

Beekeeper Studio is focused on providing a smooth, fast, and easy-to-use interface, as opposed to a powerful, keyboard-shortcut-based nightmare. Typical tasks, like quickly updating a database table or running a SQL query, are super quick and simple.

Another benefit: the Beekeeper Studio team is committed to staying open-source and never adding any user tracking or user monitoring. This commitment to privacy is a unique promise among the apps we’ve reviewed here.

Drawbacks

Beekeeper Studio doesn’t have as many bells and whistles as DBeaver or DataGrip, so if you’re a DBA or need sophisticated performance monitoring and profiling tools, you’re better off with something like DataGrip or DBeaver.

8) TablePlus

Overview

TablePlus is a modern, native GUI tool for relational databases, such as MySQL, PostgreSQL, SQLite, and a few NoSQL databases like MongoDB. The TablePlus team is fairly active on GitHub — the only people behind the company being founder Henry Pham and Windows developer Raccoon Thai.

Strong Points

TablePlus is slick. It provides a customizable user interface (UI), meaning you don’t have to use Mojave at all. You can customize your configurations and their appearance as much as you like.

That slickness, however, doesn’t belie an unsophisticated tool. A standout among many TablePlus features is its database security functionalities. When you use TablePlus, the connection between you and your database is end-to-end encrypted. That encryption means no data is sent to a TablePlus server. Additionally, TablePlus comes with built-in SSH and ensures your database credentials are stored securely in your device’s keychain.

Drawbacks

Despite the slickness of its UI, some TablePlus users have pointed out how difficult it is to carve out a unified UX. An advantage to TablePlus is that it supports a wide range of databases, but a weakness of that approach is that the UX of all of them can suffer. Luckily, if you’re using it as a Postgres GUI, you’ll likely find the support you need. Users noted it suffered more when it came to things like Redis.

9) QueryPie

Overview

QueryPie is a cross-platform database IDE for Mac, Windows, and Linux. QueryPie promises to provide data access governance, from the cloud to on-premises to a variety of other platforms up to and including various SQL tools.

Strong Points

QueryPie stands out for a few different features, including:

Auto-complete, giving you the ability to write your queries faster.
Multi-query, multi-results, giving you an intuitive UI that makes query search and execution faster. You can also view multiple query results simultaneously.
In-line data edit, giving you the ability to edit query results and table structure directly and easily.

QueryPie also has some unique features when it comes to Snowflake, so if you’re interested in expanding beyond Postgres, QueryPie is worth considering.

Drawbacks

The QueryPie team announced its MVP in 2019, and updates have been sparse since. On their blog, a majority of recent posts date back to early 2020. Though the tool appears robust and useful, you may want to look elsewhere if you’re looking for a product that comes with more tutorials and up-to-date content.

10) SQLGate

Overview

SQLGate is an integrated tool for database management and development. It promises to simplify how you construct and operate databases. It works with Oracle, SQL Server, MySQL, MariaDB, Tibero, DB2, and, of course, PostgreSQL. Together, according to SQLGate, these databases make up 83.2% of the database management system (DBMS) market, meaning using SQLGate will allow you to manage most of the DBMS tools out there.

Strong Points

SQLGate has a few features that make it especially useful for database operators and analysts (though SQLGate also says it’s useful and accessible to developers, planners, and marketers, too).

Direct database connections, meaning you can connect without any complex Postgres client installations.
Big data processing, giving you the ability to quickly export query results (even massive amounts of them) to Excel.
Ultralight design, proven by the fact that the entire app and all of its functions are contained in less than 50MB.

Drawbacks

Pricing, like Navicat, is SQLGate’s main drawback. SQLGate is the most expensive tool on this list, coming in at $300 for an indie developer license and about $500 (you have to contact them for specifics, so it could be higher) for an enterprise license. With the amount of open-source and cheaper options on this list, you should take a close look at the unique benefits this Postgres GUI option provides — or else look elsewhere.

11) Retool

Overview

Retool is a web-based tool for building internal tools and applications on top of your data. It connects to all modern databases (Postgres, MySQL, MongoDB, and even Oracle) and any REST API, as well as third-party APIs like Stripe and Twilio.

Strong Points

Retool connects to pretty much anything, which is useful if you’ve got more than one data source to work with. You can access and work with your Postgres DBs and your MongoDB collections in the same GUI, all from your browser. Retool also puts a GUI wrapper over write operations so you can avoid accidentally writing DROP TABLE and getting yelled at.

Retool saves engineering time, too, as proven by our customer stories. Just look at Avo, which saved hundreds of hours of engineering time by implementing Retool.

If you’re building tools on top of your data, Retool saves you time by providing the reusable components you need: tables, buttons, text inputs, and even custom components. Retool is cloud-hosted, so the GUI is accessible from any major operating system and any major browser.

Drawbacks

Retool isn’t specifically focused on Postgres (like OmniDB), and is missing some advanced features like a query debugger.

Choosing between these PostgreSQL GUIs

Which is the best PostgreSQL GUI? The answer is: it depends. If you’re a single analyst looking to move into transparent and reproducible workflows with a single instance of a database, then DBeaver, Beekeeper Studio, DataGrip, or HeidiSQL are your best bets.

If you are part of a larger team, however, then paying for Navicat may be the best option because of Navicat’s team collaboration focus.

pgAdmin is the only PostgreSQL native GUI — plus, it’s totally free and scales easily across multiple servers. pgAdmin makes for a great choice for Postgres-focused DBAs. That said, a need for distributed servers usually only arises for skilled developers who can tackle this kind of configuration.

Retool shines when you’re working with multiple data sources. Modern developers rarely stay in one ecosystem like Postgres. As an organization grows, data workers have a growing list of stakeholders who need and want visibility for their metrics. Integrating multiple data sources with clicks and transforming with SQL is my preferred method of data manipulation because it minimizes developer time and maximizes domain-specific knowledge about your own data.

The best MongoDB GUIs in 2021 (Updated)

kevbosaurus — Sun, 23 May 2021 21:28:10 +0000

MongoDB is a NoSQL database that more than a quarter of developers use in some capacity. What makes MongoDB and other NoSQL DBs attractive is flexibility; instead of being held to a rigid schema that scales vertically, you can evolve your schema as you grow and scale horizontally. MongoDB went public in 2017 and is worth more than $17 billion today.

Document DBs work through nested key-value pairs instead of relational tables and columns. You’re going to need to parse data for your front-end eventually, and with document DBs, your data is already stored in the right format (give or take a .map or .reduce). Working with MongoDB through the command line isn’t exactly a cakewalk: This post will walk through the best MongoDB GUIs available for reading from and writing to your MongoDB clusters.

The Mongo Shell Versus a MongoDB GUI

The most basic way to access MongoDB is through the mongo shell; you can use it to query, update data, and complete admin tasks.

It’s included in the MongoDB Server installation, so you’re all set as long as you’re comfortable with shell commands. Traversing objects and writing long queries in the command line can get annoying fast, so using the shell is usually best for quick peeks or admin tasks.



> use sample_analytics
    switched to db sample_analytics
> db.transactions.find({})
   {
   "_id": "5ca4bbc7a2dd94ee581625eb",
   "account_id": 50948,
   "limit": 10000,
   "products": [
     "InvestmentStock",
     "Commodity",
     "Brokerage"
   ],
   "transaction_info": [
     {
       "_id": "5ca4bbc1a2dd94ee58161e14",
       "account_id": 50948,
       "transaction_count": 6,
       "bucket_start_date": "1991-05-08T00:00:00.000Z",
       "bucket_end_date": "2015-10-13T00:00:00.000Z",
       "transactions": [
         {
           "date": "2015-10-08T00:00:00.000Z",
           "amount": 2311,
           "transaction_code": "sell",
           "symbol": "nflx",
           "price": "104.9154457571513461289214319549500942230224609375",
           "total": "242459.5951447767609039374292"
         },
         {
           "date": "1995-12-15T00:00:00.000Z",
           "amount": 4828,
           "transaction_code": "buy",
           "symbol": "aapl",
           "price": "1.102632231847472166208490307326428592205047607421875",
           "total": "5323.508415359595618454591204"
         },
         ...
       ]
     }
   ]
 },

It’s definitely possible to query your Mongo data exclusively from the command line, but if you’re working with even medium-sized datasets, GUIs offer a helpful alternative.

MongoDB GUIs provide a user interface for your MongoDB database that gives you the ability to visualize data and edit queries without the use of shell commands (or with them — more on that later).

The best MongoDB GUIs share similar features:

A visual query editor: Click or drag-and-drop elements to create queries.
Query autocomplete: Auto-suggestions for collections, fields, methods, and operators.
An aggregation framework: Build queries out step-by-step, test along the way, then export into usable code.
Server and query analytics: Insights into query and server performance.
Relational database to MongoDB data transfer: Automate tedious and error-prone data transfers between database types.

Below is a list of the best MongoDB GUIs that 2021 has to offer. Each one has features that set it apart from the rest. The best one for you will depend on the scope of your project, the features you need, and your budget.

MongoDB Compass

(Image courtesy of MongoDB Compass GitHub Repository)

Overview

The creators of MongoDB (Mongo) have their own GUI called Compass. It’s platform-agnostic and provides a graphical view of your database without the need to use a query language. MongoDB recently announced that the fully featured Compass GUI is completely free for everyone to use. Plus, the repo is now open-source on GitHub.

Some notable MongoDB Compass features include:

Schema visualization: Compass visually displays your collections to help you better understand your datasets.
CRUD visual editor: Perform CRUD operations within the UI, no need to type queries.
Geospatial data: Create queries on map data using an intuitive UI with generated results in both graph and JSON document form.
Validation: Write JSON Schema validation rules using an editor that suggests BSON data types and validation keywords as you write

Winning feature: Compass Plugins

One of the best features of the MongoDB Compass GUI is that it has an API for adding plugins. The Compass community has built tons of cool plugins that can generate data for testing, inspect database users, and even check the shard status of the database. If there’s a feature you want but a plugin isn’t available yet, you can build your own using their plugin template.

TablePlus

(Image courtesy of TablePlus)

Overview

TablePlus is a modern, native GUI tool for relational databases like MySQL, PostgreSQL, SQLite, and NoSQL databases like MongoDB. The TablePlus team consists of founder Henry Pham and Windows developer Raccoon Thai. The team, as well as the community, is also fairly active on GitHub.

Some notable TablePlus features include:

Customizable UI: There’s no need to turn to Mojave. With TablePlus, you can customize your configurations and their appearance
In-line edits: Edit data rows and table structure with a single click

Winning feature: database security

TablePlus promises secure connections. The connection between you and your database is end-to-end encrypted –– no data is sent to a TablePlus server. Additionally, TablePlus ensures database credentials are stored securely in your device’s keychain and comes with built-in SSH. TablePlus also supports multi-step authentication and native libssh.

Robo 3T

(Photo courtesy of Robo 3T blog)

Overview

Robo 3T is an open-source, platform-agnostic, lightweight GUI for MongoDB. Formerly known as Robomongo, the company was bought in 2017 by 3T Software Labs and rebranded (Robo 3T also made it open source).

The project continues to be developed and has 8K stars on Github. In that vein, one of the best parts of using this GUI is the large community of users. Loads of tutorials, guides, and forums are available if you get stuck – just search.

Some notable Robo 3T features include:

Code autocomplete: While Robo 3T doesn’t have the autocompleting prowess of IntelliShell (see Studio 3T below), it does have a useful runtime autocomplete feature that works through an internal virtual machine.
Fast UI: All operations are done asynchronously, which means the application will never block you from working by freezing up.

Winning feature: embedded Mongodb shell

Many of the MongoDB GUIs have emulated mongo shells, but this GUI has an embedded mongo shell. The embedded shell provides increased functionality over an emulated shell because emulators generally run on top of a provided API, whereas an embedded shell works directly with MongoDB.

Studio 3T

(Photo courtesy of Studio 3T)

Overview

Studio 3T, formerly MongoChef, is the robust, professional version of Robo 3T owned by the same parent company, 3T Software Labs. Studio 3T is more than just a MongoDB GUI: it’s also an IDE and client. There is no free version of this software (unless you count Robo 3T), and the Core pricing level starts at $149/year per user. Even then, the Core level lacks features that pricier ones have, like SQL import/export, SQL queries, and the schema explorer.

Some notable Studio 3T features include:

IntelliShell: A smart, built-in mongo shell with autocomplete that supports Javascript standard library functions, collection and field names, operators, and methods.
Three ways to view data: Once you have retrieved your data from the database, you can view it in three different formats:
- Table View formats the data into rows and columns.
- Tree View formats the data into expandable hierarchies.
- JSON View formats your data as JSON documents.
Code generation: Export queries into Node.js, Python, Java, C#, PHP, Ruby, or the mongo shell language.
Data import: Support for data imports from SQL databases, Oracle, and Sybase.

Winning feature: four ways to query MongoDB and view data

Out of all MongoDB GUIs, Studio 3T provides the most ways to query your database. You can query using:

SQL queries: Query MongoDB using the SQL query language (super cool!)
The mongo shell: Built-in IntelliShell technology that provides robust autocomplete features
The Aggregation Editor: For building up complicated queries
The Visual Query Builder: A drag-and-drop editor for building out queries (fun fact: can be used side-by-side with IntelliShell)

Given this volume of query methods (including less “technical” ones), Studio 3T is usable for anyone, no matter their familiarity with document-based databases, query languages, or command lines.

NoSQLBooster

Overview

NoSQLBooster is a shell-centric GUI with a broad range of features that come with a paid license. The free tier is missing many of the features that make this GUI so great, like code completion and the visual query builder. NoSQLBooster does not work through a subscription model, so once you pay for a license, it’s yours forever (or until you want to update your version).

Some notable NoSQLBooster features include:

IntelliSense: Similar to Studio 3T’s IntelliShell, this language service appears as a tooltip while you type to suggest completions, methods, properties, variables, keywords, collection names, field names, and operators.
Interactive samples: In-app tutorials with prewritten queries and descriptions for learning how to use MongoDB.

A notable part of IntelliSense is the built-in snippets that offer code completion for operations like SQL to MongoDB data conversions and date ranges. You can also create your own snippets to save time.

Winning feature: NPM packages in the MongoDB shell script

The best feature of NoSQLBooster is the unique ability to add any NPM package into the MongoDB shell script. In fact, this GUI already comes with a number of useful and popular utility modules — like lodash, moment, bluebird, ShellJS, and math.js — in the global scope, ready to use.

HumongouS.io

(Image courtesy of HumongouS.io)

Overview

HumongouS.io is a fully online MongoDB GUI. Since it’s online, HumongouS.io allows users to collaborate pretty seamlessly. Instead of using it as just a GUI, you can set it up as a more fully-featured internal admin tool. You then don’t need to share database credentials but can instead invite people to collaborate with you from the app. You can even access your data on a mobile device.

Some notable features include:

Smart filters: Create filters that you can use to display your collections as chips, which enables quick access
Charts and dashboards: Easily create charts and dashboards to track the metrics that are important to you

Winning feature: widgets for customization

With HumongouS.io widgets, you can customize how your data displays and use those widgets to pull data from specific reference collections as needed. There are viewer, form, and layout widgets. Viewer widgets let you represent data in more meaningful ways than default string values.

Form widgets are, according to HumongouS.io’s documentation, “the building blocks of forms.” They’re also customizable, meaning you can match them to any data type in your database.

Layout widgets give you an alternative to the default table view, allowing you to display specialized data.

NoSQL Manager

(Image courtesy of NoSQL Manager)

Overview

NoSQL Manager is a shell-based MongoDB GUI tool. NoSQL Manager makes it easy to navigate, view, and edit documents, as well as set limits to maximize performance. You can manage, as the name implies, a lot of things, including collections and their indices as well as users, roles, and functions. It offers support for MongoDB Enterprise, MongoDB on Azure Cosmos DB, and Amazon DocumentDB.

Some notable features include:

Wide support: NoSQL Manager supports replica sets, sharded clusters connections, and standalone hosts
Document viewer: The NoSQL Manager document viewer and editor offer Tree, Table, and JSON view modes
SSH tunneling: NoSQL Manager offers SSH tunneling for MongoDB connections
Imports: Import tables from your MySQL and SQL Server databases

Winning feature: autocompletion

NoSQL Manager comes with a MongoDB UI Shell that offers code autocompletion, syntax highlighting, and hints. Autocompletion takes much of the guesswork out of MongoDB management, helping you by autocompleting things like the collection names and methods in MongoDB Shell commands. As you type into the Shell, NoSQL Manager uses context clues to provide collection or method completion.

Bonus: Retool

Overview

Retool is a internal tools platform where you can build any GUI for MongoDB (see template). Retool makes it possible to drag-and-drop visual components to avoid boilerplate code and connect to anything with a REST or GraphQL API, meaning you can build a full-featured MongoDB GUI—and include any CRUD operations—in just a few hours.

Some notable Retool features include:

Speed: Connecting Retool to MongoDB takes just a few minutes
Schema inspection: Visually view your data.
Save and share queries: Keep your queries handy for multiple uses.
Turn your queries into useful tools: go from query to table, search, and button without writing frontend code.

Winning feature: Customizable front end for visualizing data

You can use Retool’s pre-built components—including tables, buttons, text inputs, and search bars—to not only view your data but do any CRUD operations you need to keep your business going. Once you connect your data sources, you design your frontend with their drag-and-drop component tool.

The Best MongoDB GUI for Your Project

As with any tool, the best MongoDB GUI for you depends on what you’re trying to accomplish.

If you want to completely avoid the command line, MongoDB’s Compass is probably the most fully featured and natively integrated GUI out there. If you want a simple application that has a well-supported community, Robo 3T is the best GUI. If you’re familiar with SQL and want to keep writing queries in everyone’s favorite query language™, NoSQLBooster is going to feel slick. If you’re looking to easily share queries or turn your queries into tools, check out Retool.

The best React Native map libraries for time-strapped developers

kevbosaurus — Wed, 21 Apr 2021 18:51:13 +0000

When it comes to React Native map libraries, there are dozens to choose from. Rather than wasting your time combing through reviews, comparing library stats, and testing out sample code, we’ve created this simple guide to compile all of the top options in one place.

After trying out a handful of libraries ourselves, we’ve narrowed the field down to the top five that we think shine above the rest:

Overall, the most highly-rated pick of the bunch is react-native-maps. In this guide, we’ll take you through the reasoning behind our selection by comparing react-native-maps to the other finalist libraries.

Let's start by exploring why react-native-maps scored so highly in this review.

The most popular React Native map library

npm trends: Comparing react-native-maps, react-mapbox-gl, react-map-gl, react-native-open-maps, and react-native-google-maps-directions

A quick comparison of the libraries on npm trends will show that, at the time of writing, react-native-maps was used more than any other library, based on the number of downloads. This is a good metric to base a decision on as it suggests that more developers find the library suitable for their projects.

An average total of 115,000 downloads per week signals how many of the apps you see in app stores are derived from react-native-maps. Of course, react-map-gl also follows closely in the number of downloads, but we’re not making our argument based solely on how many developers use the library; we also care about stars. ⭐

Reviews from developers are a more convincing metric to support decision-making, so we took a peek at the stars that each of our sample elements has attained on GitHub.

npm trends: Statistics for chosen React Native map libraries

While react-native-maps and react-map-gl are neck-and-neck when it comes to downloads, react-native-maps is starred two times more often than react-map-gl. From these results, you can quickly deduce that react-native-maps has more promoters. However, there's plenty more to consider than just popularity.

Another statistic to watch is the last update timestamp. Over time, our pick has received regular updates. This reassures you that whatever app you create and merge with the library will get the latest themes, features, and enhancements, courtesy of the community's contributions. Having a modern app adds to how much users enjoy it.

Documentation and support for React Native map libraries

If you're going to commit your efforts to building apps with a library, it must have some good documentation. This way, you don't have to write emails, make calls, or even bother other developers on social media for support. Docs make it easy to get started building apps using guidelines from the creators of the tool and the community surrounding it.

Communities are the most efficient way of troubleshooting any bottlenecks you might encounter when using libraries. As to why we enjoyed using react-native-maps, we compared each of our five picks' communities. As expected, our preference trumps the rest with the following numbers:

react-native-maps has 109,000 active users and 400 official contributors.
react-mapbox-gl has 3,400 known users and 72 active contributors.
react-map-gl has just over 11,500 users and is supported by 125 contributors.
react-native-open-maps has less than a thousand (874) users and just 10 contributors.
react-native-google-maps-directions has 775 users and nine contributors.

How to get started with react-native-maps

The comparison part of this teardown is over and done with. By now, you’ve heard our take on react-native-maps. So, let's explore the various ways you can do that. Before you get started, make sure you're using the latest version of React Native available from its creators (Facebook).

Installing react-native-maps is as simple as things get with Node Package Manager. Simply run npm i react-native-maps.

When the installation process ends successfully, you can import components from the maps library into your existing projects. You can even have map views as the basis for your brand-new apps if that's what you're going for. If any of the code shared in this post fails to run on your instances, refer to the documentation for the alternative commands that match your environment variables.

The react-native-maps library comes packed with default component APIs:

<Marker />
<MapView />
<Polygon />
<Overlay />
<Heatmap />
<Geojson />
<Callout />
<Circle />
<Polyline />

You'll find comprehensive documentation for each of these on the library's repo.

The timely calling and placement of these components make for a customized implementation of the react-native-maps library. As the foundation for any map, the actual map should at least be rendered on screen. Let's go through the best way to get this done and set the canvas for customizations.

Initiate MapView

Now that we have the library at our mercy, we can import any of its APIs into our mobile app. To draw a map on the canvas of your app, run this command:

import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';

This alone is not sufficient to get the map you require. You'll get a blank canvas unless you specify its source by filling out the Provider property. Your options there would be "MapKit" or "GoogleMaps" for iOS and Android, respectively. Regardless of your choice here, you'll need an API access key from them. Get these from the Google console and your Apple Developer ID.

You can also specify the region first loaded when the map renders. For this, the region prop should be initiated. Here's how:

Setting the initial region for the MapView API

With this set, your map should load with an initial location defined each time. Nothing fancy, but as promised, this gives you a good starting point to make awesome apps. This very React Native map library is what Airbnb uses to display prices using callouts and is a core feature of their system.

Why you should consider react-native-maps library

If you’re looking for a React Native map library for your app, consider starting your search with react-native-maps.

This library is wildly popular among other developers, continually supported by contributors, and brimming with useful documentation. All of these factors together make for an easy development process, which really should sound like music to our ears.

Using the react-native-push-notification library for your React Native notification needs

kevbosaurus — Thu, 15 Apr 2021 16:02:37 +0000

Notifications are critical to the mobile experience. Not only are notifications an important way to interact with your users, but they also serve to grow user engagement and retention.

But notifications on a mobile platform can get complicated. In addition to “local” or “in app” notifications that you might want to display while the user is actively using your application, you might want to also use “push” notifications that bring users back when they aren’t using your application.

To make matters more complicated, the mechanisms for providing push notifications on Android and iOS devices are different. If you have simple notification needs, a notification library may not be necessary. However, the more complicated your notification needs, the more useful a library becomes to help manage them.

There are a number of React Native notification libraries to choose from, and this post will spotlight one of the leading options: react-native-push-notification.

Why react-native-push-notification is a popular React Native notification library

To start, the react-native-push-notification library supports local and push notifications, and uses a platform-independent approach to adding new features. This can be a huge advantage for developers who want speed to value now and flexibility for their future notification needs.

Given that react-native-push-notification is the most popular library, you can expect more complete documentation and helpful resources as you explore how to solve problems with a quick web search.

Although there are plenty of choices when it comes to third party React Native notification libraries (or even building your own), react-native-push-notification is a top option thanks to its popularity, support of both mobile platforms and notification types, many features, and a wealth of available documentation.

What to consider before building notifications from scratch or choosing a library

If you were sure you only needed a particular type of notification on a particular platform, it might make sense to create your own solution from scratch. Even in that case though, using a proven library allows you to save time by not replicating somebody else’s work. And since your application’s needs may change over time, it may be worth using a library that supports many notification types across many platforms, even if you don’t initially need to.

The APIs for sending local and push notifications are different, and to make things spicier, the APIs for doing both for Android and iOS are different, too. In addition, there are multiple mechanisms for sending push notifications. Since a library already exists to deal with all of these issues, in most cases, it makes sense to use a library rather than create your own solution.

When selecting which library to use to address a particular need, an easy way to start is to explore the most popular solution available. When a library is popular, that means many of those users already researched other possible solutions for the problem you’re trying to solve and decided on that library (the react-native-push-notification library, in this case). And the more popular a library is, the better it tends to be supported and the better its documentation.

It can sometimes be difficult to gauge how popular something is, but React libraries are downloaded from official repositories, and the download statistics are publicly available. Developers can also explicitly rate a library via stars if they like it, and those statistics are also publicly available.

Specifically, react-native-push-notification has over 5,600 stars, while the closest competitor (react-native-notifications) has less than half that number. The raw report has more information, but as you can see from just the download statistics below, it is clear that react-native-push-notification is by far the most popular React Native notification library.

Source: npmtrends

The main reason this library is so popular is that it presents a unified way to support both notification types on both platforms, but it is also chock full of features. These include scheduled notifications, as well as the ability to add custom badges and sounds.

Even though using a library makes dealing with React Native notifications simpler, there is still a fair amount of complexity that needs to be worked through. This is mostly because the mechanisms for sending push notifications are profoundly different, which adds a thick layer of complexity to an already complex problem.

On top of that, the way you register a device to receive notifications is vastly different between Android and iOS devices. So, documentation and support become even more important because of the inherent complexity that no library can completely eliminate. The GitHub page for the react-native-push-notification library provides excellent support and documentation.

You can also find more robust and helpful documentation to walk you through any issues you might encounter with the react-native-push-notification library. Some specific resources include:

Main website: https://github.com/zo0r/react-native-push-notification
Push notification tutorial: https://blog.logrocket.com/how-to-create-and-send-push-notifications-in-react-native/
Local notification tutorial: https://dev.to/adriantwarog/how-to-perform-local-push-notifications-on-react-native-without-remote-providers-like-firebase-or-onesignal-4034
Common mistakes: https://javascript.plainenglish.io/5-possible-reasons-your-notifications-are-not-working-react-native-d5c5a35ae3f
General support: https://stackoverflow.com/search?q=%22react-native-push-notification%22

Honorable mentions for React Native notification libraries

Even though react-notify-push-notification is the most popular option in most situations, there might be other situations where a different library may be a better fit. All of the options mentioned here also meet our criteria for being active and well supported.

react-native-notifications

This library is a close runner-up to react-notify-push-notification but offers fewer common features, is larger, and will take longer to load. Few common features mean there will be more code in your application doing roughly the same thing based on what platform the application is running on.

A significant advantage of this library is that it is sponsored by a well established company (Wix), which means it is highly likely to continue to be updated and supported in the future. Another advantage is that it has more platform-specific features (Android vs. iOS), so if you want to take full advantage of the notification features available for one or both platforms, then you might want to use this library.

react-native-onesignal

This library allows local notifications and push notifications via the OneSignal service. Because using OneSignal bypasses the normal push notification mechanisms, this library is much easier to use and much smaller. Using this library also provides for a unified notification system if you support more than one application or more than one mobile platform.

The main disadvantage to using this library is that a OneSignal account is required, and while some limited functionality is free of charge, significant use of the service costs money. The pricing structure, available here, is fairly complicated, but the free option is really only useful for push notifications to mobile platforms.

If you’re sure you will only ever need mobile push notifications or you are in a position to pay for the expected volume of notifications, then you might want to use this library.

react-native-root-toast

This is a relatively easy-to-use library that allows only local “toast” notifications. Toast notifications are simple, allow no user interaction, and can be set to expire after being displayed for a certain amount of time.

If you are sure you only need local notifications, then this library may be a better choice.

It’s time to stop worrying—start using the react-native-push-notification library today

Notifications, and especially push notifications, can be a critical and differentiating part of your mobile app experience. There are some best practices to follow, but the main point is that the best notifications are timely, personal, and actionable.

When done properly, notifications can increase user satisfaction and retention, so it is definitely an advantage to implement notifications in your application. Unfortunately, React Native notifications are difficult and usually require you to use a library.

For most situations, the library you want to use is react-native-push-notification. It supports both local and push notifications, both major platforms, is free to use, has many features, and is well-supported and documented.

2021 Internal Tools Developer Survey Results

kevbosaurus — Wed, 17 Mar 2021 23:25:49 +0000

During my time leading growth marketing Segment, I remember a handful of engineers spending a few months building a customer dashboard to provide our sales, success, and marketing teams with visibility into product usage, billing, engagement, etc.

This dashboard vastly improved the efficiency of our go-to-market side of the business and was also beautifully designed.

A LOT of work went into shipping just this one of many internal tools we used at Segment. And that type of work is often unnoticed by the public.

To shed some light (and recognition) on the engineering effort that goes into building internal tools, we (Retool) asked more than 650 developers.

Here are the summarized results:

Developers spend more than 30% of their time building internal applications.

That number jumps to 45% for companies with 5000+ employees. And on top of that, 4 out of 5 teams plan to keep or increase this level of investment over the next 12 months.

Why are internal tools and apps so important? And why do developers spend so much time on them?

We surveyed 650 developers and builders (see full PDF report here) and they had one clear goal in mind: making teams across the business more productive.

Note: The insights in this post were gathered from a public survey of 650 developers and technical leaders in Feb-Mar 2021. Check out our PDF report for a deeper breakdown of respondents by industry, country, and role.

The case for internal tools

Great customer experiences are often backed by a lot of hard back office work. What might appear as effortless student loans, corporate cards, or distanced learning frequently includes a lot of manual tasks and repetitive operations to get just right.

Companies build internal applications, also known as internal tools or back office apps, to give every team the tooling they need—from static dashboards to weekly scripts—to keep the business moving. At their best, internal apps help teams work the way they want. At their worst, internal apps consume more resources than they hoped to save. In either case, developers are spending a lot of time on internal apps.

COVID increased developer time spent on internal tools

As COVID-19 forced developers to re-evaluate their most important priorities, 87% of developers increased or maintained their time spent on internal apps in response to the pandemic.

And it’s not strictly developer time being invested. More than 57% of companies reported at least one full-time employee dedicated to internal tools.

Most of that headcount (42%) ends up being engineers, with some operations, data, product, and design folks, too. As companies grow, that overall investment in internal tools also grows. 77% of companies with 500+ employees have dedicated teams for building and maintaining internal apps.

From an industry perspective, companies in financial services are the most likely to invest fully in internal apps—2 out of 3 financial services companies reported a dedicated headcount to internal tools.

Working in finance often includes sensitive financial data and rigorous manual processes, a recipe that can lead these companies to prefer internal apps over pre-built SaaS (especially in the cloud) for better control over data and workflows.

What exactly are they building and why?

Developers build internal apps for both technical and non-technical teams, and most of these apps help manage, edit, share, or use the data most relevant to their function—i.e. CRUD on top of your data sources.

And these internal apps are being created to support several teams. Customer support might need a refund dashboard or an admin panel to update user records in their database. Sales might need a custom CRM for data entry. Engineering might need a PR approval queue connected to GitHub.

In any case, developers are building a lot of internal apps and, it turns out, they are servicing a large portion of their colleagues. For companies with >10 employees, 1 in 3 employees are using internal apps a developer has built. That’s super impactful!

That high usage bar means that it’s more important than ever to be able to measure how these apps are performing, and what return on investment they’re getting. Our survey shows that when it comes to measuring ROI, developers care most about improving employee productivity (54%), reducing business costs (33%), and increasing employee satisfaction (28%).

All together, these ROI metrics suggest developers want to create leverage across teams. But the top challenges they report—time, impact, ownership—reflect the struggle to find balance. Internal apps need to solve big problems across the company without weighing down the developers who build and maintain them.

The technology choices behind internal apps

No matter the size of the company or the industry, 2 out of 3 developers default to building from scratch, as opposed to using a spreadsheet or a SaaS tool.

While rolling your own apps (React, Django, etc.) gives developers flexibility and complete control, it’s the most time consuming and resource intensive (obviously). And given that 55% of developers struggle to find the time to build internal apps in the first place, it’s no surprise that custom-built tooling is not the most loved option available.

This is where low and no-code apps come in. These platforms can give developers the flexibility of something home-grown, but without the setup and infrastructure costs that take time and effort. Developers who use low/no code platforms report being more satisfied, successful, and loyal when compared to developers who chose any other technology option for building internal apps.

And while only 38% of developers surveyed actually use low/no code, the large majority (88%) of those that built internal apps using low/no code plan to keep building this way in the future.

Internal apps are deeply connected

Developers are connecting internal apps to all kinds of data sources—75% are connected to internal databases, 67% are connected to internal APIs, and roughly half are connected to 3rd party apps (e.g. Salesforce, HubSpot, Zendesk).

This deep integration across a variety of data sources is one of the main benefits of internal apps. By helping teams design how data comes together, developers are helping each team break from tool-centric approaches to actually work the way they want to work.

And as developers at every company continue to build and maintain more and more for internal apps, only time will tell what new technology preferences—and challenges—arise.

If you’re interested in seeing a more detailed breakdown of trends and technology preferences, get the full report here. And, if you're interested in building internal tools, checkout Retool here.

Forem: kevbosaurus

Top 5 MySQL GUI tools in 2021

Selection criteria

Adminer

Installation

Features and MySQL support

Best use cases

Beekeeper Studio

Installation

Features and MySQL support

Best use cases

CloudBeaver

Installation

Features and MySQL support

Best use cases

phpMyAdmin

Installation

Features and MySQL support

Best use cases

MySQL Workbench

Installation

Features and MySQL support

Use cases

Conclusion

What is low code?

What is low code? A primer

The three components of low code

What does low code do?

The future of low code is bright

Low code vs. no code: The differences and similarities

What is no code?

Low code vs. no code: the small differences

Low code vs. no code: the big difference

5 low code use cases

1. Internal tools

2. UI design

3. Integration and automation

4. Basic app development

5. MVPs and prototypes

Why low code? Benefits and drawbacks

Low code benefits

Drawbacks

Vendor lock-in

Shadow IT and governance

Scalability

How low code will shape the future of software development

Low code will add (more) abstraction

Low code will add, not disrupt

Low code will expand the circle of software development

The impact of low code on startups and enterprises

Low code and startups

Low code and enterprises

Low code is in your future (even if it isn't the future)

On-prem vs cloud: Why you have more options than you think

On-prem vs. cloud: The debate in a nutshell

Equipment ownership

Maintenance

Control

Startups and enterprises face different debates

The startup perspective: Start small and scale as necessary

The enterprise perspective: “If it ain’t broke, don’t fix it”

CAPEX vs. OPEX

The rise of self-hosting (and an end to the debate?)

What is self-hosted software?

The multi-cloud future

Re-evaluate your infrastructure needs from first-principles

The best React Native datepicker libraries

What to consider before choosing a library?

Why React-Native DateTimePicker is the best date picker library

Notable React-Native date picker library options to consider

React-native-modal-datetime-picker

React-native-date-picker

React-native-calendar-picker

Getting started with React-Native DateTimePicker

A React-Native date picker library for every use case

Top React component libraries (2021)

Table of contents

Material-UI

Material-UI components

Material-UI themes and theming