├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .prettierrc ├── README.md ├── REQUIREMENTS.md ├── image1.gif ├── index.html ├── manifest.webmanifest ├── package.json ├── src ├── api.ts ├── index.ts ├── listItem.ts ├── styles.scss ├── sw.js └── types.d.ts ├── tsconfig.json └── yarn.lock /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | 4 | parser: '@typescript-eslint/parser', 5 | plugins: ['@typescript-eslint'], 6 | 7 | extends: [ 8 | 'eslint:recommended', 9 | 'plugin:@typescript-eslint/eslint-recommended', 10 | 'plugin:@typescript-eslint/recommended', 11 | 'prettier/@typescript-eslint', 12 | ], 13 | rules: { 14 | '@typescript-eslint/no-use-before-define': 'off', 15 | '@typescript-eslint/explicit-function-return-type': 'off', 16 | }, 17 | }; 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | dist 2 | .cache 3 | node_modules 4 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 80, 3 | "tabWidth": 2, 4 | "useTabs": false, 5 | "semi": true, 6 | "singleQuote": true, 7 | "trailingComma": "all", 8 | "bracketSpacing": true, 9 | "jsxBracketSameLine": false, 10 | "fluid": true 11 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Hacker News List Viewer 2 | 3 | ## Usage: 4 | 5 | To install (feel free to use `npm`): 6 | 7 | ```sh 8 | yarn install 9 | yarn start 10 | ``` 11 | 12 | If you want to run the app in production mode use `yarn build` to build the production bundle and `npx serve dist` (or some other HTTP server) to serve the `dist` directory locally. The app can also be quickly edited on https://githubbox.com/ivancuric/hn-scroll. 13 | 14 | ## Config 15 | 16 | You can set `DEBUG_BATCHES = true` to see the batched updates visually in the DOM. `STORIES_UNDER_FOLD` controls the stories fetched outside the viewport. You can uncomment the background of the `#sentinel` in styles.scss to see the behaviour of the `intersectionObserver`. 17 | 18 | ## Choice of tools and technology 19 | 20 | The app was built in [CodeSandbox](https://codesandbox.io/s/github/ivancuric/hn-scroll) and then finished up locally to get the service worker up and running. The repo is available on [https://github.com/ivancuric/hn-scroll](https://github.com/ivancuric/hn-scroll). 21 | 22 | Taking into account the requirements and the evaluation criteria for the task I've decided to avoid using a JS framework and have written it in "vanilla" TypeScript. 23 | 24 | The app is written in a way to minimize re-rendering and to display content as soon as possible without the need to reorder it. The responses are batched by network responses, animation frames and finally batched into a single DOM update. 25 | 26 | I've also written it as an IIFE instead of a `class` to make it more readable with less `this.x` going around. 27 | 28 | The app is using [Workbox](https://developers.google.com/web/tools/workbox) and service workers to cache responses and provide offline functionality. 29 | 30 | The app has zero dependencies (without the service worker) and is under 2KB before gzipping, a lot of it being [Parcel](https://parceljs.org/)'s module loader. It also scores 100 on Lighthouse. 31 | 32 | ## Thoughts and potential for upgrades 33 | 34 | Since most of the logic is fetching data and batching network responses, it's easy to move to a JS framework like React. 35 | 36 | The same data fetching could be done in a service worker, but since the JS thread is doing very little work it would be overkill. 37 | 38 | I've thought about implementing a DOM node recycler, but there is no need in this case, since the entire DOM is taking a minimal amount of memory. In case one was needed a premade solution like [react-window](https://github.com/bvaughn/react-window) could be used. 39 | 40 | The app is built as a single component with an internal state and methods. The current implementation pipeline is built as a chain of side-effects working on the internal state: 41 | `fetchNextBatch => addToBatchPipeline => pushToRenderQueue => render => fetchNextBatch (optional)` 42 | 43 | Most of this could be decoupled but would add a lot of additional complexity. 44 | 45 | The design is very rudimentary (true to the original 😅). I didn't want to spend a lot of time desiging as it's not a part of the evaluation criteria, so I went with a GitHub markdown-like look. 46 | 47 | The UX is also a bit rough since there are no helpful error messages or loading indicators presented to the user. This is the area where most work could be done. 48 | 49 | The scrolling could be made non-blocking by using tombstones/placeholders. This would also allow for viewport-dependent fetching in batches and non-sequential fetches. This would also require compensation for viewport shifting, ideally using [FLIP](https://aerotwist.com/blog/flip-your-animations/). 50 | 51 | Aditionally, the fetching/rendering could potentially be a bit faster by listening to `scroll` events instead of `intersectionObserver`. Even though `scroll` events are passive, `intersectionObserver` uses `requestIdleCallback` under the hood, meaning that it's throttled down even more. This approach would also require additional work, like reacting to `resize` events. 52 | -------------------------------------------------------------------------------- /REQUIREMENTS.md: -------------------------------------------------------------------------------- 1 | # Web Developer Test Project - Hacker News Reader 2 | 3 | You will be building a news reader app which displays the latest[ Hacker News](https://news.ycombinator.com/) stories. Your app will leverage the[ Hacker News API](https://github.com/HackerNews/API) to fetch data it requires. 4 | 5 | _Note: We will abbreviate Hacker News as HN for this project._ 6 | 7 | ## Requirements 8 | 9 | The app will be a single page web app will the following features: 10 | 11 | - The app will display a list of the latest Hacker News stories in descending order from newest to oldest. Each list item should show the title (which should link to the story), author name, and posted time. 12 | - The targeted users for this app are exceptionally inpatient, so the app needs to display each HN list item _as soon as it has been fetched_. The resulting list will look like it is populating new items one-by-one, as seen below. 13 | 14 | ![image alt text](image1.gif) 15 | 16 | - The app should support infinite scroll (like Facebook News Feed). Specifically, when the user reaches the bottom of the page, the app should fetch earlier items and display them. 17 | - The app should support offline capability. Specifically, the user should be able to use the app offline to check out the list. 18 | - You can assume that the app will only be run on modern browsers, hence feel free to use latest web spec if needed. 19 | 20 | ## Evaluation Criteria 21 | 22 | - App performance. We will be looking at the wait times for reader to see the content — the shorter, the better. 23 | - We will evaluate your code’s quality. Does your code have good modular design and testability? Is it easy to read? 24 | - We prefer the project to be lightweight, and all dependencies should be well justified. 25 | 26 | ## Deliverable 27 | 28 | - Upload your test project as a public repository on Github. Please make sure to include a readme file with instructions on how to run your app. 29 | - Make sure your project is easy to setup. Your app should be ready to run after npm install. 30 | - Please spend no more than 12 hours on this task. 31 | - Test project will be compensated 32 | -------------------------------------------------------------------------------- /image1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivancuric/hn-scroll/26099ba93463ede927034166db46badf9236649d/image1.gif -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | HN infinite scroll 5 | 6 | 7 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |

