Application development is a key requirement for many organizations that need to provide custom experiences for their users. This can range from a simple interface providing access to data in a very specific manner (e.g., data monetization) to a more complete solution to support complex business decision-making (e.g., site selection).
The commonality is that organizations require a fast, productive, and flexible platform to help them build these types of applications. CARTO already offers APIs and libraries, such as deck.gl, to help build these spatial applications. However we often hear feedback from our customers and partners that they still need to invest a lot of their own time to create an end-to-end application. Time spent designing the UI/UX, creating a repository for version control, configuring scripts for different development activities like builds, deployments, or local development servers, and setting up development tools like linters or formatters, and so on.
Today we are announcing a further development resource to help our partners and customers to be more productive building apps, by opening up the same tools we use to create CARTO itself, and announcing CARTO for React. With this announcement our goal is to make development of spatial applications at least twice as fast.
React is currently one of the most popular frameworks for building web applications. We are convinced that the React library along with Redux provides an unmatched environment for building Location Intelligence applications.
We understand that you might want to use other frontend frameworks to develop apps with the CARTO platform like Angular or Vue.js. For that reason, we’ve made sure that our CARTO for deck.gl module works perfectly with these frameworks and have included examples and guides in our documentation site to help you with your app development. We will also be adding full support for other frameworks in the near future.
CARTO for React provides application templates to kickstart the app development process and a well designed library that includes packages for user interface components, state management, or to simplify connections with the CARTO platform through our APIs. In the following diagram you can see the different functionality provided by the library.
Most spatial applications are based on a common layout. Therefore we have extended the great work from Create React App, the de facto standard for building React applications, to provide a skeleton for building apps and a template that can be useful for many different geospatial solutions.
Click on the image to open the sample app
We have created two different templates for Create React App: the blank template for starting your application with the minimum configuration and the sample app template for showing how you can implement the functionality. When creating an application using our templates, you obtain a preconfigured environment with everything you need to start the development work by just issuing a single command in your console.
The templates are designed to have a clear separation of concerns with a structure optimized for managing those components usually found in an LI application: the map, views, data sources, layers, and widgets. We also provide a code generator based on Hygen that lets you create views, data sources, and layers by just using the console.
To provide the best user experience, we know it is fundamental to have an awesome look and feel. So, we have created a theme for the popular Material-UI React UI framework, based on many years of experience and have added custom LI widgets not currently found in this framework (formula, category, histogram, pie, etc.).
All of this is available in a convenient storybook that contains all of the customized UI components.
We know you want to get hands-on experience of using an spatial app built with CARTO for React, so we have worked with an important partner, Thinking Machines, to create a full app that you can test and also download and modify if you wish.
In this telecoms focused application you can learn how to implement a geographic profiling tool to analyze a region around Bangkok (Thailand), focusing on information about telecommunications (internet speeds, cellular towers etc) and you can also explore how you can build a tool to help you optimize capex that uses suitability analysis by combining different data variables and weightings.
To build a great spatial application, you need data that you can trust. For this demo, one of our key data partners, Experian, has provided a data sample containing socio-demographics, spending information and consumer segments. This is a great example of leveraging the Data Observatory to provide an enhanced application user experience.
You can access the application here and you can browse or download the source code from this Github repository. In the README.md file you will find some technical documentation detailing how the application is built.
In addition to launching CARTO for React, we have also developed a brand new documentation site with a wealth of resources and examples to help developers build powerful spatial applications more quickly.
We are huge fans of open source and we are actively contributing to many open source projects. This product is based on some great open source libraries and frameworks like deck.gl (part of the vis.gl framework), React, Redux, and Material-UI.
CARTO for React is open source, both the templates and the library, and we would be really happy if we could create a dynamic developer community around it with our customers and partners. Please reach out to us if you would like to be a part of this growing community.
CARTO for React is available today for all CARTO users. You can sign up for a free CARTO account and get started right now.
This is just the beginning. In the coming months we will continue adding support and examples to other libraries. In the meantime, we can’t wait to see the amazing applications you develop!
Want to get started?Sign up for a free account
Introducing BigQuery TilerNews
Please fill out the below form and we'll be in touch real soon.