Gadget Vs X
This guide is written to explain the differences between Gadget and other popular ways of building applications. We've tried to honestly document Gadget's capabilities compared to existing tools today.
There are two key features that make Gadget different than other systems:
- 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
Read more about the features Gadget gives each application in What Gadget Gives You.
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 assets | Built locally using webpack, vite, etc | Hosted within your Gadget app 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 autogenerated 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 |
Gadget vs Next.js
Next.js is a fullstack 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 backend development. Gadget is aimed at applications with lots of 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 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 instead of Next.js itself for the backend part.
Next.js's main utility is in creating a great home for React development. Gadget supports hosting React apps through the ecosystem of Fastify plugins for React development, but doesn't have a turnkey React hosting mechanism built right in like Next.js does.
Gadget is often paired with Next.js, where 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 autogenerated, 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 - any | Rendered using fastify plugins |
| Asset bundler - Webpack | Asset bundler - any | Added using fastify plugins |
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 |
getServerSideProps | N/A | Gadget doesn't have a built-in frontend data fetching system, 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 right in |
Gadget vs 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 best 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 fetch and store data for a Reacat-based frontend. Each Gadget app is a hosted backend with a database already wired up, and an autogenerated GraphQL API for connecting to and from a React frontend. Gadget provides a typesafe, autogenerated JavaScript client for each application, and a set of React hooks for quickly making API calls to Gadget in the specific React style.
Gadget can serve React frontends through the ecosystem of Fastify plugins, or a Gadget backend can be paired with React-specific hosting platforms like Vercel and Netlify.
Gadget vs Rails
Rails is a popular fullstack 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 aesthetic, 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 modelling 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.
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, autoscaled 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.
Both Gadget and Rails applications can power frontend applications written in JavaScript by exposing an API. Gadget provides a typesafe, autogenerated 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 has an esbuild based frontend asset manager built in, and Gadget supports serving frontend assets like JS code via ecosystem of Fastify plugins. Rails users tend to prefer less frontend code and use more server-rendered HTML, whereas Gadget users tend to prefer React or other frontend frameworks which communicate with a backend using GraphQL. Rails and Gadget both have great support for multi-page apps rendered mostly as HTML.
Rails has several built-in features that Gadget expects to have in the future, like background jobs, email sending, and out-of-the-box webpack 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 fullstack, 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 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 | @fastify/view | Added to Gadget via a fastify plugin, supports .ejs files and layouts |
| Form helpers | N/A | 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 |
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 |
Gadget vs Django
Django is a popular fullstack Python framework for building great web applications. Django 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 Django are somewhat similar in aesthetic, where both prefer to include security by default, authentication helpers, and integration across the layers for maximum developer productivity.
Like Django, Gadget includes many tools for building your backend. Unlike Django, Gadget includes hosting with each application. django-admin startproject produces code on your machine that you still need to deploy, and gadget.new produces a real, live, running application in the cloud. Gadget apps get a domain, load balancing, logging, security fixes, elastic scaling, fast cold start times, and more all out of the box.
Django applications can connect to any database using Django's built-in ORM. Gadget applications can also connect to other databases using packages from npm, but most users use Gadget's built-in, autoscaled 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.
Both Gadget and Django applications can power frontend applications written in JavaScript by exposing an API. Gadget provides a typesafe, autogenerated GraphQL API for each application, while Django users will need to construct their own API to their liking with Django' building blocks or pypi packages. For single-page apps in React or other frameworks, both Django and Gadget use plugins from their respective ecoystems to wire up rendering and asset bundling. Django and Gadget both have great support for multi-page apps rendered mostly as HTML.
Currently, Gadget apps can only be authored in JavaScript, and Django apps only in Python.
Unlike Django, Gadget supports one-click 3rd party connections to platforms like Shopify for automatic syncing of events and data into your Gadget application. Pypi has code for connecting to many different platforms that work great, but Gadget connections implement fullstack, 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 automatically. |
| 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 relationships out of the box |
| View layer | @fastify/view | Added to Gadget via a fastify plugin, supports .ejs etc view files and layouts |
| Form helpers | N/A | 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 | Connections automatically manage OAuth, receive webhooks, and sync historical data. |
Gadget vs Node.js
Node.js is the most popular serverside 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. Gadget apps use Node running on Gadget's serverless platform under the hood. Gadget apps already know how to connect to the database, authenticate users, serve HTTP requests, GraphQL API responses, and a lot more. Instead of having to select and configure libraries and technologies for each of these pieces like you might with raw Node.js or Express, Gadget apps come pre-provisioned with everything you need to build a backend. 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.
Because Gadget is higher level than Node, it can offer a bunch of extra features such as: a database editor, logger, and security framework built right in. 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 (PostgreSQL and Redis), so if you want to use something else, you can connect from Gadget or use raw Node.
Gadget vs Remix
Remix is a fullstack 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 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 fullstack 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 apps are often 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'.
Gadget vs Redwood
Redwood is a fullstack JavaScript framework for building web applications with React, GraphQL, and Prisma. Redwood stitches together modules from npm to give a nice fullstack 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 full featured from the start, supporting CRUD on your models, as well as file uploads, nested action execution, relationship convergence, 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 don't have a built-in frontend component, and so can be used with any frontend framework and build system like Next.js, Remix, or a plain old create-react-app.
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.
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.
Gadget also supports one-click 3rd party connections to platforms like Shopify for automatic syncing of events and data into your Gadget application.
Gadget vs Firebase
Firebase is a collection of modules for quickly building mobile and web applications. Firebase includes a database, an auth system, a file storage system, a serverless function system, and a suite of other tools.
Like Gadget, Firebase's tools are all hosted by Google. Developers don't need to run a database or file store locally, and instead use Gadget (or Firebase's) scalable, cloud-hosted systems in development and production. Both Gadget and Firebase take responsibility for scaling your application by ensuring your database and backend code run scalably.
Unlike Gadget, Firebase's elements tend to be very modular. Wiring together Firebase's authentication system with their database and the functions system takes a fair amount of know-how. Unlike Firebase, Gadget's equivalent pieces already know about each other and are working together right out of the box.
Firebase's databases are both schemaless, untyped, and don't support transactions. The shape of the data sent to Firebase is defined in whatever code sends the data to Firebase. Gadget's database is schemaful and typed, which requires a bit more up-front planning, and includes a rapid schema editor for very fast schema definition and editing. The Gadget database is also transactional and allows 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.
Firebase's datastore supports real-time subscriptions and notifications, which makes it great for building applications where data changes are immediately visible to the user. Gadget's database doesn't yet support real-time change notifications.
Both Gadget and Firebase's serverless functions can be used to host a frontend application built in React or any other frontend framework.
Unlike Firebase, Gadget supports one click 3rd party connections to platforms like Shopify for automatic syncing of events and data into your Gadget application.
Gadget vs Supabase
Supabase is an open source alternative to Firebase that implements a subset of Firebase's functionality on top of PostgreSQL. Supabase quickly generates an API for storing data in a Postgres database, and has an auth module, serverless function module, and file storage module alongside.
Unlike Gadget, Supabase apps can be developed locally and then must be deployed. Supabase has a cloud product offering, but Supabase is open source and can be run elsewhere. Gadget apps are already deployed as soon as they exist, having a scalable hosted database ready from the start. Gadget apps are developed in the cloud, and the Gadget platform is closed source.
Supabase takes an interesting approach to application development which is to push as much work as possible into the PostgreSQL database. Many bits of business logic like security rules and computed fields must be expressed as SQL snippets in Supabase. JavaScript functions can be written, but they are "attached" to existing events that have already happened within the database, as opposed to participating in them.
Unlike Supabase, Gadget's business logic is all written in JavaScript, and can participate in the database transaction you might normally use in a standard backend development framework. Gadget apps can easily use packages from npm, read or write records to the database, make calls to 3rd party APIs, etc.
Gadget also supports managed 3rd party connections to platforms like Shopify for automatic syncing of data into your Gadget application.
Gadget vs Shopify
Shopify is a platform for ecommerce. Shopify allows folks to start, build and scale e-commerce 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, metafields 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:
- by writing metafields to Shopify, Gadget apps can export data that is then available for use in the Liquid theming system
- by 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)
- by generating Shopify Scripts or Shopify Functions, Gadget apps can customize the checkout process
- by connecting to Shopify and to 3rd party APIs using JavaScript, Gadget can integrate other systems with Shopify
Gadget applications are full-featured backend applications that run independently of Shopify, so 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.