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)

✨ 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 ; }; ```}

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
- vue
- prisma
- react-with-upload
Serverless
- react-faas
- vue-faas
Api Server
- api
- api-bundle

You can create applications quickly with templates:

npx degit https://github.com/midwayjs/hooks/examples/<name>

For example, create a fullstack application with react:

npx degit https://github.com/midwayjs/hooks/examples/react

Contribute

Fork it!
Create your feature branch: git checkout -b my-new-feature
Commit your changes: git commit -am 'Add some feature'
Push to the branch: git push origin my-new-feature
Submit a pull request :D

We use pnpm to manage the project.

install dependencies

$ pnpm install

build

$ pnpm build

watch

$ pnpm watch

test

$ pnpm test

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_Lxxyx
💻 🖋 🤔 👀 ⚠️ 📖

_{Gao Yang}
💻 🖋 ⚠️ 📖

_狼叔
📖

_Eward
💻

_Linbudu
📖

_rojer
💻

_Thetiso
📖

This project follows the all-contributors specification. Contributions of any kind welcome!

About

Alibaba Open Source

License

MIT

midwayjs / hooks

readme