Nocode tools like Adalo, Bubble, and Thunkable make app building accessible to everyone. If you are an entrepreneur with the next great app idea, an employee who wants to automate some laborious task, or you just want to build some software for yourself, these tools have magical powers for you. In the past, such experiences were impossible because of the coding roadblock: to build anything you needed to hire coders, get your IT department involved, or take a year or two off to learn code. NoCode changes this equation.

“Nocode” is really just a new marketing term for “visual coding”, and such tools have been around for a long time. But the new generation of tools has reached a tipping point with regards to building apps with users and dynamic data: For the first time in history, people without coding experience can prototype and develop apps with users, user interfaces and dynamic database data.

How do NoCode tools make this huge leap? The following list summarizes the “magic”:

• The app, its users, and its data are hosted by the tool. User management is built into every new app you create. 
• The process is data-first: you define the data tables or spreadsheets, and the app then helps you build screens for the data you’ve defined. You can build custom screens and behaviors using dialogs and without an understanding of coding syntax or concepts like variables, conditionals, and loops.
• Specifying your data is simplified and code-less, as are database operations for filtering and ordering the data.
• “When event do” event-handlers are primitive constructs of the NoCode “language”, so it is straight-forward to specify interactive behavior.

I’m a computer science professor who has worked with visual software tools for years: I published a Ph.D. thesis on “programming by demonstration” in the early 1990s, wrote a book on MIT App Inventor along with its creators a few years ago, and have been teaching business and humanity students coding with visual tools for over a decade. I now run the site draganddropcode.com.

I’ve recently been studying the newest generation of NoCode tools, and I believe a tipping point has been reached. In this article, I’ll describe the features of NoCode that make it so powerful, and discuss the dramatic impact already happening in the software world. I’ll use the tool Adalo to illustrate, as it representative of the many NoCode tools out there, and also discuss some other tools that offer different approaches.

Try it!

At the risk of losing you to NoCode before you read the article, I encourage you to check out this video tutorial showing a mini-instagram created in Adalo. In about twenty minutes, you can create a working app by following along with me, and also get a pretty good idea how NoCode works. The twenty minute version is fairly simple, but I’ve also built a much closer to complete Instagram using the same techniques, but more time. I’ll be making that code and tutorial available soon.

Case Study: People in My Computer

I’ll illustrate the power of NoCode with an example app idea, People In My Computer. The idea is to provide a place to organize the links you find when “Googling” people. You create profiles for other people– your “interest network”, sort of like a salesperson creates profiles for their potential customers. The profiles you create are personas– your perception of a person in a particular context. If you have a DNA expert coming to a meeting, you create a profile for them that focuses on their work on DNA.

The software allows you to have an ever-growing database of your people of interest. You can then refer to your persona cards in your emails, texts and posts on other social sites, adding context to all of your posts. You can also create persona collections about a certain topic, or one containing all the people attending a meeting or a conference, then share that collection with others. Figure 1 shows a prototype of People In My Computer:

Build in the Cloud

I built a prototype of People in My Computer with the NoCode tool Adalo. Adalo stores your app, its user accounts, and its data within its platform. Within a few minutes you can register for free at Adalo, build a sample app, view it on the web or your device, and send it to others who can register and login. This quick launch is due to Adalo serving as both development environment and cloud host.

When you begin a new Adalo project, you get three screens for free, built in to your app: signup, login, and a blank home page, as shown below:

The starter app also comes with a database table for user accounts, with the developer automatically registered as the first entry in the table. Right out of the box you have an app that allows users to register and login! This is a big deal: I’ve worked with after-school coding and entrepreneurship programs who report students spending way too much time setting up the basic, standard login functionality, instead of focusing on the important task of designing out their particular app ideas.

Data First

With Adalo, the first step in developing an app is determining the data the app will store and creating tables using Adalo’s dialogs. The data drives the rest of the process.

For People in My Computer, the primary data element is the persona, a profile for another person containing first name, last name, description and a profile image. Figure 3 shows Adalo’s dialog for creating tables.

You can click on “Add Property” to add a new field, specifying the type as Text, Number, Date, Image, etc. You can also click on the button in the top-right to view or add sample data into the table. The process is similar to using a spreadsheet or simple database system.

