Ionic Creator

Is Ionic’s Drag & Drop App Builder Any Good?



·

Since attempting to use Dreamweaver way back when to build websites with a Drag & Drop interface, I’ve avoided similar programs like the plague. Typically WYSIWYG (What You See is What You Get) editors are notorious for producing awful, messy & unmaintainable code.

I recently discovered the Ionic Creator though, and have a lot of respect for the founders of Ionic so was excited to give it a go. I also know that Sencha Architect (a similar, but more complex tool) is a very well liked tool for building Sencha Touch apps. The short of it is: You’re not going to be able to build an entire application in Ionic Creator (at least not yet anyway), but it is an awesome tool for quickly creating UI and prototype apps.

Take a look at the video below where I have a bit of a play around in Ionic Creator:

How to Get Started with Ionic Creator

It’s really easy to start creating in Ionic Creator, first just create an account here and then log in. You’ll be greeted with an interface like this:

Ionic Creator Start

I’ve labeled different sections of the interface in the image above, here’s what each section does:

1. You will be able to manage all of your pages from here. A page is an individual screen in your app, and each page in this section will expand down into the individual components you add to the page.

2. The components section provides most Ionic UI elements you may want to use such as buttons, forms, and lists. You can combine these elements to make some reasonably complex interfaces, take this news feed I created for example:

Ionic Creator Feed

3. You can save and export your application here

4. You can switch between Edit and Test mode here. Test mode will allow you to actually use the application you have built.

5. The hamburger icon will allow you to manage the various projects you have active

6. This section will allow you to edit the specifics of individual components

Once you’re done designing your application you can export it. To export your app, you have three options:

  • You can create a new Ionic application based on it directly through the Ionic CLI (how cool is that!)
  • You can download a ZIP file
  • You can just Copy & Paste the Raw HTML (which is useful if you just want to grab bits and pieces of the UI)

So, is it any good?

Overall, Ionic Creator is quite nice to use. The interface is simple and clean, and for the most part it works the way you’d expect without requiring any explanation.

You can certainly tell it’s a beta product though and it has a little way to go before being finished. There were a few frustrating bugs and lack of features I encountered along the way (note that some of this may be because I’m using it incorrectly):

  • Can’t get rid of the header bar
  • Interface is a little buggy, navigating between different pages within the app doesn’t always work properly and I had to refresh the page a few times
  • As far as I can tell you can’t link a side menu in the header bar
  • You can’t add any buttons to a header bar, which is a very common use case
  • In a tab view I could only add content to the first tab, when selecting another tab it kept switching back to the first

There is some more advanced features outside of simple UI creation such as routing and linking. The ability to link pages together is cool, especially for the sake of demos, but when I linked the Done button on the signup page to the feed page it automatically added a Back button to the header bar which linked back to the signup page.

As far as I can tell, Ionic Creator doesn’t give you the level of control required to prevent stuff like this.

The code that Ionic Creator creates isn’t really in the format you’d like for a well organised application (all templates are in the index.html file as scripts, rather than being separated out into individual template files for example) but you can easily cherry pick the bits and pieces you need and place them into your app as required.

I definitely think right now it is more of a UI creator than an app creator, but that’s all I’d really want it to be anyway. I don’t think drag and drop style interfaces are ever going to be able to create complex applications as well as a skilled developer could manually, but they can certainly help developers work faster.

I can see myself following a process like this when creating an Ionic application:

  • Create an Ionic application manually as I usually would
  • Jump into Ionic Creator to design UI for individual screens (without linking them together)
  • Export code from Ionic Creator
  • Create blank template files and routing manually
  • Copy & Paste the UI exported from Ionic Creator into my own template files

In fact I have already started doing just this, and I think it definitely improves my development process.

Have you used Ionic Creator? Let us know what you think of it, and if you haven’t used it yet it’d be great to hear your first impressions.

What to watch next...

  • Bernd L

    I personally don’t like such “tools”. For quickly generating demo apps in the way of a mock-up this might be nice, but in my opinion not for creating productive apps. As you mentioned the code isn’t organized in a professional way, I don’t want to spend time to copy and paste it in the right order. And what is most important for me: I want to understand what is happening behind the scenes, so I will put the components together on my own from the documentation. And if I created some apps I can create new projects quite fast as I know what and how I did it in the last projects. So there’s no need for me to use that tool.

  • Hey Josh,

    Thanks for the review of Creator! Not sure if you know this yet, but I actually joined the Ionic team the day you posted this, and my full time job is making the Creator as awesome as possible. I appreciate this feedback, and will be working hard to make Creator even better. Please feel free to hit me up at matt[at]drifty.com with any feedback you have as you use the tool as well.

    I believe the Tabs issue you were facing has been fixed as well as a few other things. I’m presently working on upgrading Creator to use Ionic V1.0.0 and with that is going to come some awesome features.

    One of the biggest is the ability to have multiple pages in containers (think, “I may have 5 different pages in one tab”), this will allow people to make even more complex apps and make them closer to how they’d like. I’ll also be rounding out a lot of the components to make sure they aren’t missing any options.

    After that release gets pushed my top 2 priorities are going to be making the export function nicer (splitting everything out into it’s own files, making the code more clean, etc) which should bring us one step closer to being a “real app builder.”

    The second thing is plugins. For instance, a Firebase plugin could pull data directly from Firebase to populate a list. The possibilities here are endless!

    Thanks again for the time you put into this, it’s much appreciated 🙂

    – Matt

    • That’s awesome Matt, good to hear someone dedicated to the tool is on the job – I look forward to using it in the future and thanks for commenting 🙂

  • I’m also very weary of using wysiwyg creators but like you I tried Ionic’s rendition. I didn’t get very far with it, but your article provides some nice detail about its nuances and development status, and seeing @mattkremer:disqus posting here about it as well just goes to show how much energy there is surrounding Ionic and within their core team. Nice article, thanks!

  • dawesi

    They should hire Aaron Conran from ex-Sencha to build them a builder… Sencha Architect still is the best GUI builder on the planet, clean code… just a pitty about the licence for smaller operators.

  • crazytodde

    I’ve tried this over the last couple of years and signed up for the pro version this weekend, and it completely kills the demo. I’m damn impressed with it, the whole experience is great.

    This might sound obvious but if you’re creative and know angular well it’s going to make all the difference. You can use scope variables in the property boxes and other things that aren’t obvious in the docs I had seen. There’s no need to work around the editor yet from what I’ve seen, the code support was done well, you can apply directives just about anywhere and you can do just about anything with a directive.

    Most other mobile dev platforms have drag and drop ides so why put yourself at a disadvantage

    • oli0060

      I’m thinking about getting the Pro-Version. Is it really that much better than the free one? Like Josh is saying, it’s nice to build a app interface but you have to get most of the linking (and other stuff) done by yourself.

      • crazytodde

        It is that much better because the addition of code support allows you to do just about anything. I was able to pull real data in from an API w Nigresource.

        Some of the things he is talking about, like the header issues, from my past experience w ionic, are ionic problems not creator problems, and I was able to solve them with directives w code support enabled just like I would have done from an IDE

  • AMANI CHANG’A

    I got the same problem u said, The codes from ionic and creator are not the same as of ionic CLI, it is possoble to copy those from creator to www folder but still routing are different,project structure is different even java script structure is different,So for my opinion its better to take only some part of codes from creator and use them to CLI created project.