We are excited today to announce the official release of App Builder. App Builder is a brand-new cloud-based WYSIWYG drag & drop tool that helps teams design and build complete business apps faster than ever before. App Builder, the world’s only digital product design platform with a complete design-to-code solution. We've built this to help you and your teams eliminate wasted time and money on expensive iterations, hand-offs, and miscommunications in the normal software development process. With endless theming options plus usable, editable, testable standards-based and production ready code output, there is no limit to what you can build with App Builder.

What is App Builder?

Our goal for App Builder is simple – help you and your teams deliver high-quality products faster. Gartner Research says that over 60% of app dev time is spend on the UI. This statistic is a few years old; I would argue today that number is much higher. As Infragistics is the market-leader in desktop developer tools, we see the struggle that individuals and teams have shifting to the web. Typical challenges are:

• There are no WYSIWYG low code app builder tools to build business apps that target modern frameworks like Angular, Blazor, and Web Components.
• Layout on the web is complex, and hard to master coming from a desktop development tool like Visual Studio.
• CSS is complex - it is another language that must be mastered along with TypeScript and HTML.

And the most critical issue in digital product development today:

• Designs from a design team are difficult to translate to real code and to a real app. Tons of time (money) and effort is spent / wasted in the designer-to-developer handoff.

With the new App Builder software, these problems go away.  Your productivity skyrockets, your team has a complete collaboration platform, you can design and create before you even think about code. Designing web apps becomes a highly productive, pleasurable experience, not a painful and stressful exercise in futility.

App Builder has the tools you'd expect to deliver productivity to you and your team:

• Web-based IDE that is similar to tools you use today, like Visual Studio, Sketch and Figma.
• A toolbox full of UI components which map directly to our Ignite UI component libraries.
• Property editor panels for configuring components, and setting data binding properties.
• Hierarchical views of your master-pages and sub-pages, complete with a navigable outline of your screen design.
• Data sources options that let you connect to any REST data source, or upload a JSON file.
• Theme options including built-in themes and a custom theme builder to match any customer or brand experience you require.

App Builder Tools: App Builder to the Rescue

App Builder brings a low code, cloud-based WYSIWYG drag & drop tool to accelerate app construction.  Backed by a complete design system, compatible with popular design tools like Adobe XD, Sketch & Figma, with real UI controls, endless theming options and standards-based code output, there is no limit to what you can build with App Builder.

At a high-level, App Builder lets you:

• Create single page applications (SPA) starting from one of our app templates, a pre-defined layout with navigation, or an empty canvas.
• Connect to a live REST data source or upload your own JSON file.
• Drag and drop UI controls and set properties just like you'd do in any other dev / design tool.
• Set themes with our pre-sets or create your own.
• Get a live preview of the application running in the browser.
• See the actual production-ready code in the form of HTML, CSS and TypeScript for the live preview. 
• Generate production ready code for the app design and get a downloadable zip file.

Here is a step-by-step to use App Builder.

Step 1:  Drag & Drop with App Builder for Simple Page Design 

Design your app in the web App Builder WYSIWYG.  Use controls from the toolbox to drag & drop your way to any UX you can imagine.  Just like Visual Studio or Sketch or Figma, there is a rich property editor for everything in the toolbox giving you complete control over how the controls look and behave.  There are a ton of UI controls, everything you'd expect and need to build a professional business web app. And if there is something missing, it is an open format, we are working on a way for you to add as many of your own controls as you like!

 

Step 2: Connect Your Data

App Builder has a Data tab that lets you connect to and manage your data sources. Add, edit and use external data source with a single click. By default, App Builder comes with a mock Northwind data source which you can use for mock data in your app, or you can add remote URLs for JSON (Rest API) or upload your own JSON file. All added data sources are placed in the Data Toolbox and users can expand/collapse each data source in order to see the included tables and selected fields.

Step 3: Apply a Theme or Create a Custom Theme

App Builder comes with six built-in themes based on Material, Fluent or Bootstrap, with dark version and light variants of each. When you try this out, you'll notice that switching themes is more than just colors. For example, the floating label style for the input field in Material switches to a fixed label. And the switch is also visually different. Some of the other changes are more subtle, but it's there. If our themes don't match your needs, you can create a custom theme to match your brand. Color palettes are automatically generated based on the primary and secondary color you pick, and the typography can be set with any of our fonts included with App Builder.

Step 4: Pixel-Perfect Instant Live Preview

Simply click the Preview button and you can see the fruits of your labor instantly – no need to wait 3 minutes for a Stackblitz to compile!  What we have done is given you the app experience instantly in the browser – no need to download, compile, etc. just to see how something will look. We have even included all the navigation and routes – so as you build screens and connect components, we are creating real navigation routes behind the scenes.  In the instant live preview, you can experience everything from the look, feel and navigation.  Even better, just click the “Code View” switch and you get the instant preview of the production-ready HTML, TypeScript, and CSS for what you are viewing in the instant live preview.  You can see this is real code, that you can then edit to your heart's content … with HTML, TypeScript, and CSS.  No black box here!

Step 5: Download Your App in a Zip!

That's it! The final step in getting this design to code is downloading the zip file with all of the source code, and the project files you need to run the app.  All you need to do is download the app, run the npm install command to install dependencies, and then npm start.  And like magic, your app is live and running!

 

Bonus Sneak-Peek Feature: Import Sketch Designs to Production Ready Code!

Since we released Indigo.Design in 2018, we shipped an industry-first capability to take Sketch artboards and turn them into enterprise-ready Angular code. With App Builder, that story continues, but we heard your feedback - you want a continuation story on the design side. With App Builder, we've introduced a new feature that lets you import a Sketch file directly, giving you a complete WYSIWYG design time experience,  just like you have in Sketch. The same rules apply - everything imported from Sketch is backed by real UI components, along with all of the features that you get if you started app building from scratch in the IDE. This feature is being shipped as a Beta today, we'll release one of the next monthly drops. Keep an eye out for Figma and Adobe XD support shipping summer 2021!

There is Much, Much More …

That is the basic flow.  Today, in the Public Preview of App Builder, you can do a lot more:

• Full WYSIWYG App Design with 30+ UI Controls
• Material, Bootstrap, Fluent and Custom Themes & Typography
• Build custom themes
• UI Controls Library with Properties Editors
• Layouts with Relative, Absolute, Fixed & Sticky Positioning
• Download Complete Angular Project
• Instant App Preview & Code Preview
• Library of Sample Apps and Starters
• Import Sketch files directly to IDE and continue working 

To get started today, just log into App Builder and click the Apps tab and explore the templates or start a new app from scratch with one of the pre-built layouts.

If you have ideas … share them with us!  You can share ideas right in the app by clicking the feedback button or send us an email at feedback@indigo.design.  You can even send us a tweet @indigodesigned, we will respond! 

To prep for your first app, I recommend reading the Feature Tour blog - https://ko.infragistics.com/community/blogs/b/jason_beres/posts/indigo-design-web-app-builder-features.

If you have any questions, feedback, or comments, feel free to shoot me an email at jasonb@infragistics.com.

In the meantime, on behalf of the entire team that brought App Builder to life, please try App Builder today, your experience and feedback are important to us!

Happy App Building!

 

Jason