I decided to use ionic to create a mobile application for a two contest. This application was a very simple one : a succession of screenshots on which you can click on special area (delimited using map area) to go to another.
This mock up is trivial to code. Using code igniter, it would had took me less than one day. Using ionic…it was more complex.
Before going to the contest, I decided to introduce myself to ionic and archieved “todo” tutorial. Ionic and the android sdk was easy to install (no iOs, I work on Linux) and I quickly end the tutorial.
When it is time for me to begin the contest, I now have four day to code the entire application.
Resizing the image
I began to work on web browser since it was the easy way for me to test and the result is supposed to be the same on web and on smartphone. The image the designer provide me are all having the same size, but I want them to adapt to the size of the smartphone to avoid having blank edge. The problem is : I have to resize the map (clickable area) at the same time as the image. Fortunaly, there is already a lot of plugin for this !
I use one, it doesn’t work, then copy paste a js function on stackoverflow and 2 other solution…none of them works. It is frustrating when everyone on stackoverflow say “thanks this solution is awesome” to something you can’t make working.
Ionic is not only unable to execute vanilla js code but also have uncompatibility with angular js plugin which are supposed to be fully compatible.
Compiling the binaries for smartphone
In the documentation it is explained that, after running the command :
cordova build --release android
The binaries is supposed to be platforms/android/bin. Mine is in the /platforms/android/build/outputs/apk folder.
This is not a problem by itself, but the android-release-unsigned.apk is unable to work on an android smartphone. At least the android-debug.apk is working so I ran it.
What you see is NOT what you get
Since everything works fine on the browser, I expect the application to be exactly the same on smartphone…wrong. Like absolutely wrong. While clicking on an image display the next one on the browser, clicking on one image display the next one below the first on smartphone.
I worked two days on this bug without figuring out how to solve it. The last day I came to see my friends (designer and marketing) and had to explain to them that the smartphone application is not working. Fortunately, the web version is enough for them. We’ll go for a web app rather than a mobile app.
The integration of the application on a ovh server worked easily and without problem.
Buggy routing system
The routing system of my application is quite easy on my app. We go from one page to another without special trick. Yet sometime, rather than displaying the next page, ionic will display either : a blank page, the next page under a white filter or half the previous page and the next page. I had to refresh the page and it work, so this is not a critical bug, but having a bug on an application which is so simple is a shame for anyone pretending to be a good developper.
Again something like 6 hours of work on it was not enough to solve it.
I know a lot of people made amazing stuff using ionic, and that understanding a tool as complex as ionic take more than 4 days, but I have to say the experience wasn’t convincing, to say the least.
I think ionic has two major flaws :
Not enough error message
I fear this is not only a ionic problem, but rather a js community problem. When I use a js framework, there is always a moment where the library doesn’t work but there is no error message on the console. Very frustrating. When there is an error message, it is likely to be unreadable like this one.
Some of my friends had the same problem.
You should clearly state what is compatible with ionic and what is not and throw a warning every time someone is using something not compatible.