tastejs/hacker-news-pwas

HNPWA - Hacker News readers as Progressive Web Apps 📱

Hacker News readers as Progressive Web Apps. A spiritual successor to TodoMVC.

---

Implementations

See our site or the site/apps directory for the current list of implementations.

Specification

Each implementation must include:

• Views: Hacker News Top Stories, New, Show, Ask, Jobs & threaded Comments
  • Each of these should use routing to enable sharability. For reference, see the PreactHN implementation.
• App must display 30 items per-page for story list views
• App must be a Progressive Web App
• App must score over a 90/100 using Lighthouse
• App must aim to be interactive in under 5 seconds on a Moto G4 over 3G. Use WebPageTest using the auto-selected Moto G4 + Faster 3G setting to validate "Time to interactive"
  • We look at numeric Lighthouse scores for TTI as well as a manual inspection of the application's Timeline "trace" and Filmstrip as a sanity check.
• App must use the Application Shell pattern to instantly load the skeleton of the UI on repeat visits
• App is responsive on desktop and mobile, making best use of available screen real-estate. See Vue HN as an example.
• App must do its best to work cross-browser

Optionally:

• App supports offline caching of HN data (e.g similar to the 'Offline Mode' in ReactHN)
• App may use server-side rendering so displaying content is resilient to JS not loading on the network

User interface:

• At this time, HNPWA does not prescribe a specific stylesheet or theme for implementations. We will be aiming to provide this in the near future similar to how we do with TodoMVC.

Data sources

• Official real-time Hacker News API powered by Firebase
• Unofficial Hacker News API by cheeaun

If using the Firebase powered API please use 30 stories per-page to ensure consistency between implementations using the Unofficial API as well as the actual Hacker News website

Network settings

• Emerging Markets: Chrome Beta on a Motorola G (gen 4) tested from Dulles, Virginia on a 400 Kbps 3G connection with 400ms of latency. Tested with WebPageTest using the auto-selected Moto G4 + Emerging Markets setting.
• Faster 3G: Chrome Beta on a Motorola G (gen 4) tested from Dulles, Virginia on a 1.6 Mbps 3G connection with 300ms of latency. Tested with WebPageTest using the auto-selected Moto G4 + Faster 3G setting.
• Time to Interactive readings taken from linked Lighthouse results in WebPageTest.

License

Each implementation preserves the license noted in the linked to applications.

hacker-news-pwas's Issues

Decide on MVP specification for implementations

Similar to what we did with the original TodoMVC project.

Define a format for application summaries

In #36, Dan suggested we use a bullet point list to highlight some of the key specifics for each implementation. This is particularly useful as they can differ in a number of ways.

Thinking through the Polymer Hacker News implementation (as just an example):

Simple unstructured list

• Built using Polymer as the core application library
• Scaffolding was done with Polymer CLI & Polymer Starter Kit
• Uses the PRPL pattern for granular loading
• Service Worker was used for caching data and offline support
• Module bundling is done using polymer-build & HTML Imports
• API we used was unofficial Hacker News API
• Served via Firebase hosting (HTTP/2) using Server Push and edge-caching

This enables authors to be more flexible with whatever they need to include.

Structured formal list

• Frameworks/UI libraries used: Polymer
• Scaffolding: Polymer CLI & Polymer Starter Kit
• Module bundling: polymer-build with HTML Imports
• Service Worker use: Application Shell + data caching
• Performance patterns: PRPL, code-splitting for granular loading
• Server-side rendering:: None
• API used: unofficial Hacker News API
• Hosting: Firebase functions over HTTP/2 with Server Push + edge-caching
• Other details: Route-specific pushing

I'm personally leaning towards the second of these as it encourages specific items to be listed by authors when we're including apps. It's also a little easier to read when jumping from one entry to another.

Any thoughts?

Update scoring once Lighthouse/WPT HTTPS bugfix deployed

Currently all apps with the new results do not factor in HTTPS in their scoring due to a bug that was fixed in Lighthouse master. This should be good to re-run in a day or two.

