UI Builder by Backendless is more than just a feature, it’s practically a whole product on its own. UI Builder is our Codeless visual app development tool that lets you create the frontend UX/UI of your app visually within your browser.
UI Builder makes it super easy to create an application for mobile or web. In this article, we are going to dive into some of the features you’ll be working with as you build your Backendless frontend.
Let’s get started!
Since the dawn of time (ok, not quite), one of the greatest barriers to entry for becoming a programmer has been learning to code. Not only is coding a skill that takes years to become good at (does anyone ever really “master” coding?), it’s extremely difficult to get started because:
For beginning programmers, even the phrase “build an app” can be intimidating.
Our goal with UI Builder is to lower that barrier and make it much easier to get started bringing your idea to life. UI Builder addresses all of the above concerns:
With UI Builder, your app essentially consists of three layers: pages, components, and logic. Let’s take a look at how you’ll use each of these.
Pages are, of course, the pages or screens that the user will be able to visit in your app. When you create your first app in Backendless, there are two pages that will be automatically generated for you to get you started: landing and 404.
The landing page is the page that the user will visit first when they open your app. For some apps, this would be your login/sign-up page. For others, it may be a newsfeed, menu, storefront, etc.
Pages themselves can have their own logic, such as events that trigger when the page is loaded or exited. Logic is discussed more next.
If pages are the foundation of the UI Builder house, then logic is the frame, plumbing, electrical… the guts that make everything inside work. And of course, since we want to keep things visual, the logic is Codeless as well.
Logic can range from the simple (click button -> go to page) to the complex (check user authentication -> pull specified user data -> update different data in a different table -> …). Virtually any logic you need to create can be done without code.
If you already have code that you want to use, no problem! That can be included in your app, too (by integrating via code-based API services).
Continuing our house-building analogy, Components are the amenities of the app you’re building – sinks, countertops, cabinets, floors, paint. All critically functional, but they’ve got to look good, too!
Components are the multitude of visual elements that exist on the user’s screen. This includes everything from text and images to form fields, buttons, and menus. We are adding more components constantly, so if you have one you want to see, let us know.
Each component can be sized and styled however you see fit. You can easily adjust the way components look – or even have them hidden altogether – based on the user’s display (desktop, mobile, or tablet).
Codeless logic in Backendless is designed basically like a puzzle. With each piece, you can add multiple layers of logic and functionality to allow for more complex functions.
(We recently released the Transactions API, a more advanced tool for building complex functions. It is coming to Codeless soon.)
With Codeless, you basically “snap” pieces of logic together to describe what needs to happen when the user takes a certain action. You can save your Codeless functions for reuse as well, meaning you don’t have to re-do the same work on every component.
Additionally, many (dare we say, most) APIs that a typical application is going to need are available to you in the form of pre-built Codeless puzzle pieces. Every one of the pre-built Backendless APIs can be modified or added to a Codeless function.
It’s not uncommon for new programmers to have this reaction when they first try to wrap their head around working with data:
Of course, what truly sets us apart from other visual app builders is that we have been doing the backend thing for years. Your frontend is closely tied to your backend, making it simple to access all of your data. All you have to do is decide how to use it.
Prior to the addition of UI Builder, our number 1 focus was making it as easy as possible for developers to build a backend. As such, we built tools such as Codeless logic and a visual data browser so that non-technical users could easily work with their app data, user data, notifications, messaging, etc.
We have applied that same philosophy to UI Builder. Your Backendless backend and frontend were designed to facilitate a seamless relationship between the two.
It has never been easier to have a frontend and backend that work together harmoniously. The data table component is a perfect example:
The data table component is one of the coolest components in the library. All you have to do is drag and drop it onto your page, link it to your database, and it will instantly, automatically give you full-blown implementation for interacting with the database.
With the data table component, you are able to create, edit, and delete records, search the table, sort the data, and more. Pagination of data is also automatically implemented to reduce load times.
Whether you want to work with internal data or create an interactive table for your users, bringing that data to the frontend is trivially easy with Backendless.
Another significant drawback of coding your frontend is trying to figure out both how to test and how to publish your app. Some new frameworks like Flutter try to make it easier to test on a device, but few can make it easier than we have.
With Backendless, when you want to preview your app, you simply have to click the “Preview” button. For web, your app will open in a new tab, immediately usable as if it were published. For mobile, you are given a QR code that will open your app in your phone’s browser.
When the time comes to publish your app to the world, simply click one button. Your app is automatically compressed and saved to your file storage.
Piece of cake!
Finally, if you are building for a more mature company that already has APIs, databases, etc., these can easily be accessed by your Backendless app. You can learn more about the Legacy use case here.
UI Builder is just one of the many visual app building tools in Backendless Version 6. You can read about many of the other new features here.
We want to hear from you. What are you going to create with UI Builder? What components would you like to see added? Let us know!
As always, Happy Codeless Coding!