
Ionic – A front-end framework for developing hybrid mobile apps in HTML5 - ds_
http://ionicframework.com/
======
peterhunt
Listen -- I know there's a lot of negativity on HN and I try not to add to it.
But seeing mobile web succeed is something I'm pretty passionate about.

I played with the left nav example and it doesn't use inertia. This is one of
the most ubiquitous interactions on mobile apps so it's probably one of the
most important to get right. And while it's good by mobile web standards, the
lack of inertia makes it feel completely and obviously wrong if you're
comparing to native apps.

The lack of inertia is indicative of either not setting the bar high enough or
not having the technical chops to implement it.

The reason this is a big deal is because mobile web's reputation is to cut
corners like this and get 80% of the way there and then give up. That's why
native is kicking mobile web's ass.

The worst part about this is the web _can_ do a lot of this (for example, see
the leftnav I built here [http://petehunt.github.io/react-
touch/](http://petehunt.github.io/react-touch/)), it's just that very few
teams are doing it right (Sencha is one team doing it right). So the reason
this post upsets me is because they call themselves a premier way to build
native-like apps with web technologies and then just further the stereotype
that web technologies can't compete. It really bugs me.

~~~
yesimahuman
Your argument about the left nav seems wrong to me. I use the HipChat app on
Android and iOS and it feels just like ours does. I've never used a left menu
that had the effect your demo has. In fact, I know we _are_ using inertia
because you can "throw" the menu over to the side, and I coded it based on a
velocity threshold of the drag (we just aren't bouncing at the end, which is
really not a universal style). Perhaps you are noticing a browser/platform
specific issue we can fix?

I think your comment is a bit harsh, especially considering we've been working
on this for all of two months and it's still in alpha. We have a long ways to
go and we know it can and should be better. If you believe in the vision of
making this the best way to build hybrid apps, then help us!
[https://github.com/driftyco/ionic](https://github.com/driftyco/ionic)

By the way, I did find your demo quite impressive. Nice work.

~~~
peterhunt
I've just used a bunch of iOS apps that have that effect and I've found that
inertia is present in way more interactions than are immediately apparent.
Zynga Scroller is a pretty good (pure math!) implementation of it.

Sorry that I was so harsh. I think the marketing copy turned me off a little
bit. If this were presented a little less like "here is _the_ solution!" (when
so many others have come before it) I would have been less of a jerk :/

I think what frustrated me is that you guys seem to have the right attitude
and design to pull it off and I felt like the interactions weren't quite
there. So please don't settle for anything less than perfect, no matter what
it takes :)

I do want to point out that your design is great and the interactions are a
lot better than most of the web stuff that's out there. And it looks like
you've spent a lot of time working on developer experience which is great too;
impressive for only working on it for two months :)

~~~
yesimahuman
Sure, we could probably tone the copy down a bit :) If you don't mind, I'm
going to see about getting some of the stuff in your demo into Ionic, that'd
be cool.

~~~
peterhunt
You may find yourself switching to React if you do :) Also I wrote a blog
about the frosted glass stuff:
[https://medium.com/p/87ce4a41019f](https://medium.com/p/87ce4a41019f)

------
camus2
> Native focused

How is it native focused? it's obviously an HTML/CSS/Javascript framework.
It's not native to the plateform itself, since you are developping in a
webview.

> the most advanced HTML5 mobile app framework - launched

it's basically some kind of Bootstrap + angularjs bundle. How is it more
advanced than Sencha Touch for instance?

~~~
yesimahuman
It's native focused in the sense that it's not meant for building mobile web
apps. You are building apps to run in the app store with Ionic. Also, we are
working on "native style" UI interactions that might not fit in a mobile web
app.

Sencha Touch is great, but Ionic has a permissive license with an open source
spirit. Sencha's open source version is only for open source apps compatible
with the GPL, which is a big restriction. And, you can actually submit pull
requests and contribute to Ionic. Plus the development model of Sencha isn't
markup based, and doesn't use Angular.

If you are happy with Sencha, by all means, keep using it. We are ambitious
and will be working hard to make sure Ionic is better than Sencha in most ways
:)

