My review of Ionic's Visual Application Builder

This post is more than 2 years old.

Let me begin by saying that - like most developers I think - I have a pretty strong distrust for visual builders for applications. I've been burned by too many tools that create something pretty on screen but generate a horrible mess of code behind the scenes. I think there are definitely tools that do a good job of it now, but once you've been scarred by seeing div tags nested twenty layers deep, you get a bit sensitive. I've recently become a bit more open minded about it. XCode, in general, has a very powerful UI building metaphor to it and I kinda dig how the Android tools handle it in Eclipse as well. Now that you understand how I approach these tools, let me talk to you a bit about the upcoming Ionic Creator tool from the folks behind Ionic.

Ionic Creator is currently in private beta. For a while now folks have been able to sign up for testing and the Ionic team is inviting new batches of people at regular intervals. Earlier this week I was invited to the beta and gave it a spin. When you fire up the tool for the first time, you're prompted to create a new project. You can specify a starter page based on a few preset templates. This list is a bit bigger than what the CLI provides but for the most part I think you can figure out what each does.

Once your project is created you're provided with a blank slate for your first page.

At the time of this review, there was a pretty serious bug where the project would load the page in an invalid state. If you try to do anything at all now, for the most part, it won't work. The clue is the lack of a header on the page. If you see this, hit reload, and notice how it changes:

It is a small thing, but I ran into this whenever I loaded, or changed, projects. Once past this then it is a simple matter to begin dragging and dropping components onto the page. Components include buttons, cards, images, lists, and form elements. You can also drop in an HTML or Markdown component for free form typing. Currently the application will not let you drop a form element onto the page unless you put it inside a form component. That's good, but there isn't any feedback as to why you can't drop the component. I've already filed an issue suggesting they provide some feedback. Here is my attempt to add some basic controls to the page.

Notice that the upper left hand corner is used as a simple tree view. You can select items there to edit properties or select them on the page itself. Each component has different things you can modify. As an example, it is pretty easy to modify the list:

You can also select items on the page and move them up. Creator intelligently handles "collections" so moving the list will also move the list items. Adding new pages is also a simple matter:

Each page has a name and a "routing url". You can then specify that a button, for example, will link to another page. I created a new page called Other and kept the default routing url of /page2. I went back to my first page, selected one of the buttons, and set it to load up the new page:

So for the most part, that's it for the 'drag/drop' aspect. You can setup the components as you see fit and create as many pages as you would like. Once you're done playing around with the widgets, you can easily test it directly in the web page itself:

I haven't tested the preview mode very hard, but basic links do work just fine:

Ok, so, that's not bad. But what about the code? Creator provides three different ways to get to the bits. Clicking Export brings up your choices:

The first one simply provides you with a unique ID to use at the command line. This is probably the one most folks will use. As far as I know this is a one way street. You can't push back changes you made locally to Creator, but honestly there is probably no good way to handle what people would send back in. Obviously the first line, npm install doesn't make sense if you already have the CLI installed. There should probably be a note there warning folks they don't need to reinstall Cordova and the Ionic CLI. Then again, the audience for this is probably more on the newbie side and may include people who haven't ever used the CLI.

The Zip File option is just that, a zip of your code. Finally, the Raw HTML is a version of your application. I say version because they combine the HTML and JavaScript into one file to make it easier to cut and paste. I see the logic of that but it still bugs me a bit. ;) I just noticed that the zip version is also one file. Again, I don't like that, but that's just me.

If you source a new project via the code given in the export prompt you get a 'proper' Ionic project that you can immediately begin using. Oddly, some of the application logic is in index.html as opposed to app.js, but that may be a personal preference type thing. Ignoring that though you can go from the visual builder to your simulator in seconds - yep - seconds:

So, final verdict? I'm not sure this is a tool I'd use for my demos, but I'm probably not the target audience. I could definitely see using this as a prototype builder though. Or even asking a semi-technical client to take it for a spin and see what they like. It could save some time in terms of bootstrapping the application and I see some very strong value there. I think if it was tied to a service like PhoneGap Build, it would be a huge win for folks.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by AJ Mercer posted on 10/11/2014 at 5:17 AM

I too have taken Creator for a spin and being logging issues. It is still very much Alpha but shows great potential.

I would like to see more Ionic components (AngularJS directives) added with their API exposed in the property inspector. I have not seen how to build whate the Page templetes give you for example.

I too would like to see code moved out of index.html to app.js.

There are 25,000 people signed up waiting to take a look, so it would seem there is a lot of interest in this type of product; strong community should lead to a strong product. I am looking forward to following the life of Creator (and antics of @ionitron)

Comment 2 by Vaibhav Narula posted on 10/26/2014 at 7:26 AM

Hi mate,

Can you show how to integrate pushwoosh and ionic together.. Could not find any resource online on this.

Cheers

Vaibhav

Comment 3 by Raymond Camden posted on 10/27/2014 at 12:44 AM

I've never used it - but I'll try to find time when I'm back in country.

Comment 4 by d3viantDefiant posted on 2/20/2015 at 4:57 PM

I tried this POS today and thought it was terrible. I can't even drag elements into the page. Tried in Safari and Chrome. You can't change backgrounds or modify CSS or even add an extra tab. Maybe I am missing something but it's zero percent useful.

Comment 5 (In reply to #4) by Raymond Camden posted on 2/20/2015 at 5:11 PM

You should probably ask for your money back then. ;) Seriously though - as a free tool - calling it a POS is a bit extreme imo. It definitely has room to grow. Did you try filing issues for your suggestions? You can do so here: https://github.com/driftyco.... As I think I mentioned above, I think this tool does a good job of getting you started. Since the CLI provides an easy easy way to grab the source, you can then take it and run.

Comment 6 (In reply to #4) by Max, Ionic CEO posted on 2/20/2015 at 5:27 PM

Thank you for the honest feedback, seriously. It needs work, and will probably morph quite a bit over time. Some of it is just quirks in the tool (like needing a form first before dragging in inputs), and some of it is just bugs.

Honestly, it's not really the tool I dreamed of before we created it, and we have some ideas on how to transform it over time, so stay tuned.