Component-based web apps: an introduction
If you're new to component-based apps and you can't wait to understand what developers are talking about when they drop the term "component", then this section is for you! We will also give you some advice on how best to split your app into components. You'll see that it's not as complex as it seems, and it can also help designers get the best out of their designs.
What are components?
A component-based web app is a type of website or web application built using small, reusable building blocks called components. Each component is a self-contained piece of the app that handles a specific part of the user interface (UI) or functionality.
Imagine a LEGO Set 🧱
Think of a web app like a LEGO house. Instead of building the house all at once, you create it using smaller LEGO bricks, like doors, windows, and walls. Similarly, in a component-based web app:
- A navigation bar could be one component.
- A search box could be another.
- A user profile card could be a separate one.
- A button could even be its own component.
Each of these components can be reused in different parts of the app, just like you can reuse LEGO bricks to build different things. All popular frameworks like React, Angular, and Vue.js help developers build component-based web apps efficiently, and so does JitBlox! See below, for example, how this Corporate Portal home page is broken down into different custom components:
The "App" root component
As you have seen above, components are organized in a hierarchy. At the top of the hierarchy is the App component, which is always the entry point into your application. When you create a new project in JitBlox, this component is automatically created for you - and cannot be deleted.
Why use components?
- Reusability – Components can be used multiple times, saving effort.
- Easy updates – If you need to change something (e.g., updating a button’s design), you update the component, and it automatically updates everywhere.
- Better organization – The app is structured like a set of independent pieces rather than a single, large chunk of code.
- Faster development – Developers can work on different components simultaneously without affecting the rest of the app.
Creating a component
You can create your own components from the Components tab in the Side Bar, either by clicking the New Component icon library_add that shows up when you hover over the "Components" tab title, or directly from the context menu. Any component you create is automatically added to the toolbox, making it available for use by components.
An alternative way to create a new component is from the template editor: select one or more (adjacent) elements in your template, choose Convert to Component from the context menu, and specify a name for the new component. This results in the creation of a new custom component, automatically replacing your selection with an instance of the new component.
As you can see, you can organize your custom components into folders. This keeps the project, as well as the final source code, organized. By the way, you can easily rename or move components and folders, all references from your other templates will stay up to date.
When to create a component for something?
There are a number of questions you can ask to determine if you should create a component for something. If the answer to any of the following questions is “yes,” then you probably should:
- Does the component represent a page within the application (see routing)?
- Do you need the same functionality in multiple places?
- Is a component template becoming too complex and cluttered? Then too, consider splitting it up.
If we may give one general piece of advice: start simple. Start with a single component (which will be the App root to begin with) and regularly ask yourself one of the questions above. Often you will see possible components emerge naturally. At that point, select the relevant elements, right-click and select Convert to Component.