~~~
rfnslyr
I can wrap any HTML/CSS/JS framework into a native wrapper. That doesn't make
it "native focused". All my apps are currently built with Phonegap and a
heavily customized jQuery Mobile, then wrapped, compiled, and deployed.

~~~
yesimahuman
Sure. We are actually focusing on providing a native-style programming model
though:
[http://ionicframework.com/docs/angularjs/views/modal/](http://ionicframework.com/docs/angularjs/views/modal/)

------
bsaul
"Developping native mobile app in HTML 5" seems like something that would
confuse a lot of people knowing technologies such as Titanium.

if i understood correctly, ionic is about "developping native _looking_ mobile
apps in HTML 5 / CSS". You don't create native UITableView using javascript
calls forwarded to Objective-C Code, do you ?

~~~
yesimahuman
I'm honestly not sure which word to be using, hybrid or native? I don't like
hybrid because once the app is shipped, it's a native app and the user
hopefully won't care or know which is which. Just because it's using one level
higher of abstraction (i.e. only the web view for now), doesn't mean it's not
a native app.

~~~
thatthatis
Hybrid is the generally agreed upon term for running a local app in a webview.
A native HTML5 app would be something like a Win8 app using WinJS where HTML5
is a fully supported runtime.

I'd say you are for developing "Hybrid apps that look and feel completely
native"

You might not like "hybrid" but it is, by definition, what you've built.

~~~
yesimahuman
Agreed. We are tweaking the terms around.

------
yesimahuman
Woke up to see my project here on HN, cool :)

We _just_ released the alpha, and there are some really important things on
our roadmap for the next few weeks: Android performance, list virtualization
(for huge lists), better scroll performance, and fixing bugs. Right now Ionic
projects feel best on iOS but we want to change that.

Let us know what you think as we work on the beta!

~~~
tehwebguy
Out of curiosity why not use standard scrolling on iOS?