First example app not loading correctly

To replicate: go to: https://hnpwa.com/ and scroll past the first 2 sections.

I cannot reproduce the test results

I have tried reproducing the test results for https://hnpwa-firebase.firebaseapp.com/ which are stated to be 1.3s emerging and 0.7s faster 3g.

When I test using webpagetest.org with the appropriate settings I get 2.6s first interactive (beta) on emerging and 2.4 on faster.

I was hoping someone with experience testing these apps would please clarify the methodology and confirm that the apps are still producing the expected results.

Pinging #71 as well

Why tested in Lighthouse scrore is 82?

I don't know any reason. I tested with Lighthouse in Chrome Linux stable.

Score for Progressive Web App is 82.

benchmark rounds

is possible to implement benchmark rounds to this?

Sort by score, time, or any other metric

Would be nice to be able to sort by any of the metrics

Adding Inferno Version

Hello, HNPWA people. I opened a pull request #121 to add an Inferno implementation and hope I added and documented everything correctly. I wasn't sure about the weight property and might need guidance on the loading times. Please let me know anything else that needs to be looked at.

Can't retrieve Interactive times with Angular HN

Something that I've noticed recently with the most recent commit to Angular HN is that interactive times fail to generate in Lighthouse through WPT.

The app now loads a single async bundle and I assume that's what might be causing the tests to fail 🤔 But I'm really not sure --> would appreciate any input you may have on why you might think it's happening. (Note this only happens with Lighthouse through WPT, running browser LH tests work just fine).

WPT: https://www.webpagetest.org/lighthouse.php?test=170612_Z6_aa9071abfe3da23088b08658d5758165&run=2

CC @kristoferbaxter

Adding stencil-ionic version

Hey all! Just opened a PR to add the Stencil version #110. Hoping i did everything correct. Only thing i was not sure about was the weight property.

MithrilJs implementation

I have started working on MithrilJs implementation of hacker news.

Source: https://github.com/gyandeeps/mithril-hn

• Using client side render
• I think I have covered all the features/specifications as listed on this repo.
• Cleaning up stuff right now
• Working through webpagetest
• Need to get a permanent domain.

So far Emerging market Webpagetest results: https://www.webpagetest.org/result/170603_HQ_560dfc0f9ab171316f289f0aa508e266/

Website

Maybe we should have one 🍭

• Link to try out
• Link to WebPageTest result
• Link to Lighthouse report?
• Link to repo
• Link to framework (their PWA page if they have one)

Use GitHub avatar images for authors instead of static check-in

Instead of including the images of the authors, how about we instead use their GitHub avatar image?

from @sindresorhus

Update SvelteJS in the README

Live: https://hn.svelte.technology/
WPT: https://www.webpagetest.org/result/170503_5V_d258dea5b63fa104d2697d17de5bd8c6/

from #7 (comment)

Revisit contribution requirements

When we started this project, Lighthouse only gave a score for PWA:

A lot has changed since, where scores are provided along multiple areas:

@developit brought this up and made a very good point. There are a few things we can do here:

• Allow contributions that meet a minimum score for PWA, Performance and Accessibility
• Allow contributes that meet an average score for PWA, Performance and Accessibility

Updating this will tie in well to updating all scores to LH 3.0 via #60. We also should update how we display the scores on the site (ideally showing all of them)

Standardize specifications

Some discussion has been made to standardize specifications between the different implementations - let's use this ticket to discuss how we can/should do this.

Why vue seems slower than polymer?

I am comparing the speed of polymer and vue, it seems like polymer and much more faster.

Its not just the first paint / interative. I mean when i am clicking around, polymer responds faster. How it could be? Is the implementation different?

Ember.js implementation (WIP)

I've put together an Ember.js implementation at hackernews.io
Source: ivanvanderbyl/ember-hackernews-pwa

It's still a WIP, feedback very welcome. I'm working on page load performance and increasing the Lighthouse score (currently 82/100) before submitting a PR.

• Web Page Performance Test result

It implements all other required features in the HNPWA Spec.

