
How I built a Hacker News mobile web app - bearwithclaws
http://cheeaun.com/blog/2012/03/how-i-built-hacker-news-mobile-web-app
======
dmvaldman
Thank you for taking the time to share this so carefully. I think many people
getting started in developing UI heavy applications fail to understand that it
is all about solving many orthogonal problems, and to do each one carefully is
what the job is all about.

People that lack this expectation replace it with the naive thought that there
is a single library out there that can do it all for them, and they spend
countless time finding it as opposed to breaking up a problem into smaller
pieces and attacking each one.

You've consolidated many interesting techniques here, and it's a valuable
resource not only in philosophy, but in general hackery.

Are you planning to flesh out the app more, say to allow users to login,
comment, upvote?

~~~
cheeaun
Yeap, those will take some time since I'll have to store the username and
password in the app. Still not sure how I should implement it.

------
cageface
This is impressive but it must be less work to just use Cocoa. Isn't the point
of mobile web apps that they're cross platform?

~~~
mds101
Yes, it would definitely have been lesser work to just use Cocoa. And yes one
of the main reasons for choosing mobile web apps is that they are cross
platform.

Having said that, I still applaud the guy taking the time and ploughing in so
much effort into something that he wanted to do. I appreciate the true hacker
spirit in striving to create a webapp that looks and feels totally native.
Kudos to the OP.

------
xinsight
Great work and a fantastic writeup. One crucial interaction missing for the
native scrollview feel is tapping the time in the status bar to quickly scroll
back to the top. Does mobile safari expose that event?

Edit: it scrolls to top if you tap the navbar. The anim is a bit wonky, but it
works.

------
nodemaker
On a shameless plug note,check out HackerNode.A free iPhone/iPad/iPod app for
all iOS(4.0+) devices.

<http://itunes.apple.com/us/app/hackernode/id473882597>

I pushed an update today which grey out visited links and fixes some bugs for
the iPad interface.It should be approved in a day or two.

~~~
ashamedlion
Just downloaded it. A couple of suggestions:

\- The design could use some tweaks. (Poor icons in the home screen, not
vertically aligned title bar text, ugly "comments" title bar that scrolls with
you, inconsistent orange color (click a link and you see the bottom bar is a
different color to the top bar), puke color in the "pull to refresh", has a
very non-native feel with the custom list view, awkward arrow that is low res
in pull to refresh)

\- No comment indentation so everything is difficult to follow in the comments

\- No ability to login and comment?

\- Awkward click regions on the list view. It should only allow you to press
on one or two buttons, but instead I can press on the timestamp, the comments,
the title or the background. It should be clearer

It's really quick, though, and that's lovely. Keep at it!

~~~
nodemaker
Well..You do have an eye for detail.The title bar text is not vertically
aligned indeed and I have missed it.

Login and comment will take some time, but I will try and see what I can do
about the colors (especially the puke color on the drag refresh header!).

Thanks for the feedback!.Also please do check it out on the iPad.Thats where I
have spent a lot of time.

~~~
slash-dot
That's a good start and i like the UI. I had some issues on the iPad 2 where
transitions weren't really smooth but kind of laggy. The comments could be
better arranged (some kind of tree were not only the top-level comments are
different). Ashamedlion does have a point about the weird colours and the few
refinements. Still the best hacker news app i have tried and will be looking
forward for updates. Keep up the good work!

~~~
nodemaker
Thanks!.For the comments I am going to draw the table separator in a way such
that it shows the depth of the comment below it.I dont want to waste space on
such a small screen.

------
dybber
Impressing, but I can't see why people strive for native look and feel. Take a
look at the Readability web app, it really doesn't feel like a website at all
(somehow they remove the Safari-chrome on the iPad, anyone know how?). When
you go for native theming, you will have to do it for each platform. It just
feels weird to get and iOS menu on your Android.

~~~
dybber
The same is true for the Kindle web app: <http://read.amazon.com>

------
bearwithclaws
Direct link to the web app: <http://cheeaun.github.com/hnmobile/#/>

