
How we built our app in 2 weeks using Ionic Framework - rayv
https://www.airport-parking-shop.co.uk/blog/built-app-2-weeks-using-ionic-framework/
======
thomasfl
Mobile app is most most certainly going to be made using html and javascript
in the time to come. Ionic and angular is great for building mobile apps with
standard mobile UI elements like headers with back buttons and chevrons, pages
that slides in from the side, modals and tab bars at the bottom of the screen.
Everything is meticulously created in html, css and javascript. Scrolling is
good enough for most usecases, but if your pages contains long list views with
graphic elements the page starts to lag.

However if you use famo.us' list view scrolling is nearly as fast and smooth
as native code on iPhone 4. On newer phones to difference between hybrid apps
and native is unnoticeable. At the moment famo.us only has low level
components, like boxes with html content. Standard back buttons, chevrons,
tabs, action sheets and icons has to be imported from elsewhere. Famo.us only
does fast bouncy animations, touch events and 3d effects. Besides famo.us is
working on their phonegap/cordova alternative wrapper.

A combination of Ionics ease of use and famo.us' impressive speed would have
been great. There's lot of promising little open source projects on github
that either extends famo.us or integrates it with javascript MVC libraries.

I believe Brendan Eich was right when he said "Always bet on JS!". I bet
mobile app development is going to be dominated by JavaScript and HTML.

~~~
no_future
What a dreadful notion, I hope this never happens. Development on mobile
devices is a great way to develop on a web connected platform that reaches
lots of consumers, but instead of using horrible, ancient tools that are
expected to do things today that they were never designed to do at the time of
their inception(HTML/CSS/Javascript), you can use capable systems languages
like C(and now Swift, which I have no experience with but have heard generally
good things about) and Java.

That I call traditional frontend web tech ancient and out of place today isn't
even really an opinion - the deluge of Javascript/CSS frameworks, compile-to
languages,and lists of best practices would suggest that something is wrong
there. Web stuff is just way easier to get into so there are a huge amount of
developers available, especially the types who spend more time yapping on
their blogs about the latest overhyped software trend than actually writing
software.

I don't know about animations and whatnot, but for games and image processing
i.e. 2 enormous chunks of all mobile software, Javascript isn't replacing
anything anytime soon.

I don't understand why someone would want to spend hours trying to optimize
languages which weren't designed to run native software on a platform to be as
effective as the ones that were when you could just write the software in the
native language, to me this just seems like an exercise in futility. Even
moreso considering the fact that Javascript and HTML are horribly unproductive
languages, though I suppose since so many people know them well they can be
more productive in them than in a language they don't know.

~~~
findjashua
This comment would be spot on 2 years ago, but once you try libraries like
Ractive or React, it's iOS/Android that begin to feel ancient. How do they not
have data binding in 2014?

Also, having to maintain a separate codebase for each platform just seems
inefficient. The solution doesn't have to be Javascript (could be C#), though
Ractive and React make it surprisingly pleasant to write JS.

~~~
andwaal
You know that one of the main things that React(w/flux) tries to fix is all
the errors made because of data binding..

~~~
findjashua
I use that term loosely to mean that my even-handlers only have to update the
component's data, and the library takes care of updating the view.

That said, I've used Ractive for a while (on my own time), and haven't run
into any issues. But I'm curious to know more and would like to try it out.
Could you give me an example where data binding would cause errors?

------
TeeWEE
Interesting,

But i installed the app on my nexus 5 and used it... It feels like i'm opening
the browser. The app doesn't feel native. Input elements are weird. The dialog
is weird. The animation is sluggish. And the spinner animation is moving in a
weird fashion.

For a lot of apps thats allright. But if you want to create a killer app,
please go native.

~~~
thomasfl
Yupp, it's sluggish but good enough for small time apps. Wait a few years for
famo.us and others to work on the problem, and you will see hybrid killer
apps.

~~~
_random_
Yeah, anything HTML5-related and stable is always just a few years away.

------
toni
It's funny that the Genymotion screenshot clearly shows "for personal use" :)
The blog post says Genymotion "has a completely free option along with some
paid options for larger groups of developers", which is a slightly different
interpretation of what you can read on Genymotion website as the use cases
there are divided between commercial and non-commercial. Still a nice read,
good luck to you!

