Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/midwayjs/hooks
"Zero" Api / Type Safe / Fullstack Kit / Powerful Backend
https://github.com/midwayjs/hooks
frontend fullstack hooks midway react serverless vite vue
Last synced: about 2 months ago
JSON representation
"Zero" Api / Type Safe / Fullstack Kit / Powerful Backend
- Host: GitHub
- URL: https://github.com/midwayjs/hooks
- Owner: midwayjs
- License: mit
- Archived: true
- Created: 2020-08-06T11:42:00.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-10-18T17:39:09.000Z (about 1 year ago)
- Last Synced: 2024-10-20T04:48:05.452Z (2 months ago)
- Topics: frontend, fullstack, hooks, midway, react, serverless, vite, vue
- Language: TypeScript
- Homepage:
- Size: 5.2 MB
- Stars: 689
- Watchers: 16
- Forks: 63
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Functional Fullstack Framework
"Zero" Api & Type Safe & Fullstack Kit & Powerful Backend
At Alibaba, 2800+ full-stack applications are developed based on Midway Hooks (2022.01)
English | [简体中文](./README.zh-cn.md)
## ✨ Features
- ☁️ Maximize productivity and developer experience, support fullstack development & API service
- ⚡️ Fullstack kit that supports React/Vue/Svelte... and more frameworks
- 🌈 "Zero" Api data layer, import functions from the backend to call the API directly, without the ajax glue layer
- ⛑️ Type safe, use the identical type definition from frontend to backend, detect errors in advance
- 🌍 Functional programming, using `Hooks` for frontend and backend
- ⚙️ Support for `Webpack / Vite` based projects
- ✈️ Deploy to Server or Serverless
- 🛡 Based on Midway, a powerful Node.js framework that supports enterprise-level application development
## 🔨 Preview
Backend(Midway Hooks)
Frontend(React)
```tsx
// src/api/index.ts
import {
Api,
Get,
Post,
Validate,
Query,
useContext,
} from '@midwayjs/hooks';
import { z } from 'zod';
import db from './database';
export const getArticles = Api(
Get(),
Query<{ page: string; per_page: string }>(),
async () => {
const ctx = useContext();
const articles = await db.articles.find({
page: ctx.query.page,
per_page: ctx.query.per_page,
});
return articles;
}
);
const ArticleSchema = z.object({
title: z.string().min(3).max(16),
content: z.string().min(1),
});
export const createArticle = Api(
Post(),
Validate(ArticleSchema),
async (article: z.infer) => {
const newArticle = await db.articles.create(article);
return {
id: newArticle.id,
};
}
);
```
```ts
// src/pages/articles.tsx
import { getArticles } from '../api';
import { useRequest } from 'ahooks';
import ArticleList from './components/ArticleList';
export default () => {
const { data } = useRequest(() =>
getArticles({
query: {
page: '1',
per_page: '10',
},
})
);
return ;
};
// src/pages/new.tsx
import { createArticle } from '../api';
import Editor from './components/Editor';
import { useState } from 'react';
export default () => {
const [loading, setLoading] = useState(false);
const handleSubmit = async (article) => {
setLoading(true);
const { id } = await createArticle(article);
setLoading(false);
location.href = `/articles/${id}`;
};
return ;
};
```
## 🧩 Templates
Midway Hooks currently provide the following templates:
- Fullstack
- [react](https://github.com/midwayjs/hooks/blob/main/examples/react)
- [vue](https://github.com/midwayjs/hooks/blob/main/examples/vue)
- [prisma](https://github.com/midwayjs/hooks/blob/main/examples/prisma)
- [react-with-upload](https://github.com/midwayjs/hooks/blob/main/examples/react-with-upload)
- Serverless
- [react-faas](https://github.com/midwayjs/hooks/blob/main/examples/react-faas)
- [vue-faas](https://github.com/midwayjs/hooks/blob/main/examples/vue-faas)
- Api Server
- [api](https://github.com/midwayjs/hooks/blob/main/examples/api)
- [api-bundle](https://github.com/midwayjs/hooks/blob/main/examples/api-bundle)
You can create applications quickly with templates:
```bash
npx degit https://github.com/midwayjs/hooks/examples/
```
For example, create a fullstack application with react:
```bash
npx degit https://github.com/midwayjs/hooks/examples/react
```
## Contribute
1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -am 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D
We use pnpm to manage the project.
- install dependencies
```bash
$ pnpm install
```
- build
```bash
$ pnpm build
```
- watch
```bash
$ pnpm watch
```
- test
```bash
$ pnpm test
```
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
Lxxyx
💻 🖋 🤔 👀 ⚠️ 📖
Gao Yang
💻 🖋 ⚠️ 📖
狼叔
📖
Eward
💻
Linbudu
📖
rojer
💻
Thetiso
📖
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
## About
[Alibaba Open Source](https://opensource.alibaba.com/)
## License
[MIT](LICENSE)