The People in My Computer app has a table for personas, one for collections of personas, and another for posted articles. But each app you build will have different data, e.g., a todo list app will have a task table and an e-commerce app will have tables for orders and customer.

You can start with a template in Adalo, or with just the login screens, but you can build an app with any data you might imagine. This flexibility is different from other “app builders” which rely on a set of templates and restrict you to making slight customizations to those templates.

After specifying the format of your tables, the next step in Adalo is to add some sample data, as shown in Figure 4:

Adding sample data is helpful so you can immediately test the screens and behaviors you build. When you put the app in production, you can remove this test data.

Once you have created your data tables, Adalo uses that information to help you build the screens and behaviors for your app. In a semi-automated manner, you can quickly build an app that lets the user create new data entries and read, update and delete old entries. These fundamental app behaviors are sometimes referred to with the unfortunate acronym CRUD– create, read, update and delete.

Display Dynamic Data without Coding

The “R” in CRUD refers to the users of an app reading database data, which is really the app displaying it as in the screens shown in Figure 1. While displaying static data for an app or web page is straight forward, display dynamic information from a database, with different information shown to each user, is much more complex. In traditional software development, displaying dynamic data requires sophisticated coding.

Adalo eases the task of displaying dynamic data. You drag one of the various list viewers Adalo provides onto a screen, then map it to the data table that should be displayed. For the People In My Computer home page, I added an ImageList to the Home screen and mapped it to the table named “Persona” I’d just created, as shown in Figure 5.

When you map a database table to a list viewer, selected rows of the table are displayed (e.g., 10 personas are shown in the screen on the right of Figure 5). Adalo performs a default mapping specifying which column data should appear for each item. In Figure 5, the display item “Title” is mapped to the persona’s FirstName column, the “Subtitle” to the LastName, and the Image to the Pic column If the default mapping isn’t what you want, you can modify it and choose whichever columns you want displayed, as shown in Figure 6:

Walla! Within minutes, and without any database code, you can build an app that displays your database data.

Code

To understand the “magic” of NoCode, compare Adalo’s process for specifying how dynamic data is displayed to the code for doing it in a traditional language, in this case Java:

   try(Connection conn = DriverManager.getConnection(DB_URL, USER, PASS);

         Statement stmt = conn.createStatement();

         Query= “SELECT * FROM Persona Order by CreationDate asc  // line 3

         ResultSet rs = stmt.executeQuery(Query);) {

         // Extract data from result set

         while (rs.next()) {

            // Retrieve by column name

            FirstNameLabel.setText(rs.getString("FirstName"));

            LastNameLabel.setText(rs.getString("LastName"));

            Image1.setImage(rs.getURL("Pic"));

        }

    } catch (SQLException e) {

         e.printStackTrace();

  }

The Java code is like a foreign language to most people. It takes weeks if not years to become proficient at it, and the code is cryptic.

