https://github.com/cristianbote/hnpwa-vanilla

Hacker News PWA implemented using no framework just javascript
https://github.com/cristianbote/hnpwa-vanilla

hacker-news hackernews hnpwa javascript pwa service-worker vanilla-javascript

Last synced: 4 days ago
JSON representation

Hacker News PWA implemented using no framework just javascript

• Host: GitHub
• URL: https://github.com/cristianbote/hnpwa-vanilla
• Owner: cristianbote
• License: mit
• Created: 2017-06-02T08:02:47.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-03-04T02:30:51.000Z (almost 2 years ago)
• Last Synced: 2025-01-21T19:08:10.455Z (11 days ago)
• Topics: hacker-news, hackernews, hnpwa, javascript, pwa, service-worker, vanilla-javascript
• Language: HTML
• Homepage: https://hnpwa-vanilla.firebaseapp.com/
• Size: 2.03 MB
• Stars: 274
• Watchers: 9
• Forks: 30
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
## Plain Javascript(no framework) Hacker News Example

See this application live at: https://hnpwa-vanilla.firebaseapp.com

This is an example of a PWA built using no framework for view manipulation just Webpack for bundling and service worker.

*Do think of this as the way to build your application using no framework - my 2 cents*. 

Made with ❤️ in Cluj-Napoca, Transylvania 🏰

> Icons made by [Freepik](http://www.freepik.com) Freepik from [www.flaticon.com](http://www.flaticon.com) is licensed by [CC 3.0 BY](http://creativecommons.org/licenses/by/3.0/)

## Installation

1. Clone the repo    

1. Run `npm install`

1. Run `npm run dev` and would spun up a server locally and watch

## Details

I've built this as an experiment to see if, native/vanilla javascript, can beat the PWA scores on https://hnpwa.com/ As soon as I finish the implementation, I'd be posting the Lighthouse report. Things are going so good so far.

There are a couple of thing that I had to do, in order to make it speedier. Check it out!

### _Component_ based composition

So, we must acknowledge the path that React opened, for view composition, moving the composition part in javascript,

leaving you focused on what exactly you'd like to accomplish.

Therefore, my take on the composition was pretty straightforward with a React-like approach, but using the

native dom-api.

So a component would look like

```javascript

import { div, a } from '../core/dom-api';

export const myCustomNavigation = (props) => {

    return div(

        { className: 'my-custom-navigation' },

        [

            a({ href: '/' }, 'Home'),

            a({ href: '/about' }, 'About'),

            a({ href: '/contact' }, 'Contact')

        ]

    )

};

```

As you can see, it's pretty darn similar to React/Preact and the bunch. There's no magic happening behind the scene. If you peek inside `./core/dom-api.js` you'll see that

everything is split and there's just one `createElement` function, which returns a function that will actually create the _component_ based on the params given: props, and content.

I'll let you explore more. :)

## Feedback welcomed!

Feel free to drop a line, file an issue and so on. Much appreciated!