HackerWeb for iOS

A simply readable Hacker News app for iOS.

Story

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/#/

—SengMin Tan (@sengming)

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!

—Sebastien Arbogast (@sarbogast)

Holy shit. A webapp that is better than a lot of native apps: http://cheeaun.github.com/hnmobile/#/

—Mitchell (@mitchell209)

Really impressed by @cheeaun's Hacker News mobile web app. Much better than any native clients/the full site on iOS.

—Nathan Clark (@nthnclrk)

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…

—Philip (@philo23)

This web app feels snappier than every native HN app I've tried. You should give it a try too.

—Romain Ruetschi (@_romac)

This is THE BEST and ONLY useful way to read Hacker News on an iPhone or iPad. Bookmark.

—Scott Hanselman (@shanselman)

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.

—Mario Ricalde (@mario_ricalde)

HackerWeb A simply readable Hacker News web app to bookmark on your mobile phone http://buff.ly/1tLaNwR - and it's open source :)

—Jacob Shea (@JacobShea)

Have you guys seen HackerWeb? HackerNews reading pleasure (mobile included)

—Hugo Bessa (@hugoBessaa)

just discovered #hackerweb today, best mobile experience I've seen so far http://hackerwebapp.com/

—Vince Mi (@v_mi)

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.

Preview

Development

Requirements

Getting started

npm install - Install all dependencies

Implementations

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

Bundling standalone modules

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 installed
git 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 the vendor folder in this repo

Running on device (iOS)

This article has good documentation on this: Running On Device (iOS).

Components

LoadingIndicator - inspired by react-native-activity-indicator-ios
HTMLView - inspired by react-native-htmlview, react-native-htmltext and react-native-html-render
CacheStore - inspired by lscache

Similar apps

License

MIT.

wpli / hackerweb-ios