The difficulties are not restricted to the cryptic syntax. Understanding the code also requires knowledge of sophisticated coding concepts. The code above calls a function to access the database (line 3). The parameter in that function call (“Select * from Persona…”) is database code in the language SQL, which is commonly used to handle database access (see https://www.w3schools.com/sql/ for an intro to SQL).  The Java function call brings the data from the database into a variable “rs”. The code then uses a “while” loop to iterate through the items in “rs”, selects the pertinent properties of each item using object-oriented syntax, and sets the properties of each listView element.

To code this segment, you need to:

• be comfortable with the syntax of SQL as well as a general purpose coding language (Java, Python, C++, JavaScript etc.).
• understand the coding concepts of variables, objects and properties, iteration, and exception handling.
• be comfortable working with three versions of the data: the database table itself, the variables that store the data once it is loaded in from the database, and the list view which displays the data. Envisioning all of that, and understanding how to use code to transfer information between the three representations, is well outside the realm of the beginning or novice coder.

In contrast, Adalo’s dialog-based process eliminates the need to know any language syntax or coding concepts to display dynamic data. It eliminates one representation of the data, the in-memory variables, and lets the developer directly map the database to a list view. Adalo also eliminates the need for explicit iteration, the “while” loop, to iterate through the results from the database.

With Adalo, the developer maps a list view to a database table once and the context is set. The mapping replaces the “Select * from Person” SQL call. Instead of requiring the developer to define a variable to hold each row item in the table, the tool introduces a “Current Persona” reference.

Looping through the data is implicit. The developer just needs to understand that the app will indeed fill the list view with the rows of the database, and that the reference, “Current Persona” refers to each row as the app works its way through the table. In general, the “Current X” reference that Adalo introduces eliminates the need for a “variable” representation of the data.

Adalo also provides references to each of the current item’s properties (e.g., Persona’s firstName) for the user to choose from, thereby eliminating the need for the developer to write code to select the desired properties.

By examining the database table(s) the developer defines, the tool is able to assist in the development of screens for data display and avoid the need for an understanding of coding syntax, variables, object-oriented property references, or iteration.

Specify Data Filtering without code

In the home screen for People in My Computer, the image list doesn’t show all personas in the database table, it shows only those personas that the “Logged in User” created (see Figure 7).

In Adalo, each time you map a table to a list view, you can add filters to select only particular rows from the table. Instead of coding the filters with, say, SQL “where” clauses, you can choose the filter column from a list.

Filters can become quite sophisticated. For instance, People in My Computer has a screen which shows the information for a persona collection, e.g., “Great Authors”. A list viewer on that screen shows all the posts (articles, etc.) about all of the personas in the particular collection being displayed. Figure 8 shows the way it is specified in Adalo:

“Current PersonaCollection” is the particular collection being shown on the page. Personas is that collection’s list of persons, and “posts” is the posts about each of them. So the dialog in Figure 8 specifies that the tool should iterate through the collection, get the posts of each person, and display them.

Code

In traditional development, data filtering is performed in a couple of ways. When SQL is used, filters are specified with “Where” clauses on “Select” operations, e.g.,

Select * from Profile Where User=’wolberd’

The code builds the SQL string using concatenation (“+” operator), then sends it as a parameter to the library function that makes the SQL call.

Complicated filters can be quite challenging, as in this example for selecting the posts from all people the user follows:

   SELECT Posts.* FROM followers
       LEFT JOIN posts ON posts.account_name = follows.follows_name
       WHERE follows.account_name = $logged_in_user
 

Complicated filters are still challenging in Adalo conceptually, but not syntactically: the citizen developer chooses filter elements instead of having to type them in using the SQL language.

Build Input Forms without code

Besides simplifying data display, Adalo also makes it easy to create input forms and interactive behaviors (the Create, Update, and Delete part of a CRUD interface). You drag a form into a screen, map it to a specific data table, and the tool generates a default form for you.

“PeopleInMyComputer” needs a form to input Persona records. When you specify that a form is mapped to a Persona, Adalo examines the types of each database column and generates a default user interface component for each. If a column is plain text, it adds an input box. If it is an image, it adds a standard widget that allows the user to choose a picture.

As the left-side of Figure 9 shows, you can specify which columns the user inputs in the form, as well as the information the app should set automatically. In this case, the developer has specified that “FirstName”, “LastName”, “Description”, and “Pic” should be input by the user, and that the “CreatedBy” column should be set automatically using the “Logged in User”.

Specify Event Handlers without code

The “Create Person” button shown at the bottom of the input screen on the right of Figure 11 works out of the box: when clicked a new item is added into the database. This interactive behavior is represented in dialog form in Adalo, as shown in Figure 10:

The “Click Actions” section of a button component is where you specify what should occur when the button is clicked. The event handler in Figure 10 specifies that clicking on the “Submit Button” results in a new Persona row being created and added to the database, and the user being linked back to the screen they were at when they opened the input form.

Those actions were set automatically when the form was created. However, you can change the response to the button click by clicking on “Add Another Action” or removing an action. For instance, you might modify it so that the user is taken to a particular screen after adding a new Persona, instead of just going back to the previous screen, or you might drag in a block that sends an email notification when a new Persona is added.

Code

When the developer maps an input form to a particular database table, Adalo automatically generates default input components for the form. The developer can then customize the generated form without understanding code.

In traditional text languages, event handlers are not primitive to the language, so setting up the code for even button-click initiated behaviors is complicated. For instance, the code below shows some event-handling setup in JavaScript:

  class LoggingButton extends React.Component {
    handleClick() {
      console.log('this is:', this);
    }
    render() {
    // This syntax ensures `this` is bound within handleClick    
     return ( <button onClick={() => this.handleClick()}>        Click me
      </button>
      );
    }}

As you can see, even something as simple as “When this button is clicked, do …” requires cryptic coding which is beyond the grasp of the beginner or novice with traditional coding. With Adalo and other Nocode tools, one need only click on “Add Action” to specify what should happen when a button is clicked.

Specify database relations without code

Software development becomes even more challenging as the data in an app becomes more complex, with multiple data tables and complex relations between them.

In People in My Computer, the Persona table is related to the User table. In particular, each Persona has a single user who created it (the “CreatedBy” user). Each user, conversely, is related to all of the personas the user creates. In database parlance, the User and Persona tables have a one-to-many relationship. Other relationships are many-to-many: for instance, each Persona can be part of multiple PersonaCollections, and each PersonaCollection is related to multiple Personas. 

Adalo helps a developer specify database relationships. When you add a column of type “relation” to a table, Adalo brings up a dialog like that in Figure 11:

Once the developer chooses, Adalo sets up the table relations automatically. The “Created by” relation in the Persona table is an atomic item (of type User), and User is setup with a Relation defined as a list of type Persona.

In traditional database systems, the developer must specify these relationships manually.

Specify Dynamic Text without code

In displaying information on a screen, you often want to combine dynamic and static information. For example, the title displayed in the screen to the right of Figure 12 shows the current collection name, “CS Students” combined with the text, ” Members”.

Adalo’s “magic text” dialog is on the left. If you click on the red “T” a list of choices appears including dynamic data references to the mapped database table. In the example, that is a PersonaCollection, so you can choose from all of its properties. You can then put static text around the red blocks that appear to build your text.

With traditional code, you build dynamic text by connecting the various elements with the concatenation operator “+” in a formula, e.g.,

title = currentCollection.getName()+ ” Members”.

It is sophisticated code and once again requires knowledge of coding syntax and concepts not in the realm of the beginning coder. The magic text dialog makes it easier.

How NoCode is Changing Software Development

What do we call the millions of people who can now create software without knowing how to code? “Non-coder” or “non-textual-coder” fits, as the group is distinguished by the fact they are not educated in or experienced with textual coding languages. But focusing on the group they can’t do doesn’t make sense when we’re talking about highly skilled designers and big-picture thinkers who have just been empowered with a new capability.

Citizen developer is probably the most popular term that’s been used to describe this group. “Citizen” is used to emphasize the democratic, 99.99 % nature of the group, and “developer” used to denote a creator of software without invoking “programmer” or “coder”.

NoCode and the empowerment of this group of citizen developers is changing software development dramatically:

• Workplace automation. Citizen developers in the workforce can build in-house software to automate laborious tasks and improve the company workflow, without involving  the IT department. The group includes administrators and managers as well as designers and the marketing team, all of whom have been stymied by the bottleneck that IT presents.
• Entrepreneurship. Have an idea for an app? Instead of it floating off into the nether world because hiring coders is so expensive, the citizen developer can build a working prototype and use it to crystalize the idea and gather feedback from potential users and funders. In both the startup and enterprise, a key to successful software development is finding a real problem that needs to be solved. This involves design thinking, user-centered iterative development, and the specification phase of the development process. NoCode allows the first iterations of a software product to occur quickly and without coders, so the citizen developer can now present an idea with a working app instead of just wireframes and a slide-deck.
• Individuals and Organizations. Hiring coders is so expensive that most individuals, teams, clubs, communities and non-profits don’t even dream of creating software solutions. There is a lot of low hanging fruit that the citizen developer can now pluck.

Gartner reports that in 2024 65% of automations in the corporate world will be built with NoCode or LowCode solutions (LowCode means a solution with a small amount of textual code). Salesforce reports a 165% growth rate in no/low code tools amongst organizations it works with.

There are numerous examples of successful entrepreneurship based on NoCode, many of them led by women. Dani Bell launched scribly.io using the NoCode tools Webflow and Zapier. Abadesi Osunsade created Hustle Crew, a platform for women to share advice on their careers, using SquareSpace, GoPayWell, Buffer, and MailChimp. Tara Reed created Kolecto, a site for selling art. You can check out adalo.com/made-in-adalo and https://bubble.io/showcase to see the many success stories with those tools.

Hybrid Development

Traditional coders are still vital, as there are still many computations and algorithms that can’t be built with NoCode tools. You can’t currently create a complex machine learning algorithm with NoCode, or specify complex searches and filters that aren’t covered by the dialogs in the NoCode tool.

The emerging ecosystem is a hybrid, with coders and citizen developers working together and supported by the NoCode tools. In Adalo, for instance, coders can use a traditional language, Javascript, to add new components to the Adalo “marketplace” and thereby increase the citizen developer’s arsenal. Coders are no longer needed for every software task, only for those that go beyond the NoCode tool capabilities, the set of which grows smaller as new NoCode components are added.

Comparison of NoCode Tools

There are hundreds of NoCode tools on the market and many more appearing each week. The vast majority are similar to Adalo and focus on a data-first approach and making it easy to map data tables to user interface elements. Leaders in the field include Bubble and WebFlow. They focus on web instead of mobile, like Adalo, but the development process is quite similar.

Automation Tools

With automation tools like Zapier and Integromat, you don’t build web pages or apps, you automate processes that you’d otherwise have to do manually. The tools let you connect your existing applications with “when do” event handlers. The events in this case are things like “when an email with subject line including ‘order” arrives”, and actions are automations of typical user actions such as adding a row to a spreadsheet. Zapier claims that “People Who Set Up a Zap Save an Average of 4 Hours Their First Week”. After trying the tool, I believe them.

Visual Blocks Tools

Visual blocks tools provide an alternative to the dialog-based NoCode tools. Thunkable, which spawned from MIT App Inventor, is representative of these tools and provides significantly more expressiveness and flexibility compared to Adalo and Bubble. Blocks tools are sometimes labeled NoCode because there is indeed no “textual code” included. Instead, you “code” by plugging blocks together, sort of like doing a puzzle.

Unlike Adalo and Bubble, Thunkable’s provides the constructs you find in a traditional coding language. Besides blocks to instruct the mobile device, it has blocks for “if” conditions, repeat loops, variables, functions, etc.–the constructs found in traditional languages that make them “Turing complete”. Because of this, you can code algorithms and computations with Thunkable that you cannot with Adalo and Bubble.

Figure 13 provides an example of Thunkable blocks for generating arithmetic equations and computing the sum.

The coding is complex, but the blocks approach makes it easier as you get to choose and plug blocks instead of typing codes, and event handlers like the “when Screen.Opens” in the example are simple to specify– you just choose from organized block folders and drag in events like, “when Button.Click” into the editor.

Besides more computing expressiveness, Thunkable also allows you to build games and other apps with free-form canvases and animated sprites– you are not restricted to standard “CRUD” interfaces as you are with Adalo and Bubble.

Thunkable is limited in that it doesn’t (yet) provide some of the data-related conveniences found in Adalo and Bubble– you have to setup user accounts and a database with a third-party tool (Firebase), input forms aren’t generated for you, and the tool doesn’t provide dialog-based filtering and ordering of data.

Thunkable recently received a 30 million dollar funding round, and they have told me they plan to add the data and generated screen features the tool now lacks. When those features are added, Thunkable will provide the best of both worlds: high-level specification of most screens and behaviors, along with access to programming constructs, in blocks form, that non-coders can learn faster than with a traditional textual coding language.

Summary

When Johannes Gutenberg invented the printing press in 1440 written communication was no longer restricted to the monks and the priests. It took awhile for humanity to catch up with the magic, but soon enough they did– by the year 1500, 20 million volumes had been printed just in Europe, and “citizen writers” had brought in the dawn of mass communication and democracy.

The NoCode phenomenon is having a similar effect on software. The pool of potential software creators has grown immensely. The 99.9% is now empowered to participate in tasks that were formerly restricted to the 0.1% of the world who knew how to code.

Now when an idea is sparked it need not be dismissed because the IT department is too busy and coders are too costly. Citizen developers can directly create automations, prototypes, and MVPs and build working software during the early ideation-design-thinking-specification stage of projects. I can create a first version of People in My Computer in a week instead of a year!

Designers, big-picture thinkers, and entrepreneurs can now create in the software space. This has the potential to spawn a new age of creativity and entrepreneurship, and also democratize a field that is sadly lacking in diversity.