First impression with ionic

1

Introduction

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.

Warm up

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.

I found a angularjs plugin to solve my problem, but there is a problem. After one complete day of work, I ended up founding the solution.

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.

Conclusion

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.

Delimiting which part of html/css/javascript is not working

When I use javascript library to resize the map as well as the image, this is not working, probably because some js functions (and jquery) are not compatible with ionic. The same with angular and css.

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.

repository of the application

1 Like
2

A lot of these issues you’ve come across I feel like could have been avoided. The technology is doing exactly what it’s supposed to do. Different platforms have different browser rendering engines and there isn’t a way for Ionic or any other web app to predict those because we can’t really run that same browser on the computer. It’s not an Ionic problem but a platform and development flow problem.

I wouldn’t say things aren’t compatible with Ionic, but are not compatible with AngularJS which Ionic did not write, but uses, so the routing in Ionic is not buggy but it would be the routing in AngularJs.

If you want a list of things that aren’t compatible with Ionic/AngularJS then you should compile one up yourself. There are most likely millions of javascript/jquery/angular/etc. frameworks out in the wild and to test every single one is extremely unrealistic.

What I’m getting at is I don’t think you 100% understand the technology that you’re actually trying to utilize and that is why your outcome is varied. We have the forums here to help you and I at least would highly recommend you use them to actually get help and not to complain. You’re not really purposing any solutions or solvable problems, just a list of things you didn’t like which doesn’t really do us much good. So if you have questions, ask, if you don’t want to ask, figure it out yourself. As a programmer that’s kind of your job.

2 Likes
3

It is not about complaining, it is about giving you clear insight about how you could improve ionic. It is true that it is my job to find answer to my problems, but it is ionic job’s to make it as easy as possible to find those answer. What I am trying to do is to show you how you fail to achieve this goal.

In rust when someone is criticizing the language, people say than you for the feedback. Rust is known for having an amazing community.

4

Resizing the image

Simply not true. Ionic isn’t doing anything that would block javascript. Remember, Ionic is just the UI layer, and angular is doing most of the work.

In the case of that plugin, it maybe a conflict with jquery or jquery not being loaded in the right order. If you’d like a non-jquery dependent plugin, you could try this one.

Compiling the binaries for smartphone

Cordova does not take care of the signing process for you, this is still something you have to do. cordova build android --release will just prep the app for a release build.

This is covered in the cordova docs.

http://cordova.apache.org/docs/en/5.0.0/guide_platforms_android_tools.md.html#Android%20Shell%20Tool%20Guide

What you see is NOT what you get

This one I’m curious about and what the code looks like. Are you using ng-click? Are you using jQuery click handler?

Buggy routing system

Again, I’d love to know more about this. Were there any errors showing up in your console? How were your states setup? How were you passing data?
If you could provide some more info on this, that would be helpful

Delimiting which part of html/css/javascript is not working

Again, anything that you can do in angular can be done in ionic (remember, we’re just the UI layer).

@gbersac, I’d love to chat more about your issues. Feel free to shoot me an email, mike at drifty dot com.

1 Like
5

@mhartington This is a healthy way to react to criticism :smile:

The repository of the application is here.

Compiling the binaries for smartphone

I never used jquery click handler, but I remember trying to implement ng-click. If I remember correctly, it wasn’t working. Clicking doesn’t change anything.

Buggy routing system

There were no error on the console. The states were setup in app.js. I wasn’t passing data because there was no need for this. There wasn’t even a controller.

Feel free to ask me anything. If I don’t respond to the forum, send me an email, since I don’t use ionic anymore (my new project is not mobile/web), I won’t be there anymore.

6

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 this problem once and it went away when I fixed a missing ion-content closing tag. With a quick look I noticed that car_trouble_menu.html and brocken_declaration.html have a missing ion-content tag.

I find the problem is these days not usually with Ionic but the complexity of the full hybrid stack (Native platforms, Cordova, Angular, JS)

2 Likes
7

@campers True that! The hybrid stack is relatively complex, and major components are tucked away neatly behind the awesome magic that is Ionic. This is indeed what Ionic is supposed to do. I ran into this issue at first, and the only way to overcome it IMO is to go and understand Angular, then Cordova, then your mobile CSS and browser differences.

8

Hey @gbersac,

Please note that building a few pages in a straightforward, full-stack PHP framework such as C:I, which is familiar to you, is one thing, and building a JS app in a new framework, on a hybrid platform is a very different thing.

On the one hand, a classic LAMP stack is very stable. It’s one platform, and most of the work is done in a controlled environment - i.e. server-side: there’s an HTTP request, your framework takes care of the bulk of the work, then you get to write a few bits and pieces in the controller/view, and out comes HTML.

Angular is a very different beast. Comparing it to C:I is no contest: CI is focused on being a simple full-stack HTTP framework, while Angular is architected in a much more decoupled way, and that will add complexity.

Also, PHP vs JS - different approaches. Coming from a PHP world, you may find JS debugging a bit … weird, at least at first.

In addition, Ionic’s target extends beyond what a normal, cross-platform web browser does. Mobile devices have other constraints - so the mobile browsers work differently. Plus, these are native apps, not web pages, so you expect more stuff, i.e. better system integration, packaging etc.

You’ve hit into a lot of those things, which are a non-issue for a “traditional” PHP website.

Sorry for the rant! Hope it helps!