Now you can build a web app without writing code. But how does that work? The main pieces of a no-code app (as it's called) are the frontend, database, and APIs.
Traditionally, building a web application required writing thousands of lines of code. In the last few years however, you've been able to build versions of most apps without any code. This is called building a “no-code app” (it’s also spelled nocode, no code, or #nocode).
What is a no-code “stack”?
To understand no-code, we need to first break it down into its main components.
An overview from Scott Brinker of how each no-code app fits into the overall ecosystem. You can consider my nomenclature of "frontend", "database", and "APIs" the same as his "UI", "data", and "logic".
There are three main areas of a no-code “stack” (the combination of software): the frontend, the database, and the APIs (standing for Application Programming Interface). A layman analogy is that, if the “stack” were a car, the frontend would be the body, seats, and steering wheel -- everything you see and interact with. The database and APIs would be the engine -- the bits under the hood that make the machine actually run.
Lets break each of these components down individually.
No-code frontends
The frontend is, quite literally, what is on the front end of your website - it’s what people see on your website. When we visit a website, we are seeing the product of frontend development.
A demo of Webflow, a no-code frontend website designer (which this website is built on!)
In the context of a no-code web app, you’re building the frontend by dropping elements onto your screen. While the elements appear to require no-code on your end, there is still HTML, CSS, and Javascript being automatically written in the background. The code ends up being similar to what you'd need if you wrote it directly. Webflow, Adalo, Bubble, Squarespace, Shopify, Universe are all examples of no-code builders that allow you to build the frontend by dragging and dropping blocks instead of writing code. There are dozens of platforms like this!
No-code databases
Let’s move on to the database, which is a part of the application's "backend". A database holds information that gets generated on the frontend, like blog posts, as well as information you generate as a user, like your name and email.
Even your favorite websites looks like this from behind 😛
For static websites such as personal portfolio and resume websites, databases usually aren’t utilized. However, websites like Shopify’s ecommerce stores, marketplaces like Airbnb, and communities like Makerpad all have web pages that are generated “dynamically”, from data that lives in the database. For example, Makerpad’s tutorials only have one web page template that has to get designed. Then a new page gets created when the Makerpad team adds another tutorial’s information to their database.
A demo of Airtable, a no-code spreadsheet often used as a database
Airtable has emerged as a top no-code tool to use as a database. This is primarily due to it's ability to link tables together and establish relationships between them, similar to how you would in a "code database" like PostgreSQL or MySQL.
APIs
Last but not least, we have the APIs, which connect your frontend and database together, as well as most other apps you'll use as well.
Imagine a user filling out a form on a website. The frontend allows the user to input their information. The database allows that information to be stored. The APIs send the data to your database.
Now imagine you want an email to be sent out to the user after the form gets filled out. You would also handle this via the APIs, by triggering an email app like Mailchimp.
A demo of Zapier, a no-code tool to automate workflows
One of the most apps to interact with APIs is Zapier. There are also a handful of newer, more powerful tools like advanced users like Parabola, Integramat, and Paragon that do this as well. Imagine a situation where a user uploads a spreadsheet of website URLs and wants each of the websites screenshotted, and those screenshot links dropped into a database. Since a tool like Paragon can repeat API calls for each spreadsheet row, you could hook it into a screenshot API like URLbox and get 100 websites screenshotted in a minute or so!
Full-stack no-code platforms
Some no-code platforms have the frontend, database, and API interactivity all built in! These enable you to build more advanced apps similar to Airbnb and Uber.
A demo of Adalo, a full-stack no-code mobile app builder
Examples of these platforms are Bubble, Adalo, and Glide. The reason you need a full-stack platform to build the more advanced apps is, among many reasons, because of the speed and frequency at which data needs to move from the database to the frontend. It has to feel instant and it has to be reliable. By baking all three layers together, the app can control the performance much more.
Next Steps
Now that you know what a no-code app is and understand the main pieces of it, you probably want to get started building! If so, be sure to check out Makerpad, a community with one of the highest quality sources of no-code education on the internet. Other great resources are No-Code MVP, Apps Without Code, and Zeroqode.
If you already have a successful no-code app and you want to make sure it stays successful, learn about how to plan your no-code app for scale. You can also take our Scale Assessment to get insights tailored to your exact company and stack.