How does Gadget compare?
This guide is written to compare the differences between Gadget and other popular tools used to build applications.
Gadget is distinctly different than other methods of building application because of its unique abilities:
- Gadget is both a framework that organizes your application's code and a hosting platform for the application.
- Gadget includes an editor for building your application very quickly.
Node.js
Node.js is the most popular server-side JavaScript runtime, allowing developers to build backends of all sorts in JS. Node is a great choice for a backend because it's easy to learn and because of npm, which has a lot of functionality already written and ready for use.
Gadget is a framework on top of Node that provides tools and conventions for using Node productively for both server-side and client-side development. Gadget apps use Node running on Gadget's serverless platform under the hood. Gadget is like a node framework, as Gadget apps already know how to connect to the database, authenticate users, serve HTTP requests, host React applications, store files, and a lot more. Instead of having to select and configure libraries and technologies for each of these pieces as you might with raw Node.js or express, Gadget apps come pre-provisioned with everything you need to build an app. Gadget also supports plain old HTTP routes in the same way Node.js or Express might, so you can always drop down a layer to take over serving requests, and Gadget has a deep integration with Vite for building frontend React applications.
Because Gadget is higher level than Node, it can offer a bunch of extra features such as:
- a database editor
- a rich, structured logger
- a security and permissions framework
- one-click deploys for both backend and frontend
- one-click 3rd party API integrations that give Gadget applications instant access to events and data from platforms like Shopify.
Gadget uses a serverless platform for running your application, and the high-performance HTTP server fastify within each application for serving requests. Gadget layers on load balancing, database, caching, and security infrastructure to make your application reliable and scalable.
Node is a better choice when you're building something that doesn't look like a normal web application -- something that speaks a different protocol, heavily uses websockets, or has specific data requirements. Gadget doesn't offer every different type of hosted database -- we've focused on scaling two (Postgres and Redis), so if you want to use something else, you can connect from Gadget or use raw Node. For general-purpose web application development, we of course recommend using Gadget over raw Node.
Real-time backend services
Firebase
Firebase is a suite of modules for rapidly building mobile and web applications, which includes a database, authentication system, file storage system, serverless function system, static site hosting feature, and several other tools.
Similarly to Gadget, Firebase's tools are all hosted by Google, meaning that developers don't need to run a local database or file store. Instead, Gadget (or Firebase's) scalable, cloud-hosted systems can be used in both development and production environments. Both platforms handle scaling of your application by ensuring that your database and backend code run efficiently.
However, unlike Gadget, Firebase's components tend to be highly modular, requiring a certain level of expertise to wire together elements such as the authentication system with the database and function system. In contrast, Gadget's equivalent pieces are designed to work together right out of the box. For example, each Gadget app includes a React frontend already connected to the application's API from the start, eliminating the need to set up connectivity and deployment automation.
Firebase's databases are schemaless, untyped, and don't support transactions. The data's structure sent to Firebase is defined by the code that sends the data to Firebase. On the other hand, Gadget's database is schema-ful and typed, requiring only a small amount of upfront planning. Additionally, Gadget includes a rapid schema editor for quick and easy schema definition and editing. Unlike Firebase, Gadget's database is transactional, enabling business logic to run before or within a database operation. Each Gadget API is built in GraphQL, which validates types and prevents incorrect data from entering the system, and Gadget's generated API clients are fully typesafe.
Both Gadget and Firebase's databases support client-side real-time change notifications, which are great for building rich, up-to-date user interfaces.
In contrast to Firebase, Gadget offers one-click third-party connections to platforms such as Shopify for automatic syncing of events and data into your Gadget application.
Both Gadget and Firebase can host frontend applications built in React or any other frontend framework. However, Gadget provisions a React frontend codebase powered by Vite right out of the box and includes simple React hooks for easy communication with the backend API using @gadgetinc/react.
Supabase
Supabase is an open-source alternative to Firebase that provides a subset of its functionality on top of Postgres. With Supabase, you can generate an API quickly for storing data in a Postgres database, and it offers various modules such as the auth module, serverless function module, and file storage module.
In contrast to Gadget, Supabase allows for local development of apps that must then be deployed. Supabase has a cloud product that can host your production environment, and since it's open source, it can also be run elsewhere. On the other hand, Gadget works differently. It develops and deploys apps in the cloud, and as soon as they exist, they have a scalable, hosted, serverless database ready to use. However, it's important to note that the Gadget platform is closed source.
Supabase takes a unique approach to application development, with its focus on pushing as much work as possible into the Postgres database. For instance, many bits of business logic, such as security rules and computed fields, must be expressed as SQL snippets in Supabase. While JavaScript functions can be written, they are typically "attached" to existing events that have already happened within the database, rather than actively participating in them.
In contrast, Gadget's business logic is written entirely in JavaScript and can participate in database transactions that you would normally use in a standard backend development framework. Additionally, Gadget apps can easily use packages from npm, read or write records to the database, and make calls to third-party APIs.
Gadget apps also come with a built-in, native integration to Vite that allows for quick and easy building and deployment of React frontends alongside your backend application. While Supabase can also be used from React, setting up the connection and deploying the frontend requires manual work for each project.
Finally, Gadget stands out from Supabase with its one-click third-party integrations connections to platforms such as Shopify, which enables automatic syncing of events and data into your Gadget application.
Cloud development
Unlike a standard Node, rails, or python project, your Gadget application is developed and deployed in the cloud from the first moment it exists. Instead of creating a new project locally and fighting with version managers, broken permissions, databases, and other annoyances of development, each Gadget project is set up using high-quality infrastructure in the cloud. Gadget manages all this infrastructure, keeping it up-to-date and secure, so you can focus on building your specific application.
Here are some of the typical features required for backend development:
| Feature | The traditional way | The Gadget way | |
|---|---|---|---|
| Database | Run locally using docker, homebrew or similar | Managed instance in the cloud run by Gadget | |
| Backend runtime | Run locally using Node, python, version managers, etc | Gadget-managed serverless functions in the cloud | |
| Frontend JS | Built locally using webpack, Vite, etc. | Built using Gadget with Vite, or deployed to Vercel, Netlify, etc. | |
| HTTP routes | Built locally using a library or framework | Built using Gadget's file-based routes | |
| File storage | Added via library and/or cloud storage provider of choice | Built into each application, stored in managed Cloud Storage buckets with CDN | |
| API | Built locally REST or GraphQL library of choice | Customizable GraphQL API auto-generated for each application | |
| 3rd party API Integrations | Built locally with custom webhooks / polling / etc. | Managed data pipelines to 3rd parties like Shopify built right in | |
| Auth and permissions | Built locally with a library or 3rd party provider | Role-based access control built into each application with fully customizable permissions | |
| Hosting | Deployed to serverless, containerized, or other platform manually | One-click deploys to separate cloud environment | |
| Load balancing and SSL | Managed in production via cloud provider, Lets Encrypt, etc. | Automatically managed by Gadget | |
| Logs | Added via cloud or SaaS provider | Built-in application-aware structured logger | |
| Data viewer | 3rd party app like DBeaver or Postico | Built-in operator data viewer |
Frontend frameworks
Next.js
Next.js is a full-stack JavaScript framework for building web experiences using React. Next.js provides a remarkably easy-to-use system for packaging up all the bits needed to render a webpage with React, like JS bundling, minification, and image handling, as well as a system for serving up server-side data to the frontend. Next.js apps are full-stack in that they have a server-side component that can access a database or serve API responses.
Gadget is different than Next.js as it is a full-featured framework for full-stack development. Gadget is aimed at applications with logic like:
- Pages that touch many different bits of backend data
- Actions that require careful error handling and permissions management
- APIs that power one or more frontends
- Data pipelines to and from third-party systems
Gadget includes useful, integrated tools for building these kinds of applications that Next.js is often missing. Each Gadget app has a built-in, hosted, scalable relational database for storing data and a rich Action system for defining and executing behavior.
Conversely, Next.js is often used for sites that have a large static component or are mostly proxying data from a third-party system like Contentful or Shopify. You can still build whole backend applications in Next.js; you just end up using more libraries from the ecosystem for the backend instead of Next.js itself.
Next.js's main utility is in creating a great home for React development. Gadget also supports building and hosting React apps. Unlike Next.js, frontend development is also done within the Gadget platform, not just deployment, which means you benefit from the always-available, reliable development environment and one-click deploys that Gadget provides for backend logic as well. Next.js apps often require a frustrating initial deployment step to get them running in production after development, whereas Gadget apps are live and ready to go from the first moment they exist.
Gadget is often paired with Next.js if a project requires Next.js's advanced features. In this setup, Gadget is used to build and host a great, scalable backend with a GraphQL API, and then Next.js is used to build and host a great React frontend, which interacts with Gadget. A Next.js app can be hosted on other platforms or on Gadget itself with fastify-next.
Interfacing with Gadget apps from a Next.js app is supported well by Gadget's React hooks library. Each Gadget app
has an auto-generated, type-safe GraphQL API and API client library, which can be used from a frontend React app easily with the
@gadgetinc/react.
Unlike Next.js, Gadget supports one-click 3rd party connections to platforms like Shopify for automatic syncing of events and data into your Gadget application.
Here's a list of common concepts from Next.js and the corresponding concept in Gadget:
| Next.js concept | Gadget concept | Notes |
|---|---|---|
| Frontend framework - React | Frontend framework - React | Available out of the box, managed using Gadget's built-in Vite frontend hosting |
| Asset bundler - Webpack/Turbopack | Asset bundler - Vite | Available out of the box, managed using Gadget's built-in Vite frontend hosting |
pages/[id].tsx (Page route) | routes/GET-[id].jsx | Server-side HTTP Route handler in Gadget handler |
pages/api/[id].tsx (API route) | routes/api/GET-[id].jsx | No difference between api routes and page routes in Gadget HTTP Routes |
useQuery | useFindOne / useFindMany | Gadget provides react hooks for easy data access using @gadgetinc/react |
getServerSideProps | N/A | Gadget doesn't have built-in server-side rendering, but can be used with Next.js itself via the GraphQL API |
getStaticProps | N/A | Gadget doesn't have built-in static generation, but can be used with Next.js itself via the GraphQL API |
_app.tsx | routes/+scope.js | Groups of Gadget routes can be modified together using Route Plugins |
| Vercel, Netlify | Gadget platform | Gadget has serverless hosting built-in for both frontend and backend elements |
React
React is a popular library for building great web experiences. React is a frontend framework that makes it easy to add richness to applications and is frequently used to build the apps you use every day. React doesn't have a backend framework -- it is only concerned with building the user experience and must be paired with libraries and APIs to fetch and store data.
Gadget is a great complement to React, as it provides exactly what's needed to store data and host a React-based frontend. Each Gadget app comes with a hosted backend database already wired up, an auto-generated GraphQL API for data access, and a React codebase hosted and ready for development. In addition, Gadget provides a typesafe, auto-generated JavaScript client and a set of React hooks for quickly making API calls to the backend.
Gadget natively serves React frontends in development and in production using Vite (see Frontends), or a Gadget backend can be paired with React-specific hosting platforms like Vercel and Netlify.
Full-stack frameworks
Django
Django is a popular full-stack Python framework for building web applications. Django and Gadget are similar in that they are both comprehensive frameworks that include tools for connecting to databases, handling HTTP requests, organizing code, and serving various responses to frontends. Aesthetically, both Gadget and Django prioritize including security by default, authentication helpers, and integration across the layers for maximum developer productivity.
Like Django, Gadget includes many tools for building the backend of your application. However, unlike Django, Gadget includes hosting for both the frontend and backend of your application with each application. When you use django-admin startproject, the code produced on your machine still needs to be deployed. In contrast, gadget.new produces a real, live, running application in the cloud with a domain, load balancing, logging, security fixes, elastic scaling, fast cold start times, and more out of the box. Deploys in Gadget take one click and use infrastructure that the Gadget team manages, rather than you.
Django applications can connect to any database using Django's built-in ORM. Similarly, Gadget applications can connect to other databases using npm packages, but most users rely on Gadget's built-in auto-scaled database. Gadget takes responsibility for query optimization, indexing, scaling, backing up, and securing the database. In contrast, Django requires you to manage your own security, performance, and maintenance on your platform of choice.
Gadget has excellent support for developing and hosting React applications built-in with a Vite integration and the @gadgetinc/react hooks library. Django applications, on the other hand, tend to use less client-side JS and instead opt for server-rendered HTML. Django can host React apps with additional eggs, but it requires more setup and coordination of your own asset builder. Gadget has a deep, native integration with Vite for a great client-side developer experience.
Both Gadget and Django applications can power frontend applications written in JavaScript by exposing an API. Gadget provides a typesafe, auto-generated GraphQL API for each application, while Django users will need to construct their API with Django's building blocks or pypi packages. Django and Gadget both have great support for multi-page apps rendered mostly as HTML.
It's worth noting that currently, Gadget apps can only be authored in JavaScript, while Django apps can only be authored in Python.
Finally, unlike Django, Gadget supports one-click 3rd party connections to platforms like Shopify for automatic syncing of events and data into your Gadget application. While Pypi has code for connecting to many different platforms that work great, Gadget connections implement full-stack, automatic data sync between the two platforms instead of just outbound API calls.
Here's a list of common concepts from Django and the corresponding concept in Gadget:
| Django concept | Gadget concept | Notes |
|---|---|---|
models.Model | Gadget Model | Gadget models have a set of fields stored in the database, a set of associations, a set of validations, and a set of high-level functions that can be called on them like Django models |
django-admin migrate | N/A | Gadget's platform automatically adds and removes columns from the database in the development environment. |
| Model signals | Model Behavior Effects | Gadget models have a list of verbs (create, update, delete by default) turn into API endpoints. Each can have Effects added that run business logic. |
models.ForeignKey and relationship fields | Relationship field types | Gadget supports belongs to, has many, has one, and has many through relationships out of the box |
| View layer | React hosting in the frontend directory, @fastify/view for server rendered HTML | Gadget has frontend hosting for React apps built in, and support for the full fastify plugin ecosystem to supports .ejs files and layouts |
| Form helpers | React libraries like formik, react-aria, yup, etc | No built-in support for standard HTML forms. Many folks choose to use React and Gadget's automatic GraphQL API with a library like formik |
FileSystemStorage for file uploads | file | Support for file uploads and downloads in the GraphQL API and automatic provisioning of cloud storage both built into every Gadget app |
| Admin Site | Data Viewer | Gadget has support for developers managing their data within the Gadget Editor |
shopify_python_api egg | Shopify Connection |
Rails
Rails is a popular full-stack Ruby framework for building great web applications. Rails and Gadget are similar in that they are full-on frameworks, including tools for connecting to databases, handling HTTP requests, organizing code, and serving all manner of responses to frontends. Gadget and Rails are also similar in aesthetics, where both prefer convention over configuration, security by default, and integration across the layers for maximum developer productivity. Users of Rails will find many of Rails' great features in Gadget, like:
- A data modeling system that includes validations and associations
- A rich query system for reading and writing groups of related records all at once
- A router and middleware system for dispatching HTTP requests to different handlers
- An easy cloud file storage upload and download system
Like Rails, Gadget includes many tools for building your backend, but unlike Rails, Gadget apps are already developed and deployed in the cloud rather than on your local machine. gadget.new produces a real, live, secure, running application and database ready for development, whereas rails new produces code on your machine that you still need to deploy. Gadget apps get a domain, load balancing, logging, security fixes, elastic scaling, fast cold start times, and more right out of the box.Deploys in Gadget take one click (really!) and use infrastructure that the Gadget team manages instead of you.
Rails applications can connect to any database using Rails's built-in ORM. Gadget applications can also connect to other databases using packages from npm, but most users use Gadget's built-in, auto-scaled database. Gadget takes responsibility for query optimization, indexing, scaling, backing up, and securing the database. Rails requires you to manage your own security, performance, and maintenance on your platform of choice.
Gadget has great support for developing and hosting React applications built right in with a Vite integration and the @gadgetinc/react hooks library. Rails applications tend to use less client-side JS, and instead opt for server-rendered HTML and JS bridges like Stimulus. Rails can host React apps with gems like react-rails, but much of the Rails community is philosophically opposed to the React approach.
Both Gadget and Rails applications can power frontend applications written in JavaScript by exposing an API. Gadget provides a typesafe, auto-generated GraphQL API for each application, while Rails users will need to construct their own API to their liking with Rails' building blocks or Rubygems. Rails and Gadget both have great support for multi-page apps rendered mostly as HTML -- see Gadget's HTTP Routes feature for server rendering HTML.
Rails has several built-in features that Gadget expects to have in the future, like background jobs, email sending, and testing support. Currently, Gadget apps can only be authored in JavaScript, and Rails apps only in Ruby.
Unlike Rails, Gadget supports one-click 3rd party connections to platforms like Shopify for automatic syncing of events and data into your Gadget application. Rubygems has code for connecting to many different platforms that work great, but Gadget connections implement full-stack, automatic data sync between the two platforms instead of just outbound API calls.
Here's a list of common concepts from Rails and the corresponding concept in Gadget:
| Rails concept | Gadget concept | Notes |
|---|---|---|
ActiveRecord::Base | Gadget Model | Gadget models have a set of fields stored in the database, a set of associations, a set of validations, and a set of high-level functions that can be called on them like Rails models |
rails db:migrate | N/A | Gadget's platform automatically adds and removes columns from the database in the development environment. |
ActiveRecord callbacks | Model Action Effects | Gadget models have a list of verbs (create, update, delete by default) turned into API endpoints. Each can have Effects added to run business logic. |
ActiveRecord associations | Relationship field types | Gadget supports belongs to, has many, has one, and has many through relationships out of the box |
| Controllers | HTTP route files | Gadget uses filesystem-based route handlers and plugins, see HTTP Routes |
routes.rb | routes/posts/GET-[id].js (file-based routing syntax) | HTTP handlers declare their route using their filename, see HTTP Routes |
ActionView and .erb templates | React hosting in the frontend directory, @fastify/view for server rendered HTML | Gadget has frontend hosting for React apps built in, and support for the full fastify plugin ecosystem to supports .ejs files and layouts |
| Form helpers | React libraries like formik, react-aria, yup, etc | No built in support for generating forms for models or automatic validation messages in Gadget |
ActiveStorage | file | Support for file uploads and downloads in the GraphQL API and automatic provisioning of cloud storage, both built into every Gadget app |
shopify_api Rubygem | Shopify Connection | Connections automatically manage OAuth, receive webhooks, and sync historical data |
Remix
Remix is a full-stack JavaScript framework for building web applications in React. Remix gives developers tools for writing server-side bits of their application for connecting to databases and running business logic, as well as tools for writing the client-side logic for rendering HTML and a rich user experience.
Remix is great at server-side rendering a frontend application and progressively enhancing it on the client as needed. Remix can be used to build a full-stack application, but lacks general-purpose support for common backend needs like authentication, databases, file storage, APIs, etc. Remix supports using packages from the npm ecosystem like prisma or graphql-yoga just fine, but is largely focused on building a great seam between the frontend and backend for the best end- user experience.
Gadget is also a JavaScript framework for full-stack development, and so serves a similar need as Remix. Like Remix, Gadget has support for hosting both frontend React code and backend business logic, and a layer for communicating between the two (using @gadgetinc/react). Unlike Remix however, Gadget includes a rich set of tools for building a full-stack application, including a database, authentication, file storage, a GraphQL API, and an data editor. Gadget apps are also already deployed when you create them, so you can start building your application right away, and get it into the hands of users as soon as you are ready.
Gadget apps can be paired with Remix apps to great success. Remix apps can be deployed to a traditional host like Vercel or Netlify and then communicate with the Gadget backend where the business logic is implemented using GraphQL and @gadgetinc/react.
Redwood
Redwood is a full-stack JavaScript framework for building web applications with React, GraphQL, and Prisma. Redwood stitches together modules from npm to give a full-stack development experience. Both Redwood and Gadget include facilities for connecting to a database, building GraphQL APIs, authentication, and implementing custom HTTP routes. Both Redwood and Gadget can use packages from the greater JS ecosystem on npm for additional functionality.
Gadget and Redwood both generate a GraphQL for your application as you build it. Unlike Redwood, Gadget's GraphQL API is fully-featured from the start, supporting CRUD on your models, as well as file uploads, nested action execution, advanced relationship management, and more. Redwood's GraphQL API is powered using GraphQL Yoga and requires the developer to write their own resolver code for most uses.
Redwood includes light functionality for building out a client-side React application with a client-side router and Cells for declarative data fetching. Gadget apps also come with a hosted React frontend powered by Vite. Both Gadget and Redwood support automatic asset bundling for production and hot module reloading for a nice out of the box development experience.
Unlike Redwood, Gadget apps are already hosted on the Gadget's platform and come with a scalable database already wired up. Redwood applications require setting up your own database, load balancers, and backend hosting, often on a serverless platform. Like any other raw database system, Redwood applications also require you to manage the scalability of your own database to add indexes and optimize queries if things get slow. Redwood applications also require hosting the application tier, whereas Gadget apps get a domain, load balancing, logging, security fixes, elastic scaling, fast cold start times, and more all out of the box.
Gadget also supports powerful, one-click 3rd party connections to platforms like Shopify for automatic syncing of events and data into your Gadget application.
Redwood applications can connect to a variety of different databases with Prisma. Gadget applications can also connect to any database with a package from npm, but most Gadget users use the built-in Gadget database, which is managed and scaled by the Gadget platform.
Shopify
Shopify is a platform for ecommerce. Shopify allows folks to start, build and scale ecommerce operations, with many facilities for extension and customization to build great end-user experiences. Merchants using Shopify don't need to know how to code, but can employ code to customize the look and feel of their store if they choose. Shopify supports lightweight customization of its business logic, but can't host arbitrary backend code.
Gadget is a developer-focused stack for building applications that augment Shopify. Gadget's Shopify Connection is a one-click data integration tool for communicating with the Shopify API, which gives webhook reception, historical data sync, rate limit handling, OAuth handling, metafield support, and more right out of the box. Gadget can be used to build Admin Apps, which implement some specific automation or workflow for one merchant, or Public Apps for many merchants listed in the Shopify App Store.
Gadget apps can use any Shopify features:
- writing metafields to Shopify, Gadget apps can export data that is then available for use in the Liquid theming system
- serving a frontend, Gadget apps can create merchant-facing admin tools embedded right in the Shopify Admin (see the @gadgetinc/react-shopify-app-bridge package)
- generating Shopify Checkout UI extensions or Shopify Functions, Gadget apps can customize the checkout process
- connecting to Shopify and 3rd party APIs using JavaScript, Gadget can integrate other systems with Shopify
Gadget also includes a ready-to-develop React frontend powered by Shopify Polaris, Shopify's App Bridge, and Gadget's extensions, so you can very quickly get the full-stack for a Shopify app up and running.
Gadget applications are full-featured applications that run independently of Shopify. They can do anything that custom software can do, like rendering arbitrary webpages, making calls to third-party APIs, storing data, and more.
Most code for Shopify is written using JavaScript for the browser and with the Liquid template language. Gadget applications are written using JavaScript for the server, running within Node.js.