A simply readable Hacker News app for iOS.
On June 2011, I made a statement.
On October 2011, I was playing around with some code.
On Feb 2012, I released HackerWeb (known as "HNmobile" at that time). I tried to coin the phrase "Looks and feels like a native iOS app" for the web app. I believe that HackerWeb is the first ever web app that tries to seriously cross the boundaries of native mobile apps.
On March 2012, I wrote an article on how I built it. It got submitted to Hacker News and appeared on the front page.
Feedback has been amazing.
-
Behold @cheeaun 's very native looking Hacker News mobile web app. http://cheeaun.github.com/hnmobile/#/
-
HN mobile web app http://cheeaun.github.com/hnmobile/landing/ … #hnmobile Now you tell me that a mobile web app can do everything a native app does... as easily!
-
Holy shit. A webapp that is better than a lot of native apps: http://cheeaun.github.com/hnmobile/#/
-
Really impressed by @cheeaun's Hacker News mobile web app. Much better than any native clients/the full site on iOS.
-
This is quite possibly the best iOS web app I've ever used, http://cheeaun.github.com/hnmobile/ it's almost perfect in every way I can think of…
-
This web app feels snappier than every native HN app I've tried. You should give it a try too.
-
This is THE BEST and ONLY useful way to read Hacker News on an iPhone or iPad. Bookmark.
Okay fine, I'll stop now.
Time goes by as I continue improving the app bit by bit. Since it's a web app, it auto-updates itself quietly and doesn't need uh... much announcements.
- On 26 March 2012, I wrote a second article.
- On 2 June 2012, I made it work for the iPad.
- Around September 2012, I updated the UI for iOS 6.
- On 12 Dec 2012, I renamed the app to HackerWeb.
- On 21 January 2013, I gave a talk.
- On 21 December 2013, I updated the UI again for iOS 7.
Okay I lied, more tweet reviews:
-
I use HackerWeb every day, best thing ever.
-
HackerWeb A simply readable Hacker News web app to bookmark on your mobile phone http://buff.ly/1tLaNwR - and it's open source :)
-
Have you guys seen HackerWeb? HackerNews reading pleasure (mobile included)
-
just discovered #hackerweb today, best mobile experience I've seen so far http://hackerwebapp.com/
Ever since HackerWeb is launched, there's been a few relevant articles and JS libraries popping up on the Internet:
- March 2012 - Will HTML5 iPhone apps ever cross the Uncanny Valley of Native UI?
- September 2012 - 10 tips for getting that native iOS feel with PhoneGap
- November 2012 - Anatomy of a Native Feeling HTML5 iOS App
- December 2012 - The Making of Fastbook: An HTML5 Love Story
- December 2012 - Junior
- September 2013 - Cloning the UI of iOS 7 with HTML, CSS and JavaScript
- September 2013 - A Beginner's Guide to Perceived Performance: 4 Ways to Make Your Mobile Site Feel Like a Native App
- October 2013 - Ionic Framework
- February 2014 - Framework7
- January 2015 - Native Web Apps
...and probably a few more which I've missed.
Obviously I'm quite obsessed with "native". When React Native is announced on January 2015, I was excited and a little sceptical. I tried it and wasn't satisfied with it. After attending ReactEurope on July 2015, I become inspired again to try React Native and finally this project comes alive.
My previous attempt is to make a web app to look and feel like a native app. Now I have make a native app to look and feel like the web app!
So this is it. HackerWeb for iOS. Since 2011.
- React Native
- Node.js 4.0
- Xcode 7
- iOS 9
npm install
- Install all dependencies
- Alt - the Flux thing
- react-native-safari-view - the reason why iOS 9 is the minimum requirement
- react-native-activity-view - for sharing links after long pressing
- react-native-app-info - for displaying app version
- htmlparser2 - for parsing the comments HTML
- url-parse - for extracting domains out of story URLs
Some npm
modules don't work with React Native so I have to compile them into a standalone module. Here's an example of the steps to bundle htmlparser2
:
npm install -g browserify
if not installedgit clone https://github.com/fb55/htmlparser2
cd htmlparser2
npm install
browserify lib/index.js --standalone htmlparser2 > htmlparser2.js
- Move the generated
htmlparser2.js
file to thevendor
folder in this repo
This article has good documentation on this: Running On Device (iOS).
LoadingIndicator
- inspired by react-native-activity-indicator-iosHTMLView
- inspired by react-native-htmlview, react-native-htmltext and react-native-html-renderCacheStore
- inspired by lscache
MIT.