Articles

Bubble Developer Roadmap

What you need to learn to build apps in 2022 without any prior coding knowledge, in a matter of days

It is 100% possible to build apps without any knowledge of programming languages.

Here is roadmap consisting of all the resources and skills you need in your arsenal so you can get cracking!

1. No Code

The first step is to know about No-Code (aka Visual Development)

If you have a non-technical background (i.e. you don't know much about coding), NoCode is ideal for you. (It is also good for techies out there but we'll focus more on non-techies for this post.)

No-code development is a type of development that allows absolutely anyone to create software using a graphical user interface, instead of writing code. The no-code movement rests upon the fundamental belief that technology should enable and facilitate the creation, not be a barrier to entry. You can implement complex functionality in just a few clicks and actually see it working.

Just so you don't go about thinking No-Code is something new, let me clarify. No-code is Excel for databases or Wordpress for websites (hope you've heard of those!)- basically any visual tool that allows you to build something. But it's only recently that there has been a revolutionary shift in the No-Code space with powerful tools popping up providing an end-to-end functionality. An example is bubble.io, which I am going to talk about in greater detail.

We have a detailed article about NoCode here:

https://www.azkytech.com/post/what-is-no-code

Read More:

2. Bubble.io

Bubble.io is a no-code app development framework that lets you design, develop, host, and scale applications without writing any code. Bubble currently hosts hundreds of thousands of web applications with millions of users, ranging from hobby projects and bootstrapped start-ups to Fortune 500 companies and universities. Bubble was named one of Fast Company’s Most Innovative Small and Mighty Companies of 2021.

With Bubble, you can build powerful web-apps like booking systems, job boards, marketplaces, SAAS, social platforms, etc.

Notice that I used the word "web-app". It is not a website. It is not a mobile app that you could download from your app store. Keeping it as brief as possible, a web-app is what you open on your browser and not "install" on your phone. Like Facebook, Airbnb, Twitter running on your browser are all web apps. Web apps are just as good as mobile apps for most use-cases.

A website is like your store front. The main purpose of it is to look pretty and have a clear call-to-action. A web-app, on the other hand, is hooked to your website and offers all other functionality like customer portals, profiles, calculators, etc. A user can't tell when they left the website and entered into the web-app. The transition is seamless.

So now that you have a clearer idea of what's possible with Bubble, you can go through the plethora of content linked below master bubble and truly understand how to build webapps.

Because of the speed of implementation on Bubble, one person can basically build an app ground up within days- something unheard of in the world of code. This is why, as a bubble developer you need high-level thinking and bear in mind the end-to-end design and logical flow of the app. This brings me to the next pillar of Bubble development- user experience (UX).

We have a detailed article about what is bubble here

https://www.azkytech.com/post/what-is-bubble-io

Read More:

3. UX and Product Design

A software product is built to solve problems for a 'user'. Learning a little bit about User Experience will enable you to build the right thing.

So what is UX?

User experience (UX) refers to any interaction a user has with a product or service. UX design considers each and every element that shapes this experience, how it makes the user feel, and how easy it is for the user to accomplish their desired tasks. Here's a break-down of the key UX components of your web-app.

Read More:

1. Personas

Personas act as stand-ins for real users and help guide decisions about functionality, design and ultimately marketing. As a design tool, they are a powerful way to communicate behaviours, goals, wants, needs, and frustrations. Consider Craiglist as an example. There is a buyer and a seller persona. A seller should be able to add listings while a buyer should be able to view listings. Having a clear idea of the personas involved and who is using the app for what is key in building a functioning app.

Read More:

2. User Stories

The purpose of a user story is to articulate how a software feature will provide value to the customer. Continuing with the Craiglist example, a buyer should be able to view all listings, choose a geographic region and be able to access contact details of the seller. The seller on the other hand should be able to add listings, view listings, promote and view analytics on their current listings. The user journeys give you, as a bubble developer, exact information about what features to implement from the end-user perspective on your app.

Read More:

3. Wireframing

A picture is worth a thousand words. A wireframe is just that, a pictorial representation of your app without the bells and whistles. The click-able wireframes will give you an idea of the app's flow and functionality before considering visual design elements, like content, colour schemes and complex workflows. You can see the foundation of your app and map out the main features and navigation of your app for all personas.

Just to give you a very simple example, a login page has two text boxes for username and password and a submit button. A new user however, requires an additional "confirm password" box to re-type their password. Wireframing is essential to contextualize your app especially as your scope becomes bigger.

Once you have the wireframe mapped out, you are ready to build it in bubble.

Here at AZKY Tech Labs, we use Figma extensively for wireframing.

Read More:

  • 🔨 Wireframing Tools: 

4. UI

