WingNews logo WingNews GitHub [2]
top | item 3662709

How I built a Hacker News mobile web app

308 points| bearwithclaws | 14 years ago |cheeaun.com | reply

56 comments

order
[+] dmvaldman|14 years ago|reply
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|14 years ago|reply
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|14 years ago|reply
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|14 years ago|reply
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.

[+] abalone|14 years ago|reply
Web apps also let you deploy changes instantly to 100% of your users as opposed to going through an app store update. That's huge. You have no idea how long users will take to update their apps.. and some never do.
[+] xinsight|14 years ago|reply
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|14 years ago|reply
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|14 years ago|reply
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!

[+] Derbasti|14 years ago|reply
I can't seem to comment or upvote in your app. Without that, it has little value to me. Apart from that, it is quite good!

Or am I overlooking something?

[+] sumukh1|14 years ago|reply
Is this open source? I'd love to implement some of the changes mentioned above.
[+] dybber|14 years ago|reply
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.
[+] KTamas|14 years ago|reply
Looks awesome. That being said, it doesn't load at all under Android Gingerbread.
[+] wazoox|14 years ago|reply
It doesn't load either on my Nook Color. Bizarrely, it seems to work fine on my Mac under Firefox...
[+] Derbasti|14 years ago|reply
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|14 years ago|reply
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|14 years ago|reply
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!

[+] rkudeshi|14 years ago|reply
This is fantastic! Very well-designed and it is the best "fake" iPhone app I've used in terms of responsiveness.
[+] dybber|14 years ago|reply
You should set the apple-mobile-web-app-capable meta tag:

https://developer.apple.com/library/safari/#documentation/ap...

[+] alastairpat|14 years ago|reply
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|14 years ago|reply
Nice work. On my iPhone 4 it doesn't seem to stop loading..
[+] mmuro|14 years ago|reply
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|14 years ago|reply
Tried it on a webOS phone. No dice =( Bummer.
[+] methoddk|14 years ago|reply
I learned some new stuff about CSS! Motivated to create my own mobile web app now. Thanks for the in-depth explanations.
[+] JVIDEL|14 years ago|reply
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.