Announcing Indigo.Design App Builder: Build Real Web Apps Blazing Fast in the Cloud

Jason Beres [Infragistics] / Wednesday, December 16, 2020

We are excited today to announce the public availability of the Indigo.Design App Builder. Indigo.Design App Builder is a brand-new tool that helps teams design and build complete business apps for the web faster than ever before. 

What is App Builder?

Our goal for the App Builder is simple – help you and your team’s 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, React, and Blazor.
  • 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, to a real app. Tons of time (money) and effort is spent / wasted in the designer to developer handoff.

With the Indigo.Design and 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.

Indigo.Design App Builder

App Builder Tools: Indigo.Design Web App Builder to the Rescue

Indigo.Design App Builder is a low code, cloud-based WYSIWYG drag & drop tool that helps design and development teams build business apps fast.  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 the Indigo.Design App Builder.

At a high-level, you can do this with App Builder today:

  • Easily create single page applications (SPA) using Ignite for Angular UI components (future React, Web Components, Blazor)
  • Preview design of the created application
  • Generate the code of their application – in a real-time preview or download the entire app

Here is the basic flow of the using the Public Preview of the App Builder software:

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

Design your app in the web app builder WYSIWYG.  Use the controls from the toolbox to drag & drop your way to a beautiful app.  Just like Visual Studio or Sketch, there is a rich property editor for everything in the toolbox for complete control over how the controls look and behave.  There are a ton of controls today, and we are continuing to add more every month.  Eventually, all the controls in the Ignite UI Angular, React, Web Components and Blazor products will be in the Toolbox.  And if there is something missing, it is an open format, you can add as many of your own controls as you like!

 Web App Builder - Web IDE

Step 2: 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 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 hearts content … with HTML, TypeScript, and CSS.  No black box here!

Web App Builder - Live Preview with Code

Step 3: Download Your App in a Zip!

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!

 Web App Builder - Run and Build Angular Project

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
  • 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

To read the details of every feature in this release, check out the Feature Tour blog:

https://www.infragistics.com/community/blogs/b/jason_beres/posts/indigo-design-web-app-builder-features

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

https://appbuilder-preview.indigo.design/  

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 appbuilder@infragistics.com.  You can even send us a tweet @indigodesigned, we will respond! 

Indigo.Design App Builder Feedback

Indigo.Design App Builder Roadmap

App Builder has been in progress for quite a while.  Throughout 2020 we have released it internally for use inside Infragistics and with customers in a private preview.  We have gotten a ton of feedback and have worked that back into the product.  Today is the first time we are making this broadly available for public feedback.

App Builder Timeline

Indigo.Design App Builder Roadmap 

The next major milestone is in the Spring of 2021 – this will be the public launch of the App Builder software with all the integrations and connections with the entire Indigo.Design Digital Product Design Platform.  Our goal was always to officially release 90 days after the Public Preview, so that would put us in the range or Mid-March to Mid-April 2021.  We have teams spread across the globe working on this, in the USA, in Sofia, Bulgaria and in Montevideo, Uruguay.  With Christmas holidays, summer vacations (in Uruguay) and winter breaks for the other teams, I realistically believe we will run into April as the official release date.

From a feature perspective, here are some of the big areas of focus for the official release in Spring 2021:

  • Support Data sources – Excel, JSON and more
  • Import Adobe XD, Figma and Sketch Designs
  • Generate complete React apps, Web Component apps and more
  • Custom Components support in the Toolbox (bring your own controls!)
  • Enriched Components Library – Charts, Combo Box, Overlays and more
  • Concurrency for Multiple Users / Editors
  • More Sample Apps and Layout Templates

Of course, we will have some surprises in there that we will not talk about yet!

This release is also a standalone experience – in other words – we pulled App Builder out of the Indigo.Design cloud tooling for this Public Preview.  This means that anything you create in App Builder is not able to be used in a User Test, and you cannot use the interactive commenting features, and you cannot take your Sketch designs and jump right into modifications of the design in Indigo.Design.  We did this so the experience is focused on the web app builder features and capabilities.  We want your feedback on the app building experience – not the entire Indigo.Design experience.  When we ship in Spring 2021, it will be an integrated experience.

Is This a No Code App Builder?

The Indigo.Design App Builder is not really getting into the realm of a no-code app builder tool ... yet.  I consider this in the low-code app builder category.  If we look at the high-level features:

  • 100% WYSIWYG drag and drop app builder
  • Toolbox of rich UI controls designed for business app
  • Built-in themes and custom themes
  • Pixel-perfect screen code generation
  • Standards-based code output

And add the next milestone features:

  • Import designs from Adobe XD, Sketch and Figma directly into App Builder
  • Additional SPA framework code generation like React, Web Components, Blazor, etc.
  • Connections to real data sources for live data in app and generated with code output

Those features together are the definition of a low code app builder software.  The biggest differences between a no-code app builder and a low-code app builder are:

  • Is the app mission critical? Then use a low code app builder.  No-code app builder tools are meant for non-mission critical, more disposable line of business apps.  Low code tools give you screens, some logic, but are meant to be a handoff to the app dev team.
  • Do you need to go from app builder to app store? Then use a no-code app builder.  No-Code app builders are good for simple, 1 to 3 screen applications that do not require a ton of business logic, secure infrastructure, etc.

A low code app builder like Indigo.Design App Builder is really meant to save you the huge amount of time in the design to development phase of the user experience of an app.  As I mentioned earlier, Gartner Research says this is 60% of the app dev time, I believe it is more. 

Using a low code app builder can accelerate screen design 10x, eliminate costly errors in the design to developer handoff, and by its very nature is an iterative and collaborative platform.  With the complete Indigo.Design platform, our focus is the productivity of design and development teams to deliver digital products faster than ever.

Getting Started with App Builder

Getting started is easy … just go to this link:

https://appbuilder-preview.indigo.design/  - Log in with your Office 365 account, Gmail account or Infragistics account and you are ready to go!

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

And review the videos on YouTube - Indigo.Design App Builder - YouTube Playlist.

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 Indigo.Design App Builder to life, please try App Builder today, your experience and feedback are important to us!

Happy App Building!

 

Jason