~~~
yesimahuman
We do support it, you can set overflow-scroll="true" on a content area to use
it([http://ionicframework.com/docs/angularjs/views/content/](http://ionicframework.com/docs/angularjs/views/content/))

But -webkit-overflow-scrolling: touch has some limitations. For one, you don't
receive scroll events after a flick when the finger has left the screen. There
are also some very strange issues in the mobile browsers with it, it's a buggy
solution right now.

In order to build some of the more interesting UI things like pull to refresh,
and then list virtualization (i.e. only rendering the active subset), it made
sense to have more control over the scrolling operation.

But that was a decision I made a few weeks back so I might be wrong, and I
would love to use the browser scrolling if possible.

~~~
emilsjolander
Using custom scrolling behaviour makes the lists feel very out of place on
android where a end of list bounce is not the correct visual cue

~~~
yesimahuman
Yea, I'm thinking we will apply a platform-specific rule to those certain
components, because I agree with you. One Android-specific thing we added was
left-aligned header bars, but it's only a start. Android support is probably
70% of the iOS support right now, just given time constraints for the alpha.

------
mmgutz
I'm building a hybrid app right now. I can't see Angular and all its magic
being a good fit. The provided browser controls in smart devices have horrible
performance and are often several releases behind. Most are deceived thinking
that a hybrid app that works well in a desktop browser will perform as well on
smart devices. You will be disappointed. FWIW, I settled on Intel's App
Framework after trying several popular frameworks.

As a side note, I'm surprised by how poor hybrid apps perform on Android. You
would think Google of all companies would be pushing browser based
technologies further.

------
xaritas
First of all, thanks for this @yesiamhuman, I came across it a few days ago
just when I was despairing of finding something with the right look and feel
(somebody mentioned it in an earlier HN item about a curated list of CSS
frameworks). It looks like it's exactly what I need.

For the project I have in mind, the client wants an HTML5 web app, not an App
Store delivered container. On the docs, you state:

"Since mobile browsers often exhibit issues while in browsing mode that don't
show while running under a "wrapped" native app, we recommend running all
Ionic examples in a Desktop browser, PhoneGap or another native wrapper."

Can you elaborate on this a bit? What issues am I likely to see if I just
deliver my project as an offline capable single page web app?

~~~
yesimahuman
You know, it should actually work fine. We wrote that when we started the
project but we've shifted our opinion a bit. One issue is that we have bad
support for non-webkit browsers since we've focused on iOS and Android to
start. But we'd love some cross-browser testing :)

~~~
xaritas
Great, that's what I was hoping. The client is planning to stick with iOS
devices so I may not test much cross-browser, but it's good to know we'll have
options. Again, thanks for this and I hope I can find a way to contribute. I'm
sure I'll have a few other questions, I just signed up over at your forum.

------
facorreia
Looks interesting, but it's not for me. My customers are not all using the
latest and greatest.

"Our compatibility starts at iOS 6 and Android 4.2. We will never support
devices older than this."

~~~
yesimahuman
We made the tough decision to only support newer devices. We know it's not
going to work for everyone, but the reality is that HTML5 animations and touch
interactions don't feel good enough on old devices. We really wanted to make a
framework that was looking towards the future, starting to take advantage of
the increased power in newer devices.

There are a lot of good solutions out there that have better older device
compatibility, like jQuery Mobile, which are probably a better fit if you need
to support them.

~~~
ValentineC
While I agree with the decision to support iOS 6 and up, I believe Android
upgrade paths aren't as clear cut. I'm working on a project with China-
designed phones and many of them are using older versions of Android as a
point of product differentiation.

Hope it's something you guys will reconsider.

------
rralian
Comment on the design of the homepage, there is nothing to visually draw the
user's attention to content below the fold. When I loaded this page, it
happened to be in a window at a perfect size to hide your overview content. I
clicked around on a few pages before realizing it was on the homepage.

[https://cloudup.com/c8N5Zm4HnI5](https://cloudup.com/c8N5Zm4HnI5)

------
thoughtpalette
Looks awesome! I'm a huge angular fan and have been researching a bunch of
frameworks and SaaS solutions for doing a mobile "app" so this should be
awesome to get my feet wet!

Time for a weekend to-do app, because we don't have enough of them eh? :}

------
tszming
Some layout issues with Firefox for Android:
[https://www.dropbox.com/s/4q1svdsaqbqwkuc/Screenshot_2013-11...](https://www.dropbox.com/s/4q1svdsaqbqwkuc/Screenshot_2013-11-22-22-39-25.png)

~~~
yesimahuman
Thanks. Our Firefox support isn't great at the moment. Also, we don't intend
Ionic apps to be run in mobile browsers, but rather native UIWebView type
shells. We are looking into support Firefox OS, though.

~~~
cannam
This kind of thing ought to be splendid on FirefoxOS, but the examples are
disappointing at the moment.

For instance, it doesn't seem to be possible to interact with the side-menus
example at all; and in the nav bars and tabs example, after tapping on the cat
link, I could find no way to go back again (apart from through the browser
back button, which wouldn't be present in an app view).

(This is with FirefoxOS 1.2, which runs things like the Twitter mobile HTML
app quite well. Worth testing if you can get access to a FirefoxOS device,
it'd be great to see this working well on it.)

~~~
yesimahuman
I'm in touch with someone from Mozilla, hoping to get some support with making
it work on Firefox OS. Just curious, are you using the ZTE?

~~~
cannam
No, I have a Keon, but the ZTE Open is very similar. They both have low-
resolution screens (same as non-retina iPhones) which can cause trouble too.
They are quite good lowest-common-denominator test devices, not so good as
primary smartphones, though I'm kind of fond of mine.

I must say I find it a bit problematic, philosophically, that an HTML5 app
toolkit should be designed for a single platform and should have to be
"ported" to new ones. What about it is so platform-specific?

~~~
yesimahuman
It's really that when we went to do things like animations and using some
newer browser features, we threw in the -webkit prefixes and didn't test in a
gecko browser. We were expecting to only stay on Android and iOS but we
quickly realized we wanted to do more.

------
Geee
How easy would it be to port a quite complex app from AngularJS/Bootstrap to
Ionic and would it make sense?

~~~
yesimahuman
Well if you are using ngRoute with ng-view, it's easy to add in the nav bar
animations and nav stack stuff:
[http://ionicframework.com/docs/angularjs/controllers/nav-
rou...](http://ionicframework.com/docs/angularjs/controllers/nav-router/)

Otherwise, it should be easy depending on what your layout is. I'd be happy to
talk more about it on the forum or feel free to email me.

------
danso
Sorry to be a jerk, but just want it to look as good as possible...there is a
typo up at the beginning of the lede copy:

Free and open source, Ionic offers a library of mobile-___optmizied___ HTML,
CSS and JS components for building highly interactive apps. Built with Sass
and optimized for AngularJS.

~~~
adamdbradley
:derp: fixed, thanks

------
snrip
How does Ionic relate to different screen sizes, orientations and resolutions?
Would responsive layouts be viable or is that out of the scope? The way I see
it now is that it is targeted at phones and not so much at tablets.

BTW, the word 'which' is in the wrong place on the components page: "The
advantage here is that the devices Ionic which supports, all support flexbox."

BTW2: in the Getting Started guide, chapters 4 and 5 have no link to the next
chapter at the bottom.

------
ancarda
>Performance obsessed

>zero jQuery

Perhaps I've not been keeping up with the latest JavaScript news but is jQuery
considered slow? jQuery 2 is a lot lighter and works well on mobiles.

~~~
Cthulhu_
Well, according to small tests, jquery's selectors are slower than the
'native' selectors; findElementById for example is at least twice as fast as
jquery's $('#someId') call. But that's because jquery has to parse the query
first.

It's a productivity versus performance thing, really. Native JS is often
faster than the same thing in jquery.

~~~
domrdy
Here's a relevant test: [http://jsperf.com/queryselectorall-vs-jquery-
jb](http://jsperf.com/queryselectorall-vs-jquery-jb)

------
krmmalik
Non-developer here. Can someone explain how this compares to something like
Titanium and what benefits it provides over other HTML5 Mobile Frameworks?

~~~
yesimahuman
For web developers, Titanium won't exercise your existing knowledge base. The
license is also not as clearly open source and free to use as Ionic, even for
commercial apps. In terms of comparing to other frameworks, we have a lot of
mobile-specific UI interactions that most others don't, like draggable side
menus, pull to refresh, etc.

~~~
neovive
Good point about the licensing models. That is a very big difference as well.

------
cheeaun
Is there like a demo app that we can try/download?

~~~
CmonDev
I was wondering myself. What could be better for selling a framework than a
well-done advanced demo app in all major app stores?

~~~
yesimahuman
We are working on it!

~~~
cpprototypes
I was about to ask the same question, great to hear that it's being worked on.
Also good job on the documentation, clean and well organized.

------
skyfantom
I think it's cool and could be usefull. I'll try in my next project. Thank
you.)

------
fit2rule
I'm attaining all of the goals of this library with MOAI right now, still
going strong .. funny thing is, it does require platform competence, but if
you get your own VM and frameworks going, suddenly everything is a target.

------
untog
_Ionic is modeled off of popular native mobile development SDKs, making it
easy to understand for anyone that has built a native app for iOS or Android_

Surely that's the wrong way around?

------
danvoell
Looks great, I'm excited to try it out on my next project.

------
Bahamut
Question - what does one gain from using this over raw Angular itself, or
something like Yeoman for generating a scaffold?

~~~
yesimahuman
Well, you don't get any UI stuff if you just use raw Angular. Ionic has a lot
of interactive UI elements that come with it, like side menus, gesture
support, tab bars, nav bars, etc:
[http://ionicframework.com/docs/angularjs/](http://ionicframework.com/docs/angularjs/)

------
teyc
The pets sample doesn't render on Windows Phone. I get a blank screen and only
the home icon shows up.

------
digitalpacman
Your examples are ugly and most of the options don't have animations.