Things would have been a lot simpler if all websites and apps were just black and white. But that's unfortunately not the case. Your app needs an aesthetic design of all visual elements. It needs to be presentable and interactive with consistent fonts, colour schemes, icons, buttons. If something sticks out or doesn't fit right then it ultimately affects the use-ability of your app. I've linked a number of resources to help you understand clean UI design.

Read More:

1. Generic UI Resources

The following are the links to some generic UI resources that any web developer must know:

2. Bubble Specific Resources

The following are the links to some Bubble specific UI resources that a bubble developer must know:

3. Pre-Built Chrome Extensions

The following are the links to a few Pre-Built Chrome Extensions for Bubble’s UI:

  1. 🧩 Made with Frames: https://madewithframes.com/
  2. 🧩 Airdev Build Hub: https://build.airdev.co/
  3. 🧩 OpenBuild: https://www.openbuild.io/
  4. 🧩 Atomic Fusion: https://atomicfusion.io/

5. Responsive Web Design

We use a number of different devices to access the same app. Phones, tablets, laptops, desktops- all with different resolutions and screen sizes. Responsive web design is the approach that suggests that design and development should respond to the user’s behaviour and environment based on screen size, platform, and orientation. I'm sure you've experienced the frustration when your phone goes from landscape to portrait mode and some of the text is just inaccessible. That's the example of bad responsive design and we definitely don't want that.

Read More:

1. Flexbox

2. Grid Layout

3. Bubble’s Responsive Engine

6. Database

As the name suggests, database is a collection of data that is organized so the information within can be easily accessed later. Databases power everything from banking software to scientific research to government records, as well as the websites you use every day, like Amazon, YouTube, Netflix, and Wikipedia. In fact, if you found this page through an Internet search engine, your search was powered by a (very, very large) database.

Read More:

7. Logic/Workflow

Bubble is built around a workflow-based programming system. A workflow is composed of an event, which is what triggers the workflow and the series of actions that run. The combination of the event and the series of actions is what defines a workflow.

Read More:

8. Debugging

Debugging is the process of detecting and removing existing and potential errors (also called as ‘bugs’) in a software code that can cause it to behave unexpectedly or crash.

Read More:

9. Security and Privacy

Web application security is a central component of any web-based business. The global nature of the Internet exposes web properties to attack from different locations and various levels of scale and complexity. Web application security deals specifically with the security surrounding websites, web applications, and web services such as APIs.

Read More:

10. Heading to Production

The next step is to learn about taking your application to Production.

The Web application needs to be deployed after finishing the development process. In the deployment process, the application goes through a sort of checklist that includes acquiring a domain name, using branded emails for all the communication in the application and deploying you application live.

Read More:

11. Other/Misc

As you can imagine, bubble is a vast platform and ecosystem.

Now that we have covered the basics about bubble, there are many other features and resources available for a bubble developer that do not come under any other category. These include the following:

1. Bubble Community

2. Bubble Academy

3. Bubble Coaching

4. Bubble Bootcamps

5. Bubble Free Courses

6. Bubble Paid Courses

7. Books on Bubble

8. Templates

9. Plugins

12. Advanced areas

Now at this stage, you are ready to enter the advanced areas of bubble in your bubble developer's journey. 

1. API Integration

An API is a set of programming code that enables data transmission between one software product and another.

2. Webhooks

Webhooks are automated messages sent from apps when something happens. They have a message—or payload—and are sent to a unique URL—essentially the app's phone number or address. It's how PayPal tells your accounting app when your clients pay you, how Twilio routes phone calls to your number, and how WooCommerce can notify you about new orders in Slack.

3. Sub-apps

Sub applications are a powerful feature available in the Production plan. The feature sets up a relationship between a “main app” and one or more “sub-applications” and makes it easier to push any changes from the main app to its sub-apps, while all main and sub-apps have their own database. 

4. Patterns

At the last step of your becoming a bubble developer, you will learn about the set patterns of apps that you will be most probably building as a bubble developer. These App patterns are the following:

Consequently, if you have completed all the steps mentioned above, you are now ready to kickstart your career as a full-fledge Bubble developer.

If you know of more resources, please feel free to share them at roadmap@azkytech.com and we'll add them here.

If you are overwhelmed by this and would like us to build your product, get in touch!

Good Luck!

Have a question? Get in touch below

“He understood what I was hoping the app would do... He was making suggestions that were super meaningful which we used. I've already recommended him...”

Ty Brown

Ty the Dog Guy

"...did a fantastic job of building an MVP for us. We originally were working on spreadsheets. We needed an MVP to demo it to customers. They did it in an amazingly short time..."

Marc Muneir

Ditch Carbon

"...team went above and beyond to be solutions oriented when partnering with us on what was essentially our first attempt at no code development..."

Jenny Cox

The Combination Rule

Have a question?

Drop us a message and we will get back to you