There's still a few outstanding items I need to get through before this will pass the performance test.

Upgrade to be a PWA

Adding SW caching should be all that is left now.

Glimmer.js Implementation

Hi,
spent some time and implemented hackernews PWA with GlimmerJs.

Link: https://glimmer-hn-pwa.firebaseapp.com/

1- WebPageTest Result

2- LightHouse Result

3- Repo: https://github.com/mhadaily/glimmer-hn-pwa

Framework/UI libraries: Glimmer.js, Navigo
Module bundling: Ember (Rolleup, Brocoli)
Service Worker: ESW
Performance patterns: HTTP/2 with Server Push
Hosting: Firebase

Add analytics

ID: UA-99127594-1

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-99127594-1', 'auto');
  ga('send', 'pageview');

</script>

Phone frame for site screenshots

Continuing the discussion from #7 (comment)

The question:

Just wondering, why are the phone mockups (Samsung phone, HTC phone) included as part of the site screenshots? I think would be better if just use a generic phone outline vector?

Additional concerns:

• Each site/app may seem affiliated to the phone brand/model?
• The screenshot images should be separated from the phone frame itself (in case we change to other phone frames or remove them later)

Possible solution(s):

• Change the phone frame to a generic one, or just an outline?

Set up CI

Now that the site is deployed on App Engine (https://hnpwa-prod.appspot.com/), we probably want to set up a CI. Travis CI has some neat documentation with App Engine.

Moreover, here's a gem I used to generate all the app.yaml handlers with Jekyll. Can make things a lot simpler for deploying so I think it makes sense to include it in the site with this ticket.

Add React-HN (port of Preact-HN)

Repo: https://github.com/kristoferbaxter/react-hn

All the details are the same as the Preact version, but it uses React and React Router.

Lighthouse/Webpage Test: https://www.webpagetest.org/result/170522_PN_86f54c759ef3ac8ee1cdc7cb8f62528f/

[suggestion] Properly size images

Hi @addyosmani ,

Website looks pretty good and fast on mobile, however, these are opportunities to optimize images in order to speed up loading. it's possible to consider smaller images for mobile and using different methods which is so-called responsive images . It will increase performance score on Lighthouse as well.

If it seems ok, I am happy to help.
The Best

user in the result, json from jobs API always is always null

"user" value is always null. It might have user id for item

[{"id":16601335,"title":"Head of Marketing at SketchDeck – Work from Anywhere in the US","points":null,"user":null,"time":1521214390,"time_ago":"7 minutes ago","comments_count":0,"type":"job","url":"https://www.workable.com/j/CC959032C1","domain":"workable.com"},{"id":16597874,"title":"Mux is hiring engineers to build the world's best video infrastructure","points":null,"user":null,"time":1521162858,"time_ago":"14 hours ago","comments_count":0,"type":"job","url":"https://mux.workable.com/","domain":"mux.workable.com"},{"id":16590172,"title":"Human Interest (formerly Captain401) is hiring after raising $11M Series A","points":null,"user":null,"time":1521083345,"time_ago":"2 days ago","comments_count":0,"type":"job","url":"https://humaninterest.com","domain":"humaninterest.com"},{"id":16589328,"title":"Zendar is hiring a Research Engineer in Berkeley","points":null,"user":null,"time":1521070379,"time_ago":"2 days ago","comments_count":0,"type":"job","url":"item?id=16589328"},{"id":16587910,"title":"ZeroCater Is Hiring an Ambitious Director of Engineering in SF","points":null,"user":null,"time":1521058467,"time_ago":"2 days ago","comments_count":0,"type":"job","url":"https://zerocater.com/about/careers/?gh_jid=980527","domain":"zerocater.com"},{"id":16586030,"title":"Drchrono is looking for Python/Django engineers to help fix healthcare","points":null,"user":null,"time":1521045725,"time_ago":"2 days ago","comments_count":0,"type":"job","url":"item?id=16586030"},{"id":16584465,"title":"Fullstack Academy (YC S12) is hiring for 7+ roles. Change tech education","points":null,"user":null,"time":1521032705,"time_ago":"2 days ago","comments_count":0,"type":"job","url":"https://www.fullstackacademy.com/careers","domain":"fullstackacademy.com"},{"id":16583317,"title":"Simple Habit is hiring our 4th Engineer-come join a wellness focused team!","points":null,"user":null,"time":1521018301,"time_ago":"2 days ago","comments_count":0,"type":"job","url":"https://jobs.lever.co/simplehabit/0544ee55-d714-432d-ae5e-78372e3a6d4d?lever-origin=applied&lever-source%5B%5D=hacker%20news","domain":"jobs.lever.co"},{"id":16582485,"title":"VoiceOps is hiring engineers and salespeople in SF to build AI for b2b voice data","points":null,"user":null,"time":1521003897,"time_ago":"2 days ago","comments_count":0,"type":"job","url":"https://voiceops.com/careers.html","domain":"voiceops.com"},{"id":16581486,"title":"Willing (YC S15) Is Hiring a UI / UX Designer","points":null,"user":null,"time":1520990601,"time_ago":"3 days ago","comments_count":0,"type":"job","url":"https://willing.com/designer","domain":"willing.com"},{"id":16580188,"title":"Flexport is hiring software engineers","points":null,"user":null,"time":1520977858,"time_ago":"3 days ago","comments_count":0,"type":"job","url":"https://flexport.engineering/","domain":"flexport.engineering"},{"id":16577671,"title":"BuildZoom (YC W13) is hiring an engineering manager","points":null,"user":null,"time":1520960961,"time_ago":"3 days ago","comments_count":0,"type":"job","url":"https://jobs.lever.co/buildzoom/5d98e8d6-b8be-4871-a1de-109af3cb204d","domain":"jobs.lever.co"},{"id":16575019,"title":"Tesorio (YC S15) Is Hiring a Lead Data Scientist, Senior Engineers","points":null,"user":null,"time":1520937416,"time_ago":"3 days ago","comments_count":0,"type":"job","url":"https://www.tesorio.com/careers/","domain":"tesorio.com"},{"id":16574236,"title":"EasyPost is hiring everyone","points":null,"user":null,"time":1520923565,"time_ago":"3 days ago","comments_count":0,"type":"job","url":"https://www.easypost.com/jobs","domain":"easypost.com"},{"id":16573631,"title":"Care Revolutions (YC S16) Is Hiring a Ruby/Rails Engineer","points":null,"user":null,"time":1520910269,"time_ago":"4 days ago","comments_count":0,"type":"job","url":"item?id=16573631"},{"id":16572679,"title":"Drive and Expand Bitnami's relationships with the leading cloud providers","points":null,"user":null,"time":1520897862,"time_ago":"4 days ago","comments_count":0,"type":"job","url":"https://jobs.lever.co/bitnami/3b68be69-3734-46cb-ab0a-fe5e0af135b9","domain":"jobs.lever.co"},{"id":16571132,"title":"GiveCampus (YC S15) hiring PMs and engineers to advance educational fundraising","points":null,"user":null,"time":1520885825,"time_ago":"4 days ago","comments_count":0,"type":"job","url":"https://www.givecampus.com/careers","domain":"givecampus.com"},{"id":16569477,"title":"Upcall (YC W17) Is Hiring for Its Outbound Calling Platform","points":null,"user":null,"time":1520873636,"time_ago":"4 days ago","comments_count":0,"type":"job","url":"https://www.upcall.com","domain":"upcall.com"}]

Does the Preact version actually qualify as SSR?

The Preact version (and the alternative React impl. by @kristoferbaxter) seems to only server-render the application shell - the news items are dynamically rendered and not part of the initial HTML response. While there is some SSR involved, I think it's somewhat misleading to consider them "SSR: yes" compared to the Vue/Viper implementations where all news items are rendered on initial paint. (The Svelte version also seems to do full SSR but it's currently down so I can't check)

Maybe we should differentiate the SSR types into:

• None
• Shell only
• Full

Preact Implementation

Hey, I've just made a preact version of HNPWA. Could someone take a look? Thanks!

link:
https://preact-hn.now.sh

lighthouse:
https://www.webpagetest.org/lighthouse.php?test=170710_YP_cb200c6802242f8ad8b7f24e7c916887&run=1

webpagetest (emerging markets): https://www.webpagetest.org/result/170714_B2_63b427aa46eb48b19e51e7374341f1a1/

webpagetest (faster 3g): https://www.webpagetest.org/result/170714_ZD_baecb5715968cd54b7059efe6489eefa/

repository:
https://github.com/malbernaz/preact-hn

Add Perceptual Speed Index to Required Metrics

@addyosmani and @housseindjirdeh – We should consider adding PSI to the required metrics with a link explaining what it is.

Frequently implementations can trade-off faster "boot" times for degraded PSI and vice-versa. Since the goal is to understand the implementations (while we work on standardization of features), this metric could help visitors gain more insight into the motivations of each implementation.

A new React HN implementation powered by react-server-renderer

Hey, I've just made an other react version of HNPWA powered by react-server-renderer.
Could anyone take a look? Thanks!

link:
https://react-hn.now.sh

lighthouse:
https://www.webpagetest.org/lighthouse.php?test=180101_2Y_84719548884ee4c268a559a36f513930&run=2

webpagetest (Regular 3g): https://www.webpagetest.org/result/180101_2Y_84719548884ee4c268a559a36f513930/

repository:
https://github.com/JounQin/react-hackernews

create-react-app example is nonoptimal

Hi. I checked given example with https://www.webpagetest.org (From: Dulles, VA - Moto G4 - Chrome - 3G). I'm talking about stephenkingsley/hackerNews-pwa.

https://www.webpagetest.org/result/180130_XR_657329befdfcd07c1712592b7455e092/

I fixed some issues in round-1:

• removed unnecessary images (logo and gif loader)
• rel=preconnect

https://www.webpagetest.org/result/180130_HR_894b9a821e6b53d0f4e2369fa00abfb3/

I added even more optimisation, but those changes have a lot of bugs (round-2)

• switch from external API to API hosted on the same domain
• replaced react with preact-compat (without ejecting)
• partially prerendered page with react-snap (rendered shell and inlined CSS)
• rel=preconnect
• rel=preload

https://www.webpagetest.org/result/180130_D9_369033210c83432fd7ddee829836a232/

Just saying CRA can do much better (even without SSR)

HNPWA API Errors

I've found the HNPWA Api to fail at a significantly higher rate than expected as I've ported over implementations.

Here's an example URL which never resolves:
https://news.ycombinator.com/item?id=15480654
https://hnpwa.com/api/v0/item/15480654.json

And a few from server logs:

Error updating item: 15491775
Error updating item: 15480654
Error updating item: 15478546
Error updating item: 15490987

Are there plans to address this or should I work around them with an alternate API?

Update all site scores to use Lighthouse 3.0 metrics

The majority of our current interactive scores are based on Lighthouse 1.0 rather than 2.0 released at Google I/O. It broke down Time-to-Interactive into the firstInteractive and consistentlyInteractive metrics.

Moving forward, I propose we continue to keep our 'Interactive' buckets, but use the firstInteractive score as it's pretty close to what we've been using so far. We can make a call on when/if we want to shift to consistentlyInteractive once that metric has had more time to mature 👴 👵

What does this mean for new apps that we're getting PR'd in?

The current WebPageTest integration with Lighthouse uses 2.0, however we know that there are issues with it failing to capture TTI correctly for our HN apps, like GoogleChrome/lighthouse#2394. I think we should wait until it's more stable in that regard before switching all the results listed on the site over to using it. Does that make sense?

Does this mean we're going to block any new apps from landing?

Nah. If anything, as long as they're correctly getting interactivity scores reported in Lighthouse 2.0 over on WPT they should be fine. We'll just want to make sure that folks are using the firstInteractive definition so we're as close to consistent as possible.

Let's review how far along Lighthouse 2.0 is in July.

cc @kristoferbaxter @housseindjirdeh

Automate WPT results periodically

This issue can track how we can eventually set up automated runs of WPT and extract results periodically. There's a Node wrapper for the API that looks handy.

Will love to hear everyone's thoughts on how we can do this 💃

Expand admin list for HNPWA

Fast 3G misnamed?

Looking through the results, I got the impression that all of the "Fast 3G" times were using WPT's "Fast 3G" setting. Even though the regular 3G is faster than the 3GEM setting, it's not the same.

A true "Fast 3G" would output something like this on its results: Moto G4 - Chrome Canary - 3GFast

Any chance we can rename all the "Fast 3G" subtitles to "Regular 3G" or "Better 3G"?

Thanks~!

Add svelte sapper version to the comparison.

https://hn.svelte.technology

Setup domain

Need to get this routing over to the hosted site. @housseindjirdeh would you mind if we tried deploying this over to App Engine? We get whitelisted support/free hosting for projects like this there.

Add Polymer HN app using PRPL

Let's get one in here.

table view of data

It would be really nice to have the data presented (or the option to present it) in a table form so it's easier to compare the times and features for the different frameworks.

Show selected frameworks

Now that we're getting more and more amazing contributions, our list is getting to a decent length ⭐

To help make finding relevant examples easier. can we consider having a navbar/menu of some sort to show the different frameworks? Clicking React for example would only show the React implementations and so on. We can have All as our default.

Design-wise I'm envisioning a sticky header that shows after a little bit of scrolling and stays at the top. Maybe something like this:

Definitely not sure if this would be the most practical approach however. Will probably need to tinker with a few design options to find the most suitable one.

Open to all kinds of suggestions. Please let me know if anyone thinks this is not necessary either.

Add a11y results

As suggested: https://twitter.com/inkpixelspaper/status/942901268305055744

I think this is a great idea :)