~~~
rayv
My bad, an honest oversight. We have purchased a license.

~~~
toni
No worries, these things may happen :)

------
timruffles
Nice looking app!

You're not doing promises right however :) `$http.get()` etc returns a
promise, so you can do all transforms and logic via `.then()`. The only time
you should ever use `$q.defer()` is when you're wrapping a non-promise API.
The bluebird library has a nice write-up:
[https://github.com/petkaantonov/bluebird/wiki/Promise-
anti-p...](https://github.com/petkaantonov/bluebird/wiki/Promise-anti-
patterns#the-deferred-anti-pattern)

~~~
girvo
Promises are pretty great, too. I wrote some (now in production!) feature
detection/facial recognition code using OpenCV through the node-opencv
library, but as some of the big calls were async and I needed it to work in a
somewhat synchronous way, I wrapped it all up in Q. Once you understand how
they work, they can be quite great.

------
venomsnake
How can ionic be performance obsessed when it is a wrapper of cordova? How can
they achieve better perfomance than plain cordova that way?

~~~
rayv
The improvement doesn't necessarily come from the cordova side of things.
That's still all the same old webview that gets wrapped up. The real
difference is achieved with everything else that gets used to build the app.
The Ionic framework avoids DOM manipulation where possible and enables
hardware accelerated animations. Both these things is possible on top of plain
cordova, but Ionic makes it so much easier and they have already done the hard
work of figuring out what is going to perform best inside that cordova wrapped
webview.

------
colinramsay
Just installed it and I think this is the perfect sweet spot for this kind of
wrapped webapp. The app is simple (but useful) and still leverages native
things like the select combo and date time pickers. The transitions between
the two screens are smooth and the list scrolling feels great.

I suppose my only query is... why bother with ionic? This is such a simple
application that it almost feels overkill, you could have used the cordova
commandline tools along with libraries like iscroll and fastclick and you'd
have had everything you've got here with less overhead...

~~~
rayv
I guess whilst using Cordova on it's own was also possible, it would, like you
said, also involve including/setting up multiple libs. Ionic just sets you up
with very solid boilerplate and then also comes boxed with awesome UI
components. For us the slight overhead was definitely a good trade-off.

------
NicoJuicy
I wonder if Ionic Framework did remove the click-delay of +/\- 300 ms for
browser apps / sites. I tested a demo of the framework a while ago and the app
just felt slow (perhaps because of the animation or what i thought was the
delay on click).

Googled: According to info, they did remove it, but you shouldn't use the ng-
touch or fastclick side by side with it (source:
[http://stackoverflow.com/questions/25419109/ionic-tap-
delay-...](http://stackoverflow.com/questions/25419109/ionic-tap-delay-click)
)

~~~
drygh
It is removed. There are a number of browser quirks that Ionic handles so that
all click events are handled accurately, and not just ones with an ng-click
directive.

Here's a blog post that goes into more detail about the 300 ms delay problem:
[http://ionicframework.com/blog/hybrid-apps-and-the-curse-
of-...](http://ionicframework.com/blog/hybrid-apps-and-the-curse-of-the-300ms-
delay/)

------
Bahamut
We just built a mostly done prototype of one of our products with Ionic in 4
weeks at my company, rewriting existing components to take advantage of Ionic.
We ran into a bunch of Ionic bugs (on beta 13), and took a dive into
integrating the beta 14 candidate with Angular 1.3 into the prototype (and
came upon what looks like ng-animate bugs in 1.3) last night. We are also
using CCA.

Ionic has pretty much been a joy to use, and fit exactly our requirements (we
do hybrid web/mobile apps on my team, mobile being Android only since we do
native iOS development). The article is pretty much on the mark, and you need
to be careful when it comes to performance on mobile. Optimizing stuff like
using the track by syntax with ng-repeat is vital. Taking advantage of
Angular's superior testability and structure conducive for rapid app
development (and having 3 Angular contributors on the team doesn't hurt)
allowed us to build an impressive app very quickly, as well as avoid some of
the nasty Ionic bugs we came upon (mostly related to their $viewHistory
service and broken back button).

I haven't gotten to play around with the beta 14 candidate yet, but I was
unhappy with how opinionated Ionic was when it came to the history and how
it's expected that everything would inherit from a state with tabs.

I will say this though - if it wasn't for the decision to use Ionic, we would
have been in a lot of pain trying to meet our deadlines trying to write a lot
of this functionality from scratch, and we would not have had stuff like the
native feel with the tapping & scrolling behavior that Ionic provides. Overall
the Ionic team did a great job with the product, and I'm pretty happy with it.

------
shakethemonkey
I wanted to see how this app feels. Visiting the App Store, there is no app
with this name. On my iPad, if I tap on your link, I am presented with
(literally) a solid empty white square. Good job, Apple.

So FYI for everyone else not in the UK, this app is only available in the UK
App Store. (But I had to fire up my Mac to find out.)

~~~
rayv
Just opened this up to all territories. Might take some hours to appear in
itunes though.

~~~
atom-morgan
Thank you. I just installed it, took a quick look, and wouldn't have guessed
this wasn't a native app. This is on an iPhone 4S. It seems like it's a little
more obvious on Android devices from other comments but I was pleased with it.
This definitely gives me some confidence in Ionic.

------
matthewmacleod
If there's any sort of app that works with this sort of thing, then yours is
probably at the top of the list. The interface is super-simple, people are
unlikely to use it often, and so on.

In this case, the cost of developing independent apps for Android and iOS (as
well as other platforms, potentially) would probably be too high.

The experience wouldn't be suitable for anything used more intensely though,
IMO. Scrolling on iOS is just "not right", in the sense that behaviour is
different to native apps. Hover behaviour is different too, and some of the UI
elements are also not quite correct (back button). Small things like that add
up in a bigger app and cause a frustrating experience.

But it's definitely a good turn-around time, and FWIW I think you've made the
right decision to take this approach.

~~~
marknutter
Hm, seems to work well enough for Netflix though, and that app certainly is
used a lot.

~~~
matthewmacleod
I must admit, I didn't realise that Netflix was a Phonegap app. It does
certainly explain a lot of the sketchy behaviours that I've noticed though!

~~~
marknutter
And I have noticed them too, but I rarely ever cared. In fact, most people
don't care, as long as it works, and it does. Another great example is
Untappd, an app with millions of users and a 4.5 star rating on iOS.

------
potomushto
Also recommend to everyone who needs Cordova to look at AppGyver Steroids[1].
It's truly hybrid framework, though, still under active development. For
example, Steroids has layers system, which basically consist of WebViews, but
all transitions is native and Steroids gives you native controls such as
NavigationBar and TabBar. I'm making an iOS app right now and I've got shared
.styl, .jade templates and a bit of .js logic between web node.js and mobile
app. From Ionic I use IonicIcons, and I love it.

[1] [http://www.appgyver.com/](http://www.appgyver.com/) [2]
[http://ionicons.com/](http://ionicons.com/)

~~~
rayv
This was our closest alternative actually. Very promising!

------
T-A
In fairness, the comparison table pitting Eclipse against XCode should have
included Android Studio, which (besides not being Eclipse) also includes a
visual UI editor.

~~~
rayv
Only just heard of this. See it's still in beta, but will definitely give it a
go!

~~~
TeeWEE
Its the de-facto standard for android development these days. And its very
stable in my experience.

------
Kiro
Just tested the app on my Samsung Galaxy S3. Seems to be working fine and the
transition between results page back to search page is smooth.

The search form is offset to the right though where I suppose it should be
centered. So the right side is touching the right edge of the phone while
there is blank space on the left. It looks broken. Does anyone know what the
problem is? These kind of issues are something I see frequently on mobile
sites.

~~~
rayv
Mind me asking what version of android you're running? We've noticed this on a
couple of android devices also, but not been able to pin down the problem.

~~~
Kiro
4.3

------
uptown
Looks nice. I've been meaning to give Ionic a try, so nice to see you had a
good experience with it. Did you check out Framework7? I've been using it with
Cordova and it's provided a way to build cross-platform mobile interfaces
quickly. It provide a native-feeling skin and interactions for your apps.

[http://www.idangero.us/framework7/](http://www.idangero.us/framework7/)

------
benjaminva
In your screenshot of the "Airport Parking Shop" in the Browser, besides the
developer tools, the app itself is wrapped in a GUI that I have not seen
before. First I thought it was an ionic served GUI but I couldn't find it when
trying out the Tab App example. Could you elaborate more on which tools you
used for testing in the browser?

~~~
quarterto
That's Chrome Dev Tools' emulation view.
[https://developer.chrome.com/devtools/docs/device-
mode](https://developer.chrome.com/devtools/docs/device-mode)

~~~
benjaminva
Didn't know about that yet. Thanks!

------
xtrumanx
I've had a horrible first impression of Ionic just a week or so ago.

Like Cordova, Ionic can generate a "hello world" app for you. It served just
fine on the browser but would not load on neither the emulator or my phone.

It is in alpha/beta so I guess I'll cut it some slack and try it once more in
the future.

------
Kiro
What does Ionic provide exactly? What is the difference between this and just
using AngularJS + Cordova?

~~~
rayv
Ionic just provides a bunch of really useful components (angular directives)
that's already hooked up and ready to use. This not only saves time
developing, but testing as well. Also, comparing the Ionic components to
jQuery mobile is not really fair. jQuery mobile is quite horrid in my
opinion..

~~~
abluecloud
When I said jquery mobile, I was more talking about the concept of pages which
it has. I agree with you though.

------
pjmlp
I guess it is good decision when the developers have a web background, but
there are lots of options for developing native applications across mobile OS.

------
feroz1
So it took Apple almost as long to approve it as it did for you to build it!
Surely Apple can cut down the review time - it's so frustrating.

~~~
rayv
Especially seeing as Google Play makes it so easy. Nightmare for getting
urgent updates out!

~~~
wgx
FYI for _urgent_ updates you can request an expedited review from Apple. Saved
our asses a couple of times.

~~~
rayv
Good to know. Wasn't aware of that at all.

~~~
nazgob
It can be quite fast but no guarantee about it. I believe you have limited #
of those urgent review requests. It was something like 2 per year.

------
berns
If Cordova is Phonegap and Ionic is Cordova how does Ionic solve the
performance and device specific bugs they had with Phonegap?

------
jakebrumby
Nice and simple to use.

Did you consider Appery too? [http://appery.io/](http://appery.io/)

~~~
rayv
No, with this many solid free options we pretty much immediately ruled out
anything paid.

------
jblok
Nice to see an established UK tech company that fulfills a function and does
it really well :)

------
ltcstyle
Nice little app. It's better than I expected from a hybrid app.

------
blueicelt2004
You built an app in two weeks that looks and feels like a hybrid app. Your app
has 2 pages and a web browser for "Partner" sites. This app could have been
built natively in 1 day each for iOS and Android, and then you would have
native apps.

------
aagha
Curious: Did you look at other solutions like Xamarin?

------
adrianclay
How many people were on the team?

~~~
rayv
We only had a single dev working on the app, but our team of 5 helped out with
designs, backend support etc. Already having the comparison API in place did
help a lot.

~~~
NicoJuicy
What are some default input values for the app that make it work when testing
it out? :) (i have no results found on first and second try)

~~~
pmuk
Try Gatwick, any dates and you should get some results (the smaller airports
have less availability for parking starting tomorrow).

------
drinchev
Is this app available only in UK app store? It seems I can't find it on my
iPhone.

~~~
pmuk
Can you try now? We updated the regional availability on app store a while
ago...

------
notastartup
Seems like a great idea but angularJS? no thank you....wish you could build a
simple app like this using jQuery.

~~~
rayv
Any particular reason you dislike Angular? Have to say since I've been
building with angular, I try and avoid jquery and any direct dom references
completely. Think angular is fantastic.

~~~
notastartup
I think AngularJS is too much effort to build the simplest things. I don't
even see the benefit at all. I build all of my javascript apps (I hate using
the word front-end apps) using jQuery and Flask backend. I don't even use
asynchronous . I just don't see the point.

What's missing from jQuery that limits you but does not in AngularJS?

What's missing from Flask that limits you but does not in Node.js?

