CARTO for React: A faster way to develop spatial applications
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.
Introducing CARTO for React
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.
Templates to Kickstart Development
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.
Beautiful Themes for Spatial Applications
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.
Demo Showcase
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.
{% include icons/icon-quotes.svg %} We’ve been able to reduce development time by more that 50%
Ram de Guzman Geospatial Product Manager at Thinking Machines.
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.
Revamping our Developer Resources
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.
All part of an Open Source Ecosystem
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.
Start using CARTO for React today
CARTO for React is available today for all CARTO users. You can sign up for a free CARTO account and get started right now.
Check our documentation for more information and if you have any questions or want a personalized demo please reach out to us.
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?
.png)
