https://github.com/webpro/vars
Common patterns in Vue, Angular, React and Svelte
https://github.com/webpro/vars
angular framework javascript javascript-framework react svelte vue
Last synced: 2 months ago
JSON representation
Common patterns in Vue, Angular, React and Svelte
- Host: GitHub
- URL: https://github.com/webpro/vars
- Owner: webpro
- License: mit
- Created: 2019-08-05T14:39:18.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-10-12T09:05:16.000Z (over 6 years ago)
- Last Synced: 2025-02-10T22:31:33.429Z (about 1 year ago)
- Topics: angular, framework, javascript, javascript-framework, react, svelte, vue
- Language: JavaScript
- Homepage:
- Size: 230 KB
- Stars: 4
- Watchers: 3
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# VARS
How to implement common patterns in each of these popular frameworks:
- [Vue](https://vuejs.org) (+ [Nuxt](https://nuxtjs.org)) → [vue.webpro.now.sh](https://vue.webpro.now.sh)
- [Angular](https://angular.io) → [angular.webpro.now.sh](https://angular.webpro.now.sh)
- [React](https://reactjs.org) (+ [Next](https://nextjs.org)) → [react.webpro.now.sh](https://react.webpro.now.sh)
- [Svelte](https://svelte.dev) (+ [Sapper](https://sapper.svelte.dev))
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](https://eugenkiss.github.io/7guis/tasks/#crud)
- Manage state with CRUD (create, read, update, delete) operations
- The [Svelte CRUD example](https://svelte.dev/examples#7guis-crud)
## 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](https://github.com/webpro/vars/issues) and [PRs](https://github.com/webpro/vars/pulls).
## 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](https://eugenkiss.github.io/7guis/)
- [HNPWA](https://hnpwa.com)