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's two key features that make Gadget different than other systems:

  1. Gadget is both a framework that organizes your application's code and a hosting platform for the application;
  2. 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's some of the typical features required for backend development:

FeatureThe traditional wayThe Gadget way
DatabaseRun locally using docker, homebrew or similarManaged instance in the cloud run by Gadget
Backend runtimeRun locally using node, python, version managers, etcGadget-managed serverless functions in the cloud
Frontend assetsBuilt locally using webpack, vite, etcHosted within your Gadget app or deployed to Vercel, Netlify, etc
HTTP routesBuilt locally using a library or frameworkBuilt using Gadget's file based routes
File storageAdded via library and/or cloud storage provider of choiceBuilt in to each application, stored in managed Cloud Storage buckets with CDN
APIBuilt locally REST or GraphQL library of choiceCustomizable GraphQL API autogenerated for each application
3rd party API IntegrationsBuilt locally with custom webhooks / polling / etcManaged data pipelines to 3rd parties like Shopify built right in
Auth and permissionsBuilt locally with a library or 3rd party providerRole based access control built in to each application with fully customizable permissions
HostingDeployed to serverless, containzered, or other platform manuallyOne click deploys to separate cloud environment
Load balancing and SSLManaged in production via cloud provider, Lets Encrypt, etcAutomatically managed by Gadget
LogsAdded via cloud or SaaS providerBuilt-in application aware structured logger
Data viewer3rd party app like DBeaver or PosticoBuilt-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 and 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 which 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 which require careful error handling and permissions management
  • APIs which 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 which 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 conceptGadget conceptNotes
Frontend framework - ReactFrontend framework - anyRendered using fastify plugins
Asset bundler - WebpackAsset bundler - anyAdded using fastify plugins
pages/[id].tsx (Page route)routes/GET-:id.tsxServer side HTTP Route handler in Gadget handler
pages/api/[id].tsx (API route)routes/api/GET-:id.tsxNo difference between api routes and page routes in Gadget HTTP Routes
getServerSidePropsN/AGadget doesn't have a built in frontend data fetching system, but can be used with next.js itself via the GraphQL API
getStaticPropsN/AGadget doesn't have built in static generation, but can be used with next.js itself via the GraphQL API
_app.tsxroutes/+scope.tsGroups of Gadget routes can be modified together using Route Plugins
Vercel, NetlifyGadget platformGadget 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-side 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 React based frontend. Each Gadget app is a hosted backend with a database already wired up, and an autogenerated GraphQL API for connecting to 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 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 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 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 conceptGadget conceptNotes
ActiveRecord::BaseGadget ModelGadget 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:migrateN/AGadget's platform automatically adds and removes columns from the database in the development environment automatically.
ActiveRecord callbacksModel Behavior effectsGadget models have a list of verbs (create, update, delete by default) turn into API endpoints. Each can have Effects added that run business logic.
ActiveRecord associationsRelationship field typesGadget supports BelongsTo, HasMany, HasOne, and HasManyThrough relationships out of the box
ControllersHTTP route filesGadget uses filesystem based route handlers and plugins, see HTTP Routes
routes.rbroutes/posts/GET-:id.js (file based routing syntax)HTTP handlers declare their route using their filename, see HTTP Routes
ActionView and .erb templates@fastify/viewAdded to Gadget via a fastify plugin, supports .ejs view files and layouts
Form helpersN/ANo built in support for standard HTML forms. Many folks choose to use React and Gadget's automatic GraphQL API with a library like formik
ActiveStorageFileSupport for file uploads and downloads in the GraphQL API and automatic provisioning of cloud storage both built in to every Gadget app
shopify_api RubygemShopify ConnectionConnections automatically manage OAuth, receive webhooks, and sync historical data

Gadget vs Django

Django is a popular full stack 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 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 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 conceptGadget conceptNotes
models.ModelGadget ModelGadget 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 migrateN/AGadget's platform automatically adds and removes columns from the database in the development environment automatically.
Model signalsModel Behavior effectsGadget 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 fieldsRelationship field typesGadget supports BelongsTo, HasMany, HasOne, and HasManyThrough relationships out of the box
View layer@fastify/viewAdded to Gadget via a fastify plugin, supports .ejs etc view files and layouts
Form helpersN/ANo 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 uploadsFileSupport for file uploads and downloads in the GraphQL API and automatic provisioning of cloud storage both built in to every Gadget app
Admin SiteData ViewerGadget has support for developers managing their data within the Gadget Editor
shopify_python_api eggShopify ConnectionConnections automatically manage OAuth, receive webhooks, and sync historical data.

Gadget vs 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. 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, or uses websockets heavily, 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 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 rich user experience.

Remix is great at server-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 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 full stack JavaScript framework for building web applications with React, GraphQL, and Prisma. Redwood stitches together modules from npm to give a nice 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 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 are able to 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 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 in 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 knowhow. 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 realtime subscriptions and notifications, which makes it great for building alive-feeling applications where data changes are immediately visible to the user. Gadget's database doesn't yet support reatltime 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 getgo. 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 which 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's 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 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.