VARS

How to implement common patterns in each of these popular frameworks:

• Vue (+ Nuxt) → vue.webpro.now.sh
• Angular → angular.webpro.now.sh
• React (+ Next) → react.webpro.now.sh
• Svelte (+ Sapper)

Nuxt/Next/Sapper are included, as they solve things like routing and SSR out of the box.

Apps/features

Hacker News

• PWA (Lighthouse: 💯)
• List + detail view
• Dynamic routing + code-splitting
• SSR
• Global CSS

CRUD

• Based on 7GUIs → CRUD
• Manage state with CRUD (create, read, update, delete) operations
• The Svelte CRUD example

Status

Feature	Vue	Angular	React	Svelte
Hacker News	✔	✔	✔	✔
CRUD	✔	x	✔	✔
Form	x	x	x	x
...?	x	x	x	x
...?	x	x	x	x

Also see issues and PRs.

Installation, etc.

Each framework has its own folder, and the same npm commands.

git clone https://github.com/webpro/vars.git
cd vars
cd [angular|react|svelte|vue]
npm install
npm run dev     # development
npm run build   # create production build
npm start       # run production build

Inspiration/links

• 7GUIs
• HNPWA