Building UI Applications using MarkLogic Grove

October 21, 2019 Data & AI, MarkLogic

When developers try to build something on MarkLogic, they often ask: how do I connect to it? How do I get data into and out of it? Oftentimes, these questions aren’t even relevant to what they are building. What if there was a tool that did this work for you so you can get to building what you wanted to create in the first place?

The community-driven MarkLogic Grove project provides a toolkit full of tooling, templates, and other resources that help with building UI applications on top of MarkLogic. Grove provides extensible middle-tier and UI applications implemented in various programming languages. These can be implemented in various programming paradigms. A middle-tier application could be written in Node (with Express middleware) or Java Spring Boot, and a UI application could be in React or Vue.js.

Grove-generated applications conform to Grove API specs for communication between the UI and the middle-tier, and can be extended beyond those specs. There are a few benefits to using Grove, including:

  • Ease of Use: Enable rapid bootstrapping of UI-rich applications backed by MarkLogic; Deliver pre-packaged demos in addition to an app-building toolkit; Leverage existing MarkLogic technologies and skills; Provide supported upgrade paths.
  • Consistency of experience: Commonalities when moving between Grove projects; Develop within a single programming ecosystem; Shared APIs across these ecosystems.
  • Adoption of existing conventions, standards, and tools: For each Grove middle-tier or UI, you are placed into that ecosystem and can use the tools and conventions of that ecosystem to extend or modify your application. Because of this, you can hand off the application to a person who does not necessarily need to know about or understand Grove in order to be successful.
  • Extensibility: Modular, pluggable, extensible architecture.

Now we will take a closer look at Grove’s history, why it’s useful, who it’s for, and where you can find related resources.

Why Grove?

One of the biggest pains for the Solutions Engineering team when building out demonstrations for their customers was having to start from scratch every time. There was a certain set of functionality that we always needed, which included authentication, session management, searching, visualization, and showing facets and data.

Rather than start from scratch every time a demo was built, the team initially developed a Slush generator project that got the “plumbing” of the project out of the way, so the only thing left to do was customize it. In other words, all you have to is make additional components that would talk to your custom REST endpoints, or display search the way you want it to.

Grove both modernized and extended that project with far more options. Grove contains a collection of UI templates and middle-tier patterns, with the ability to choose a Node or a Java flavor for the project, and a React or Vue flavor for the UI. If you’re looking to build a web-based interface that is talking to MarkLogic where you can log in and search your collections out-the-box, starting with Grove will get all the tedious work out of the way. And the best part: you don’t even have to know how any of it works.

Who should use this?

In order to create a useful interface for MarkLogic, you need to know what the data looks like. Our engineers do this well because they sit down with the customer to really get to know what data they’re working with.

If you’re looking to build an application on top of MarkLogic, you will need to figure out what your data looks like before jumping into Grove. If you have existing knowledge of how MarkLogic works and how the data will be sourced, then you’ll probably do just fine using the tool. If you’re asking questions like “what’s a document database? Am I using XML or JSON?” then this tool is probably not for you.

Where can I find Grove?

You can find documentation pertaining to Grove on its GitHub Wiki. Here you’ll find information about Grove, what the vocabulary means, and frequently asked questions.

Grove is modular by design, and is split across multiple repositories on GitHub, each specific to a particular use. Below you’ll find a table with Grove’s associated repositories as well as a description for what it’s used for:

GitHub RepositoryDescription
grove Repository that contains only documentation.
grove-cliCommand-line interface for generating and working with Grove projects.
grove-core-apiThis project provides OpenAPI v3 specifications for Grove-compliant middle-tier implementations. It concerns the public-facing REST endpoints.
grove-ml-gradleThis Grove app is meant to support configuration of MarkLogic databases, app-servers, users, roles, etc. It also supports deployment of application code, and import of content.
grove-nodeThis contains the Node.js implementation of a Grove Middle-Tier. It is currently the default middle-tier for that project.
grove-react-map-componentsA collection of map-related React components for displaying geospatial data stored in MarkLogic.
grove-react-uiThis project provides a skeleton for a React front-end stack, designed to run against a grove-node middle-tier, backed by MarkLogic.
grove-react-visjs-graphThis library provides React components providing an interactive graph visualization of nodes and edges.
grove-spring-bootThis is the middle-tier project for MarkLogic Grove UI framework.
grove-vue-core-componentsThis library includes diverse search ui components. The library is part of the MarkLogic Grove project, but could work in any Vue application.
grove-vue-uiThis project provides a skeleton for a Vue.js front-end stack, designed to run against a grove-node middle-tier, backed by MarkLogic.

How do I get help?

If you’re having troubles with Grove, or have a question you’d like to ask the team, submit it to the GitHub Issues Tracker for that repository with the tag “bug” or “question”, and a team member will get back to you. Use the tag “enhancement” if you have a great idea for a new feature.

Or, you can use the #marklogic-grove tag on StackOverflow to ask questions. You can also check out Frequently Asked Questions on Grove’s GitHub Wiki.

Ready to get started?

If you’re ready to get started, go to the Getting Started tutorial on the GitHub Wiki.

Future plans with Grove include integrating the tool with Data Services, and enhancing visualization features— such as graphs, semantics, and triples. So look out for upcoming releases on GitHub!

Matt Pileggi

Matt Pileggi is a Senior Field Engineer at MarkLogic with a passion and affinity for front-end application development. He is a contributor to @marklogic-community Grove, a project that provides both React and Vue components for use with MarkLogic. Matt works with JavaScript and HTML to bring the power of MarkLogic to the end-user.