What is App Builder?
If you didn’t get a chance to watch the Webinar from Jason Beres and George Abraham right before Ng-Conf 2023, you can check it out here. At an extremely high level, “App Builder is a WYSIWYG drag & drop tool that eliminates the complexity of user interface design and development so that you can focus entirely on building business applications faster than ever before.”
At first glance, I assumed the target audience for this product was someone other than developers. Generally speaking, tools like AppBuilder (a drag-and-drop web builder like Glide, Bubble, or Passion.io) are going to be used by UX instead of UI developers. It even presents that way initially. If you navigate to appbuilder.dev, you can click the demo button in the top right of the page and sign up for a free 14-day trial. You’ll be presented with a page to create a new application. They provide convenient starting templates like a Health Vault, HR Portal, or Task Management dashboard.
First 4 of 12 sample apps you can seed a project from
If you don’t need a full-on application, you can choose generic templates like a Navbar + Side Panel + content, an overlay nav + content, full content with a footer, and more.
Templates View: 12 default templates you can use as a starting point
Or even more interesting, at least for me in my enterprise day-to-day, you can import full designs from some of the major UX frameworks:
The ability to import from XD, Sketch, and Figma is pretty legit if you start from this system
The process I found most useful was the ability to upload a file from my UX team and have AppBuilder convert that to Angular code. However, this feature requires the use of the Indigo.Design UI kit, and the resulting elements are empty if you don’t have the plugin for AppBuilder. This caused me to abandon my original idea of using an existing Figma file. Instead, I created a sample application provided by AppBuilder for testing purposes. I used the Health Vault and experimented with it for a while.
Generating Angular Code through AppBuilder
Design Editor View within AppBuilder
Right off the bat, you get access to a canvas similar to one you’d see in Figma or Adobe XD, where you have access to all the elements you’ve added to it, and you can interact and edit any of the details provided from the sample. You have a master view, the root of the page, and a child of the root can have new components added to it. In my case, I was eager to see the code generated, so I didn’t change much, just the title of the page from “Healthcare Assitant” to “Health Tracker” and immediately “Published to Github.”
The integration to GitHub was seamless; it quickly created Angular code and published it directly to a new Repo that you can see here; I haven’t edited it, so feel free to look at the entire thing to get a feel for yourself.
This is meant to be a low-code solution, not some expansive enterprise application (I don’t think Infragistics would agree with me!). Because of that, I didn’t expect a lot of complex configurations in any of the root files. The project was seeded with Angular 15 (just one behind the latest version) and the component library from Infragistics, ignite-ui. Digging into some of the actual source files, I immediately noticed that it’s not using standalone components, and everything is thrown into app-module. This isn’t the worst thing in the world, but again, this probably isn’t meant to be immediately shipped into production at an enterprise. The unit tests generated are pretty much irrelevant and can be deleted. It would be cool to see some component or integration testing added here to test some of the components generated.
Components aren’t using the absolute best architecture design patterns, still manually subscribing to Observables from services instead of using asyncPipe.
These could be in a store and async piped or just a simple Service with a Subject
Running the Application
After installing dependencies, I ran npm install and was presented with a surprisingly beautiful application.
As you can see in the video, the site is responsive, and it doesn’t use “bad” CSS like floats or absolute positioned elements. These are all properly used flex elements, and I know this is a mixed take, but all of the CSS is provided in the component stylesheets. I prefer it that way, but the names are generic and repeated across files. If you’re looking to grow this sample project, one of the first things you’ll want to do is aggregate many of the styles into a global space for easier and consistent reusability.
An important thing to note is that a junior development or a UX technologist can put this tool to better use than I. The routing from the navigation is clean, and there is a great mix of images and icons. The reason there is an 81 accessibility score is that some of the properly wrapped icon buttons don’t have accessible names, and the images don’t have alt tags.
There are also issues in terms of performance, and that may come from how the project is seeded. I didn’t dive deep into the bundles, but the amount of unused javascript is pretty large, and this would potentially be fixed by implementing some lazy loading. The files don’t come minimized by default, either.
Other Features
I went back into the AppBuilder editor to see if I had missed anything in my attempt to seed an app with just a click of the button, but sadly I hadn’t. Drilling into elements on the canvas showed me how the styles were created. You can modify the styles of each element using an array of inputs that allow you to swap containers to rows or columns and change their flex properties. You can apply column or row gaps and plug-in interactions to elements to configure routing or trigger actions, or change the color or text of elements.
The most interesting extra feature I stumbled across was the actual component interaction; this is the most powerful feature in the software. Any component you add to the canvas can be modified with something similar to “knobs” or “inputs” from Storybook. For instance, I can pull a slider onto the canvas and configure the type of slider, its appearance, step count, range, if ticks are present, etc. The data grids can easily be connected to a data source as part of the seeded code instead of banging your head against the desk to determine how to access certain data values. All of the components here come packed with a ton of versatility. A new developer or a UX designer can knock out a ton of work by leveraging these abilities.
Conclusion
AppBuilder comes with a premium version alongside the free version that I was able to sample. Ultimately, I wanted to dive deep into the code generated to see if using something like this would suit a team in an enterprise setting. The fine people from Infragistics assured me that big corporations are using this tool to create applications and that those applications are currently in production, and sure, it can get to that point with some time investment. Using their component library is fair trade as long as the components are well maintained and accessible: these look like they are.
I want to play with this in the pro mode or take a deeper look at the designing and publishing from Figma while using the provided component library. There are too many “un-optimized” architectural patterns that are too obvious for someone in a large company to overlook. Otherwise, this is a great tool for someone junior looking to get their idea off the ground with a WYSIWYG before making code edits later. Still, a fun side project to try out; I will be doing it! You should as well, and let me know what you think!
Accelerate App Delivery with AppBuilder from Infragistics: An Ng-Conf Webinar Summary was originally published in ngconf on Medium, where people are continuing the conversation by highlighting and responding to this story.