Hacker News Story List

18 | github.com/ivancuric/hn-scroll 21 |
22 |
    23 |
    24 |
    25 |
    26 | 27 | 28 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /manifest.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "HN reader", 3 | "name": "Hacker News List Viewer", 4 | "start_url": ".", 5 | "display": "standalone" 6 | } 7 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hn-infinite-scroll", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.html", 6 | "homepage": "https://github.com/ivancuric/hn-scroll", 7 | "scripts": { 8 | "start": "parcel index.html --open", 9 | "build": "parcel build index.html" 10 | }, 11 | "browserslist": [ 12 | "last 1 Chrome version" 13 | ], 14 | "devDependencies": { 15 | "@typescript-eslint/eslint-plugin": "^2.19.0", 16 | "@typescript-eslint/parser": "^2.19.0", 17 | "eslint": "^6.8.0", 18 | "eslint-config-prettier": "^6.10.0", 19 | "parcel-bundler": "^1.12.4", 20 | "parcel-plugin-sw-cache": "^0.3.1", 21 | "prettier": "^1.19.1", 22 | "sass": "^1.26.5", 23 | "typescript": "^3.7.5" 24 | }, 25 | "cache": { 26 | "inDev": false, 27 | "strategy": "inject", 28 | "swSrc": "./src/sw.js", 29 | "swDest": "sw.js" 30 | }, 31 | "keywords": [], 32 | "dependencies": {} 33 | } 34 | -------------------------------------------------------------------------------- /src/api.ts: -------------------------------------------------------------------------------- 1 | import { Story } from './types'; 2 | 3 | const API_URL = 'https://hacker-news.firebaseio.com/v0'; 4 | 5 | // fetches an array of new stories. called once on app load 6 | export const fetchAllNewStories = async () => { 7 | const response = await fetch(`${API_URL}/newstories.json`); 8 | const parsed: Promise = await response.json(); 9 | return parsed; 10 | }; 11 | 12 | // fetches a single story 13 | export const fetchStory = async (item: number) => { 14 | const response = await fetch(`${API_URL}/item/${item}.json`); 15 | const parsed: Promise = await response.json(); 16 | return parsed; 17 | }; 18 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import { Story } from './types'; 2 | import { fetchStory, fetchAllNewStories } from './api'; 3 | import { listItem } from './listItem'; 4 | 5 | // CONFIG 6 | const STORIES_UNDER_FOLD = 20; 7 | const DEBUG_BATCHES = false; // set to true to see batches 8 | 9 | (() => { 10 | // LOCAL STATE 11 | let firstIndexToRender = 0; 12 | let lastIndexToRender = -1; // compensate for first iteration cycle 13 | 14 | let shouldFetchMoreItems = false; // false if it can be filled with more items 15 | 16 | const newStoryIDs: number[] = []; // array because we need it indexed 17 | const processedIndexes = new Set(); 18 | const workingIndexes = new Set(); 19 | const processedStories: (Story | void)[] = []; // possible malformed response 20 | const renderQueue = new Set(); 21 | 22 | const list = document.getElementById('list') as HTMLElement; 23 | 24 | // METHODS 25 | const start = async () => { 26 | const stories = await fetchAllNewStories().catch(() => { 27 | console.error('error in fetching posts'); 28 | }); 29 | 30 | if (stories) { 31 | newStoryIDs.push(...stories); 32 | initObserver(); 33 | } 34 | }; 35 | 36 | const initObserver = () => { 37 | const observer = new IntersectionObserver(onIntersect); 38 | const sentinel = document.getElementById('sentinel') as HTMLElement; 39 | 40 | observer.observe(sentinel); 41 | }; 42 | 43 | const onIntersect = (entries: IntersectionObserverEntry[]) => { 44 | const entry = entries[0]; 45 | 46 | shouldFetchMoreItems = entry.isIntersecting; 47 | 48 | fetchNextBatch(); 49 | }; 50 | 51 | const fetchNextBatch = () => { 52 | if (!shouldFetchMoreItems || workingIndexes.size) { 53 | return; 54 | } 55 | 56 | lastIndexToRender += STORIES_UNDER_FOLD; 57 | 58 | // prevent overflow 59 | if (lastIndexToRender >= newStoryIDs.length) { 60 | lastIndexToRender = newStoryIDs.length - 1; 61 | } 62 | 63 | // add n=STORIES_TO_FETCH indexes to the working set 64 | for (let i = firstIndexToRender; i <= lastIndexToRender; i++) { 65 | workingIndexes.add(i); 66 | } 67 | 68 | // fetch each and add them to the processed stories array 69 | workingIndexes.forEach(async storyIndex => { 70 | const story = await fetchStory(newStoryIDs[storyIndex]).catch(() => 71 | console.error(`Error fetching story ${newStoryIDs[storyIndex]}`), 72 | ); 73 | 74 | processedStories[storyIndex] = story; 75 | // when each story is done fetching, add it to the pipeline 76 | addToBatchPipeline(storyIndex); 77 | }); 78 | }; 79 | 80 | // batch by network response, sort and push to render queue 81 | const addToBatchPipeline = (index: number) => { 82 | const currentBatch: number[] = []; 83 | 84 | processedIndexes.add(index); 85 | 86 | let i = firstIndexToRender; 87 | 88 | for (; i <= lastIndexToRender; i++) { 89 | if (processedIndexes.has(i)) { 90 | currentBatch.push(i); 91 | workingIndexes.delete(i); 92 | } else { 93 | break; 94 | } 95 | } 96 | 97 | firstIndexToRender = i; 98 | 99 | if (currentBatch.length) { 100 | pushToRenderQueue(currentBatch); 101 | } 102 | }; 103 | 104 | // batch by frames and forward to render 105 | const pushToRenderQueue = async (currentBatch: number[]) => { 106 | // renderQueue.push(...currentBatch); 107 | currentBatch.forEach(renderQueue.add, renderQueue); 108 | await new Promise(requestAnimationFrame); 109 | 110 | if (!renderQueue.size) { 111 | return; 112 | } 113 | 114 | await render(); 115 | 116 | // required to fill the initial screen 117 | fetchNextBatch(); 118 | }; 119 | 120 | // batch by DOM nodes and append to DOM 121 | const render = async () => { 122 | const fragment = new DocumentFragment(); 123 | 124 | if (DEBUG_BATCHES) { 125 | fragment.append( 126 | document.createRange().createContextualFragment('
    '), 127 | ); 128 | } 129 | 130 | renderQueue.forEach(index => { 131 | const item = processedStories[index]; 132 | item && fragment.append(listItem(index, item)); 133 | }); 134 | 135 | list.append(fragment); 136 | renderQueue.clear(); 137 | 138 | return true; 139 | }; 140 | 141 | // START 142 | start(); 143 | })(); 144 | -------------------------------------------------------------------------------- /src/listItem.ts: -------------------------------------------------------------------------------- 1 | import { Story } from './types'; 2 | 3 | // taking into consideration that HN does the sanitizing 4 | export const listItem = (index: number, item: Story): DocumentFragment => 5 | document.createRange().createContextualFragment( 6 | `
  1. 7 |
    ${index + 1}.
    8 | ${ 9 | item.url 10 | ? `${item?.title}` 11 | : `
    ${item?.title}
    ` 12 | } 13 |
    2. `, 14 | ); 15 | -------------------------------------------------------------------------------- /src/styles.scss: -------------------------------------------------------------------------------- 1 | body { 2 | font-size: 20px; 3 | padding: 24px; 4 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, 5 | Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 6 | } 7 | 8 | *, 9 | *::before, 10 | *::after { 11 | box-sizing: border-box; 12 | margin: 0; 13 | padding: 0; 14 | } 15 | 16 | header { 17 | margin-bottom: 2em; 18 | } 19 | 20 | #list { 21 | display: grid; 22 | gap: 1em; 23 | } 24 | 25 | .list-item { 26 | contain: content; 27 | display: flex; 28 | 29 | > a { 30 | color: inherit; 31 | text-decoration: none; 32 | 33 | &:visited { 34 | color: #757575; 35 | } 36 | 37 | &:hover { 38 | text-decoration: underline; 39 | } 40 | } 41 | } 42 | 43 | .count { 44 | margin-right: 0.5em; 45 | color: #757575; 46 | flex-shrink: 0; 47 | } 48 | 49 | #sentinel { 50 | content: ''; 51 | position: absolute; 52 | bottom: 0; 53 | width: 100%; 54 | height: 100vh; 55 | contain: strict; 56 | pointer-events: none; 57 | z-index: -1; 58 | /* background: #bada55; */ 59 | } 60 | 61 | .sentinel-container { 62 | position: relative; 63 | } 64 | -------------------------------------------------------------------------------- /src/sw.js: -------------------------------------------------------------------------------- 1 | // Cache the Hacker News API responses files with a cache first strategy for 1 day. 2 | 3 | importScripts( 4 | 'https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js', 5 | ); 6 | 7 | workbox.core.skipWaiting(); 8 | 9 | workbox.core.clientsClaim(); 10 | 11 | workbox.precaching.precacheAndRoute([]); 12 | 13 | workbox.routing.registerNavigationRoute('__PUBLIC/index.html'); 14 | 15 | workbox.routing.registerRoute( 16 | new RegExp(/https:\/\/hacker-news\.firebaseio\.com\/v0\/item\/\d*\.json/), 17 | new workbox.strategies.CacheFirst({ 18 | cacheName: 'hn-offline-items', 19 | plugins: [ 20 | new workbox.cacheableResponse.Plugin({ 21 | statuses: [0, 200], 22 | }), 23 | new workbox.expiration.Plugin({ 24 | maxAgeSeconds: 60 * 60 * 24, 25 | }), 26 | ], 27 | }), 28 | ); 29 | 30 | workbox.routing.registerRoute( 31 | new RegExp(/https:\/\/hacker-news\.firebaseio\.com\/v0\/newstories\.json/), 32 | new workbox.strategies.NetworkFirst({ 33 | cacheName: 'hn-offline-new', 34 | plugins: [ 35 | new workbox.cacheableResponse.Plugin({ 36 | statuses: [0, 200], 37 | }), 38 | new workbox.expiration.Plugin({ 39 | maxAgeSeconds: 60 * 60 * 24, 40 | }), 41 | ], 42 | }), 43 | ); 44 | -------------------------------------------------------------------------------- /src/types.d.ts: -------------------------------------------------------------------------------- 1 | export interface Story { 2 | by: string; 3 | descendants: number; 4 | id: number; 5 | score: number; 6 | time: number; 7 | title: string; 8 | type: 'story'; 9 | url: string; 10 | } 11 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "ESnext", 4 | "esModuleInterop": true, 5 | "sourceMap": true, 6 | "allowJs": true, 7 | "target": "ESnext", 8 | "rootDir": "src", 9 | "outDir": "dist", 10 | "moduleResolution": "node", 11 | "strict": true 12 | } 13 | } 14 | --------------------------------------------------------------------------------