App Builder is a Low-Code, Design-to-Code cloud-based WYSIWYG that helps digital product
teams build applications faster than ever. The reason we created App Builder was because digital
product teams need to be more productive – 60% of your application development time is spent on the
user interface and for most developers, web layout and CSS is hard. It's difficult to transition from
a desktop development environment to the web, and there really aren't any tools out there that can
help you do it in a modern way for platforms like Angular, Blazor, React or Web Components.
If you haven't looked at tools like App Builder yet, you will be. Gartner and Forrester
both predict that by 2025, over 40 percent of development will be done with low-code, no-code
tools similar to the App Builder. The difference between App Builder and other tools on the market
that really do restrict development teams is that App Builder is based on a design system, with UI
components in UI Kits like Adobe XD, Sketch or Figma with matching components in platforms like
Angular, Blazor, React and Web Components. This means that anything a designer does a developer
can do as well in the App Builder, you don't have to choose one tool over another - designers can
stay in the tool of their choice and developers can use a tool like App Builder along with Visual
Studio Code or Visual Studio, it doesn't matter. To get to the App Builder, go to the Infragistics
homepage at https://infragistics.com, select Design and Development from the main menu, and
click App Builder. App Builder is 100% web-based, there's no third-party dependencies and no heavy
IDEs to install. As long as you have a web browser you can access the App Builder. Simply click sign
in, select your sign-in mechanism, either Google, Microsoft, Apple or your Infragistics ID. I’ll
click Microsoft I’ll sign in under my account, and you're into the App Builder start page.
We've designed App Builder so you can hit the ground running. We ship pre-built Sample
Applications, Templates and Layouts which you can start with to explore the application and learn
so for example if I select the team collaboration application, it opens up in the App Builder. I’m
presented with some videos I could watch but I can get right to work by looking at the views
of the different pages. I can click around I can see the properties for each one of these
components, and I can explore the application without doing any development myself.
Another challenge for developers and development teams is theming and branding
App Builder gives you all of the capabilities you need to apply
pre-built installed themes with the application which are Material, Bootstrap, or Fluent UI,
or you can create your own Fluent, Bootstrap or Material-based theme by modifying the
typography, colors, roundness, and elevation, or light and dark mode. Changing the theme is
as simple as clicking the theme option from the theme tab. The benefit of the App Builder being
backed by a design system is that it has a toolbox full of UI controls. Each one of
these UI controls is represented via a UI Kit in Figma, Adobe XD and Sketch and a real component
that we ship as part of our Ignite UI product in Angular, Blazor, React and Web Components.
Like any WYSIWYG drag and drop tool you can drag anything from the toolbox onto the screen and it
will be seated within the layout of the screen. So for example if we delete the calendar here,
let's go ahead to the toolbox, we'll search for calendar let's drag a new calendar over,
and I want this calendar to actually live on top of those other items, and there we go. When I
select an item you'll see that the properties are on the right hand side just like you would expect,
so I can change the type of calendar if it's data bound or not the value and what data I
want it to be by default I can also change features like height width margin and layout
with our plugins for Adobe XD and Sketch, you can synchronize your application directly from those
tools in the App Builder or from the home screen when you click new app simply click import designs
either drag and drop your file or get the plugins to install in the design tool of your choice.
App Builder also supports full data binding with REST and Open API. For example,
if I click my project, let's click a new view I’ll call this GridView.
I’ll go ahead and hit “Control+E” to bring up the same options I have in the toolbox,
and I’m going to type in a data grid I’m going to set this data grid to 100% width
and 100% height. Next let's go to the Data Tab,
I’m going to click the “+” sign add a new Rest API. I have a URL which is live in the cloud
which is a RESTful API returning the Northwind Customers table. I’m going to click done,
I’m going to select my data, I’m going to select all my fields. For fields that it can't decipher
because it was rest, I can go ahead and tell it what it is. So, we'll say that this is a string,
I’m going to say done now. If I go and select the grid and I go to the data options on the grid,
I’ll say grab table 1 and you can see that I have the customers data in the grid. You can do the
same thing uploading a JSON file. Uploading a JSON file which is a representation of an
Open API or Swagger definition, or you can link directly to a swagger definition on the web to use
your Web API created in Asp.NET Core or Java. The real unique differentiator between App Builder and
other tools on the market is that we give you a real-time preview of your application by clicking
the preview button. Here is the grid that we just created, so you can see all my data is in the grid
along with all the capabilities that the grid has like column pinning,
column grouping, sorting, filtering etc
If I click edit and I’m back at this screen, I can continue to work on my application
at any time, and no matter what screen I’m on, I can click Preview to see that screen as it
would render in the browser. I can also change the screens from the selector in the upper left
or if there's navigation already built in I can interact with the application just like I would
in the browser and finally one of the biggest differentiators and features that developers love
is the production ready code that comes with any application built with the App Builder I can
either publish to GitHub or I can download the zip file of everything that I've built. You can see
the code by clicking preview, switching to code view, and you can see exactly what's generated per
screen. This isn't the spaghetti code of the past that you might have experienced with other tools,
this is real code that you would build yourself that passes the “sniff test” of what a developer
or architect would expect. Even better, things like this grid definition that we did,
if we look at the typescript we actually create a data service, and that data service is using HTTP
in whatever platform you're trying to generate the code in to get the data from the cloud
To get started on your journey using the App Builder, go to
https://infragistics.com/products/appbuilder and start your trial today. To get more great
videos like this to learn how to use the App Builder and other Infragistics tools,
click the Subscribe Button to get a notification when we post new content.