Throwing out some suggestions:

• Should we have Accessibility Score for each implementation with their LH a11y scores?
• Should we keep it general and include a bit on a11y at the very beginning of the site?
• Are there any other a11y mentions we should include?

CC @addyosmani

Next.js + emotion Implementation

no idea why this is not listed
https://github.com/tkh44/next-hnpwa-guide-kit
demo https://hnpwa.life

Expand footer

Since we're getting so many awesome contributions 🎉, the footer is started to look a bit squeezed :P

Wrapping to two rows will probably be the easiest solution - will put up a PR for this within the next few days

Add note to clarify differences in implementations

"HNPWA implementations aim to follow a loose specification. They are primarily a learning tool and should not be used to compare the performance of one PWA to another. They can differ based on server infrastructure, performance patterns used and other factors."

Would that wording (or something a little more terse) work for you? cc @gaearon @rauchg @kristoferbaxter

I am also open to any other feedback on how we can improve the homepage to clarify we're a reference (and not a perf comparison) site.

WebComponents implementation

FYI: I started working on a pure WebComponent only implementation (no-framework, just polyfills when required).

I'll send a PR to close this when it's done.

Help with Lighthouse scores - Audit error: The main thread was busy for the entire trace recording.

I'm trying to get performance scores for my CxJS based HN app, but Lighthouse consistently reports:

Audit error: The main thread was busy for the entire trace recording. First Interactive requires the main thread to be idle for several seconds.

The test results show somewhat idle thread after 2.5s. On my computer Lighthouse consistently outputs performance score above 90.

https://www.webpagetest.org/result/170625_AT_2c86c9ee54229dc9d1e43f92367091b1/1/details/#waterfall_view_step1

I'm wondering if any of you experienced the same problem and if you have any advice to share.

Add specifications/requirements to site

The site should link to the specifications required for each implementation (especially if we plan on making things more standardized).

Possible solutions:

1. Link to the README section in the website
2. Create a dedicated file (SPECS.md?) and link to it in the README as well as the site

API is producing stale data

Now I can't get the latest hacker news via my favorite pwa anymore 🙀