------
guidefreitas
Hey, I build an Mac OSX menu tab app "wrapper" with @cheeaun code, check it
out! [http://guidefreitas.wordpress.com/2012/03/04/hacker-news-
men...](http://guidefreitas.wordpress.com/2012/03/04/hacker-news-menu-tab/)

~~~
Derbasti
Haha, that is great!

------
KTamas
Looks awesome. That being said, it doesn't load at all under Android
Gingerbread.

~~~
wazoox
It doesn't load either on my Nook Color. Bizarrely, it seems to work fine on
my Mac under Firefox...

------
Derbasti
Awesome! This is so far the most beautiful and readable HN App I have seen on
the iPhone and iPad.

Except: There does not seem to be a way to post comments or to vote. Is there
something I am overlooking?

------
grantpalin
Doesn't scroll on my BlackBerry Bold 9900. The OS6/7 devices use a Webkit-
based browser, so I'm a little surprised that Webkit-specific CSS didn't work,
though that may have been only for Safari.

You've done an interesting thing, pushing CSS3 to replicate the iOS interface.
But, why replicate the iOS UI in a web app? Web apps are supposed to be
platform-neutral; a native interface shouldn't be part of that, in my opinion.
Wouldn't a mobile-friendly stylesheet make more sense?

------
BillPosters
Mobile web apps should work in more places than safari on the iPhone.
Otherwise call it a "mobile safari app".

I tried the app in mobile Firefox, no luck. I tried it mobile Opera, no go.
Also, I don't understand why anyone would use Apple's native interface
graphics on purpose for a web app. I get why native dev it makes things easier
to build than custom icons etc, but on the web, you are not on Apple's leash
no more, be free!

------
TazeTSchnitzel
I think he might have saved himself a lot of work if he just read the official
Apple guides on developing web apps for Mobile Safari:
[https://developer.apple.com/library/safari/#referencelibrary...](https://developer.apple.com/library/safari/#referencelibrary/GettingStarted/GS_iPhoneWebApp/_index.html#//apple_ref/doc/uid/TP40008134)

------
rkudeshi
This is fantastic! Very well-designed and it is the best "fake" iPhone app
I've used in terms of responsiveness.

------
dybber
You should set the apple-mobile-web-app-capable meta tag:

[https://developer.apple.com/library/safari/#documentation/ap...](https://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html)

~~~
alastairpat
You didn't read the article:

    
    
      > Tapping on links will launch Mobile Safari, which jumps 
      > out of your standalone app. There's a way to prevent that
      > and make it load inside the standalone app, but since the
      > toolbar is gone, there's no Back button and you can't go back.
    

Unrelated note: what's best practice for quoting on HN?

------
lovskogen
Nice work. On my iPhone 4 it doesn't seem to stop loading..

------
mmuro
I understand wanting to use CSS b/c I've had to do similar things for mobile
web sites.

However, if he's just developing for iOS, why not create a new web app in
Dashcode?

------
newman314
Tried it on a webOS phone. No dice =( Bummer.

------
methoddk
I learned some new stuff about CSS! Motivated to create my own mobile web app
now. Thanks for the in-depth explanations.

------
pg
the -> a

------
JVIDEL
This reminds me of the Spartan project and all the money FB is burning to get
around APPL policies. I think in the medium and long term this overly
restrictive appstore strategy and the limitations of mobile webapps are going
to backfire, similarly to how Nintendo's 3rd party policies of the '80s
backfired soon after the NES. Initially it made a ton of money, but then it
lost the market to the likes of Sega, Sony and MSFT.

------
gavingmiller
I've just finished using the tappable library the article references and found
that it does work very well.

------
ChrisSteel
If you add commenting this would be a complete replacement for desktop viewing
of HN for me!

------
tar
This is a bit unrelated but anyone know which font is used in the website
logo?

~~~
cheeaun
Graublau Sans.

~~~
tar
Thank You.

------
jmslau
Great stuff! Thank you for the detailed writeup as well!

------
brianjolney
The details are fantastic. Great work!

------
soulofpeace
Congrats! :D

------
joering2
since we are on the subject -- what are the features you missing on HN the
most?

~~~
why-el
It might be just me, since I am a newbie, but how do people keep track of
replies to their comments? The only thing that notifies me is a change in
karma and then I hit my profile and browse my own comments. Is there another
way?

~~~
srl
Not that I know of. If you're anticipating a reply, you generally just have to
remember to check.

Conversations between individuals are de-emphasized in exchange for content
and a variety of ideas. I think the effect is good.

~~~
why-el
I agree. What you said actually just happened. I remembered that need to check
for possible answers to this to reloaded the page and came back here. I guess
it's working for everybody.

------
sidcool
Thanks for sharing this.

------
ronkkk
so complicated

------
J3L2404
Does anyone have a reasonable explanation as to why HN does not have a mobile
stylesheet?

~~~
pg
It's on our todo-list. It's just about #50.

HN is a side project. And what matters most about HN is content, not
formatting. So this sort of thing is two steps removed from top priority.

~~~
jannes
I would be happy to provide one to you. Where do I submit a pull request?

By the way, one of the main reasons I bought an iPad stems from the fact that
HN comments were so hard to read on my iPod Touch. And I'm a student who
doesn't have a lot of money to buy every latest Apple gadget. So it is pretty
important to me. ;-)

------
toyg
Am I reading it wrong, or he's admitting that he's ripped off the images for
his application right from Apple ? That's not exactly legal, in my book...

